@d19n/webchat 1.0.4 → 1.0.6

package/README.md

@@ -1,6 +1,6 @@
 # d19n-webchat
 
-A simple npm package for our webchat.
+YouFibre Chat v1
 
 ## Installation
 
@@ -17,9 +17,29 @@ After installing, you can use the `@d19n/webchat` function in your project as fo
 ```javascript
 import D19NChat from '@d19n/webchat';
 
-<D19NChat name="Hello, World!" />
+<D19NChat
+    host={"..."}
+    clientId={"..."}
+    clientSecret={"..."}
+    websocketUrl={"..."}
+    postcodeSchemaId={"..."}
+    source={"..."}
+    fullscreen={false}
+    customToken={undefined}
+/>
 ```
 
+| Property | Type | Description |
+| ------------- | :-------------: | ------------- |
+| host | string | YouFibre API URL |
+| clientId | string | OAuth ClientID |
+| clientSecret | string | OAuth Secret |
+| websocketUrl | string | Websocket URL |
+| postcodeSchemaId | string | Postcode search API |
+| source | string | User ID |
+| fullscreen | boolean | `false` as default |
+| customToken | string/undefined | `undefined` as default for logger User |
+
 ## License
 
 This project is licensed under the MIT License.

package/dist/TwilioChat/index.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import '../assets/styles/fonts.css';
+import '../assets/styles/app.scss';
 interface Props {
     host: string;
     websocketUrl: string;

package/dist/_virtual/_commonjsHelpers.js

@@ -1,2 +1,2 @@
-var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function o(e){if(Object.prototype.hasOwnProperty.call(e,"__esModule"))return e;var t=e.default;if("function"==typeof t){var o=function e(){var o=!1;try{o=this instanceof e}catch{}return o?Reflect.construct(t,arguments,this.constructor):t.apply(this,arguments)};o.prototype=t.prototype}else o={};return Object.defineProperty(o,"__esModule",{value:!0}),Object.keys(e).forEach(function(t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}),o}export{e as commonjsGlobal,o as getAugmentedNamespace,t as getDefaultExportFromCjs};
+function t(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}function e(t){if(Object.prototype.hasOwnProperty.call(t,"__esModule"))return t;var e=t.default;if("function"==typeof e){var r=function t(){var r=!1;try{r=this instanceof t}catch{}return r?Reflect.construct(e,arguments,this.constructor):e.apply(this,arguments)};r.prototype=e.prototype}else r={};return Object.defineProperty(r,"__esModule",{value:!0}),Object.keys(t).forEach(function(e){var o=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,o.get?o:{enumerable:!0,get:function(){return t[e]}})}),r}export{e as getAugmentedNamespace,t as getDefaultExportFromCjs};
 //# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/index12.js

@@ -1,2 +1,2 @@
-var e={exports:{}};export{e as __module};
+var r={};export{r as __exports};
 //# sourceMappingURL=index12.js.map

package/dist/_virtual/index13.js

@@ -1,2 +1,2 @@
-var r={};export{r as __exports};
+var e={exports:{}};export{e as __module};
 //# sourceMappingURL=index13.js.map

package/dist/_virtual/index14.js

@@ -1,2 +1,2 @@
-var e={exports:{}};export{e as __module};
+import{getAugmentedNamespace as e}from"./_commonjsHelpers.js";import*as s from"../node_modules/change-case/dist.es2015/index.js";var o=e(s);export{o as default};
 //# sourceMappingURL=index14.js.map

package/dist/_virtual/index15.js

@@ -1,2 +1,2 @@
-import{getAugmentedNamespace as e}from"./_commonjsHelpers.js";import*as s from"../node_modules/change-case/dist.es2015/index.js";var o=e(s);export{o as default};
+var e={exports:{}};export{e as __module};
 //# sourceMappingURL=index15.js.map

package/dist/_virtual/index2.js

@@ -1,2 +1,2 @@
-import{__require as e}from"../node_modules/react-debounce-input/lib/index.js";var r=e();export{r as l};
+import{getDefaultExportFromCjs as r}from"./_commonjsHelpers.js";import{__require as e}from"../node_modules/remark-gfm/index.js";var m=r(e());export{m as default};
 //# sourceMappingURL=index2.js.map

package/dist/_virtual/index3.js

