From 99db1fa00d0cf0d78d3e6f3010450ed4b96301f6 Mon Sep 17 00:00:00 2001
From: Simon Jentsch <simon@bojagi.io>
Date: Fri, 20 Dec 2024 00:46:21 +0100
Subject: [PATCH] Fix tests

---
 src/Box/interpolations/flex.ts                |   6 +
 src/Box/interpolations/spacing.ts             |   1 -
 .../__snapshots__/Checkbox.spec.tsx.snap      |  17 +-
 src/Modal/__snapshots__/Modal.spec.tsx.snap   |  18 +--
 src/Radio/__snapshots__/Radio.spec.tsx.snap   |  17 +-
 .../__snapshots__/RadioGroup.spec.tsx.snap    |  18 +--
 src/Slider/Slider.spec.tsx                    |   7 +-
 src/Slider/__snapshots__/Slider.spec.tsx.snap | 148 ++++++++++--------
 src/Switch/__snapshots__/Switch.spec.tsx.snap |  17 +-
 src/Tabs/__snapshots__/Tabs.spec.tsx.snap     |  36 +++--
 .../__snapshots__/ToastCard.spec.tsx.snap     |  80 +++++-----
 src/breakpoints/mediaQueryFns.spec.ts         |  26 +--
 src/breakpoints/mediaQueryFns.ts              |  19 ++-
 src/styleHelpers/breakpoint.spec.tsx          |   4 +-
 14 files changed, 222 insertions(+), 192 deletions(-)

diff --git a/src/Box/interpolations/flex.ts b/src/Box/interpolations/flex.ts
index 8507daa..503d771 100644
--- a/src/Box/interpolations/flex.ts
+++ b/src/Box/interpolations/flex.ts
@@ -19,14 +19,20 @@ export interface FlexContainerProps {
   alignContent?: ResponsiveValue<CSS.Property.AlignContent>;
 }
 
