@transferwise/components 0.0.0-experimental-fa9fbe9 → 0.0.0-experimental-00012dd

package/src/styles/less/panels.css

@@ -29,7 +29,7 @@
 .panel-footer {
   padding: 16px;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .panel {
     margin-bottom: 24px;
     margin-left: -24px;
@@ -45,7 +45,7 @@
     padding: 24px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .panel {
     margin-left: 0;
     margin-right: 0;
@@ -54,7 +54,7 @@
     padding: 16px 0 8px 0;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .panel {
     margin-bottom: 32px;
     border-radius: 3px;
@@ -66,7 +66,7 @@
     padding: 32px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .panel-title {
     line-height: calc(1.2 * 2);
     line-height: calc(var(--line-height-title) * 2);
@@ -326,7 +326,7 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
   padding-right: 0;
   padding-right: initial;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .panel > .table tr > :first-child,
   .panel > .table-responsive tr > :first-child {
     padding-left: 24px;
@@ -348,7 +348,7 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
     padding-right: initial;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .panel > .table tr > :first-child,
   .panel > .table-responsive tr > :first-child {
     padding-left: 32px;
@@ -508,19 +508,19 @@ html:not([dir="rtl"]) .panel > .table-responsive > .table-bordered > tfoot > tr
 .panel-group .panel-footer {
   padding: 16px;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .panel-group .panel .panel-heading,
   .panel-group .panel .panel-footer {
     padding: 24px !important;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .panel-group .panel .panel-heading,
   .panel-group .panel .panel-footer {
     padding: 24px 32px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .panel {
     margin-left: 0;
     margin-right: 0;

package/src/styles/less/popovers.css

@@ -422,12 +422,12 @@ button.close {
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 768px) {
+  @media (min-width: 840px) {
     .popover-title {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .popover-title {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -439,7 +439,7 @@ button.close {
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .popover-title {
       -webkit-hyphenate-limit-before: 4;
     }
@@ -531,7 +531,7 @@ button.popover-close {
 .nav > li > a [data-toggle="popover"] {
   border-bottom: 0;
 }
-@media (max-width: 991px) {
+@media (max-width: 1159.98px) {
   .popover-modal {
     position: fixed;
     top: 0 !important;
@@ -545,7 +545,7 @@ button.popover-close {
     display: none;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .popover-modal.left {
     margin-right: -var(--size-24) !important;
   }
@@ -597,7 +597,7 @@ button.popover-close {
   left: auto;
   left: initial;
 }
-@media (max-width: 991px) {
+@media (max-width: 1159.98px) {
   .popover-modal-cover {
     display: block;
   }
@@ -607,7 +607,7 @@ button.popover-close {
   padding: 24px;
   padding: var(--size-24);
 }
-@media (max-width: 576px) {
+@media (max-width: 600px) {
   .popover-promotion {
     width: auto !important;
     padding: 24px !important;
@@ -616,7 +616,7 @@ button.popover-close {
     margin: var(--size-16) !important;
   }
 }
-@media (min-width: 566px) and (max-width: 992px) {
+@media (min-width: 590px) and (max-width: 1160px) {
   .popover-promotion {
     width: 540px !important;
     padding: 28px 32px !important;
@@ -631,7 +631,7 @@ button.popover-close {
   line-height: 1.2;
   line-height: var(--line-height-title);
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .popover-promotion .popover-title {
     font-size: 1.25rem;
     font-size: var(--font-size-20);
@@ -639,22 +639,22 @@ button.popover-close {
     line-height: var(--line-height-title);
   }
 }
-@media (max-width: 480px) {
+@media (max-width: 320px) {
   .popover-promotion .popover-image {
     width: 80%;
   }
 }
-@media (min-width: 480px) and (max-width: 992px) {
+@media (min-width: 320px) and (max-width: 1160px) {
   .popover-promotion .popover-image {
     width: 60%;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .popover-promotion .popover-image {
     width: 80%;
   }
 }
-@media (max-width: 992px) {
+@media (max-width: 1160px) {
   .popover-promotion {
     position: absolute !important;
   }

package/src/styles/less/select.css

@@ -81,7 +81,7 @@
 .tw-select .circle .tw-icon {
   vertical-align: middle;
 }
-@media (max-width: 575px) {
+@media (max-width: 599.98px) {
   .tw-select.dropdown-menu.dropdown-menu--open {
     max-height: 50vh;
     max-height: 50svh;

package/src/styles/less/sequences.css

@@ -19,7 +19,7 @@
 .sequence > li:last-child {
   margin-bottom: 16px;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .sequence > li {
     padding-top: 4px;
     padding-bottom: 4px;
@@ -57,7 +57,7 @@
 .sequence .sequence-icon {
   top: 2px;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .sequence .sequence-icon {
     top: 4px;
   }
@@ -115,7 +115,7 @@
   margin-left: 0;
   margin-left: initial;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .sequence {
     padding-right: 24px;
     font-size: 1rem;
@@ -588,7 +588,7 @@
 .sequence-lg > li:last-child {
   margin-bottom: 24px;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .sequence-lg > li {
     padding-top: 8px;
     padding-bottom: 8px;
@@ -626,7 +626,7 @@
 .sequence-lg .sequence-icon {
   top: 8px;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .sequence-lg .sequence-icon {
     top: 8px;
   }
@@ -679,7 +679,7 @@
   margin-left: 0;
   margin-left: initial;
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .sequence-lg {
     padding-left: 48px;
   }

package/src/styles/less/table.css

@@ -135,7 +135,7 @@ th {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-@media (max-width: 767px) {
+@media (max-width: 839.98px) {
   div.table-bordered:not(.table-responsive) {
     border: 0;
   }
@@ -144,7 +144,7 @@ th {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .table-striped > .tbody > dl:nth-of-type(odd) {
     background-color: rgba(134,167,189,0.10196);
     background-color: var(--color-background-neutral);
@@ -319,7 +319,7 @@ table col[class*="col-"] {
 .table-responsive.table-bordered {
   border: 0;
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 839.98px) {
   .table-responsive {
     width: 100%;
     margin-bottom: 24px;
@@ -353,7 +353,7 @@ table col[class*="col-"] {
     border-radius: 3px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .table {
     display: table;
   }
@@ -390,7 +390,7 @@ table col[class*="col-"] {
     display: table-footer-group;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: 839.98px) {
   .table > .thead {
     display: none;
   }
@@ -411,7 +411,7 @@ table col[class*="col-"] {
     margin: 0;
   }
 }
-@media (max-width: 575px) {
+@media (max-width: 599.98px) {
   .table > .tbody > dl {
     padding-bottom: 8px;
   }

package/src/styles/less/table.less

@@ -216,7 +216,7 @@ table col[class*="col-"] {
 // Responsive tables
 //
 // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
-// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// by enabling horizontal scrolling. Only applies <840px. Everything above that
 // will display normally.
 
 .table-responsive {

package/src/styles/less/utilities.css

@@ -36,7 +36,7 @@
 .pull-xs-none {
   float: none !important;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .pull-sm-left {
     float: left !important;
   }
@@ -53,7 +53,7 @@
     float: none !important;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .pull-md-left {
     float: left !important;
   }
@@ -70,7 +70,7 @@
     float: none !important;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .pull-lg-left {
     float: left !important;
   }
@@ -87,7 +87,7 @@
     float: none !important;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 1160px) {
   .pull-xl-left {
     float: left !important;
   }

package/src/styles/less/wells.css

@@ -12,7 +12,7 @@
   padding: var(--size-24);
   box-shadow: none;
 }
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 600px) {
   .well-sm {
     min-height: 24px;
     min-height: var(--size-24);
@@ -27,7 +27,7 @@
     box-shadow: none;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 840px) {
   .well-md {
     min-height: 24px;
     min-height: var(--size-24);
@@ -42,7 +42,7 @@
     box-shadow: none;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1160px) {
   .well-lg {
     min-height: 24px;
     min-height: var(--size-24);
@@ -57,7 +57,7 @@
     box-shadow: none;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: 1160px) {
   .well-xl {
     min-height: 24px;
     min-height: var(--size-24);

package/src/styles/props/custom-media.css

@@ -1,11 +1 @@
-@custom-media --screen-xs (min-width: 480px);
-@custom-media --screen-xs-max (max-width: 575px); /* --screen-sm - 1 */
-@custom-media --screen-sm (min-width: 576px);
-@custom-media --screen-sm-max (max-width: 767px); /* --screen-md - 1 */
-@custom-media --screen-md (min-width: 768px);
-@custom-media --screen-md-max (max-width: 991px); /* --screen-lg - 1 */
-@custom-media --screen-lg (min-width: 992px);
-@custom-media --screen-lg-max (max-width: 1199px); /* --screen-xl - 1 */
-@custom-media --screen-xl (min-width: 1200px);
-
-@custom-media --screen-400-zoom (max-width: 320px); /* ~400% zoom viewport */
+@import "@transferwise/neptune-tokens/breakpoints.css";

package/src/styles/variables/legacy-variables.less

@@ -2,6 +2,9 @@
 // Variables
 // --------------------------------------------------
 
+//== Media queries breakpoints
+@import "@transferwise/neptune-tokens/breakpoints.less";
+
 //== Colors
 // Deprecated use Neptune Colors https://transferwise.github.io/neptune-web/styles/tokens/Colors
 //
@@ -588,52 +591,6 @@
 @zindex-mobile-nav: 1060;
 
 
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs:                  480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min:              @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone:               @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm:                  576px;
-@screen-sm-min:              @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet:              @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md:                  768px;
-@screen-md-min:              @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop:             @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg:                  992px;
-@screen-lg-min:              @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop:          @screen-lg-min;
-
-
-// Extra Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-xl:                  1200px;
-@screen-xl-min:              @screen-xl;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm-min - 1);
-@screen-sm-max:              (@screen-md-min - 1);
-@screen-md-max:              (@screen-lg-min - 1);
-@screen-lg-max:              (@screen-xl-min - 1);
-
-
 //== Grid system
 //
 //## Define your custom responsive grid.
@@ -1296,4 +1253,4 @@
 @decision-focus-transition: @transition-duration;
 @decision-padding-md: 12px;
 @decision-padding-lg: 24px;
-@decision-border: 1px solid @brand-smoke-plus-10;
+@decision-border: 1px solid @brand-smoke-plus-10;

package/src/table/Table.css

@@ -20,7 +20,7 @@
   margin-right: auto;
   margin-left: auto;
 }
-@media (max-width: 767px) {
+@media (max-width: 839.98px) {
   .np-table-outer-container--center {
     width: 100%;
   }

package/src/table/Table.story.tsx

@@ -400,7 +400,7 @@ export const WithError: Story = {
     error: {
       message: 'Something went wrong during data fetching',
       action: {
-        href: '/?path=/story/option-table--with-error',
+        href: '/?path=/story/content-table--with-error',
         text: 'To Refresh page, click here',
       },
     },

package/src/table/Table.tsx

@@ -2,7 +2,7 @@ import { useIntl } from 'react-intl';
 import TableCell from './TableCell';
 import TableHeader, { TableHeaderType } from './TableHeader';
 import TableRow, { TableRowClickableType, TableRowType } from './TableRow';
-import Alert from '../alert';
+import { InfoPrompt } from '../prompt/InfoPrompt';
 
 import messages from './Table.messages';
 import Loader from '../loader';
@@ -87,13 +87,14 @@ const Table = ({
 
   if (error) {
     return (
-      <Alert
+      <InfoPrompt
         className="np-table-error"
-        message={error.message}
-        type={Sentiment.NEGATIVE}
+        aria-live="assertive"
+        description={error.message ?? ''}
+        sentiment="negative"
         action={{
           href: error?.action?.href ?? '/',
-          text: error?.action?.text ?? formatMessage(messages.refreshPage),
+          label: error?.action?.text ?? formatMessage(messages.refreshPage),
         }}
         data-testid="np-table-error"
       />

package/src/tabs/Tabs.css

@@ -41,7 +41,7 @@
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .tabs__tab:not(.disabled):not(:disabled):hover {
     color: #0084b3;
     color: var(--color-content-accent-hover);
@@ -113,7 +113,7 @@
   align-items: center;
   vertical-align: middle;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .tabs.tabs--auto-width .tabs__tab {
     padding: 0 24px;
     padding: 0 var(--size-24);

package/src/typeahead/Typeahead.css

@@ -158,7 +158,7 @@
     opacity: 0.6;
   }
 }
-@media (max-width: 575px) {
+@media (max-width: 599.98px) {
   .typeahead .dropdown.open .dropdown-menu {
     position: absolute;
     bottom: auto;

package/build/common/hooks/useContainerSize.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var React = require('react');
-var useResizeObserver = require('./useResizeObserver.js');
-
-/**
- * Hook that returns a ref and a boolean indicating if the container
- * has a width >= the specified breakpoint.
- *
- * Useful for synchronizing React state with CSS container queries.
- *
- * Uses content-box measurements to match CSS container query behavior
- * (excludes padding and border).
- *
- * @param breakpoint - Minimum width in pixels
- * @returns [ref, isAboveBreakpoint] tuple
- */
-function useContainerSize(breakpoint) {
-  const ref = React.useRef(null);
-  const [isAboveBreakpoint, setIsAboveBreakpoint] = React.useState(false);
-  useResizeObserver.useResizeObserver(ref, entry => {
-    // Use contentRect.width to match CSS container query box model (content-box)
-    const inlineSize = entry.contentRect.width;
-    setIsAboveBreakpoint(inlineSize >= breakpoint);
-  }, 'content-box');
-  return [ref, isAboveBreakpoint];
-}
-
-exports.useContainerSize = useContainerSize;
-//# sourceMappingURL=useContainerSize.js.map

package/build/common/hooks/useContainerSize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useContainerSize.js","sources":["../../../src/common/hooks/useContainerSize.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport { useResizeObserver } from './useResizeObserver';\n\n/**\n * Hook that returns a ref and a boolean indicating if the container\n * has a width >= the specified breakpoint.\n *\n * Useful for synchronizing React state with CSS container queries.\n *\n * Uses content-box measurements to match CSS container query behavior\n * (excludes padding and border).\n *\n * @param breakpoint - Minimum width in pixels\n * @returns [ref, isAboveBreakpoint] tuple\n */\nexport function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);\n\n  useResizeObserver(\n    ref,\n    (entry) => {\n      // Use contentRect.width to match CSS container query box model (content-box)\n      const inlineSize = entry.contentRect.width;\n      setIsAboveBreakpoint(inlineSize >= breakpoint);\n    },\n    'content-box',\n  );\n\n  return [ref, isAboveBreakpoint];\n}\n"],"names":["useContainerSize","breakpoint","ref","useRef","isAboveBreakpoint","setIsAboveBreakpoint","useState","useResizeObserver","entry","inlineSize","contentRect","width"],"mappings":";;;;;AAIA;;;;;;;;;;;AAWG;AACG,SAAUA,gBAAgBA,CAACC,UAAkB,EAAA;AACjD,EAAA,MAAMC,GAAG,GAAGC,YAAM,CAAiB,IAAI,CAAC;EACxC,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAEjEC,EAAAA,mCAAiB,CACfL,GAAG,EACFM,KAAK,IAAI;AACR;AACA,IAAA,MAAMC,UAAU,GAAGD,KAAK,CAACE,WAAW,CAACC,KAAK;AAC1CN,IAAAA,oBAAoB,CAACI,UAAU,IAAIR,UAAU,CAAC;EAChD,CAAC,EACD,aAAa,CACd;AAED,EAAA,OAAO,CAACC,GAAG,EAAEE,iBAAiB,CAAC;AACjC;;;;"}

package/build/common/hooks/useContainerSize.mjs

@@ -1,28 +0,0 @@
-import { useRef, useState } from 'react';
-import { useResizeObserver } from './useResizeObserver.mjs';
-
-/**
- * Hook that returns a ref and a boolean indicating if the container
- * has a width >= the specified breakpoint.
- *
- * Useful for synchronizing React state with CSS container queries.
- *
- * Uses content-box measurements to match CSS container query behavior
- * (excludes padding and border).
- *
- * @param breakpoint - Minimum width in pixels
- * @returns [ref, isAboveBreakpoint] tuple
- */
-function useContainerSize(breakpoint) {
-  const ref = useRef(null);
-  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);
-  useResizeObserver(ref, entry => {
-    // Use contentRect.width to match CSS container query box model (content-box)
-    const inlineSize = entry.contentRect.width;
-    setIsAboveBreakpoint(inlineSize >= breakpoint);
-  }, 'content-box');
-  return [ref, isAboveBreakpoint];
-}
-
-export { useContainerSize };
-//# sourceMappingURL=useContainerSize.mjs.map

package/build/common/hooks/useContainerSize.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useContainerSize.mjs","sources":["../../../src/common/hooks/useContainerSize.ts"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport { useResizeObserver } from './useResizeObserver';\n\n/**\n * Hook that returns a ref and a boolean indicating if the container\n * has a width >= the specified breakpoint.\n *\n * Useful for synchronizing React state with CSS container queries.\n *\n * Uses content-box measurements to match CSS container query behavior\n * (excludes padding and border).\n *\n * @param breakpoint - Minimum width in pixels\n * @returns [ref, isAboveBreakpoint] tuple\n */\nexport function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);\n\n  useResizeObserver(\n    ref,\n    (entry) => {\n      // Use contentRect.width to match CSS container query box model (content-box)\n      const inlineSize = entry.contentRect.width;\n      setIsAboveBreakpoint(inlineSize >= breakpoint);\n    },\n    'content-box',\n  );\n\n  return [ref, isAboveBreakpoint];\n}\n"],"names":["useContainerSize","breakpoint","ref","useRef","isAboveBreakpoint","setIsAboveBreakpoint","useState","useResizeObserver","entry","inlineSize","contentRect","width"],"mappings":";;;AAIA;;;;;;;;;;;AAWG;AACG,SAAUA,gBAAgBA,CAACC,UAAkB,EAAA;AACjD,EAAA,MAAMC,GAAG,GAAGC,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAEjEC,EAAAA,iBAAiB,CACfL,GAAG,EACFM,KAAK,IAAI;AACR;AACA,IAAA,MAAMC,UAAU,GAAGD,KAAK,CAACE,WAAW,CAACC,KAAK;AAC1CN,IAAAA,oBAAoB,CAACI,UAAU,IAAIR,UAAU,CAAC;EAChD,CAAC,EACD,aAAa,CACd;AAED,EAAA,OAAO,CAACC,GAAG,EAAEE,iBAAiB,CAAC;AACjC;;;;"}

package/build/common/propsValues/breakpoint.js

@@ -1,12 +0,0 @@
-'use strict';
-
-exports.Breakpoint = void 0;
-(function (Breakpoint) {
-  Breakpoint[Breakpoint["ZOOM_400"] = 320] = "ZOOM_400";
-  Breakpoint[Breakpoint["EXTRA_SMALL"] = 480] = "EXTRA_SMALL";
-  Breakpoint[Breakpoint["SMALL"] = 576] = "SMALL";
-  Breakpoint[Breakpoint["MEDIUM"] = 768] = "MEDIUM";
-  Breakpoint[Breakpoint["LARGE"] = 992] = "LARGE";
-  Breakpoint[Breakpoint["EXTRA_LARGE"] = 1200] = "EXTRA_LARGE";
-})(exports.Breakpoint || (exports.Breakpoint = {}));
-//# sourceMappingURL=breakpoint.js.map

package/build/common/propsValues/breakpoint.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoint.js","sources":["../../../src/common/propsValues/breakpoint.ts"],"sourcesContent":["export enum Breakpoint {\n  ZOOM_400 = 320,\n  EXTRA_SMALL = 480,\n  SMALL = 576,\n  MEDIUM = 768,\n  LARGE = 992,\n  EXTRA_LARGE = 1200,\n}\n"],"names":["Breakpoint"],"mappings":";;AAAYA;AAAZ,CAAA,UAAYA,UAAU,EAAA;EACpBA,UAAA,CAAAA,UAAA,CAAA,UAAA,CAAA,GAAA,GAAA,CAAA,GAAA,UAAc;EACdA,UAAA,CAAAA,UAAA,CAAA,aAAA,CAAA,GAAA,GAAA,CAAA,GAAA,aAAiB;EACjBA,UAAA,CAAAA,UAAA,CAAA,OAAA,CAAA,GAAA,GAAA,CAAA,GAAA,OAAW;EACXA,UAAA,CAAAA,UAAA,CAAA,QAAA,CAAA,GAAA,GAAA,CAAA,GAAA,QAAY;EACZA,UAAA,CAAAA,UAAA,CAAA,OAAA,CAAA,GAAA,GAAA,CAAA,GAAA,OAAW;EACXA,UAAA,CAAAA,UAAA,CAAA,aAAA,CAAA,GAAA,IAAA,CAAA,GAAA,aAAkB;AACpB,CAAC,EAPWA,kBAAU,KAAVA,kBAAU,GAAA,EAAA,CAAA,CAAA;;"}

package/build/common/propsValues/breakpoint.mjs

@@ -1,12 +0,0 @@
-var Breakpoint;
-(function (Breakpoint) {
-  Breakpoint[Breakpoint["ZOOM_400"] = 320] = "ZOOM_400";
-  Breakpoint[Breakpoint["EXTRA_SMALL"] = 480] = "EXTRA_SMALL";
-  Breakpoint[Breakpoint["SMALL"] = 576] = "SMALL";
-  Breakpoint[Breakpoint["MEDIUM"] = 768] = "MEDIUM";
-  Breakpoint[Breakpoint["LARGE"] = 992] = "LARGE";
-  Breakpoint[Breakpoint["EXTRA_LARGE"] = 1200] = "EXTRA_LARGE";
-})(Breakpoint || (Breakpoint = {}));
-
-export { Breakpoint };
-//# sourceMappingURL=breakpoint.mjs.map

package/build/common/propsValues/breakpoint.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoint.mjs","sources":["../../../src/common/propsValues/breakpoint.ts"],"sourcesContent":["export enum Breakpoint {\n  ZOOM_400 = 320,\n  EXTRA_SMALL = 480,\n  SMALL = 576,\n  MEDIUM = 768,\n  LARGE = 992,\n  EXTRA_LARGE = 1200,\n}\n"],"names":["Breakpoint"],"mappings":"IAAYA;AAAZ,CAAA,UAAYA,UAAU,EAAA;EACpBA,UAAA,CAAAA,UAAA,CAAA,UAAA,CAAA,GAAA,GAAA,CAAA,GAAA,UAAc;EACdA,UAAA,CAAAA,UAAA,CAAA,aAAA,CAAA,GAAA,GAAA,CAAA,GAAA,aAAiB;EACjBA,UAAA,CAAAA,UAAA,CAAA,OAAA,CAAA,GAAA,GAAA,CAAA,GAAA,OAAW;EACXA,UAAA,CAAAA,UAAA,CAAA,QAAA,CAAA,GAAA,GAAA,CAAA,GAAA,QAAY;EACZA,UAAA,CAAAA,UAAA,CAAA,OAAA,CAAA,GAAA,GAAA,CAAA,GAAA,OAAW;EACXA,UAAA,CAAAA,UAAA,CAAA,aAAA,CAAA,GAAA,IAAA,CAAA,GAAA,aAAkB;AACpB,CAAC,EAPWA,UAAU,KAAVA,UAAU,GAAA,EAAA,CAAA,CAAA;;;;"}