@@ -1,2 +1,2 @@
-import{getDefaultExportFromCjs as r}from"./_commonjsHelpers.js";import{__require as e}from"../node_modules/remark-gfm/index.js";var m=r(e());export{m as default};
+import{getDefaultExportFromCjs as e}from"./_commonjsHelpers.js";import{__require as o}from"../node_modules/prop-types/index.js";var r=e(o());export{r as default};
 //# sourceMappingURL=index3.js.map

package/dist/_virtual/index4.js

@@ -1,2 +1,2 @@
-import{getDefaultExportFromCjs as e}from"./_commonjsHelpers.js";import{__require as o}from"../node_modules/prop-types/index.js";var r=e(o());export{r as default};
+import{__require as r}from"../node_modules/react-is/index.js";var e=r();export{e as r};
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index5.js

@@ -1,2 +1,2 @@
-import{__require as r}from"../node_modules/react-is/index.js";var e=r();export{e as r};
+var e={exports:{}};export{e as __module};
 //# sourceMappingURL=index5.js.map

package/dist/_virtual/index6.js

@@ -1,2 +1,2 @@
-var e={exports:{}};export{e as __module};
+import{getDefaultExportFromCjs as e}from"./_commonjsHelpers.js";import{__require as r}from"../node_modules/attr-accept/dist/es/index.js";var o=e(r());export{o as default};
 //# sourceMappingURL=index6.js.map

package/dist/_virtual/index7.js

@@ -1,2 +1,2 @@
-import{getDefaultExportFromCjs as e}from"./_commonjsHelpers.js";import{__require as r}from"../node_modules/attr-accept/dist/es/index.js";var o=e(r());export{o as default};
+import{getDefaultExportFromCjs as e}from"./_commonjsHelpers.js";import{__require as s}from"../node_modules/classnames/index.js";var o=e(s());export{o as default};
 //# sourceMappingURL=index7.js.map

package/dist/_virtual/index8.js

@@ -1,2 +1,2 @@
-import{getDefaultExportFromCjs as e}from"./_commonjsHelpers.js";import{__require as s}from"../node_modules/classnames/index.js";var o=e(s());export{o as default};
+var e={exports:{}};export{e as __module};
 //# sourceMappingURL=index8.js.map

package/dist/assets/styles/app.scss