+const shrinkGrowTransform: InterpolationTransformFn<number | string | boolean, number | string> = (
+  value
+) => (value === true ? 1 : value === false ? 0 : value);
+
 export const flexItem = system([
   {
     properties: ['flexGrow'],
     fromProps: ['grow', 'flexGrow'],
+    transform: shrinkGrowTransform,
   },
   {
     properties: ['flexShrink'],
     fromProps: ['shrink', 'flexShrink'],
+    transform: shrinkGrowTransform,
   },
   {
     properties: ['flexBasis'],
diff --git a/src/Box/interpolations/spacing.ts b/src/Box/interpolations/spacing.ts
index c00aa94..3b5dee1 100644
--- a/src/Box/interpolations/spacing.ts
+++ b/src/Box/interpolations/spacing.ts
@@ -5,7 +5,6 @@ const getGapSpacing = (value: any, theme: PabloTheme) => {
   if (Array.isArray(value)) {
     return value.map((val) => spacingTransform(val, theme)).join(' ');
   }
-
   const spacing = spacingTransform(value, theme);
   return [spacing, spacing].join(' ');
 };
diff --git a/src/Checkbox/__snapshots__/Checkbox.spec.tsx.snap b/src/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
index cec4ca5..38666f8 100644
--- a/src/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
+++ b/src/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
@@ -3,14 +3,14 @@
 exports[`Render checkbox checked 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-1 {
@@ -84,14 +84,14 @@ exports[`Render checkbox checked 1`] = `
 exports[`Render checkbox unchecked 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-1 {
@@ -172,7 +172,6 @@ exports[`Render checkbox with label 1`] = `
   line-height: var(--pbl-theme-typography-subtitle-lineHeight);
   margin-bottom: var(--pbl-theme-typography-subtitle-marginBottom);
   margin-left: 8px;
-  margin-bottom: 0px;
 }
 
 <label
diff --git a/src/Modal/__snapshots__/Modal.spec.tsx.snap b/src/Modal/__snapshots__/Modal.spec.tsx.snap
index 1d51765..f874e52 100644
--- a/src/Modal/__snapshots__/Modal.spec.tsx.snap
+++ b/src/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -184,13 +184,13 @@ exports[`Render with title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
 }
 
 .emotion-2 {
@@ -239,13 +239,13 @@ exports[`Render with title and topRightItem 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
 }
 
 .emotion-2 {
@@ -297,13 +297,13 @@ exports[`Render with topRightItem 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
 }
 
 <div
diff --git a/src/Radio/__snapshots__/Radio.spec.tsx.snap b/src/Radio/__snapshots__/Radio.spec.tsx.snap
index 8a46184..2ce6731 100644
--- a/src/Radio/__snapshots__/Radio.spec.tsx.snap
+++ b/src/Radio/__snapshots__/Radio.spec.tsx.snap
@@ -3,14 +3,14 @@
 exports[`Render radio checked 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-1 {
@@ -84,14 +84,14 @@ exports[`Render radio checked 1`] = `
 exports[`Render radio unchecked 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-1 {
@@ -172,7 +172,6 @@ exports[`Render radio with label 1`] = `
   line-height: var(--pbl-theme-typography-subtitle-lineHeight);
   margin-bottom: var(--pbl-theme-typography-subtitle-marginBottom);
   margin-left: 8px;
-  margin-bottom: 0px;
 }
 
 <label
diff --git a/src/Radio/__snapshots__/RadioGroup.spec.tsx.snap b/src/Radio/__snapshots__/RadioGroup.spec.tsx.snap
index ab625df..3e90688 100644
--- a/src/Radio/__snapshots__/RadioGroup.spec.tsx.snap
+++ b/src/Radio/__snapshots__/RadioGroup.spec.tsx.snap
@@ -12,14 +12,14 @@ exports[`Render with nothing selected 1`] = `
 
 .emotion-2 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-3 {
@@ -74,7 +74,6 @@ exports[`Render with nothing selected 1`] = `
   line-height: var(--pbl-theme-typography-subtitle-lineHeight);
   margin-bottom: var(--pbl-theme-typography-subtitle-marginBottom);
   margin-left: 8px;
-  margin-bottom: 0px;
 }
 
 <div>
@@ -197,14 +196,14 @@ exports[`Work with one radio button 1`] = `
 
 .emotion-2 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-3 {
@@ -259,7 +258,6 @@ exports[`Work with one radio button 1`] = `
   line-height: var(--pbl-theme-typography-subtitle-lineHeight);
   margin-bottom: var(--pbl-theme-typography-subtitle-marginBottom);
   margin-left: 8px;
-  margin-bottom: 0px;
 }
 
 <div>
diff --git a/src/Slider/Slider.spec.tsx b/src/Slider/Slider.spec.tsx
index e604b15..d608c39 100644
--- a/src/Slider/Slider.spec.tsx
+++ b/src/Slider/Slider.spec.tsx
@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { Slider } from './Slider';
 import * as stories from './Slider.stories';
+import { PabloThemeProvider } from '../theme';
 
 const defaultProps = {
   from: 0,
@@ -141,5 +142,9 @@ test('UpperOutOfBounds story snapshot', () => {
 });
 
 function createStoryComponent(Story) {
-  return <Story {...Story.args} />;
+  return (
+    <PabloThemeProvider>
+      <Story {...Story.args} />
+    </PabloThemeProvider>
+  );
 }
diff --git a/src/Slider/__snapshots__/Slider.spec.tsx.snap b/src/Slider/__snapshots__/Slider.spec.tsx.snap
index f89b66a..479d066 100644
--- a/src/Slider/__snapshots__/Slider.spec.tsx.snap
+++ b/src/Slider/__snapshots__/Slider.spec.tsx.snap
@@ -21,24 +21,15 @@ exports[`LowerOutOfBounds story snapshot 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  0: f;
-  1: l;
-  2: e;
-  3: x;
-  4: -;
-  5: s;
-  6: h;
-  7: r;
-  8: i;
-  9: n;
-  10: k;
-  13: s;
-  14: h;
-  15: r;
-  16: i;
-  17: n;
-  18: k;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
   width: 100%;
+  height: 16px;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -52,18 +43,29 @@ exports[`LowerOutOfBounds story snapshot 1`] = `
 
 .emotion-2 {
   width: 100%;
+  height: 8px;
+  border-radius: 8px;
+  background-color: var(--pbl-theme-colors-gray-100);
 }
 
 .emotion-3 {
   position: absolute;
+  height: 10px;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
+  border-radius: 10px;
+  background-color: var(--pbl-theme-colors-brand-main);
 }
 
 .emotion-4 {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--pbl-theme-colors-common-white);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2),0px 4px 10px rgba(0, 0, 0, 0.1);
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
@@ -72,6 +74,7 @@ exports[`LowerOutOfBounds story snapshot 1`] = `
   transform: translateY(-50%) translateX(-50%);
   cursor: -webkit-grab;
   cursor: grab;
+  border: 1px solid var(--pbl-theme-colors-gray-100);
 }
 
 .emotion-5 {
@@ -159,24 +162,15 @@ exports[`OffsetRangeSlider story snapshot 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  0: f;
-  1: l;
-  2: e;
-  3: x;
-  4: -;
-  5: s;
-  6: h;
-  7: r;
-  8: i;
-  9: n;
-  10: k;
-  13: s;
-  14: h;
-  15: r;
-  16: i;
-  17: n;
-  18: k;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
   width: 100%;
+  height: 16px;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -190,18 +184,29 @@ exports[`OffsetRangeSlider story snapshot 1`] = `
 
 .emotion-2 {
   width: 100%;
+  height: 8px;
+  border-radius: 8px;
+  background-color: var(--pbl-theme-colors-gray-100);
 }
 
 .emotion-3 {
   position: absolute;
+  height: 10px;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
+  border-radius: 10px;
+  background-color: var(--pbl-theme-colors-brand-main);
 }
 
 .emotion-4 {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--pbl-theme-colors-common-white);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2),0px 4px 10px rgba(0, 0, 0, 0.1);
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
@@ -210,6 +215,7 @@ exports[`OffsetRangeSlider story snapshot 1`] = `
   transform: translateY(-50%) translateX(-50%);
   cursor: -webkit-grab;
   cursor: grab;
+  border: 1px solid var(--pbl-theme-colors-gray-100);
 }
 
 .emotion-5 {
@@ -297,24 +303,15 @@ exports[`SimpleSlider story snapshot 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  0: f;
-  1: l;
-  2: e;
-  3: x;
-  4: -;
-  5: s;
-  6: h;
-  7: r;
-  8: i;
-  9: n;
-  10: k;
-  13: s;
-  14: h;
-  15: r;
-  16: i;
-  17: n;
-  18: k;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
   width: 100%;
+  height: 16px;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -328,18 +325,29 @@ exports[`SimpleSlider story snapshot 1`] = `
 
 .emotion-2 {
   width: 100%;
+  height: 8px;
+  border-radius: 8px;
+  background-color: var(--pbl-theme-colors-gray-100);
 }
 
 .emotion-3 {
   position: absolute;
+  height: 10px;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
+  border-radius: 10px;
+  background-color: var(--pbl-theme-colors-brand-main);
 }
 
 .emotion-4 {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--pbl-theme-colors-common-white);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2),0px 4px 10px rgba(0, 0, 0, 0.1);
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
@@ -348,6 +356,7 @@ exports[`SimpleSlider story snapshot 1`] = `
   transform: translateY(-50%) translateX(-50%);
   cursor: -webkit-grab;
   cursor: grab;
+  border: 1px solid var(--pbl-theme-colors-gray-100);
 }
 
 .emotion-5 {
@@ -435,24 +444,15 @@ exports[`UpperOutOfBounds story snapshot 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  0: f;
-  1: l;
-  2: e;
-  3: x;
-  4: -;
-  5: s;
-  6: h;
-  7: r;
-  8: i;
-  9: n;
-  10: k;
-  13: s;
-  14: h;
-  15: r;
-  16: i;
-  17: n;
-  18: k;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
   width: 100%;
+  height: 16px;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -466,18 +466,29 @@ exports[`UpperOutOfBounds story snapshot 1`] = `
 
 .emotion-2 {
   width: 100%;
+  height: 8px;
+  border-radius: 8px;
+  background-color: var(--pbl-theme-colors-gray-100);
 }
 
 .emotion-3 {
   position: absolute;
+  height: 10px;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
+  border-radius: 10px;
+  background-color: var(--pbl-theme-colors-brand-main);
 }
 
 .emotion-4 {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--pbl-theme-colors-common-white);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2),0px 4px 10px rgba(0, 0, 0, 0.1);
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
@@ -486,6 +497,7 @@ exports[`UpperOutOfBounds story snapshot 1`] = `
   transform: translateY(-50%) translateX(-50%);
   cursor: -webkit-grab;
   cursor: grab;
+  border: 1px solid var(--pbl-theme-colors-gray-100);
 }
 
 .emotion-5 {
diff --git a/src/Switch/__snapshots__/Switch.spec.tsx.snap b/src/Switch/__snapshots__/Switch.spec.tsx.snap
index 2db8e83..2e943ed 100644
--- a/src/Switch/__snapshots__/Switch.spec.tsx.snap
+++ b/src/Switch/__snapshots__/Switch.spec.tsx.snap
@@ -3,14 +3,14 @@
 exports[`Render switch checked 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-1 {
@@ -98,14 +98,14 @@ exports[`Render switch checked 1`] = `
 exports[`Render switch unchecked 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-1 {
@@ -200,7 +200,6 @@ exports[`Render switch with label 1`] = `
   line-height: var(--pbl-theme-typography-subtitle-lineHeight);
   margin-bottom: var(--pbl-theme-typography-subtitle-marginBottom);
   margin-left: 8px;
-  margin-bottom: 0px;
 }
 
 <label
diff --git a/src/Tabs/__snapshots__/Tabs.spec.tsx.snap b/src/Tabs/__snapshots__/Tabs.spec.tsx.snap
index 6a06406..aede8c9 100644
--- a/src/Tabs/__snapshots__/Tabs.spec.tsx.snap
+++ b/src/Tabs/__snapshots__/Tabs.spec.tsx.snap
@@ -7,14 +7,14 @@ exports[`Render first selected 1`] = `
   opacity: 0;
   margin-left: -4px;
   margin-right: -4px;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .emotion-1 {
@@ -330,6 +330,7 @@ exports[`Render first selected 1`] = `
     class="emotion-0"
     data-testid="pbl-tabs"
     role="tablist"
+    wrap="wrap"
   >
     <button
       aria-selected="true"
@@ -451,14 +452,14 @@ exports[`Render tabs with icons 1`] = `
   opacity: 0;
   margin-left: -4px;
   margin-right: -4px;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .emotion-1 {
@@ -726,6 +727,7 @@ exports[`Render tabs with icons 1`] = `
     class="emotion-0"
     data-testid="pbl-tabs"
     role="tablist"
+    wrap="wrap"
   >
     <button
       aria-selected="false"
@@ -899,14 +901,14 @@ exports[`Show "more" tab when there are too many tabs to fit the content 1`] = `
   box-sizing: border-box;
   margin-left: -4px;
   margin-right: -4px;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .emotion-1 {
@@ -1106,6 +1108,7 @@ exports[`Show "more" tab when there are too many tabs to fit the content 1`] = `
     data-testid="pbl-tabs"
     fake-width="100"
     role="tablist"
+    wrap="wrap"
   >
     <button
       aria-selected="true"
@@ -1220,14 +1223,14 @@ exports[`Work with one tab 1`] = `
   opacity: 0;
   margin-left: -4px;
   margin-right: -4px;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .emotion-1 {
@@ -1428,6 +1431,7 @@ exports[`Work with one tab 1`] = `
     class="emotion-0"
     data-testid="pbl-tabs"
     role="tablist"
+    wrap="wrap"
   >
     <button
       aria-selected="true"
diff --git a/src/ToastCard/__snapshots__/ToastCard.spec.tsx.snap b/src/ToastCard/__snapshots__/ToastCard.spec.tsx.snap
index 100ce42..8c192fe 100644
--- a/src/ToastCard/__snapshots__/ToastCard.spec.tsx.snap
+++ b/src/ToastCard/__snapshots__/ToastCard.spec.tsx.snap
@@ -13,14 +13,14 @@ exports[`Render toast card with no type and with only title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 {
@@ -86,8 +86,8 @@ exports[`Render toast card with no type and with only title 1`] = `
 exports[`type error Render toast card with custom icon 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-negative-main);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-negative-main);
 }
 
 .emotion-0>* {
@@ -121,20 +121,20 @@ exports[`type error Render toast card with only title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-negative-main);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-negative-main);
 }
 
 .emotion-2>* {
@@ -227,8 +227,8 @@ exports[`type error Render toast card with only title 1`] = `
 exports[`type info Render toast card with custom icon 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-common-white);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-common-white);
 }
 
 .emotion-0>* {
@@ -262,20 +262,20 @@ exports[`type info Render toast card with only title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-common-white);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-common-white);
 }
 
 .emotion-2>* {
@@ -368,8 +368,8 @@ exports[`type info Render toast card with only title 1`] = `
 exports[`type success Render toast card with custom icon 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-positive-main);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-positive-main);
 }
 
 .emotion-0>* {
@@ -403,20 +403,20 @@ exports[`type success Render toast card with only title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-positive-main);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-positive-main);
 }
 
 .emotion-2>* {
@@ -509,8 +509,8 @@ exports[`type success Render toast card with only title 1`] = `
 exports[`type undefined Render toast card with custom icon 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-common-white);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-common-white);
 }
 
 .emotion-0>* {
@@ -544,20 +544,20 @@ exports[`type undefined Render toast card with only title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-common-white);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-common-white);
 }
 
 .emotion-2>* {
@@ -639,8 +639,8 @@ exports[`type undefined Render toast card with only title 1`] = `
 exports[`type unknown Render toast card with custom icon 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-common-white);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-common-white);
 }
 
 .emotion-0>* {
@@ -674,20 +674,20 @@ exports[`type unknown Render toast card with only title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-common-white);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-common-white);
 }
 
 .emotion-2>* {
@@ -769,8 +769,8 @@ exports[`type unknown Render toast card with only title 1`] = `
 exports[`type warning Render toast card with custom icon 1`] = `
 .emotion-0 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-neutral-main);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-neutral-main);
 }
 
 .emotion-0>* {
@@ -804,20 +804,20 @@ exports[`type warning Render toast card with only title 1`] = `
 
 .emotion-1 {
   box-sizing: border-box;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 {
   box-sizing: border-box;
-  fill: var(--pbl-theme-colors-neutral-main);
   margin-right: 12px;
+  fill: var(--pbl-theme-colors-neutral-main);
 }
 
 .emotion-2>* {
diff --git a/src/breakpoints/mediaQueryFns.spec.ts b/src/breakpoints/mediaQueryFns.spec.ts
index 9fc72c5..bd17493 100644
--- a/src/breakpoints/mediaQueryFns.spec.ts
+++ b/src/breakpoints/mediaQueryFns.spec.ts
@@ -1,18 +1,18 @@
 import { mediaQueryAbove, mediaQueryBelow, mediaQueryOnly } from './mediaQueryFns';
 
 test('show above mediaQuery with mediaQueryAbove()', () => {
-  const query = mediaQueryAbove('sm', new Map([['sm', 'var']]) as any);
-  expect(query).toBe('only screen and (min-width: var)');
+  const query = mediaQueryAbove('sm', new Map([['sm', 100]]) as any);
+  expect(query).toBe('only screen and (min-width: var(--pbl-theme-breakpoints-sm))');
 });
 
-test('show below mediaQuery with mediaQueryAbove()', () => {
-  const query = mediaQueryBelow('sm', new Map([['sm', 'var']]) as any);
-  expect(query).toBe('only screen and (max-width: calc(var - 1px))');
+test('show below mediaQuery with mediaQueryBelow()', () => {
+  const query = mediaQueryBelow('sm', new Map([['sm', 100]]) as any);
+  expect(query).toBe('only screen and (max-width: calc(var(--pbl-theme-breakpoints-sm) - 1px))');
 });
 
 test('show above mediaQuery with mediaQueryOnly() when index is length - 1', () => {
-  const query = mediaQueryOnly('sm', new Map([['sm', 'var']]) as any);
-  expect(query).toBe('only screen and (min-width: var)');
+  const query = mediaQueryOnly('sm', new Map([['sm', 100]]) as any);
+  expect(query).toBe('only screen and (min-width: var(--pbl-theme-breakpoints-sm))');
 });
 
 test('show between media query with mediaQueryOnly() when index is between first and last', () => {
@@ -23,9 +23,15 @@ test('show between media query with mediaQueryOnly() when index is between first
     ['xl', '400px'],
   ]);
   const query1 = mediaQueryOnly('sm', allBreakpoints as any);
-  expect(query1).toBe('only screen and (min-width: 100px) and (max-width: calc(200px - 1px))');
+  expect(query1).toBe(
+    'only screen and (min-width: var(--pbl-theme-breakpoints-sm)) and (max-width: calc(var(--pbl-theme-breakpoints-md) - 1px))'
+  );
   const query2 = mediaQueryOnly('md', allBreakpoints as any);
-  expect(query2).toBe('only screen and (min-width: 200px) and (max-width: calc(300px - 1px))');
+  expect(query2).toBe(
+    'only screen and (min-width: var(--pbl-theme-breakpoints-md)) and (max-width: calc(var(--pbl-theme-breakpoints-lg) - 1px))'
+  );
   const query3 = mediaQueryOnly('lg', allBreakpoints as any);
-  expect(query3).toBe('only screen and (min-width: 300px) and (max-width: calc(400px - 1px))');
+  expect(query3).toBe(
+    'only screen and (min-width: var(--pbl-theme-breakpoints-lg)) and (max-width: calc(var(--pbl-theme-breakpoints-xl) - 1px))'
+  );
 });
diff --git a/src/breakpoints/mediaQueryFns.ts b/src/breakpoints/mediaQueryFns.ts
index d1d3db1..aa833b9 100644
--- a/src/breakpoints/mediaQueryFns.ts
+++ b/src/breakpoints/mediaQueryFns.ts
@@ -1,14 +1,15 @@
+import { themeVars } from '../theme';
 import { Breakpoint, Breakpoints } from '../theme/breakpoints';
 
 export type MediaQueryFn = (breakpointName: Breakpoint, breakpoints: Breakpoints) => string;
-export const mediaQueryAbove: MediaQueryFn = (breakpointName, breakpoints) => {
-  const value = breakpoints.get(breakpointName);
-  return `only screen and (min-width: ${value})`;
+export const mediaQueryAbove: MediaQueryFn = (breakpointName) => {
+  const varName = themeVars.breakpoints[breakpointName];
+  return `only screen and (min-width: ${varName})`;
 };
 
-export const mediaQueryBelow: MediaQueryFn = (breakpointName, breakpoints) => {
-  const value = breakpoints.get(breakpointName);
-  return `only screen and (max-width: calc(${value} - 1px))`;
+export const mediaQueryBelow: MediaQueryFn = (breakpointName) => {
+  const varName = themeVars.breakpoints[breakpointName];
+  return `only screen and (max-width: calc(${varName} - 1px))`;
 };
 
 export const mediaQueryOnly: MediaQueryFn = (breakpointName, breakpoints) => {
@@ -18,7 +19,9 @@ export const mediaQueryOnly: MediaQueryFn = (breakpointName, breakpoints) => {
     return mediaQueryAbove(breakpointName, breakpoints);
   }
 
-  return `only screen and (min-width: ${allBreakpoints[index][1]}) and (max-width: calc(${
-    allBreakpoints[index + 1][1]
+  const lowerVarName = themeVars.breakpoints[breakpointName];
+  const upperVarName = themeVars.breakpoints[allBreakpoints[index + 1][0]];
+  return `only screen and (min-width: ${lowerVarName}) and (max-width: calc(${
+    upperVarName
   } - 1px))`;
 };
diff --git a/src/styleHelpers/breakpoint.spec.tsx b/src/styleHelpers/breakpoint.spec.tsx
index b250368..5be2c3c 100644
--- a/src/styleHelpers/breakpoint.spec.tsx
+++ b/src/styleHelpers/breakpoint.spec.tsx
@@ -29,7 +29,7 @@ test('Get media query with styles when media query was found', () => {
 
   const { container } = renderComponent(Component);
   expect(container.firstChild).toHaveStyleRule('background-color', 'red', {
-    media: 'only screen and (min-width: 200px)',
+    media: 'only screen and (min-width: var(--pbl-theme-breakpoints-md))',
   });
 });
 
@@ -57,7 +57,7 @@ test('Get media below query with styles when media query was found', () => {
 
   const { container } = renderComponent(Component);
   expect(container.firstChild).toHaveStyleRule('background-color', 'red', {
-    media: 'only screen and (max-width: calc(200px - 1px))',
+    media: 'only screen and (max-width: calc(var(--pbl-theme-breakpoints-md) - 1px))',
   });
 });