@alfalab/core-components-tabs 8.10.0 → 8.10.2

package/moderncssm/components/primary-tablist/index.module.css

@@ -15,28 +15,28 @@
     --primary-tablist-s-font-size: 18px;
     --primary-tablist-s-font-weight: 400;
     --primary-tablist-s-font-family: var(--font-family-system);
-    --primary-tablist-s-padding: 0 0 var(--gap-12);
+    --primary-tablist-s-padding: var(--gap-0) var(--gap-0) var(--gap-12);
 
     /* size m */
     --primary-tablist-m-gaps: var(--gap-32);
     --primary-tablist-m-font-size: 18px;
     --primary-tablist-m-font-weight: 400;
     --primary-tablist-m-font-family: var(--font-family-system);
-    --primary-tablist-m-padding: 0 0 var(--gap-16);
+    --primary-tablist-m-padding: var(--gap-0) var(--gap-0) var(--gap-16);
 
     /* size l */
     --primary-tablist-l-gaps: var(--gap-32);
     --primary-tablist-l-font-size: 18px;
     --primary-tablist-l-font-weight: 400;
     --primary-tablist-l-font-family: var(--font-family-system);
-    --primary-tablist-l-padding: 0 0 var(--gap-20);
+    --primary-tablist-l-padding: var(--gap-0) var(--gap-0) var(--gap-20);
 
     /* size xl */
     --primary-tablist-xl-gaps: var(--gap-32);
     --primary-tablist-xl-font-size: 18px;
     --primary-tablist-xl-font-weight: 400;
     --primary-tablist-xl-font-family: var(--font-family-system);
-    --primary-tablist-xl-padding: 0 0 var(--gap-20);
+    --primary-tablist-xl-padding: var(--gap-0) var(--gap-0) var(--gap-20);
 
     /* mobile */
 
