@extrachill/components 0.4.17 → 0.4.19

package/dist/ResponsiveTabs.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { Tabs } from "./Tabs.js";
-export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className = '', classPrefix = 'ec-responsive-tabs', tabsClassName = '', tabsClassPrefix = 'ec-tabs', mobileBreakpoint = 768, accordionClassName = '', showDesktopTabs = true, }) {
+export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className = '', classPrefix = 'ec-responsive-tabs', tabsClassName = '', tabsClassPrefix = 'ec-tabs', mobileBreakpoint = 480, accordionClassName = '', showDesktopTabs = true, }) {
     const [isMobile, setIsMobile] = useState(() => {
         if (typeof window === 'undefined') {
             return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/components",
-  "version": "0.4.17",
+  "version": "0.4.19",
   "description": "Shared React components for the Extra Chill Platform.",
   "type": "module",
   "main": "./dist/index.js",

package/src/ResponsiveTabs.tsx

@@ -25,7 +25,7 @@ export function ResponsiveTabs( {
 	classPrefix = 'ec-responsive-tabs',
 	tabsClassName = '',
 	tabsClassPrefix = 'ec-tabs',
-	mobileBreakpoint = 768,
+	mobileBreakpoint = 480,
 	accordionClassName = '',
 	showDesktopTabs = true,
 }: ResponsiveTabsProps ) {

package/styles/components.scss

@@ -236,13 +236,13 @@
 	color: currentColor;
 }
 
-@media (min-width: 769px) {
+@media (min-width: 481px) {
 	.ec-responsive-tabs__accordion {
 		display: none;
 	}
 }
 
-@media (max-width: 768px) {
+@media (max-width: 480px) {
 	.ec-responsive-tabs .ec-tabs__tabs,
 	.ec-responsive-tabs__desktop-panel {
 		display: none;
@@ -517,7 +517,6 @@
 	}
 
 	.ec-panel {
-		background: var(--background-color, #fff);
 		border-radius: 0;
 		border-left: 0;
 		border-right: 0;
@@ -528,20 +527,6 @@
 		padding-right: var(--spacing-md, 1rem);
 	}
 
-	.ec-panel--depth-0,
-	.ec-panel--depth-2,
-	.ec-section--depth-0,
-	.ec-section--depth-2 {
-		background: var(--card-background, #f1f5f9);
-	}
-
-	.ec-panel--depth-1,
-	.ec-panel--depth-3,
-	.ec-section--depth-1,
-	.ec-section--depth-3 {
-		background: var(--background-color, #fff);
-	}
-
 	.ec-section {
 		border-radius: 0;
 		border-left: 0;