@onepercentio/one-ui 0.28.8 → 0.29.0

package/dist/utils/e2e.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="node" />
+import Module from "module";
+type PossibleT = (string | readonly [id: string, func: (n: number) => `${string}-${number}`])[];
+type T<IDS extends PossibleT> = {
+    [I in IDS[number] extends string ? IDS[number] : IDS[number][0]]: I extends IDS[number] ? string : (id: any) => string;
+};
+export declare function combineTestIds(...t: ReturnType<typeof testIDFactory>[]): {};
+/**
+ * Creates an data-testid map generator instance based on the module name or arbitrary id
+ * @returns A function to set the IDs that this created instance will provide
+ */
+export declare function testIDFactory(moduleOrId: Pick<Module, "id"> | string): <const IDS extends PossibleT>(...idsArr: IDS[]) => T<IDS>;
+export {};

package/dist/utils/e2e.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.combineTestIds = combineTestIds;
+exports.testIDFactory = testIDFactory;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function toSrcPath(str) {
+  const indexOfSrc = str.indexOf("src");
+  const modName = indexOfSrc === -1 ? str : str.slice(indexOfSrc);
+  return modName.replace("appclientecmascript", "");
+}
+function combineTestIds() {
+  for (var _len = arguments.length, t = new Array(_len), _key = 0; _key < _len; _key++) {
+    t[_key] = arguments[_key];
+  }
+  return t.reduce((acc, i) => _objectSpread(_objectSpread({}, acc), {}, {
+    i
+  }), {});
+}
+
+/**
+ * Creates an data-testid map generator instance based on the module name or arbitrary id
+ * @returns A function to set the IDs that this created instance will provide
+ */
+function testIDFactory(moduleOrId) {
+  const moduleId = typeof module === "string" ? module : module.id;
+  return function () {
+    for (var _len2 = arguments.length, idsArr = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      idsArr[_key2] = arguments[_key2];
+    }
+    return idsArr.reduce((acc, ids) => _objectSpread(_objectSpread({}, acc), ids.reduce((map, id) => _objectSpread(_objectSpread({}, map), {}, {
+      [typeof id === "string" ? id : id[0]]: typeof id === "string" ? "".concat(toSrcPath(moduleId.toLowerCase().replace(/[^a-z]/g, "")), "-").concat(id) : i => "".concat(toSrcPath(moduleId.toLowerCase().replace(/[^a-z]/g, "")), "-").concat(id[1](i))
+    }), {})), {});
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJ0b1NyY1BhdGgiLCJzdHIiLCJpbmRleE9mU3JjIiwiaW5kZXhPZiIsIm1vZE5hbWUiLCJzbGljZSIsInJlcGxhY2UiLCJjb21iaW5lVGVzdElkcyIsIl9sZW4iLCJhcmd1bWVudHMiLCJsZW5ndGgiLCJ0IiwiQXJyYXkiLCJfa2V5IiwicmVkdWNlIiwiYWNjIiwiaSIsIl9vYmplY3RTcHJlYWQiLCJ0ZXN0SURGYWN0b3J5IiwibW9kdWxlT3JJZCIsIm1vZHVsZUlkIiwibW9kdWxlIiwiaWQiLCJfbGVuMiIsImlkc0FyciIsIl9rZXkyIiwiaWRzIiwibWFwIiwiY29uY2F0IiwidG9Mb3dlckNhc2UiXSwic291cmNlcyI6WyIuLi8uLi9zcmMvdXRpbHMvZTJlLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBNb2R1bGUgZnJvbSBcIm1vZHVsZVwiO1xuXG5mdW5jdGlvbiB0b1NyY1BhdGgoc3RyOiBzdHJpbmcpIHtcbiAgY29uc3QgaW5kZXhPZlNyYyA9IHN0ci5pbmRleE9mKFwic3JjXCIpO1xuICBjb25zdCBtb2ROYW1lID0gaW5kZXhPZlNyYyA9PT0gLTEgPyBzdHIgOiBzdHIuc2xpY2UoaW5kZXhPZlNyYyk7XG4gIHJldHVybiBtb2ROYW1lLnJlcGxhY2UoXCJhcHBjbGllbnRlY21hc2NyaXB0XCIsIFwiXCIpO1xufVxuXG50eXBlIFBvc3NpYmxlVCA9IChcbiAgfCBzdHJpbmdcbiAgfCByZWFkb25seSBbaWQ6IHN0cmluZywgZnVuYzogKG46IG51bWJlcikgPT4gYCR7c3RyaW5nfS0ke251bWJlcn1gXVxuKVtdO1xuXG50eXBlIFQ8SURTIGV4dGVuZHMgUG9zc2libGVUPiA9IHtcbiAgW0kgaW4gSURTW251bWJlcl0gZXh0ZW5kcyBzdHJpbmdcbiAgICA/IElEU1tudW1iZXJdXG4gICAgOiBJRFNbbnVtYmVyXVswXV06IEkgZXh0ZW5kcyBJRFNbbnVtYmVyXSA/IHN0cmluZyA6IChpZDogYW55KSA9PiBzdHJpbmc7XG59O1xuXG5leHBvcnQgZnVuY3Rpb24gY29tYmluZVRlc3RJZHMoLi4udDogUmV0dXJuVHlwZTx0eXBlb2YgdGVzdElERmFjdG9yeT5bXSkge1xuICByZXR1cm4gdC5yZWR1Y2UoKGFjYywgaSkgPT4gKHsgLi4uYWNjLCBpIH0pLCB7fSk7XG59XG5cbi8qKlxuICogQ3JlYXRlcyBhbiBkYXRhLXRlc3RpZCBtYXAgZ2VuZXJhdG9yIGluc3RhbmNlIGJhc2VkIG9uIHRoZSBtb2R1bGUgbmFtZSBvciBhcmJpdHJhcnkgaWRcbiAqIEByZXR1cm5zIEEgZnVuY3Rpb24gdG8gc2V0IHRoZSBJRHMgdGhhdCB0aGlzIGNyZWF0ZWQgaW5zdGFuY2Ugd2lsbCBwcm92aWRlXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiB0ZXN0SURGYWN0b3J5KG1vZHVsZU9ySWQ6IFBpY2s8TW9kdWxlLCBcImlkXCI+IHwgc3RyaW5nKSB7XG4gIGNvbnN0IG1vZHVsZUlkID0gdHlwZW9mIG1vZHVsZSA9PT0gXCJzdHJpbmdcIiA/IG1vZHVsZSA6IG1vZHVsZS5pZDtcbiAgcmV0dXJuIDxjb25zdCBJRFMgZXh0ZW5kcyBQb3NzaWJsZVQ+KC4uLmlkc0FycjogSURTW10pID0+XG4gICAgaWRzQXJyLnJlZHVjZShcbiAgICAgIChhY2MsIGlkcykgPT4gKHtcbiAgICAgICAgLi4uYWNjLFxuICAgICAgICAuLi5pZHMucmVkdWNlKFxuICAgICAgICAgIChtYXAsIGlkKSA9PiAoe1xuICAgICAgICAgICAgLi4ubWFwLFxuICAgICAgICAgICAgW3R5cGVvZiBpZCA9PT0gXCJzdHJpbmdcIiA/IGlkIDogaWRbMF1dOlxuICAgICAgICAgICAgICB0eXBlb2YgaWQgPT09IFwic3RyaW5nXCJcbiAgICAgICAgICAgICAgICA/IGAke3RvU3JjUGF0aChcbiAgICAgICAgICAgICAgICAgICAgbW9kdWxlSWQudG9Mb3dlckNhc2UoKS5yZXBsYWNlKC9bXmEtel0vZywgXCJcIilcbiAgICAgICAgICAgICAgICAgICl9LSR7aWR9YFxuICAgICAgICAgICAgICAgIDogKGk6IGFueSkgPT5cbiAgICAgICAgICAgICAgICAgICAgYCR7dG9TcmNQYXRoKFxuICAgICAgICAgICAgICAgICAgICAgIG1vZHVsZUlkLnRvTG93ZXJDYXNlKCkucmVwbGFjZSgvW15hLXpdL2csIFwiXCIpXG4gICAgICAgICAgICAgICAgICAgICl9LSR7aWRbMV0oaSl9YCxcbiAgICAgICAgICB9KSxcbiAgICAgICAgICB7fSBhcyBUPElEUz5cbiAgICAgICAgKSxcbiAgICAgIH0pLFxuICAgICAge30gYXMgVDxJRFM+XG4gICAgKTtcbn1cbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7O0FBRUEsU0FBU0EsU0FBU0EsQ0FBQ0MsR0FBVyxFQUFFO0VBQzlCLE1BQU1DLFVBQVUsR0FBR0QsR0FBRyxDQUFDRSxPQUFPLENBQUMsS0FBSyxDQUFDO0VBQ3JDLE1BQU1DLE9BQU8sR0FBR0YsVUFBVSxLQUFLLENBQUMsQ0FBQyxHQUFHRCxHQUFHLEdBQUdBLEdBQUcsQ0FBQ0ksS0FBSyxDQUFDSCxVQUFVLENBQUM7RUFDL0QsT0FBT0UsT0FBTyxDQUFDRSxPQUFPLENBQUMscUJBQXFCLEVBQUUsRUFBRSxDQUFDO0FBQ25EO0FBYU8sU0FBU0MsY0FBY0EsQ0FBQSxFQUEyQztFQUFBLFNBQUFDLElBQUEsR0FBQUMsU0FBQSxDQUFBQyxNQUFBLEVBQXZDQyxDQUFDLE9BQUFDLEtBQUEsQ0FBQUosSUFBQSxHQUFBSyxJQUFBLE1BQUFBLElBQUEsR0FBQUwsSUFBQSxFQUFBSyxJQUFBO0lBQURGLENBQUMsQ0FBQUUsSUFBQSxJQUFBSixTQUFBLENBQUFJLElBQUE7RUFBQTtFQUNqQyxPQUFPRixDQUFDLENBQUNHLE1BQU0sQ0FBQyxDQUFDQyxHQUFHLEVBQUVDLENBQUMsS0FBQUMsYUFBQSxDQUFBQSxhQUFBLEtBQVdGLEdBQUc7SUFBRUM7RUFBQyxFQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUM7QUFDbEQ7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDTyxTQUFTRSxhQUFhQSxDQUFDQyxVQUF1QyxFQUFFO0VBQ3JFLE1BQU1DLFFBQVEsR0FBRyxPQUFPQyxNQUFNLEtBQUssUUFBUSxHQUFHQSxNQUFNLEdBQUdBLE1BQU0sQ0FBQ0MsRUFBRTtFQUNoRSxPQUFPO0lBQUEsU0FBQUMsS0FBQSxHQUFBZCxTQUFBLENBQUFDLE1BQUEsRUFBaUNjLE1BQU0sT0FBQVosS0FBQSxDQUFBVyxLQUFBLEdBQUFFLEtBQUEsTUFBQUEsS0FBQSxHQUFBRixLQUFBLEVBQUFFLEtBQUE7TUFBTkQsTUFBTSxDQUFBQyxLQUFBLElBQUFoQixTQUFBLENBQUFnQixLQUFBO0lBQUE7SUFBQSxPQUM1Q0QsTUFBTSxDQUFDVixNQUFNLENBQ1gsQ0FBQ0MsR0FBRyxFQUFFVyxHQUFHLEtBQUFULGFBQUEsQ0FBQUEsYUFBQSxLQUNKRixHQUFHLEdBQ0hXLEdBQUcsQ0FBQ1osTUFBTSxDQUNYLENBQUNhLEdBQUcsRUFBRUwsRUFBRSxLQUFBTCxhQUFBLENBQUFBLGFBQUEsS0FDSFUsR0FBRztNQUNOLENBQUMsT0FBT0wsRUFBRSxLQUFLLFFBQVEsR0FBR0EsRUFBRSxHQUFHQSxFQUFFLENBQUMsQ0FBQyxDQUFDLEdBQ2xDLE9BQU9BLEVBQUUsS0FBSyxRQUFRLE1BQUFNLE1BQUEsQ0FDZjVCLFNBQVMsQ0FDVm9CLFFBQVEsQ0FBQ1MsV0FBVyxDQUFDLENBQUMsQ0FBQ3ZCLE9BQU8sQ0FBQyxTQUFTLEVBQUUsRUFBRSxDQUM5QyxDQUFDLE9BQUFzQixNQUFBLENBQUlOLEVBQUUsSUFDTk4sQ0FBTSxPQUFBWSxNQUFBLENBQ0Y1QixTQUFTLENBQ1ZvQixRQUFRLENBQUNTLFdBQVcsQ0FBQyxDQUFDLENBQUN2QixPQUFPLENBQUMsU0FBUyxFQUFFLEVBQUUsQ0FDOUMsQ0FBQyxPQUFBc0IsTUFBQSxDQUFJTixFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUNOLENBQUMsQ0FBQztJQUFFLEVBQ3ZCLEVBQ0YsQ0FBQyxDQUNILENBQUMsQ0FDRCxFQUNGLENBQUMsQ0FDSCxDQUFDO0VBQUE7QUFDTCIsImlnbm9yZUxpc3QiOltdfQ==

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.28.8",
+  "version": "0.29.0",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <murilo.araujo@onepercent.io>",
   "license": "MIT",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.ts",
+  "exports": {
+    "./*": "./src/*.ts"
+  },
   "devDependencies": {
     "@babel/cli": "^7.22.9",
     "@babel/core": "^7.22.9",

package/src/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/src/assets/styles/index.scss

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

package/src/assets/styles/mixins.scss

@@ -0,0 +1,12 @@
+@mixin iteractibleElement() {
+  & {
+    cursor: pointer;
+    transition: transform $fast;
+  }
+  &:hover {
+    transform: scale(1.2);
+  }
+  &:active {
+    transform: scale(1.1);
+  }
+}

package/src/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/src/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/src/components/AdaptiveButton/AdaptiveButton.tsx

@@ -0,0 +1,26 @@
+import React, { ComponentProps, ReactElement } from "react";
+import AdaptiveContainer from "../AdaptiveContainer";
+import Button from "../Button";
+import Styles from "./AdaptiveButton.module.scss";
+
+/**
+ * A button that adapts it's width according to the content size
+ **/
+export default function AdaptiveButton({
+  children,
+  className = "",
+  ...buttonProps
+}: {
+  children: ReactElement;
+} & ComponentProps<typeof Button>) {
+  return (
+    <AdaptiveContainer
+      containerElement={Button}
+      className={`${Styles.resetButton} ${className}`}
+      direction="both"
+      {...buttonProps}
+    >
+      {children}
+    </AdaptiveContainer>
+  );
+}

package/src/components/AdaptiveButton/index.tsx

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

package/src/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/src/components/AdaptiveContainer/AdaptiveContainer.tsx

@@ -0,0 +1,200 @@
+import React, {
+  ComponentProps,
+  ElementRef,
+  FunctionComponent,
+  HTMLAttributes,
+  HTMLProps,
+  JSX,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { TransitionAnimationTypes } from "../Transition";
+import UncontrolledTransition from "../UncontrolledTransition";
+import Styles from "./AdaptiveContainer.module.scss";
+
+/**
+ * A container that animates width changes across content updates
+ **/
+export default function AdaptiveContainer<
+  E extends keyof JSX.IntrinsicElements | FunctionComponent
+>({
+  children,
+  className = "",
+  containerElement: _Wrapper = "div" as any,
+  direction = "h",
+  strict = true,
+  ...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>) {
+  const animatedProperty = 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"] as const
+      case "h":
+        return ("width" as const);
+      case "v":
+        return strict ? ("height" as const) : ("minHeight" as const);
+    }
+  }, [direction, strict]);
+  const uncontrolledRef =
+    useRef<ElementRef<typeof UncontrolledTransition>>(null);
+  const buttonRef = useRef<HTMLElement>(null);
+
+  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[animatedProperty as "width"] = ``;
+      } else {
+        transitionContainer.style[
+          animatedProperty as "height"
+        ] = `${transitionContainer.clientHeight}px`;
+        transitionContainer.style.width = ``;
+      }
+    const t = setTimeout(() => {
+      if (uncontrolledRef.current) {
+        const transitionContainer = uncontrolledRef.current.sectionRef.current;
+        if (transitionContainer) {
+          const screenThatWillEnter =
+            transitionContainer.lastChild as HTMLDivElement;
+
+          if (screenThatWillEnter) {
+            function resetFactory(
+              param: "minHeight" | "height" | "width",
+              target: number
+            ) {
+              const resetPropertyInstance = (e: Pick<TransitionEvent, "propertyName">) => {
+                if (e.propertyName !== param) return;
+                setTimeout(() => {
+                  if (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 as ('width' | 'height')[]) {
+                  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 as "width"
+              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 as any;
+  const directionClass = direction in Styles ? Styles[direction] : "";
+
+  return (
+    <>
+      <Wrapper className={`${className}`} ref={buttonRef} {...otherProps}>
+        <UncontrolledTransition
+          ref={uncontrolledRef}
+          transitionType={TransitionAnimationTypes.CUSTOM}
+          lockTransitionWidth={false}
+          config={{
+            backward: {
+              elementExiting: Styles.fadeOutAbsolute,
+              elementEntering: Styles.fadeInDelayed,
+            },
+            forward: {
+              elementExiting: Styles.fadeOutAbsolute,
+              elementEntering: Styles.fadeInDelayed,
+            },
+          }}
+          className={`${Styles.resetSection} ${directionClass}`}
+          contentClassName={otherProps.contentClassName}
+        >
+          {children}
+        </UncontrolledTransition>
+      </Wrapper>
+    </>
+  );
+}

package/src/components/AdaptiveContainer/index.tsx

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

package/src/components/AdaptiveDialog/AdaptiveDialog.module.scss

@@ -0,0 +1,147 @@
+@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;
+  transition: backdrop-filter $veryFast linear;
+  backdrop-filter: var(--adaptive-dialog-backdrop-backdrop, initial);
+  pointer-events: none;
+
+  @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;
+      transform: translateY(100%);
+    }
+  }
+}
+
+.close {
+  &.backdrop {
+    animation-name: backdropDismiss;
+  }
+
+  .container {
+    animation-name: dismiss;
+  }
+
+  @media screen and (orientation: "portrait") {
+    .container {
+      animation-name: slideDown;
+    }
+  }
+}
+
+.container {
+  > .closeBtn {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    background: none;
+    border: none;
+    width: auto;
+    height: auto;
+    padding: 0px !important;
+  }
+  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;
+    transform: translateY(100%);
+  }
+
+  100% {
+    min-height: 0px;
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(0%);
+  }
+
+  100% {
+    min-height: 0px;
+    transform: translateY(100%);
+  }
+}