@@ -129,16 +129,16 @@
         margin-left: 24px;
     }
 .desktop.paragraph-primary-large .option, .desktop.paragraph-primary-medium .option, .desktop.accent-primary-large .option, .desktop.accent-primary-medium .option, .desktop.action-primary-large .option, .desktop.action-primary-medium .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.paragraph-primary-large .scrollControls > button, .desktop.paragraph-primary-medium .scrollControls > button, .desktop.accent-primary-large .scrollControls > button, .desktop.accent-primary-medium .scrollControls > button, .desktop.action-primary-large .scrollControls > button, .desktop.action-primary-medium .scrollControls > button {
             box-sizing: content-box;
             width: 24px;
             height: 24px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.paragraph-primary-large .scrollControls button:first-child, .desktop.paragraph-primary-medium .scrollControls button:first-child, .desktop.accent-primary-large .scrollControls button:first-child, .desktop.accent-primary-medium .scrollControls button:first-child, .desktop.action-primary-large .scrollControls button:first-child, .desktop.action-primary-medium .scrollControls button:first-child {
-            margin: 0 0 0 calc(24px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(24px / 2);
         }
 .desktop.paragraph-primary-small .title, .desktop.accent-primary-small .title, .desktop.action-primary-small .title {
         padding-bottom: calc(20px / 2);
@@ -152,16 +152,16 @@
         margin-left: 20px;
     }
 .desktop.paragraph-primary-small .option, .desktop.accent-primary-small .option, .desktop.action-primary-small .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.paragraph-primary-small .scrollControls > button, .desktop.accent-primary-small .scrollControls > button, .desktop.action-primary-small .scrollControls > button {
             box-sizing: content-box;
             width: 20px;
             height: 20px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.paragraph-primary-small .scrollControls button:first-child, .desktop.accent-primary-small .scrollControls button:first-child, .desktop.action-primary-small .scrollControls button:first-child {
-            margin: 0 0 0 calc(20px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(20px / 2);
         }
 .desktop.headline-system-xlarge .title {
         font-size: 48px;
@@ -231,16 +231,16 @@
         margin-left: 52px;
     }
 .desktop.headline-system-xlarge .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.headline-system-xlarge .scrollControls > button {
             box-sizing: content-box;
             width: 52px;
             height: 52px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.headline-system-xlarge .scrollControls button:first-child {
-            margin: 0 0 0 calc(52px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(52px / 2);
         }
 .desktop.headline-system-large .title, .desktop.headline-large .title {
         padding-bottom: calc(48px / 2);
@@ -252,16 +252,16 @@
         margin-left: 48px;
     }
 .desktop.headline-system-large .option, .desktop.headline-large .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.headline-system-large .scrollControls > button, .desktop.headline-large .scrollControls > button {
             box-sizing: content-box;
             width: 48px;
             height: 48px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.headline-system-large .scrollControls button:first-child, .desktop.headline-large .scrollControls button:first-child {
-            margin: 0 0 0 calc(48px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(48px / 2);
         }
 .desktop.headline-system-medium .title {
         padding-bottom: calc(36px / 2);
@@ -271,16 +271,16 @@
         margin-left: 36px;
     }
 .desktop.headline-system-medium .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.headline-system-medium .scrollControls > button {
             box-sizing: content-box;
             width: 36px;
             height: 36px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.headline-system-medium .scrollControls button:first-child {
-            margin: 0 0 0 calc(36px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(36px / 2);
         }
 .desktop.headline-system-small .title {
         padding-bottom: calc(26px / 2);
@@ -290,16 +290,16 @@
         margin-left: 26px;
     }
 .desktop.headline-system-small .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.headline-system-small .scrollControls > button {
             box-sizing: content-box;
             width: 26px;
             height: 26px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.headline-system-small .scrollControls button:first-child {
-            margin: 0 0 0 calc(26px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(26px / 2);
         }
 .desktop.headline-system-xsmall .title {
         padding-bottom: calc(22px / 2);
@@ -309,16 +309,16 @@
         margin-left: 22px;
     }
 .desktop.headline-system-xsmall .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.headline-system-xsmall .scrollControls > button {
             box-sizing: content-box;
             width: 22px;
             height: 22px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.headline-system-xsmall .scrollControls button:first-child {
-            margin: 0 0 0 calc(22px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(22px / 2);
         }
 .desktop.headline-xlarge .title {
         padding-bottom: calc(64px / 2);
@@ -328,16 +328,16 @@
         margin-left: 64px;
     }
 .desktop.headline-xlarge .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.headline-xlarge .scrollControls > button {
             box-sizing: content-box;
             width: 64px;
             height: 64px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.headline-xlarge .scrollControls button:first-child {
-            margin: 0 0 0 calc(64px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(64px / 2);
         }
 .desktop.headline-medium .title {
         padding-bottom: calc(40px / 2);
@@ -347,16 +347,16 @@
         margin-left: 40px;
     }
 .desktop.headline-medium .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.headline-medium .scrollControls > button {
             box-sizing: content-box;
             width: 40px;
             height: 40px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.headline-medium .scrollControls button:first-child {
-            margin: 0 0 0 calc(40px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(40px / 2);
         }
 .desktop.headline-small .title {
         padding-bottom: calc(32px / 2);
@@ -366,16 +366,16 @@
         margin-left: 32px;
     }
 .desktop.headline-small .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.headline-small .scrollControls > button {
             box-sizing: content-box;
             width: 32px;
             height: 32px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.headline-small .scrollControls button:first-child {
-            margin: 0 0 0 calc(32px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(32px / 2);
         }
 .desktop.headline-xsmall .title {
         padding-bottom: calc(24px / 2);
@@ -385,34 +385,34 @@
         margin-left: 24px;
     }
 .desktop.headline-xsmall .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .desktop.headline-xsmall .scrollControls > button {
             box-sizing: content-box;
             width: 24px;
             height: 24px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .desktop.headline-xsmall .scrollControls button:first-child {
-            margin: 0 0 0 calc(24px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(24px / 2);
         }
 .fullWidthScroll {
     min-width: calc(100% - 2 * var(--gap-16));
-    margin: 0 var(--gap-16);
+    margin: var(--gap-0) var(--gap-16);
 }
 .container {
     position: relative;
     overflow: hidden;
 
     /* focus-outline fix */
-    margin: var(--gap-4-neg) 0 var(--gap-4-neg) var(--gap-4-neg);
-    padding: var(--gap-4) 0 var(--gap-4) var(--gap-4);
+    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
+    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
 }
 .title {
     display: flex;
     align-items: center;
     height: 100%;
-    padding: 0;
+    padding: var(--gap-0);
     cursor: pointer;
     color: var(--primary-tablist-color);
     font-feature-settings: var(--primary-tablist-font-feature-settings);
@@ -447,8 +447,8 @@
 .line {
     position: absolute;
     height: 3px;
-    bottom: 0;
-    left: 0;
+    bottom: var(--gap-0);
+    left: var(--gap-0);
     background-color: var(--primary-tablist-line-color);
     transition: transform 0.2s ease, width 0.2s ease;
 }
@@ -470,7 +470,7 @@
         margin-left: var(--primary-tablist-s-gaps);
     }
 .s .option, .xs .option, .xxs .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .m .title {
         padding: var(--primary-tablist-m-padding);
@@ -486,7 +486,7 @@
         margin-left: var(--primary-tablist-m-gaps);
     }
 .m .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .l .title {
         padding: var(--primary-tablist-l-padding);
@@ -502,7 +502,7 @@
         margin-left: var(--primary-tablist-l-gaps);
     }
 .l .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .xl .title {
         padding: var(--primary-tablist-xl-padding);
@@ -518,7 +518,7 @@
         margin-left: var(--primary-tablist-xl-gaps);
     }
 .xl .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .rightAddons {
     display: flex;
@@ -527,5 +527,5 @@
     margin-left: var(--gap-8);
 }
 .rightAddonsMarginZero {
-    margin-left: 0;
+    margin-left: var(--gap-0);
 }

package/moderncssm/components/primary-tablist/mobile.module.css

@@ -7,7 +7,7 @@
     --primary-tablist-mobile-line-height: 24px;
     --primary-tablist-mobile-font-weight: 400;
     --primary-tablist-mobile-font-family: var(--font-family-system);
-    --primary-tablist-mobile-padding: 0 0 var(--gap-12);
+    --primary-tablist-mobile-padding: var(--gap-0) var(--gap-0) var(--gap-12);
 
     /* size s */
 
@@ -107,16 +107,16 @@
         margin-left: 24px;
     }
 .mobile.paragraph-primary-large .option, .mobile.paragraph-primary-medium .option, .mobile.accent-primary-large .option, .mobile.accent-primary-medium .option, .mobile.action-primary-large .option, .mobile.action-primary-medium .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .mobile.paragraph-primary-large .scrollControls > button, .mobile.paragraph-primary-medium .scrollControls > button, .mobile.accent-primary-large .scrollControls > button, .mobile.accent-primary-medium .scrollControls > button, .mobile.action-primary-large .scrollControls > button, .mobile.action-primary-medium .scrollControls > button {
             box-sizing: content-box;
             width: 24px;
             height: 24px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .mobile.paragraph-primary-large .scrollControls button:first-child, .mobile.paragraph-primary-medium .scrollControls button:first-child, .mobile.accent-primary-large .scrollControls button:first-child, .mobile.accent-primary-medium .scrollControls button:first-child, .mobile.action-primary-large .scrollControls button:first-child, .mobile.action-primary-medium .scrollControls button:first-child {
-            margin: 0 0 0 calc(24px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(24px / 2);
         }
 .mobile.paragraph-primary-small .title, .mobile.accent-primary-small .title, .mobile.action-primary-small .title {
         padding-bottom: calc(20px / 2);
@@ -130,16 +130,16 @@
         margin-left: 20px;
     }
 .mobile.paragraph-primary-small .option, .mobile.accent-primary-small .option, .mobile.action-primary-small .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .mobile.paragraph-primary-small .scrollControls > button, .mobile.accent-primary-small .scrollControls > button, .mobile.action-primary-small .scrollControls > button {
             box-sizing: content-box;
             width: 20px;
             height: 20px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .mobile.paragraph-primary-small .scrollControls button:first-child, .mobile.accent-primary-small .scrollControls button:first-child, .mobile.action-primary-small .scrollControls button:first-child {
-            margin: 0 0 0 calc(20px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(20px / 2);
         }
 .mobile.headline-system-xlarge .title {
         font-size: 34px;
@@ -211,16 +211,16 @@
         margin-left: 40px;
     }
 .mobile.headline-system-xlarge .option, .mobile.headline-xlarge .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .mobile.headline-system-xlarge .scrollControls > button, .mobile.headline-xlarge .scrollControls > button {
             box-sizing: content-box;
             width: 40px;
             height: 40px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .mobile.headline-system-xlarge .scrollControls button:first-child, .mobile.headline-xlarge .scrollControls button:first-child {
-            margin: 0 0 0 calc(40px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(40px / 2);
         }
 .mobile.headline-system-large .title, .mobile.headline-large .title {
         padding-bottom: calc(36px / 2);
@@ -232,16 +232,16 @@
         margin-left: 36px;
     }
 .mobile.headline-system-large .option, .mobile.headline-large .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .mobile.headline-system-large .scrollControls > button, .mobile.headline-large .scrollControls > button {
             box-sizing: content-box;
             width: 36px;
             height: 36px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .mobile.headline-system-large .scrollControls button:first-child, .mobile.headline-large .scrollControls button:first-child {
-            margin: 0 0 0 calc(36px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(36px / 2);
         }
 .mobile.headline-system-medium .title, .mobile.headline-medium .title {
         padding-bottom: calc(32px / 2);
@@ -253,16 +253,16 @@
         margin-left: 32px;
     }
 .mobile.headline-system-medium .option, .mobile.headline-medium .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .mobile.headline-system-medium .scrollControls > button, .mobile.headline-medium .scrollControls > button {
             box-sizing: content-box;
             width: 32px;
             height: 32px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .mobile.headline-system-medium .scrollControls button:first-child, .mobile.headline-medium .scrollControls button:first-child {
-            margin: 0 0 0 calc(32px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(32px / 2);
         }
 .mobile.headline-system-small .title, .mobile.headline-small .title {
         padding-bottom: calc(28px / 2);
@@ -274,16 +274,16 @@
         margin-left: 28px;
     }
 .mobile.headline-system-small .option, .mobile.headline-small .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .mobile.headline-system-small .scrollControls > button, .mobile.headline-small .scrollControls > button {
             box-sizing: content-box;
             width: 28px;
             height: 28px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .mobile.headline-system-small .scrollControls button:first-child, .mobile.headline-small .scrollControls button:first-child {
-            margin: 0 0 0 calc(28px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(28px / 2);
         }
 .mobile.headline-system-xsmall .title, .mobile.headline-xsmall .title {
         padding-bottom: calc(20px / 2);
@@ -295,14 +295,14 @@
         margin-left: 20px;
     }
 .mobile.headline-system-xsmall .option, .mobile.headline-xsmall .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 .mobile.headline-system-xsmall .scrollControls > button, .mobile.headline-xsmall .scrollControls > button {
             box-sizing: content-box;
             width: 20px;
             height: 20px;
-            padding: 0;
+            padding: var(--gap-0);
         }
 .mobile.headline-system-xsmall .scrollControls button:first-child, .mobile.headline-xsmall .scrollControls button:first-child {
-            margin: 0 0 0 calc(20px / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc(20px / 2);
         }

package/moderncssm/components/scroll-controls/index.module.css

@@ -62,12 +62,12 @@
         content: '';
         display: block;
         position: absolute;
-        top: 0;
-        left: 0;
+        top: var(--gap-0);
+        left: var(--gap-0);
         width: 1px;
         background-color: transparent;
         transition: background-color 0.3s ease;
-        bottom: 0;
+        bottom: var(--gap-0);
     }
 .secondary.xs {
         width: 76px;

package/moderncssm/components/scrollable-container/index.module.css

@@ -37,8 +37,8 @@
     flex: 1;
 
     /* focus-outline fix */
-    margin: var(--gap-4-neg) 0 var(--gap-4-neg) var(--gap-4-neg);
-    padding: var(--gap-4) 0 var(--gap-4) var(--gap-4)
+    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
+    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4)
 }
 .container::-webkit-scrollbar {
         display: none;
@@ -47,6 +47,6 @@
         flex-shrink: 0;
     }
 .fullWidthScroll {
-    padding-left: 0;
+    padding-left: var(--gap-0);
     margin: var(--gap-4-neg) var(--gap-16-neg);
 }

package/moderncssm/components/secondary-tablist/index.module.css

@@ -36,14 +36,14 @@
     display: inline-flex;
 }
 .fullWidthScroll {
-    margin: 0 var(--gap-16);
+    margin: var(--gap-0) var(--gap-16);
 }
 .container {
     overflow: hidden;
 
     /* focus-outline fix */
-    margin: var(--gap-4-neg) 0 var(--gap-4-neg) var(--gap-4-neg);
-    padding: var(--gap-4) 0 var(--gap-4) var(--gap-4);
+    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
+    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
 }
 .title {
     white-space: nowrap;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-tabs",
-    "version": "8.10.0",
+    "version": "8.10.2",
     "description": "Tabs components",
     "keywords": [],
     "license": "MIT",
@@ -15,14 +15,14 @@
     },
     "dependencies": {
         "@alfalab/core-components-keyboard-focusable": "^4.1.0",
-        "@alfalab/core-components-tag": "^8.4.0",
-        "@alfalab/core-components-picker-button": "^11.8.0",
-        "@alfalab/core-components-badge": "^5.6.0",
+        "@alfalab/core-components-tag": "^8.4.1",
+        "@alfalab/core-components-picker-button": "^11.9.1",
+        "@alfalab/core-components-badge": "^5.6.1",
         "@alfalab/core-components-mq": "^4.3.0",
         "@alfalab/hooks": "^1.13.0",
-        "@alfalab/core-components-shared": "^0.12.0",
-        "@alfalab/core-components-icon-button": "^6.8.0",
-        "@alfalab/core-components-skeleton": "^5.1.0",
+        "@alfalab/core-components-shared": "^0.12.1",
+        "@alfalab/core-components-icon-button": "^6.9.1",
+        "@alfalab/core-components-skeleton": "^5.2.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^3.1.0",
@@ -34,6 +34,6 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0",
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
-    "themesVersion": "13.1.0",
-    "varsVersion": "9.12.0"
+    "themesVersion": "13.2.0",
+    "varsVersion": "9.13.1"
 }

package/src/components/primary-tablist/index.module.css

@@ -25,7 +25,7 @@
 
 .fullWidthScroll {
     min-width: calc(100% - 2 * var(--gap-16));
-    margin: 0 var(--gap-16);
+    margin: var(--gap-0) var(--gap-16);
 }
 
 .container {
@@ -33,15 +33,15 @@
     overflow: hidden;
 
     /* focus-outline fix */
-    margin: var(--gap-4-neg) 0 var(--gap-4-neg) var(--gap-4-neg);
-    padding: var(--gap-4) 0 var(--gap-4) var(--gap-4);
+    margin: var(--gap-4-neg) var(--gap-0) var(--gap-4-neg) var(--gap-4-neg);
+    padding: var(--gap-4) var(--gap-0) var(--gap-4) var(--gap-4);
 }
 
 .title {
     display: flex;
     align-items: center;
     height: 100%;
-    padding: 0;
+    padding: var(--gap-0);
     cursor: pointer;
     color: var(--primary-tablist-color);
     font-feature-settings: var(--primary-tablist-font-feature-settings);
@@ -80,8 +80,8 @@
 .line {
     position: absolute;
     height: 3px;
-    bottom: 0;
-    left: 0;
+    bottom: var(--gap-0);
+    left: var(--gap-0);
     background-color: var(--primary-tablist-line-color);
     transition: transform 0.2s ease, width 0.2s ease;
 }
@@ -112,7 +112,7 @@
     }
 
     & .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 }
 
@@ -134,7 +134,7 @@
     }
 
     & .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 }
 
@@ -156,7 +156,7 @@
     }
 
     & .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 }
 
@@ -178,7 +178,7 @@
     }
 
     & .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 }
 
@@ -189,5 +189,5 @@
     margin-left: var(--gap-8);
 }
 .rightAddonsMarginZero {
-    margin-left: 0;
+    margin-left: var(--gap-0);
 }

package/src/components/primary-tablist/text-styles.module.css

@@ -11,7 +11,7 @@
     }
 
     & .option {
-        padding: 0;
+        padding: var(--gap-0);
     }
 
     & .scrollControls {
@@ -19,11 +19,11 @@
             box-sizing: content-box;
             width: $lh;
             height: $lh;
-            padding: 0;
+            padding: var(--gap-0);
         }
 
         & button:first-child {
-            margin: 0 0 0 calc($lh / 2);
+            margin: var(--gap-0) var(--gap-0) var(--gap-0) calc($lh / 2);
         }
     }
 }