@onepercentio/one-ui 1.3.3 → 1.3.5

package/README.md

@@ -7,7 +7,7 @@ npm install @onepercentio/one-ui
 Or include it directly in HTML:
 
 ```html
-<script src="https://github.com/onepercentio/one-ui/releases/download/v1.3.2/bundle.js"></script>
+<script src="https://github.com/onepercentio/one-ui/releases/download/v1.3.5/bundle.js"></script>
 ```
 
 When loaded via script in HTML, the library is exposed as the global `OneUI` object:

package/dist/assets/img/svg/checkbox.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-7 -7 38 38">
+    <path style="stroke: #EDEDED" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3px" fill="none" d="M22.9 3.7l-15.2 16.6-6.6-7.1" />
+</svg>

package/dist/assets/styles/index.scss

@@ -0,0 +1,2 @@
+@forward "./variables.scss";
+@forward "./mixins.scss";

package/dist/assets/styles/mixins.scss

@@ -0,0 +1,15 @@
+@use "./variables.scss" as *;
+@mixin iteractibleElement() {
+  &:not(:disabled) {
+    & {
+      cursor: pointer;
+      transition: transform $fast;
+    }
+    &:hover {
+      transform: scale(1.2);
+    }
+    &:active {
+      transform: scale(1.1);
+    }
+  }
+}

package/dist/assets/styles/variables.scss

