@extrachill/components 0.4.24 → 0.4.26

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.4.26] - 2026-03-26
+
+### Changed
+- add shared block inner wrapper
+
+## [0.4.25] - 2026-03-26
+
+### Changed
+- move shared tab layout into components
+
 ## [0.4.23] - 2026-03-25
 
 ### Changed

package/dist/BlockShellInner.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface BlockShellInnerProps {
+    children: ReactNode;
+    className?: string;
+    classPrefix?: string;
+    maxWidth?: 'none' | 'narrow' | 'wide';
+}
+export declare function BlockShellInner({ children, className, classPrefix, maxWidth, }: BlockShellInnerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BlockShellInner.d.ts.map

package/dist/BlockShellInner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockShellInner.d.ts","sourceRoot":"","sources":["../src/BlockShellInner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;CACtC;AAED,wBAAgB,eAAe,CAAE,EAChC,QAAQ,EACR,SAAc,EACd,WAAoC,EACpC,QAAiB,GACjB,EAAE,oBAAoB,2CAUtB"}

package/dist/BlockShellInner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BlockShellInner({ children, className = '', classPrefix = 'ec-block-shell-inner', maxWidth = 'none', }) {
+    const innerClass = [
+        classPrefix,
+        maxWidth !== 'none' ? `${classPrefix}--${maxWidth}` : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return _jsx("div", { className: innerClass, children: children });
+}

package/dist/ResponsiveTabs.d.ts

@@ -7,6 +7,8 @@ export interface ResponsiveTabsProps {
     renderPanel: (id: string) => ReactNode;
     className?: string;
     classPrefix?: string;
+    innerClassName?: string;
+    innerMaxWidth?: 'none' | 'narrow' | 'wide';
     tabsClassName?: string;
     tabsClassPrefix?: string;
     mobileBreakpoint?: number;
@@ -15,5 +17,5 @@ export interface ResponsiveTabsProps {
     syncWithHash?: boolean;
     hashPrefix?: string;
 }
-export declare function ResponsiveTabs({ tabs, active, onChange, renderPanel, className, classPrefix, tabsClassName, tabsClassPrefix, mobileBreakpoint, accordionClassName, showDesktopTabs, syncWithHash, hashPrefix, }: ResponsiveTabsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ResponsiveTabs({ tabs, active, onChange, renderPanel, className, classPrefix, innerClassName, innerMaxWidth, tabsClassName, tabsClassPrefix, mobileBreakpoint, accordionClassName, showDesktopTabs, syncWithHash, hashPrefix, }: ResponsiveTabsProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ResponsiveTabs.d.ts.map

package/dist/ResponsiveTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,EACtB,YAAoB,EACpB,UAAmB,GACnB,EAAE,mBAAmB,kDA6IrB"}
+{"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,cAAmB,EACnB,aAAsB,EACtB,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,EACtB,YAAoB,EACpB,UAAmB,GACnB,EAAE,mBAAmB,kDAkJrB"}

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 = 480, accordionClassName = '', showDesktopTabs = true, syncWithHash = false, hashPrefix = 'tab-', }) {
+export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className = '', classPrefix = 'ec-responsive-tabs', innerClassName = '', innerMaxWidth = 'none', tabsClassName = '', tabsClassPrefix = 'ec-tabs', mobileBreakpoint = 480, accordionClassName = '', showDesktopTabs = true, syncWithHash = false, hashPrefix = 'tab-', }) {
     const [isMobile, setIsMobile] = useState(() => {
         if (typeof window === 'undefined') {
             return false;
@@ -62,6 +62,7 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
     const rootClass = useMemo(() => [
         classPrefix,
         isMobile ? `${classPrefix}--mobile` : `${classPrefix}--desktop`,
+        innerMaxWidth !== 'none' ? `${classPrefix}--inner-${innerMaxWidth}` : '',
         className,
     ]
         .filter(Boolean)
@@ -70,17 +71,17 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
         return null;
     }
     if (!isMobile) {
-        return (_jsxs("div", { className: rootClass, children: [showDesktopTabs && (_jsx(Tabs, { tabs: tabs, active: active, onChange: handleChange, className: tabsClassName, classPrefix: tabsClassPrefix })), _jsx("div", { className: `${classPrefix}__desktop-panel`, children: renderPanel(active) })] }));
+        return (_jsx("div", { className: rootClass, children: _jsxs("div", { className: [`${classPrefix}__inner`, innerClassName].filter(Boolean).join(' '), children: [showDesktopTabs && (_jsx(Tabs, { tabs: tabs, active: active, onChange: handleChange, className: tabsClassName, classPrefix: tabsClassPrefix })), _jsx("div", { className: `${classPrefix}__desktop-panel`, children: renderPanel(active) })] }) }));
     }
-    return (_jsx("div", { className: rootClass, children: _jsx("div", { className: [`${classPrefix}__accordion`, accordionClassName].filter(Boolean).join(' '), children: tabs.map((tab) => {
-                const isActive = tab.id === mobileActive;
-                return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => {
-                                if (isActive) {
-                                    setMobileActive(null);
-                                    return;
-                                }
-                                setMobileActive(tab.id);
-                                handleChange(tab.id);
-                            }, children: [_jsx("span", { children: tab.label }), _jsx("span", { className: `${classPrefix}__arrow`, "aria-hidden": "true", children: isActive ? '▲' : '▼' })] }), isActive && _jsx("div", { className: `${classPrefix}__panel`, children: renderPanel(tab.id) })] }, tab.id));
-            }) }) }));
+    return (_jsx("div", { className: rootClass, children: _jsx("div", { className: [`${classPrefix}__inner`, innerClassName].filter(Boolean).join(' '), children: _jsx("div", { className: [`${classPrefix}__accordion`, accordionClassName].filter(Boolean).join(' '), children: tabs.map((tab) => {
+                    const isActive = tab.id === mobileActive;
+                    return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => {
+                                    if (isActive) {
+                                        setMobileActive(null);
+                                        return;
+                                    }
+                                    setMobileActive(tab.id);
+                                    handleChange(tab.id);
+                                }, children: [_jsx("span", { children: tab.label }), _jsx("span", { className: `${classPrefix}__arrow`, "aria-hidden": "true", children: isActive ? '▲' : '▼' })] }), isActive && _jsx("div", { className: `${classPrefix}__panel`, children: renderPanel(tab.id) })] }, tab.id));
+                }) }) }) }));
 }

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { Badge, type BadgeProps } from './Badge.tsx';
 export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
 export { MediaField, type MediaFieldProps } from './MediaField.tsx';
 export { BlockShell, type BlockShellProps } from './BlockShell.tsx';