@@ -0,0 +1,248 @@
+* {
+    margin: 0px;
+    padding: 0px;
+    outline: 0px;
+}
+
+:root {
+  font-size: 16px;
+}
+
+body {
+  width: 100%;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.1rem;
+  font-family: "DM Sans";
+}
+
+@for $i from 0 through 100 {
+  .fs-#{$i} {
+    font-size: $i * 1rem !important;
+  }
+  .fw-#{$i} {
+    font-weight: $i * 100 !important;
+  }
+  .w-#{$i} {
+    width: $i * 1% !important;
+  }
+  .mt-#{$i} {
+    margin-top: $i * 1px !important;
+  }
+  .pt-#{$i} {
+    padding-top: $i * 1px !important;
+  }
+  .pb-#{$i} {
+    padding-bottom: $i * 1px !important;
+  }
+  .pl-#{$i} {
+    padding-left: $i * 1px !important;
+  }
+  .pr-#{$i} {
+    padding-right: $i * 1px !important;
+  }
+  .mb-#{$i} {
+    margin-bottom: $i * 1px !important;
+  }
+  .mv-#{$i} {
+    margin: $i * 1px  0 !important;
+  }
+  .mh-#{$i} {
+    margin: 0 $i * 1px !important;
+  }
+  .pv-#{$i} {
+    padding: $i * 1px  0 !important;
+  }
+  .ph-#{$i} {
+    padding: 0 $i * 1px !important;
+  }
+  .maxw-#{$i} {
+    max-width: $i * 1% !important;
+  }
+  .minw-#{$i} {
+    min-width: $i * 1% !important;
+  }
+  .gap-#{$i} {
+    gap: calc($i / 10) * 1rem !important;
+  }
+}
+.dark-bg { background-color: #07131e; }
+.green-bg { background-color: #08DE9E; }
+.white-color { color: #fff !important; }
+
+.inline-block {
+  display: inline-block;
+}
+.page-wrapper { overflow: hidden; }
+a { text-decoration: none; }
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+button {
+  border: none;
+  font-family: 'DM Sans' !important;
+  background-color: #ffffff;
+  color: #07131e;
+  font-size: 1.2rem;
+  font-weight: 500;
+  padding: 0.25rem 1.5rem 0.25rem 1.5rem;
+  border-radius: 100px;
+  transition: all 0.3s ease-in-out 0s;
+
+  span {
+    color: #07131e;
+    text-transform: uppercase;
+    font-size: 1.5rem;
+    font-family: 'Abolition-Regular';
+  }
+
+  &:hover {
+    background-color: #08DE9E;
+    color: #07131e !important;
+
+    &.green-bg {
+      background-color: #000000 !important;
+      color: #ffffff !important;
+      text-transform: none !important;
+
+      &.sign-up {
+        background-color: #ffffff !important;
+        color: #07131e !important;
+        border-radius: 12px;
+      }
+    }
+
+    &.light-bg {
+      background-color: #000000 !important;
+      color: #ffffff !important;
+    }
+  }
+
+  &.medium-button {
+    font-size: 1.2rem;
+    font-weight: 500;
+    min-width: 136px;
+    padding: 0.25rem 1.5rem 0.25rem 1.5rem;
+  }
+
+  &.big-button {
+    margin-right: 2rem;
+    font-size: 1.9rem;
+    padding: 0.2rem 4rem 0.2rem 4rem;
+  }
+
+  &.seeAll-button {
+    position: relative;
+    top: -3rem;
+    float: right;
+  }
+
+  &.no-border {
+    border: none !important;
+  }
+}
+
+.centered { 
+  position: relative;
+  margin: 0px auto;
+}
+.justify-content-start { justify-content: start; }
+.justify-content-end { justify-content: end; }
+.justify-content-center { justify-content: center; }
+.justify-content-space { justify-content: space-between; }
+.flex-center-justified {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-start-justified {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: start;
+}
+.flex-end-justified {
+  display: flex;
+  width: 100%;
+  justify-content: end;
+  align-items: center;
+}
+.position-relative { position: relative; }
+.flex { display: flex; }
+.flex-0 { flex: 0; }
+.flex-1 { flex :1; }
+.flex-auto { flex: 1 1 250px; }
+.flex-align-center { align-items: center; }
+.flex-column { flex-direction: column; }
+.flexx-row { flex-direction: row; }
+@media (max-width: 991px) {
+  .mobile-centered {
+    text-align: center !important;
+  }
+  .mobile-margin-auto {
+    margin: auto;
+  };
+  .reverse-on-mobile {
+    flex-direction: column-reverse !important;
+  }
+  .mobile-logo { display: block; }
+  .desktop-logo { display: none; }
+}
+@media (min-width: 992px) {
+  .mobile-logo { display: none; }
+  .desktop-logo { display: block; }
+}
+@media (max-width: 1050px) {
+}
+@media (min-width: 991px) {
+}
+.bg-green {
+  background-color: #08DE9E;
+}
+.dark-color {
+  color: #07131E !important;
+}
+.blue-bg {
+  background-color: #123EE0;
+  color: #fff !important;
+
+  &:hover {
+    background-color: #4D6EE8;
+    color: #fff !important;
+  }
+}
+.bold { font-weight: 600; }
+#filterSearch::placeholder {
+  color: #000;
+  font-size: 18px;
+  font-weight: 500;
+  opacity: 1;
+}
+
+html, body {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0,0,0,0.3) transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+@media (max-width: 1280px) {
+  span,
+  p {
+    font-size: 1rem !important;
+  }
+  .mobile-centered { margin: auto; }
+}

package/dist/assets/styles/fonts.css

@@ -0,0 +1,107 @@
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Fp2ywxg089UriCZa4ET-DNl0.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Fp2ywxg089UriCZa4Hz-D.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZaw7ByWB3wTyCg.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZaw7ByWCXwT.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZawpBqWB3wTyCg.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: italic;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Ap2ywxg089UriCZawpBqWCXwT.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBamC2QX.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 500;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriAWCrCBimCw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBamC2QX.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+    font-family: 'DM Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/dmsans/v11/rP2Cp2ywxg089UriASitCBimCw.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/assets/styles/variables.d.ts

@@ -0,0 +1,58 @@
+export declare const variables: {
+    primary: string;
+    secondary: string;
+    black: string;
+    white: string;
+    green: string;
+    grey: string;
+    blue: string;
+    darkBlue: string;
+    lightGreen: string;
+    lightBlue: string;
+    brightGreen: string;
+    textPrimary: string;
+    textSecondary: string;
+    lightGrey: string;
+    buttonPrimary: string;
+    transparentWhite: string;
+    transparentBlack: string;
+    buttonPrimaryGradient: string;
+    buttonPrimaryGradientHover: string;
+    fontFamilyPrimary: string;
+    fontFamilySecondary: string;
+    textSize: string;
+    textMenu: string;
+    textSizeNormal: string;
+    textSize16: string;
+    textSizeSmall: string;
+    textSizeSmallL: string;
+    textSizeMedium: string;
+    textSizeLarge: string;
+    textSizeExtraLarge: string;
+    h1Size: string;
+    h1SizeMobile: string;
+    h2Size: string;
+    h3Size: string;
+    h4Size: string;
+    h5Size: string;
+    h6Size: string;
+    h7Size: string;
+    maxWidth: string;
+};
+export declare const devices: {
+    mobileS: string;
+    mobileM: string;
+    mobileL: string;
+    tablet: string;
+    laptop: string;
+    laptopL: string;
+    desktop: string;
+    desktopL: string;
+    mobileSmall: string;
+    mobileOnly: string;
+    tabletOnly: string;
+    laptopMOnly: string;
+    laptopOnly: string;
+    breakpoint: string;
+    middleSizeOnly: string;
+};

package/dist/assets/styles/variables.tsx

@@ -0,0 +1,74 @@
+export const variables = {
+    primary: '#07131E',
+    secondary: '#08DE9E',
+    black: '#000000',
+    white: '#FFFFFF',
+    green: "#83EECE",
+    grey: '#6A7178',
+    blue: '#0011AC',
+    darkBlue: '#123EE0',
+    lightGreen: "#82EECE",
+    lightBlue: '#E6FCF5',
+    brightGreen: "#C2F7E7",
+    textPrimary: '#07131E',
+    textSecondary: '#fff',
+    lightGrey: '#E6E7E8',
+    buttonPrimary: '#123EE0',
+    transparentWhite: 'rgba(255,255,255,0.2)',
+    transparentBlack: 'rgba(0,0,0,0.2)',
+    buttonPrimaryGradient: 'linear-gradient(180deg, #123EE0 30%, #017cf5 100%)',
+    buttonPrimaryGradientHover: 'linear-gradient(180deg, #415ee4 30%, #9bb9f1 100%)',
+    fontFamilyPrimary: 'DM Sans',
+    fontFamilySecondary: 'Abolition-Regular',
+    textSize: '18px',
+    textMenu: '14px',
+    textSizeNormal: '18px',
+    textSize16: '16px',
+    textSizeSmall: '10px',
+    textSizeSmallL: '12px',
+    textSizeMedium: '21px',
+    textSizeLarge: '20px',
+    textSizeExtraLarge: '25px',
+    h1Size: '110px',
+    h1SizeMobile: '100px',
+    h2Size: '80px ',
+    h3Size: '55px',
+    h4Size: '38px',
+    h5Size: '25px ',
+    h6Size: '20px',
+    h7Size: '16px',
+    maxWidth: '1338px',
+}
+
+const screenSize = {
+    mobileS: '320px',
+    mobileM: '375px',
+    mobileL: '425px',
+    tablet: '768px',
+    laptop: '991px',
+    laptopStart: '992px',
+    laptopM: '1280px',
+    laptopL: '1510px',
+    desktop: '1921px',
+    desktopL: '2561px',
+    breakpoint: '1440px'
+}
+
+export const devices = {
+    mobileS: `(min-width: ${screenSize.mobileS})`,
+    mobileM: `(min-width: ${screenSize.mobileM})`,
+    mobileL: `(min-width: ${screenSize.mobileL})`,
+    tablet: `(min-width: ${screenSize.tablet})`,
+    laptop: `(min-width: ${screenSize.laptopStart})`,
+    laptopL: `(min-width: ${screenSize.laptopL})`,
+    desktop: `(min-width: ${screenSize.desktop})`,
+    desktopL: `(min-width: ${screenSize.desktopL})`,
+
+    mobileSmall: `(max-width: ${screenSize.mobileL})`,
+    mobileOnly: `(max-width: ${screenSize.tablet})`,
+    tabletOnly: `(max-width: ${screenSize.laptop})`,
+    laptopMOnly: `(max-width: ${screenSize.laptopM})`,
+    laptopOnly: `(max-width: ${screenSize.desktop})`,
+    breakpoint: `(max-width: ${screenSize.breakpoint})`,
+    middleSizeOnly: `(min-width: ${screenSize.tablet}) and (max-width: ${screenSize.laptopL})`
+};