@eturnity/eturnity_reusable_components 8.40.8--EPDM-16185.0 → 8.40.8-EPDM-16320.0

package/dist/main.es97.js

@@ -2,25 +2,22 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "29",
-  height: "29",
-  fill: "#333"
+  width: "18",
+  height: "18",
+  fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", { d: "m10.5 14 4-8 4 8z" }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#ccc",
-  d: "m10.5 16 4 8 4-8z",
-  class: "fix"
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M17 10H1c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1M4 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2M17 0H1C.45 0 0 .45 0 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1M4 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2"
 }, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const compass = { render };
+const collections = { render };
 export {
-  compass as default,
+  collections as default,
   render
 };

package/dist/main.es98.js

@@ -2,32 +2,25 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "42",
-  height: "42",
-  fill: "none"
+  width: "29",
+  height: "29",
+  fill: "#333"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#B2B9C5",
-  d: "M6.2 4.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.2-1.7M6.1 32.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.1-1.7M33.9 22.5H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c3.3 0 6-2.7 6-6 0-1.7-.7-3.2-1.8-4.2-1-1.1-2.5-1.8-4.2-1.8H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c1.2 0 2.2 1.1 2 2.3-.2 1-1.1 1.7-2.1 1.7"
-}, null, -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", { d: "m10.5 14 4-8 4 8z" }, null, -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#FF5656",
-  d: "m17.1 19.5-4-3-4 3v-15h8z"
-}, null, -1);
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#F58F46",
-  d: "m30.9 33.5-4-3-4 3v-15h8z"
+  fill: "#ccc",
+  d: "m10.5 16 4 8 4-8z",
+  class: "fix"
 }, null, -1);