+export { BlockShellInner, type BlockShellInnerProps } from './BlockShellInner.tsx';
 export { BlockIntro, type BlockIntroProps } from './BlockIntro.tsx';
 export { BlockShellHeader, type BlockShellHeaderProps } from './BlockShellHeader.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,KAAK,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAClG,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,KAAK,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAClG,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -23,5 +23,6 @@ export { Badge } from "./Badge.js";
 export { ImagePreview } from "./ImagePreview.js";
 export { MediaField } from "./MediaField.js";
 export { BlockShell } from "./BlockShell.js";
+export { BlockShellInner } from "./BlockShellInner.js";
 export { BlockIntro } from "./BlockIntro.js";
 export { BlockShellHeader } from "./BlockShellHeader.js";

package/package.json

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

package/src/BlockShellInner.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface BlockShellInnerProps {
+	children: ReactNode;
+	className?: string;
+	classPrefix?: string;
+	maxWidth?: 'none' | 'narrow' | 'wide';
+}
+
+export function BlockShellInner( {
+	children,
+	className = '',
+	classPrefix = 'ec-block-shell-inner',
+	maxWidth = 'none',
+}: BlockShellInnerProps ) {
+	const innerClass = [
+		classPrefix,
+		maxWidth !== 'none' ? `${ classPrefix }--${ maxWidth }` : '',
+		className,
+	]
+		.filter( Boolean )
+		.join( ' ' );
+
+	return <div className={ innerClass }>{ children }</div>;
+}

package/src/ResponsiveTabs.tsx