@@ -0,0 +1,49 @@
+$digitalBlue: var(--digital-blue, #558eff);
+$mediumGray: var(--medium-gray, #bababa);
+$lightGray: var(--light-gray, #d6d6d6);
+$spaceBlue: var(--space-blue, #0f113a);
+$warningRed: var(--warning-red, #e84b4b);
+$sunsetPink: var(--sunset-pink, #ff3e7d);
+$darkestGray: var(--darkest-gray, #727272);
+$gray: var(--gray, #0f113a);
+$success: var(--success, lightgreen);
+$successDark: var(--success-dark, green);
+$mainBackgroundColor: var(--bg-color, white);
+$primaryColor: var(--primary-color, var(--digital-blue));
+$elevation: var(--card-elevation, 0px 4px 10px rgba(0, 0, 0, 0.1));
+
+$mainFontFamily: var(--main-font, Roboto);
+$secondaryFontFamily: var(--second-font, Manrope);
+
+$headerFillBackgroundColor: var(--header-background-color, $digitalBlue);
+$headerBackgroundColor: var(--header-divider-bg-color, #467eea);
+$headerTextColor: var(--header-text-color, #94b8ff);
+$headerBrightColor: var(--header-bright-color, white);
+
+$tableRowBgColor: var(--table-row-bg-color, white);
+$tableRowBorderColor: var(--table-row-border-color, #bec1ca);
+
+$buttonBorderRadius: var(--button-border-radius, 8px);
+$buttonTextColor: var(--button-text-color, white);
+
+$tooltipBackgroudColor: var(--tooltip-background-color, $digitalBlue);
+
+$checkboxBaseColor: var(--checkbox-base-color, $digitalBlue);
+
+$textDefaultColor: var(--text-default-color, $digitalBlue);
+
+$buttonPrimaryBackgroundColor: var(--button-primary-bg-color, #1e22aa);
+
+$fileInputBackgroundColor: var(--file-input-bg-color, #f2f6f7);
+$fileInputBorderColor: var(--file-input-border-color, #dce1e8);
+
+$avatarBackgroundColor: var(--avatar-bg-color, $lightGray);
+
+$pixelatedGuideBackground: var(--pixelated-scan-bg, var(--digital-blue));
+
+$almostInstant: var(--animation--speed-almostInstant, 50ms);
+$veryFast: var(--animation--speed-veryfast, 125ms);
+$fast: var(--animation--speed-fast, 250ms);
+$normal: var(--animation--speed-normal, 500ms);
+$slow: var(--animation--speed-slow, 1s);
+$verySlow: var(--animation--speed-veryslow, 2s);

package/dist/components/AdaptiveButton/AdaptiveButton.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps, ReactElement } from "react";
+import Button from "../Button";
+/**
+ * A button that automatically adjusts its width to fit the content inside it.
+ * This makes the button look natural and not stretched wider than needed.
+ **/
+export default function AdaptiveButton({ children, className, ...buttonProps }: {
+    children: ReactElement;
+} & ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;

package/dist/components/AdaptiveButton/AdaptiveButton.js

@@ -0,0 +1,30 @@
+"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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AdaptiveContainer_1 = __importDefault(require("../AdaptiveContainer"));
+const Button_1 = __importDefault(require("../Button"));
+const AdaptiveButton_module_scss_1 = __importDefault(require("./AdaptiveButton.module.scss"));
+/**
+ * A button that automatically adjusts its width to fit the content inside it.
+ * This makes the button look natural and not stretched wider than needed.
+ **/
+function AdaptiveButton(_a) {
+    var { children, className = "" } = _a, buttonProps = __rest(_a, ["children", "className"]);
+    return ((0, jsx_runtime_1.jsx)(AdaptiveContainer_1.default, Object.assign({ containerElement: Button_1.default, className: `${AdaptiveButton_module_scss_1.default.resetButton} ${className}`, direction: "both" }, buttonProps, { children: children })));
+}
+exports.default = AdaptiveButton;
+//# sourceMappingURL=AdaptiveButton.js.map

package/dist/components/AdaptiveButton/AdaptiveButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveButton.js","sourceRoot":"","sources":["../../../src/components/AdaptiveButton/AdaptiveButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AACA,6EAAqD;AACrD,uDAA+B;AAC/B,8FAAkD;AAElD;;;IAGI;AACJ,SAAwB,cAAc,CAAC,EAMN;QANM,EACrC,QAAQ,EACR,SAAS,GAAG,EAAE,OAIiB,EAH5B,WAAW,cAHuB,yBAItC,CADe;IAId,OAAO,CACL,uBAAC,2BAAiB,kBAChB,gBAAgB,EAAE,gBAAM,EACxB,SAAS,EAAE,GAAG,oCAAM,CAAC,WAAW,IAAI,SAAS,EAAE,EAC/C,SAAS,EAAC,MAAM,IACZ,WAAW,cAEd,QAAQ,IACS,CACrB,CAAC;AACJ,CAAC;AAjBD,iCAiBC"}

package/dist/components/AdaptiveButton/AdaptiveButton.module.scss

@@ -0,0 +1,7 @@
+.resetButton {
+  min-width: 0px !important;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  text-align: center;
+}

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

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

package/dist/components/AdaptiveButton/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 AdaptiveButton_1 = require("./AdaptiveButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AdaptiveButton_1).default; } });
+__exportStar(require("./AdaptiveButton"), exports);
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/AdaptiveContainer/AdaptiveContainer.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, FunctionComponent, JSX, ReactElement } from "react";
+/**
+ * A container that smoothly animates size changes when content updates.
+ *
+ * This component wraps your content and makes transitions between different
+ * content sizes look polished by animating the width, height, or both dimensions.
+ * It's like giving your UI a gentle, professional feel when content changes.
+ **/
+export default function AdaptiveContainer<E extends keyof JSX.IntrinsicElements | FunctionComponent>({ children, className, containerElement: _Wrapper, direction, strict, ...otherProps }: {
+    containerElement?: E;
+    children: ReactElement;
+    /**
+     * The direction in which the content will be resized
+     *
+     *     "h" // When the content will change in width
+     *     "v" // When the content will change in height
+     */
+    direction?: "h" | "v" | "both";
+    className?: string;
+    contentClassName?: string;
+    /**
+     * true: It will animate restricting to the height when it was rendered
+     * false: It will animate trying to reach the height when it was rendered, growing in size if the content inside it changes */
+    strict?: boolean;
+} & ComponentProps<E>): import("react/jsx-runtime").JSX.Element;

package/dist/components/AdaptiveContainer/AdaptiveContainer.js

@@ -0,0 +1,151 @@
+"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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Transition_1 = require("../Transition");
+const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
+const AdaptiveContainer_module_scss_1 = __importDefault(require("./AdaptiveContainer.module.scss"));
+/**
+ * A container that smoothly animates size changes when content updates.
+ *
+ * This component wraps your content and makes transitions between different
+ * content sizes look polished by animating the width, height, or both dimensions.
+ * It's like giving your UI a gentle, professional feel when content changes.
+ **/
+function AdaptiveContainer(_a) {
+    var { children, className = "", containerElement: _Wrapper = "div", direction = "h", strict = true } = _a, otherProps = __rest(_a, ["children", "className", "containerElement", "direction", "strict"]);
+    const animatedProperty = (0, react_1.useMemo)(() => {
+        if (!strict && direction !== "v")
+            throw new Error(`Strict false only works with direction "v" at the moment`);
+        switch (direction) {
+            case "both":
+                return ["width", "height"];
+            case "h":
+                return "width";
+            case "v":
+                return strict ? "height" : "minHeight";
+        }
+    }, [direction, strict]);
+    const uncontrolledRef = (0, react_1.useRef)(null);
+    const buttonRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const transitionContainer = uncontrolledRef.current.sectionRef.current;
+        if (transitionContainer)
+            if (direction === "both") {
+                transitionContainer.style.width = `${transitionContainer.clientWidth}px`;
+                transitionContainer.style.height = `${transitionContainer.clientHeight}px`;
+            }
+            else if (direction === "h") {
+                transitionContainer.style.width = `${transitionContainer.clientWidth}px`;
+                transitionContainer.style.height = transitionContainer.clientHeight
+                    ? `${transitionContainer.clientHeight}px`
+                    : ``;
+            }
+            else {
+                transitionContainer.style[animatedProperty] =
+                    `${transitionContainer.clientHeight}px`;
+                transitionContainer.style.width = ``;
+            }
+        const t = setTimeout(() => {
+            if (uncontrolledRef.current) {
+                const transitionContainer = uncontrolledRef.current.sectionRef.current;
+                if (transitionContainer) {
+                    const screenThatWillEnter = transitionContainer.lastChild;
+                    if (screenThatWillEnter) {
+                        function resetFactory(param, target) {
+                            const resetPropertyInstance = (e) => {
+                                if (e.propertyName !== param)
+                                    return;
+                                setTimeout(() => {
+                                    if ((transitionContainer === null || transitionContainer === void 0 ? void 0 : transitionContainer.style[param]) === `${target}px`) {
+                                        transitionContainer.style[param] = "";
+                                    }
+                                }, 100);
+                                if (transitionContainer)
+                                    transitionContainer.removeEventListener("transitionend", resetPropertyInstance);
+                            };
+                            return resetPropertyInstance;
+                        }
+                        if (direction === "both") {
+                            const contentSize = {
+                                width: screenThatWillEnter.clientWidth,
+                                height: screenThatWillEnter.scrollHeight,
+                            };
+                            const targetSize = {
+                                width: `${contentSize.width}px`,
+                                height: `${contentSize.height}px`,
+                            };
+                            const prevSize = {
+                                width: transitionContainer.style.width,
+                                height: transitionContainer.style.height,
+                            };
+                            transitionContainer.style.width = targetSize.width;
+                            transitionContainer.style.height = targetSize.height;
+                            if (Array.isArray(animatedProperty))
+                                for (let prop of animatedProperty) {
+                                    const resetProperty = resetFactory(prop, contentSize[prop]);
+                                    if (targetSize[prop] === prevSize[prop])
+                                        resetProperty({ propertyName: prop });
+                                    else
+                                        transitionContainer.addEventListener("transitionend", resetProperty);
+                                }
+                        }
+                        else if (direction === "h") {
+                            const contentWidth = screenThatWillEnter.clientWidth;
+                            const targetWidth = `${contentWidth}px`;
+                            const prevWidth = transitionContainer.style.width;
+                            transitionContainer.style.width = targetWidth;
+                            const func = resetFactory("width", contentWidth);
+                            if (targetWidth === prevWidth)
+                                func({ propertyName: "width" });
+                            else
+                                transitionContainer.addEventListener("transitionend", func);
+                        }
+                        else {
+                            const _animatedProperty = animatedProperty;
+                            const contentHeight = screenThatWillEnter.scrollHeight;
+                            const targetHeight = `${contentHeight}px`;
+                            const prevHeight = transitionContainer.style[_animatedProperty];
+                            transitionContainer.style[_animatedProperty] = targetHeight;
+                            const resetProperty = resetFactory(_animatedProperty, contentHeight);
+                            if (targetHeight === prevHeight)
+                                resetProperty({ propertyName: _animatedProperty });
+                            else
+                                transitionContainer.addEventListener("transitionend", resetProperty);
+                        }
+                    }
+                }
+            }
+        }, 100);
+        return () => clearTimeout(t);
+    }, [children.key, direction]);
+    const Wrapper = _Wrapper;
+    const directionClass = direction in AdaptiveContainer_module_scss_1.default ? AdaptiveContainer_module_scss_1.default[direction] : "";
+    const { contentClassName } = otherProps, spreadProps = __rest(otherProps, ["contentClassName"]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Wrapper, Object.assign({ className: `${className}`, ref: buttonRef }, spreadProps, { children: (0, jsx_runtime_1.jsx)(UncontrolledTransition_1.default, { ref: uncontrolledRef, transitionType: Transition_1.TransitionAnimationTypes.CUSTOM, lockTransitionWidth: false, config: {
+                    backward: {
+                        elementExiting: AdaptiveContainer_module_scss_1.default.fadeOutAbsolute,
+                        elementEntering: AdaptiveContainer_module_scss_1.default.fadeInDelayed,
+                    },
+                    forward: {
+                        elementExiting: AdaptiveContainer_module_scss_1.default.fadeOutAbsolute,
+                        elementEntering: AdaptiveContainer_module_scss_1.default.fadeInDelayed,
+                    },
+                }, className: `${AdaptiveContainer_module_scss_1.default.resetSection} ${directionClass}`, contentClassName: otherProps.contentClassName, children: children }) })) }));
+}
+exports.default = AdaptiveContainer;
+//# sourceMappingURL=AdaptiveContainer.js.map

package/dist/components/AdaptiveContainer/AdaptiveContainer.js.map

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

package/dist/components/AdaptiveContainer/AdaptiveContainer.module.scss

@@ -0,0 +1,53 @@
+.resetSection {
+  min-height: 0px;
+  transition: width var(--adaptive-container-transition-time, 400ms) linear,
+    height var(--adaptive-container-transition-time, 400ms) linear,
+    min-height var(--adaptive-container-transition-time, 400ms) linear;
+  transition-timing-function: linear;
+  overflow: hidden;
+  align-items: flex-start;
+  &.h,&.both {
+    > * {
+      min-width: auto !important;
+    }
+  }
+  &.v,&.both {
+    > * {
+      min-height: initial;
+    }
+  }
+}
+
+@keyframes fadeInDelayed {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOutDelayed {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeInDelayed {
+  animation-name: fadeInDelayed;
+  animation-duration: 500ms !important;
+}
+
+.fadeOutAbsolute {
+  position: absolute;
+  animation-name: fadeOutDelayed;
+  animation-duration: 500ms !important;
+}

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

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

package/dist/components/AdaptiveContainer/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 AdaptiveContainer_1 = require("./AdaptiveContainer");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AdaptiveContainer_1).default; } });
+__exportStar(require("./AdaptiveContainer"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AdaptiveContainer/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,yDAA8C;AAArC,6HAAA,OAAO,OAAA;AAChB,sDAAoC"}

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

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+import { FromOnePercentUtility } from "../../type-utils";
+/**
+ * This is a dialog component that shows content in an overlay.
+ * On mobile devices, it slides in from the side like a drawer menu,
+ * while on desktop computers, it appears as a centered popup window.
+ * It handles closing animations and can render in different locations on the page.
+ **/
+export default function AdaptiveDialog({ variant, onClose, open, className, onClickOut, children, onClosed, inline, }: PropsWithChildren<{
+    variant?: FromOnePercentUtility<'UIElements.AdaptiveDialogVariants'>;
+    className?: string;
+    open: boolean;
+    onClose?: () => void;
+    onClickOut?: () => void;
+    onClosed?: () => void;
+    /**
+     * Indicates this rendering will write the html inside the current position on dom.
+     * If omitted or false, it will render on the document body, to prevent style bleeding */
+    inline?: boolean;
+}>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/AdaptiveDialog/AdaptiveDialog.js

@@ -0,0 +1,50 @@
+"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 react_dom_1 = __importDefault(require("react-dom"));
+const AdaptiveDialog_module_scss_1 = __importDefault(require("./AdaptiveDialog.module.scss"));
+const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
+const ScrollAndFocusLock_1 = __importDefault(require("../utilitary/ScrollAndFocusLock"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+/**
+ * This is a dialog component that shows content in an overlay.
+ * On mobile devices, it slides in from the side like a drawer menu,
+ * while on desktop computers, it appears as a centered popup window.
+ * It handles closing animations and can render in different locations on the page.
+ **/
+function AdaptiveDialog({ variant = "default", onClose, open = false, className = "", onClickOut, children, onClosed, inline = false, }) {
+    const rootDivRef = (0, react_1.useRef)(null);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(open);
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const variantClass = (0, OneUIProvider_1.useOneUIConfig)(`component.adaptiveDialog.variant.${variant}`, "");
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setIsVisible(true);
+            const toggleVisbility = (e) => {
+                if (e.animationName === AdaptiveDialog_module_scss_1.default.backdropDismiss) {
+                    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+                    setIsVisible(false);
+                    e.target.removeEventListener("animationend", toggleVisbility);
+                }
+            };
+            rootDivRef.current.addEventListener("animationend", toggleVisbility);
+        }
+    }, [open]);
+    const globalClassName = {
+        backdrop: (0, OneUIProvider_1.useOneUIConfig)("component.adaptiveDialog.backdropClassName", ""),
+        dialog: (0, OneUIProvider_1.useOneUIConfig)("component.adaptiveDialog.dialogClassName", ""),
+    };
+    const CloseButtonComponent = (0, OneUIProvider_1.useOneUIConfig)("component.adaptiveDialog.closeButton.Component");
+    const content = ((0, jsx_runtime_1.jsx)("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 : ""} ${globalClassName.backdrop} ${variantClass}`, onClick: onClickOut, onAnimationEnd: ({ target, currentTarget }) => {
+            if (target === currentTarget)
+                target.style.pointerEvents = "initial";
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: `${AdaptiveDialog_module_scss_1.default.container} ${className} ${globalClassName.dialog}`, onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)(ScrollAndFocusLock_1.default, { open: open, children: [onClose &&
+                        (CloseButtonComponent ? ((0, jsx_runtime_1.jsx)(CloseButtonComponent, { onClick: onClose })) : ((0, jsx_runtime_1.jsx)("button", { className: AdaptiveDialog_module_scss_1.default.closeBtn, onClick: onClose, children: (0, jsx_runtime_1.jsx)(MutableHamburgerButton_1.default, { state: "closed", size: 24 }) }))), (0, jsx_runtime_1.jsx)("div", { onClick: () => setExpanded((p) => !p) }), children] }) }) }));
+    return isVisible || open ? (inline ? (content) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: react_dom_1.default.createPortal(content, document.body) }))) : 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":";;;;;;AAAA,iCAA8E;AAC9E,0DAAiC;AACjC,8FAAkD;AAClD,uFAA+D;AAC/D,yFAAiE;AACjE,+DAA6D;AAG7D;;;;;IAKI;AACJ,SAAwB,cAAc,CAAC,EACrC,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,EAAE,EACd,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,KAAK,GAYd;IACA,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,IAAA,8BAAc,EACjC,oCAAoC,OAAO,EAAE,EAC7C,EAAE,CACH,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YACT,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,MAAM,eAAe,GAAG,CAAC,CAAiB,EAAE,EAAE;gBAC5C,IAAI,CAAC,CAAC,aAAa,KAAK,oCAAM,CAAC,eAAe,EAAE,CAAC;oBAC/C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;oBACb,YAAY,CAAC,KAAK,CAAC,CAAC;oBACnB,CAAC,CAAC,MAA0B,CAAC,mBAAmB,CAC/C,cAAc,EACd,eAAe,CAChB,CAAC;gBACJ,CAAC;YACH,CAAC,CAAC;YACF,UAAU,CAAC,OAAQ,CAAC,gBAAgB,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;QACxE,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,eAAe,GAAG;QACtB,QAAQ,EAAE,IAAA,8BAAc,EAAC,4CAA4C,EAAE,EAAE,CAAC;QAC1E,MAAM,EAAE,IAAA,8BAAc,EAAC,0CAA0C,EAAE,EAAE,CAAC;KACvE,CAAC;IACF,MAAM,oBAAoB,GAAG,IAAA,8BAAc,EACzC,gDAAgD,CACjD,CAAC;IACF,MAAM,OAAO,GAAG,CACd,gCACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,GAAG,oCAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,oCAAM,CAAC,IAAI,CAAC,CAAC,CAAC,oCAAM,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,oCAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EACjG,IAAI,eAAe,CAAC,QAAQ,IAAI,YAAY,EAAE,EAChD,OAAO,EAAE,UAAU,EACnB,cAAc,EAAE,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,EAAE;YAC5C,IAAI,MAAM,KAAK,aAAa;gBACzB,MAAyB,CAAC,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;QAC/D,CAAC,YAED,gCACE,SAAS,EAAE,GAAG,oCAAM,CAAC,SAAS,IAAI,SAAS,IAAI,eAAe,CAAC,MAAM,EAAE,EACvE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YAEnC,wBAAC,4BAAkB,IAAC,IAAI,EAAE,IAAI,aAC3B,OAAO;wBACN,CAAC,oBAAoB,CAAC,CAAC,CAAC,CACtB,uBAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,GAAI,CAC3C,CAAC,CAAC,CAAC,CACF,mCAAQ,SAAS,EAAE,oCAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,YAClD,uBAAC,gCAAsB,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,EAAE,GAAI,GAC5C,CACV,CAAC,EACJ,gCAAK,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAI,EAC7C,QAAQ,IACU,GACjB,GACF,CACP,CAAC;IAEF,OAAO,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,CACzB,MAAM,CAAC,CAAC,CAAC,CACP,OAAO,CACR,CAAC,CAAC,CAAC,CACF,2DAAG,mBAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAI,CACrD,CACF,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AA3FD,iCA2FC"}