-const _hoisted_5 = [
+const _hoisted_4 = [
   _hoisted_2,
-  _hoisted_3,
-  _hoisted_4
+  _hoisted_3
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_5);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const component_library = { render };
+const compass = { render };
 export {
-  component_library as default,
+  compass as default,
   render
 };

package/dist/main.es99.js

@@ -1,20 +1,33 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "81",
-  height: "80",
+  width: "42",
+  height: "42",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#B2B9C5" fill-rule="evenodd" d="M51.61 40.35a.2.2 0 0 0-.134-.35h-8.101l5.527-17.3c.062-.195-.172-.346-.324-.21L29.39 39.65a.2.2 0 0 0 .134.35h8.101l-5.527 17.3c-.062.195.172.346.324.21z" clip-rule="evenodd"></path><path fill="#DEE2EB" d="M27.568 15.165c.654.654.64 1.73-.032 2.401-.672.672-1.747.686-2.401.032L17.367 9.83 19.8 7.397zM22.913 2.038a2.115 2.115 0 0 1 1.71 2.516c-.235 1.186-1.382 1.982-2.562 1.778L11.615 4.526 11.36.039zM25.903 19.989c.655.654.64 1.73-.031 2.401-.672.672-1.747.686-2.402.032l-9.347-9.348 2.433-2.433zM21.87 22.443c.654.654.64 1.73-.032 2.401-.672.672-1.747.686-2.402.032l-8.557-8.558 2.433-2.433zM16.256 23.317c.654.654.64 1.73-.032 2.401-.672.672-1.747.687-2.402.032l-6.187-6.187 2.433-2.433z"></path><path fill="#DEE2EB" d="M20.327 7.924 8.16 20.089l-6.055-6.056C-.076 11.852-.028 8.268 2.21 6.03l4.055-4.056c2.24-2.24 5.824-2.286 8.005-.105z"></path><path fill="#DEE2EB" d="m18.947 11.41-.811.811-1.053-1.053.81-.811zM15.703 14.654l-.811.811-1.053-1.053.81-.811zM11.932 17.372l-.81.81-.527-.526.81-.81zM6.266 1.973C8.294-.054 10.162-.079 11.36.04l.26.53-.138.402-1.879.825c-.44-.35-3.445.286-3.337.177M53.43 64.835c-.654-.654-.64-1.73.032-2.401.672-.672 1.747-.686 2.401-.032l7.768 7.768-2.433 2.433zM58.085 77.962a2.115 2.115 0 0 1-1.71-2.516c.234-1.186 1.382-1.982 2.562-1.778l10.446 1.806.255 4.487zM55.095 60.011c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.686 2.402-.032l9.347 9.348-2.433 2.433zM59.129 57.557c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.686 2.402-.032l8.557 8.557-2.433 2.434zM64.743 56.683c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.687 2.401-.032l6.188 6.187-2.433 2.434z"></path><path fill="#DEE2EB" d="m60.671 72.076 12.166-12.165 6.055 6.056c2.182 2.181 2.135 5.765-.105 8.004l-4.055 4.055c-2.24 2.24-5.823 2.287-8.005.106z"></path><path fill="#DEE2EB" d="m62.051 68.59.811-.811 1.053 1.053-.81.811zM65.295 65.346l.811-.811 1.053 1.053-.81.811zM69.066 62.628l.81-.81.527.526-.81.81zM74.732 78.027c-2.028 2.027-3.895 2.052-5.094 1.934l-.26-.53.138-.402 1.879-.825c.44.35 3.445-.286 3.337-.177M53.43 15.165c-.654.654-.64 1.73.032 2.401.672.672 1.747.686 2.401.032l7.768-7.768-2.433-2.433zM58.085 2.038a2.115 2.115 0 0 0-1.71 2.516c.234 1.186 1.382 1.982 2.562 1.778l10.446-1.806.255-4.487zM55.095 19.989c-.655.654-.64 1.73.031 2.401.672.672 1.747.686 2.402.032l9.347-9.348-2.433-2.433zM59.129 22.443c-.655.654-.64 1.73.031 2.401.672.672 1.747.686 2.402.032l8.557-8.558-2.433-2.433zM64.743 23.317c-.655.654-.64 1.73.031 2.401.672.672 1.747.687 2.401.032l6.188-6.187-2.433-2.433z"></path><path fill="#DEE2EB" d="m60.671 7.924 12.166 12.165 6.055-6.056c2.182-2.181 2.135-5.765-.105-8.004l-4.055-4.056c-2.24-2.24-5.823-2.286-8.005-.105z"></path><path fill="#DEE2EB" d="m62.051 11.41.811.811 1.053-1.053-.81-.811zM65.295 14.654l.811.811 1.053-1.053-.81-.811zM69.066 17.372l.81.81.527-.526-.81-.81zM74.732 1.973C72.704-.054 70.837-.079 69.638.04l-.26.53.138.402 1.879.825c.44-.35 3.445.286 3.337.177M27.568 64.835c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.686-2.401-.032l-7.768 7.768 2.433 2.433zM22.913 77.962a2.115 2.115 0 0 0 1.71-2.516c-.235-1.186-1.382-1.982-2.562-1.778l-10.446 1.806-.255 4.487zM25.903 60.011c.655-.654.64-1.73-.031-2.401-.672-.672-1.747-.686-2.402-.032l-9.347 9.348 2.433 2.433zM21.87 57.557c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.686-2.402-.032l-8.557 8.557 2.433 2.434zM16.256 56.683c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.687-2.402-.032l-6.187 6.187 2.433 2.434z"></path><path fill="#DEE2EB" d="M20.327 72.076 8.16 59.911l-6.055 6.056c-2.182 2.181-2.134 5.765.105 8.004l4.055 4.055c2.24 2.24 5.824 2.287 8.005.106z"></path><path fill="#DEE2EB" d="m18.947 68.59-.811-.811-1.053 1.053.81.811zM15.703 65.346l-.811-.811-1.053 1.053.81.811zM11.932 62.628l-.81-.81-.527.526.81.81zM6.266 78.027c2.028 2.027 3.896 2.052 5.094 1.934l.26-.53-.138-.402-1.879-.825c-.44.35-3.445-.286-3.337-.177"></path>', 10);
-const _hoisted_12 = [
-  _hoisted_2
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#B2B9C5",
+  d: "M6.2 4.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.2-1.7M6.1 32.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.1-1.7M33.9 22.5H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c3.3 0 6-2.7 6-6 0-1.7-.7-3.2-1.8-4.2-1-1.1-2.5-1.8-4.2-1.8H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c1.2 0 2.2 1.1 2 2.3-.2 1-1.1 1.7-2.1 1.7"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#FF5656",
+  d: "m17.1 19.5-4-3-4 3v-15h8z"
+}, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#F58F46",
+  d: "m30.9 33.5-4-3-4 3v-15h8z"
+}, null, -1);
+const _hoisted_5 = [
+  _hoisted_2,
+  _hoisted_3,
+  _hoisted_4
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_12);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_5);
 }