@@ -9,6 +9,8 @@ export interface ResponsiveTabsProps {
 	renderPanel: ( id: string ) => ReactNode;
 	className?: string;
 	classPrefix?: string;
+	innerClassName?: string;
+	innerMaxWidth?: 'none' | 'narrow' | 'wide';
 	tabsClassName?: string;
 	tabsClassPrefix?: string;
 	mobileBreakpoint?: number;
@@ -25,6 +27,8 @@ export function ResponsiveTabs( {
 	renderPanel,
 	className = '',
 	classPrefix = 'ec-responsive-tabs',
+	innerClassName = '',
+	innerMaxWidth = 'none',
 	tabsClassName = '',
 	tabsClassPrefix = 'ec-tabs',
 	mobileBreakpoint = 480,
@@ -111,6 +115,7 @@ export function ResponsiveTabs( {
 		() => [
 			classPrefix,
 			isMobile ? `${ classPrefix }--mobile` : `${ classPrefix }--desktop`,
+			innerMaxWidth !== 'none' ? `${ classPrefix }--inner-${ innerMaxWidth }` : '',
 			className,
 		]
 			.filter( Boolean )
@@ -125,23 +130,26 @@ export function ResponsiveTabs( {
 	if ( ! isMobile ) {
 		return (
 			<div className={ rootClass }>
-				{ showDesktopTabs && (
-					<Tabs
-						tabs={ tabs }
-						active={ active }
-						onChange={ handleChange }
-						className={ tabsClassName }
-						classPrefix={ tabsClassPrefix }
-					/>
-				) }
-				<div className={ `${ classPrefix }__desktop-panel` }>{ renderPanel( active ) }</div>
+				<div className={ [ `${ classPrefix }__inner`, innerClassName ].filter( Boolean ).join( ' ' ) }>
+					{ showDesktopTabs && (
+						<Tabs
+							tabs={ tabs }
+							active={ active }
+							onChange={ handleChange }
+							className={ tabsClassName }
+							classPrefix={ tabsClassPrefix }
+						/>
+					) }
+					<div className={ `${ classPrefix }__desktop-panel` }>{ renderPanel( active ) }</div>
+				</div>
 			</div>
 		);
 	}
 
 	return (
 		<div className={ rootClass }>
-			<div className={ [ `${ classPrefix }__accordion`, accordionClassName ].filter( Boolean ).join( ' ' ) }>
+			<div className={ [ `${ classPrefix }__inner`, innerClassName ].filter( Boolean ).join( ' ' ) }>
+				<div className={ [ `${ classPrefix }__accordion`, accordionClassName ].filter( Boolean ).join( ' ' ) }>
 				{ tabs.map( ( tab ) => {
 					const isActive = tab.id === mobileActive;
 
@@ -170,6 +178,7 @@ export function ResponsiveTabs( {
 						</div>
 					);
 				} ) }
+				</div>
 			</div>
 		</div>
 	);

package/src/index.tsx

@@ -24,5 +24,6 @@ export { Badge, type BadgeProps } from './Badge.tsx';
 export { ImagePreview, type ImagePreviewProps } from './ImagePreview.tsx';
 export { MediaField, type MediaFieldProps } from './MediaField.tsx';
 export { BlockShell, type BlockShellProps } from './BlockShell.tsx';
+export { BlockShellInner, type BlockShellInnerProps } from './BlockShellInner.tsx';
 export { BlockIntro, type BlockIntroProps } from './BlockIntro.tsx';
 export { BlockShellHeader, type BlockShellHeaderProps } from './BlockShellHeader.tsx';

package/styles/components.scss

@@ -149,6 +149,25 @@
 	gap: var(--spacing-md, 1rem);
 }
 
+.ec-responsive-tabs__inner {
+	width: 100%;
+	min-width: 0;
+}
+
+.ec-responsive-tabs--inner-narrow .ec-responsive-tabs__inner {
+	max-width: 700px;
+}
+
+.ec-responsive-tabs--inner-wide .ec-responsive-tabs__inner {
+	max-width: 1080px;
+}
+
+.ec-responsive-tabs .ec-tabs__tabs {
+	padding-bottom: calc(var(--spacing-md, 1rem) + var(--spacing-sm, 0.5rem));
+	margin-bottom: var(--spacing-sm, 0.5rem);
+	border-bottom: 1px solid var(--border-color, #ddd);
+}
+
 .ec-responsive-tabs__desktop-panel {
 	display: grid;
 	background: var(--background-color, #fff);
@@ -230,6 +249,16 @@
 }
 
 @media (max-width: 480px) {
+	.ec-block-shell-inner {
+		max-width: none;
+		padding-left: var(--spacing-md, 1rem);
+		padding-right: var(--spacing-md, 1rem);
+	}
+
+	.ec-responsive-tabs__inner {
+		max-width: none;
+	}
+
 	.ec-responsive-tabs .ec-tabs__tabs,
 	.ec-responsive-tabs__desktop-panel {
 		display: none;
@@ -283,6 +312,21 @@
 	border-radius: var(--border-radius-lg, 8px);
 }
 
+.ec-block-shell-inner {
+	width: 100%;
+	min-width: 0;
+	display: grid;
+	gap: var(--spacing-lg, 1.5rem);
+}
+
+.ec-block-shell-inner--narrow {
+	max-width: 700px;
+}
+
+.ec-block-shell-inner--wide {
+	max-width: 1080px;
+}
+
 .ec-block-intro {
 	display: grid;
 	gap: var(--spacing-sm, 0.5rem);