-const consumption_tariffs = { render };
+const component_library = { render };
 export {
-  consumption_tariffs as default,
+  component_library as default,
   render
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.40.8--EPDM-16185.0",
+  "version": "8.40.8-EPDM-16320.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/accept_document.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M11.3789 1.5C11.9756 1.50006 12.5478 1.73728 12.9697 2.15918L17.3408 6.53027C17.7627 6.95218 17.9999 7.52444 18 8.12109V13.5H16.5V9H13.5C12.2574 9 11.25 7.99264 11.25 6.75V3H5.25C4.83579 3 4.5 3.33579 4.5 3.75V20.25C4.5 20.6642 4.83579 21 5.25 21H12V22.5H5.25C4.00736 22.5 3 21.4926 3 20.25V3.75C3 2.50736 4.00736 1.5 5.25 1.5H11.3789ZM21.2197 12.9697C21.5126 12.6768 21.9874 12.6768 22.2803 12.9697C22.5732 13.2626 22.5732 13.7374 22.2803 14.0303L15.5303 20.7803C15.3813 20.9292 15.1767 21.008 14.9663 20.9985C14.756 20.989 14.5592 20.8921 14.4243 20.7305L10.6743 16.2305C10.4093 15.9124 10.4517 15.4396 10.7695 15.1743C11.0876 14.9093 11.5604 14.9517 11.8257 15.2695L15.0498 19.1382L21.2197 12.9697ZM12.75 6.75C12.75 7.16421 13.0858 7.5 13.5 7.5H16.1895L12.75 4.06055V6.75Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/menu.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M21 17.25C21.4142 17.25 21.75 17.5858 21.75 18C21.75 18.4142 21.4142 18.75 21 18.75H3C2.58579 18.75 2.25 18.4142 2.25 18C2.25 17.5858 2.58579 17.25 3 17.25H21ZM15 11.25C15.4142 11.25 15.75 11.5858 15.75 12C15.75 12.4142 15.4142 12.75 15 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H15ZM21 5.25C21.4142 5.25 21.75 5.58579 21.75 6C21.75 6.41421 21.4142 6.75 21 6.75H3C2.58579 6.75 2.25 6.41421 2.25 6C2.25 5.58579 2.58579 5.25 3 5.25H21Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/phone.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M4.97755 2.24316C5.75791 1.84846 6.68009 1.84849 7.46046 2.24316C7.87984 2.45528 8.24512 2.83446 8.73487 3.32421L8.9297 3.51904C9.25214 3.84147 9.4986 4.08256 9.66652 4.34082C10.259 5.25222 10.259 6.42649 9.66652 7.33789C9.49859 7.59616 9.25215 7.83721 8.9297 8.15966C8.86927 8.2201 8.83665 8.25399 8.81251 8.27978C8.80241 8.29058 8.79649 8.29671 8.79347 8.30029C8.79233 8.30165 8.79098 8.30266 8.79054 8.30322V8.30468C8.7546 8.35487 8.73529 8.46062 8.75245 8.52002C8.75327 8.52281 8.75606 8.52771 8.76417 8.54638C8.77514 8.5716 8.78944 8.60454 8.8213 8.67089C9.48112 10.0452 10.3817 11.3342 11.5225 12.4751C12.6634 13.616 13.9523 14.5164 15.3267 15.1763C15.3934 15.2083 15.4259 15.2239 15.4512 15.2349C15.4693 15.2427 15.4747 15.2443 15.4776 15.2451C15.5367 15.2624 15.6424 15.2442 15.6929 15.2085C15.6933 15.2082 15.6958 15.2068 15.6973 15.2056C15.7008 15.2026 15.7079 15.1957 15.7192 15.1851C15.745 15.161 15.7778 15.128 15.8379 15.0679C16.1604 14.7454 16.4014 14.499 16.6597 14.3311C17.5712 13.7384 18.7467 13.7384 19.6582 14.3311C19.9164 14.499 20.1576 14.7455 20.48 15.0679L20.6748 15.2627C21.1644 15.7523 21.5422 16.1179 21.7544 16.5371C22.1491 17.3175 22.1491 18.2396 21.7544 19.02C21.5423 19.4393 21.1644 19.8048 20.6748 20.2944L20.5166 20.4526C20.0103 20.9589 19.6682 21.3085 19.1997 21.5718C18.6874 21.8596 17.9387 22.054 17.3511 22.0522C16.8193 22.0506 16.4401 21.9391 15.8892 21.7827C12.7361 20.8878 9.76089 19.1992 7.28028 16.7187C4.79956 14.238 3.10985 11.2617 2.21486 8.10839C2.05851 7.55757 1.94691 7.17832 1.94532 6.64648C1.94361 6.05901 2.13813 5.3116 2.42579 4.79931C2.68919 4.33042 3.03972 3.98763 3.5464 3.48095L3.70314 3.32421C4.19274 2.83461 4.55834 2.45532 4.97755 2.24316ZM6.7837 3.58203C6.42912 3.40268 6.01041 3.40283 5.65577 3.58203C5.50439 3.6586 5.33681 3.81163 4.76368 4.38476L4.60694 4.5415C4.05462 5.09382 3.87496 5.2822 3.7339 5.5332C3.57287 5.81985 3.44436 6.31328 3.44532 6.64209C3.4462 6.93598 3.49373 7.1219 3.65773 7.6997C4.48466 10.613 6.04579 13.3616 8.34083 15.6567C10.6361 17.952 13.3858 19.5129 16.2993 20.3398C16.8765 20.5036 17.0619 20.5513 17.3555 20.5522C17.6843 20.5532 18.1777 20.4247 18.4644 20.2637C18.7155 20.1226 18.9036 19.9431 19.4561 19.3906L19.6143 19.2339C20.1866 18.6616 20.3389 18.4945 20.4155 18.3433C20.595 17.9885 20.595 17.5686 20.4155 17.2139C20.3388 17.0627 20.1863 16.8953 19.6143 16.3232L19.4194 16.1284C19.0428 15.7517 18.9326 15.65 18.8394 15.5894C18.4251 15.3201 17.8913 15.32 17.4771 15.5894C17.3839 15.65 17.2743 15.7525 16.8984 16.1284C16.8002 16.2266 16.6952 16.3356 16.5674 16.4272C16.1429 16.7312 15.5599 16.831 15.0586 16.6851C14.9092 16.6415 14.7882 16.5814 14.6777 16.5283C13.1529 15.7962 11.7242 14.7979 10.4619 13.5356C9.19979 12.2734 8.20133 10.8446 7.46925 9.31982C7.41632 9.2096 7.35598 9.08943 7.31251 8.94043C7.16639 8.43914 7.26641 7.85622 7.57032 7.43164C7.66208 7.30349 7.77076 7.19751 7.86915 7.09912C8.24571 6.72255 8.34906 6.61374 8.40968 6.5205C8.6788 6.10635 8.67877 5.57236 8.40968 5.1582C8.34906 5.06497 8.24568 4.95612 7.86915 4.57959L7.67433 4.38476C7.10152 3.81195 6.93502 3.65864 6.7837 3.58203Z" fill="#595A5E"/>
+</svg>

package/src/components/buttons/buttonIcon/index.vue

@@ -98,7 +98,7 @@
 
   import Icon from '../../icon'
   import styled from 'vue3-styled-components'
-  import Theme from '@/assets/theme'
+  import Theme from '../../../assets/theme'
 
   const PageContainer = styled.div`
     position: relative;
@@ -156,15 +156,17 @@
     overflow: visible;
     min-width: ${(props) => props.minWidth || 'initial'};
 
-    &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.customColor
-          ? props.customColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background-color: ${(props) =>
+          props.isDisabled
+            ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+                .disabled.backgroundColor
+            : props.customColor
+            ? props.customColor
+            : props.theme.mainButton[props.appTheme][props.type][props.variant]
+                .hover.backgroundColor};
+      }
     }
 
     &:active {

package/src/components/buttons/mainButton/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <PageContainer>
+  <PageContainer :height="height" :width="width">
     <ButtonContainer
       :id="id"
       :app-theme="appTheme"
@@ -51,7 +51,10 @@
   import Icon from '../../icon'
   import theme from '../../../assets/theme'
 
-  const PageContainer = styled.div``
+  const PageContainer = styled('div', { height: String, width: String })`
+    height: ${(props) => props.height};
+    width: ${(props) => props.width};
+  `
 
   const ButtonAttrs = {
     type: String,
@@ -105,13 +108,16 @@
     height: ${(props) => props.height};
     line-height: 1;
     width: ${(props) => props.width};
-    &:hover {
-      background-color: ${(props) =>
-        props.isDisabled
-          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .disabled.backgroundColor
-          : props.theme.mainButton[props.appTheme][props.type][props.variant]
-              .hover.backgroundColor};
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background-color: ${(props) =>
+          props.isDisabled
+            ? props.theme.mainButton[props.appTheme][props.type][props.variant]
+                .disabled.backgroundColor
+            : props.theme.mainButton[props.appTheme][props.type][props.variant]
+                .hover.backgroundColor};
+      }
     }
 
     &:active {

package/src/components/modals/modal/index.vue

@@ -5,13 +5,17 @@
     :add-padding-top="addPaddingTop"
     :backdrop="backdrop"
     class="rc-modal-wrapper"
+    :disable-default-media-query="disableDefaultMediaQuery"
     :full-screen="fullScreen"
     :is-open="isOpen"
     :position="position"
   >
     <ModalContainer
       v-if="isOpen"
+      :disable-default-media-query="disableDefaultMediaQuery"
       :is-loading="isLoading"
+      :max-width="maxWidth"
+      :modal-container-alignment="modalContainerAlignment"
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
@@ -51,6 +55,7 @@
     position: String,
     addPaddingTop: Boolean,
     fullScreen: Boolean,
+    disableDefaultMediaQuery: Boolean,
   }
   const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
@@ -69,22 +74,30 @@
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
-    @media (max-width: 425px) {
+  ${(props) =>
+    !props.disableDefaultMediaQuery &&
+    `@media (max-width: 425px) {
       background: white;
-    }
+    }`}
   `
 
-  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
+  const modalContainerAttrs = {
+    overflow: String,
+    isLoading: Boolean,
+    disableDefaultMediaQuery: Boolean,
+    maxWidth: String,
+    modalContainerAlignment: Object,
+  }
   const ModalContainer = styled('div', modalContainerAttrs)`
-    align-self: center;
-    justify-self: center;
+    align-self: ${(props) => props.modalContainerAlignment.alignSelf};
+    justify-self: ${(props) => props.modalContainerAlignment.justifySelf};
     position: relative;
     box-shadow: 0px 4px 4px 3px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
     background: white;
     margin: 0 auto;
     overflow: ${(props) => props.overflow};
-    max-width: 95%;
+    max-width: ${(props) => props.maxWidth};
     max-height: 95%;
     min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
     min-height: ${(props) => (props.isLoading ? '500px' : '100px')};
@@ -110,20 +123,24 @@
       right: 20px;
       top: 20px;
 
-      @media (max-width: 425px) {
-        right: 14px;
-        top: 12px;
-        background: white;
-        position: fixed;
-        z-index: 99;
-      }
+      ${(props) =>
+        !props.disableDefaultMediaQuery &&
+        `@media (max-width: 425px) {
+          right: 14px;
+          top: 12px;
+          background: white;
+          position: fixed;
+          z-index: 99;
+        }`}
     }
 
-    @media (max-width: 425px) {
-      width: 100%;
-      height: 100%;
-      box-shadow: none;
-    }
+    ${(props) =>
+      !props.disableDefaultMediaQuery &&
+      `@media (max-width: 425px) {
+        width: 100%;
+        height: 100%;
+        box-shadow: none;
+      }`}
   `
 
   export default {
@@ -138,22 +155,27 @@
     props: {
       isOpen: {
         required: true,
+        type: Boolean,
         default: false,
       },
       isLoading: {
         required: false,
+        type: Boolean,
         default: false,
       },
       hideClose: {
         required: false,
+        type: Boolean,
         default: false,
       },
       backdrop: {
         required: false,
+        type: String,
         default: 'white',
       },
       position: {
         required: false,
+        type: String,
         default: 'fixed',
       },
       stopPropagation: {
@@ -173,6 +195,21 @@
         type: Boolean,
         default: true,
       },
+      maxWidth: {
+        type: String,
+        default: '95%',
+      },
+      disableDefaultMediaQuery: {
+        type: Boolean,
+        default: false,
+      },
+      modalContainerAlignment: {
+        type: Object,
+        default: () => ({
+          alignSelf: 'center',
+          justifySelf: 'center',
+        }),
+      },
     },
     setup() {
       const modalRef = ref(null)

package/src/components/pageTitle/index.vue

@@ -1,9 +1,5 @@
 <template>
-  <TitleWrap
-    data-test-id="page_wrapper"
-    :has-info-text="!!infoText"
-    :no-margin="noMargin"
-  >
+  <TitleWrap data-test-id="page_wrapper" :has-info-text="!!infoText">
     <TitleText
       :color="color"
       data-test-id="page_title_text"
@@ -35,27 +31,21 @@
   import styled from 'vue3-styled-components'
   import InfoText from '../infoText'
 
-  const wrapAttrs = { hasInfoText: Boolean, noMargin: Boolean }
+  const wrapAttrs = { hasInfoText: Boolean }
   const TitleWrap = styled('div', wrapAttrs)`
     display: grid;
     align-items: center;
     grid-gap: 12px;
     grid-template-columns: ${(props) =>
       props.hasInfoText ? 'auto auto 1fr' : '1fr'};
-    margin-bottom: ${(props) => (props.noMargin ? '0px' : '20px')};
+    margin-bottom: 20px;
   `
 
   const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
   const TitleText = styled('span', titleAttrs)`
     color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
-    font-weight: 500;
-    line-height: 130%;
-    font-size: ${(props) =>
-      props.fontSize === 'large'
-        ? '24px'
-        : props.fontSize === 'small'
-        ? '18px'
-        : '20px'};
+    font-weight: 600;
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '20px')};
   `
 
   export default {
@@ -78,7 +68,7 @@
       fontSize: {
         required: false,
         type: String,
-        default: 'medium',
+        default: '',
       },
       uppercase: {
         required: false,
@@ -95,11 +85,6 @@
         type: String,
         default: 'center',
       },
-      noMargin: {
-        required: false,
-        type: Boolean,
-        default: false,
-      },
     },
   }
 </script>