@c15t/dev-tools 0.0.1-rc.9 → 1.0.1

package/dist/components/ui/card.css

@@ -1,40 +1,41 @@
 .c15t-devtool-card {
-	border: 1px solid var(--c15t-dev-tools-border);
-	background-color: var(--c15t-dev-tools-card);
-	color: var(--c15t-dev-tools-card-foreground);
-	border-radius: .5rem;
-	overflow: hidden;
-	box-shadow: 0 1px 2px #0000000d;
+  border: 1px solid var(--c15t-dev-tools-border);
+  background-color: var(--c15t-dev-tools-card);
+  color: var(--c15t-dev-tools-card-foreground);
+  border-radius: .5rem;
+  overflow: hidden;
+  box-shadow: 0 1px 2px #0000000d;
 }
 
 .c15t-devtool-card-header {
-	flex-direction: column;
-	padding: 1.5rem;
-	display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  display: flex;
 }
 
 .c15t-devtool-card-header > * + * {
-	margin-top: .375rem;
+  margin-top: .375rem;
 }
 
 .c15t-devtool-card-title {
-	letter-spacing: -.025em;
-	font-size: 1.5rem;
-	font-weight: 600;
-	line-height: 1;
+  letter-spacing: -.025em;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1;
 }
 
 .c15t-devtool-card-description {
-	color: var(--c15t-dev-tools-muted-foreground);
-	font-size: .875rem;
+  color: var(--c15t-dev-tools-muted-foreground);
+  font-size: .875rem;
 }
 
 .c15t-devtool-card-content {
-	padding: 0 1.5rem 1.5rem;
+  padding: 0 1.5rem 1.5rem;
 }
 
 .c15t-devtool-card-footer {
-	align-items: center;
-	padding: 0 1.5rem 1.5rem;
-	display: flex;
+  align-items: center;
+  padding: 0 1.5rem 1.5rem;
+  display: flex;
 }
+

package/dist/components/ui/card.d.ts

@@ -1,31 +1,10 @@
 import { type HTMLAttributes } from 'react';
 import './card.css';
-declare const Card: import('react').ForwardRefExoticComponent<
-	HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>
->;
-declare const CardHeader: import('react').ForwardRefExoticComponent<
-	HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>
->;
-declare const CardTitle: import('react').ForwardRefExoticComponent<
-	HTMLAttributes<HTMLHeadingElement> &
-		import('react').RefAttributes<HTMLParagraphElement>
->;
-declare const CardDescription: import('react').ForwardRefExoticComponent<
-	HTMLAttributes<HTMLParagraphElement> &
-		import('react').RefAttributes<HTMLParagraphElement>
->;
-declare const CardContent: import('react').ForwardRefExoticComponent<
-	HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>
->;
-declare const CardFooter: import('react').ForwardRefExoticComponent<
-	HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>
->;
-export {
-	Card,
-	CardHeader,
-	CardFooter,
-	CardTitle,
-	CardDescription,
-	CardContent,
-};
-//# sourceMappingURL=card.d.ts.map
+declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const CardHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+declare const CardFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };
+//# sourceMappingURL=card.d.ts.map

package/dist/components/ui/card.js

@@ -1,81 +1,40 @@
-import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from 'react/jsx-runtime';
-import * as __WEBPACK_EXTERNAL_MODULE_react__ from 'react';
-import './card.css';
-const Card = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(
-	({ className, ...props }, ref) =>
-		/*#__PURE__*/ (0,
-		__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)('div', {
-			ref: ref,
-			className: `c15t-devtool-card ${className || ''}`,
-			...props,
-		})
-);
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import "./card.css";
+const Card = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ref,
+        className: `c15t-devtool-card ${className || ''}`,
+        ...props
+    }));
 Card.displayName = 'Card';
-const CardHeader = /*#__PURE__*/ (0,
-__WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref) =>
-	/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
-		'div',
-		{
-			ref: ref,
-			className: `c15t-devtool-card-header ${className || ''}`,
-			...props,
-		}
-	)
-);
+const CardHeader = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ref,
+        className: `c15t-devtool-card-header ${className || ''}`,
+        ...props
+    }));
 CardHeader.displayName = 'CardHeader';
-const CardTitle = /*#__PURE__*/ (0,
-__WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref) =>
-	/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
-		'h3',
-		{
-			ref: ref,
-			className: `c15t-devtool-card-title ${className || ''}`,
-			...props,
-		}
-	)
-);
+const CardTitle = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("h3", {
+        ref: ref,
+        className: `c15t-devtool-card-title ${className || ''}`,
+        ...props
+    }));
 CardTitle.displayName = 'CardTitle';
-const CardDescription = /*#__PURE__*/ (0,
-__WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref) =>
-	/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
-		'p',
-		{
-			ref: ref,
-			className: `c15t-devtool-card-description ${className || ''}`,
-			...props,
-		}
-	)
-);
-CardDescription.displayName = 'CardDescription';
-const CardContent = /*#__PURE__*/ (0,
-__WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref) =>
-	/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
-		'div',
-		{
-			ref: ref,
-			className: `c15t-devtool-card-content ${className || ''}`,
-			...props,
-		}
-	)
-);
+const CardDescription = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
+        ref: ref,
+        className: `c15t-devtool-card-description ${className || ''}`,
+        ...props
+    }));
+CardDescription.displayName = "CardDescription";
+const CardContent = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ref,
+        className: `c15t-devtool-card-content ${className || ''}`,
+        ...props
+    }));
 CardContent.displayName = 'CardContent';
-const CardFooter = /*#__PURE__*/ (0,
-__WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref) =>
-	/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(
-		'div',
-		{
-			ref: ref,
-			className: `c15t-devtool-card-footer ${className || ''}`,
-			...props,
-		}
-	)
-);
+const CardFooter = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, ...props }, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ref,
+        className: `c15t-devtool-card-footer ${className || ''}`,
+        ...props
+    }));
 CardFooter.displayName = 'CardFooter';
-export {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-};
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/ui/error-state.css

@@ -1,33 +1,34 @@
 .c15t-devtool-error-state {
-	text-align: center;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	min-height: 400px;
-	display: flex;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  display: flex;
 }
 
 .c15t-devtool-error-state-icon {
-	color: var(--c15t-dev-tools-muted-foreground);
-	margin-bottom: 1.5rem;
+  color: var(--c15t-dev-tools-muted-foreground);
+  margin-bottom: 1.5rem;
 }
 
 .c15t-devtool-error-state-title {
-	margin-bottom: .5rem;
-	font-size: 1.5rem;
-	font-weight: 500;
-	line-height: 1;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1;
 }
 
 .c15t-devtool-error-state-description {
-	max-width: 400px;
-	color: var(--c15t-dev-tools-muted-foreground);
-	margin-bottom: 1.5rem;
-	font-size: .875rem;
-	line-height: 1.5;
+  max-width: 400px;
+  color: var(--c15t-dev-tools-muted-foreground);
+  margin-bottom: 1.5rem;
+  font-size: .875rem;
+  line-height: 1.5;
 }
 
 .c15t-devtool-error-state-actions {
-	gap: .5rem;
-	display: flex;
+  gap: .5rem;
+  display: flex;
 }
+

package/dist/components/ui/expandable-tabs.cjs

@@ -1,176 +1,136 @@
 'use client';
-'use strict';
+"use strict";
 var __webpack_require__ = {};
-(() => {
-	__webpack_require__.d = function (exports1, definition) {
-		for (var key in definition)
-			if (
-				__webpack_require__.o(definition, key) &&
-				!__webpack_require__.o(exports1, key)
-			)
-				Object.defineProperty(exports1, key, {
-					enumerable: true,
-					get: definition[key],
-				});
-	};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
 })();
-(() => {
-	__webpack_require__.o = function (obj, prop) {
-		return Object.prototype.hasOwnProperty.call(obj, prop);
-	};
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
-(() => {
-	__webpack_require__.r = function (exports1) {
-		if ('undefined' != typeof Symbol && Symbol.toStringTag)
-			Object.defineProperty(exports1, Symbol.toStringTag, {
-				value: 'Module',
-			});
-		Object.defineProperty(exports1, '__esModule', {
-			value: true,
-		});
-	};
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
 })();
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-	ExpandableTabs: () => ExpandableTabs,
+    ExpandableTabs: ()=>ExpandableTabs
 });
-const jsx_runtime_namespaceObject = require('react/jsx-runtime');
-const react_namespaceObject = require('motion/react');
-const external_react_namespaceObject = require('react');
-require('./expandable-tabs.css');
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_namespaceObject = require("motion/react");
+const external_react_namespaceObject = require("react");
+require("./expandable-tabs.css");
 const buttonVariants = {
-	initial: {
-		gap: 0,
-		paddingLeft: '.5rem',
-		paddingRight: '.5rem',
-	},
-	animate: (isSelected) => ({
-		gap: isSelected ? '.5rem' : 0,
-		paddingLeft: isSelected ? '1rem' : '.5rem',
-		paddingRight: isSelected ? '1rem' : '.5rem',
-	}),
+    initial: {
+        gap: 0,
+        paddingLeft: '.5rem',
+        paddingRight: '.5rem'
+    },
+    animate: (isSelected)=>({
+            gap: isSelected ? '.5rem' : 0,
+            paddingLeft: isSelected ? '1rem' : '.5rem',
+            paddingRight: isSelected ? '1rem' : '.5rem'
+        })
 };
 const spanVariants = {
-	initial: {
-		width: 0,
-		opacity: 0,
-	},
-	animate: {
-		width: 'auto',
-		opacity: 1,
-	},
-	exit: {
-		width: 0,
-		opacity: 0,
-	},
+    initial: {
+        width: 0,
+        opacity: 0
+    },
+    animate: {
+        width: 'auto',
+        opacity: 1
+    },
+    exit: {
+        width: 0,
+        opacity: 0
+    }
 };
 const transition = {
-	delay: 0.1,
-	type: 'spring',
-	bounce: 0,
-	duration: 0.6,
+    delay: 0.1,
+    type: 'spring',
+    bounce: 0,
+    duration: 0.6
 };
-const Separator = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(() =>
-	/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)('div', {
-		className: 'c15t-devtool-tab-separator',
-		'aria-hidden': 'true',
-	})
-);
+const Separator = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "c15t-devtool-tab-separator",
+        "aria-hidden": "true"
+    }));
 Separator.displayName = 'Separator';
-const TabButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(
-	({ tab, index, isSelected, activeColor, onClick }) => {
-		const Icon = tab.icon;
-		return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(
-			react_namespaceObject.motion.button,
-			{
-				variants: buttonVariants,
-				initial: false,
-				animate: 'animate',
-				custom: isSelected,
-				onClick: () => onClick(index),
-				transition: transition,
-				className: `c15t-devtool-tab-button ${isSelected ? `selected ${activeColor}` : ''}`,
-				children: [
-					/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
-						size: 20,
-					}),
-					/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
-						react_namespaceObject.AnimatePresence,
-						{
-							initial: false,
-							children:
-								isSelected &&
-								/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
-									react_namespaceObject.motion.span,
-									{
-										variants: spanVariants,
-										initial: 'initial',
-										animate: 'animate',
-										exit: 'exit',
-										transition: transition,
-										className: 'c15t-devtool-tab-title',
-										children: tab.title,
-									}
-								),
-						}
-					),
-				],
-			}
-		);
-	}
-);
+const TabButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ tab, index, isSelected, activeColor, onClick })=>{
+    const Icon = tab.icon;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.motion.button, {
+        variants: buttonVariants,
+        initial: false,
+        animate: "animate",
+        custom: isSelected,
+        onClick: ()=>onClick(index),
+        transition: transition,
+        className: `c15t-devtool-tab-button ${isSelected ? `selected ${activeColor}` : ''}`,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Icon, {
+                size: 20
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
+                initial: false,
+                children: isSelected && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.motion.span, {
+                    variants: spanVariants,
+                    initial: "initial",
+                    animate: "animate",
+                    exit: "exit",
+                    transition: transition,
+                    className: "c15t-devtool-tab-title",
+                    children: tab.title
+                })
+            })
+        ]
+    });
+});
 TabButton.displayName = 'TabButton';
-function ExpandableTabs({
-	tabs,
-	className,
-	activeColor = 'primary',
-	onChange,
-}) {
-	const [selected, setSelected] = (0, external_react_namespaceObject.useState)(
-		0
-	);
-	const handleInitialChange = (0,
-	external_react_namespaceObject.useCallback)(() => {
-		onChange?.(0);
-	}, [onChange]);
-	(0, external_react_namespaceObject.useEffect)(() => {
-		handleInitialChange();
-	}, [handleInitialChange]);
-	const handleSelect = (0, external_react_namespaceObject.useCallback)(
-		(index) => {
-			setSelected(index);
-			onChange?.(index);
-		},
-		[onChange]
-	);
-	return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)('div', {
-		className: `c15t-devtool-tabs-container ${className || ''}`,
-		children: tabs.map((tab, index) =>
-			'separator' === tab.type
-				? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
-						Separator,
-						{},
-						`separator-${index}`
-					)
-				: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
-						TabButton,
-						{
-							tab: tab,
-							index: index,
-							isSelected: selected === index,
-							activeColor: activeColor,
-							onClick: handleSelect,
-						},
-						`${tab.title}-${index}`
-					)
-		),
-	});
+function ExpandableTabs({ tabs, className, activeColor = 'primary', onChange }) {
+    const [selected, setSelected] = (0, external_react_namespaceObject.useState)(0);
+    const handleInitialChange = (0, external_react_namespaceObject.useCallback)(()=>{
+        onChange?.(0);
+    }, [
+        onChange
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        handleInitialChange();
+    }, [
+        handleInitialChange
+    ]);
+    const handleSelect = (0, external_react_namespaceObject.useCallback)((index)=>{
+        setSelected(index);
+        onChange?.(index);
+    }, [
+        onChange
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: `c15t-devtool-tabs-container ${className || ''}`,
+        children: tabs.map((tab, index)=>'separator' === tab.type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Separator, {}, `separator-${index}`) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TabButton, {
+                tab: tab,
+                index: index,
+                isSelected: selected === index,
+                activeColor: activeColor,
+                onClick: handleSelect
+            }, `${tab.title}-${index}`))
+    });
 }
-var __webpack_export_target__ = exports;
-for (var __webpack_i__ in __webpack_exports__)
-	__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule)
-	Object.defineProperty(__webpack_export_target__, '__esModule', {
-		value: true,
-	});
+exports.ExpandableTabs = __webpack_exports__.ExpandableTabs;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "ExpandableTabs"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/expandable-tabs.css

@@ -1,56 +1,57 @@
 .c15t-devtool-tabs-container {
-	border: 1px solid var(--c15t-dev-tools-border);
-	background-color: var(--c15t-dev-tools-background);
-	border-radius: 1rem;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: .5rem;
-	padding: .25rem;
-	display: flex;
-	box-shadow: 0 1px 2px #0000000d;
+  border: 1px solid var(--c15t-dev-tools-border);
+  background-color: var(--c15t-dev-tools-background);
+  border-radius: 1rem;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem;
+  padding: .25rem;
+  display: flex;
+  box-shadow: 0 1px 2px #0000000d;
 }
 
 .c15t-devtool-tab-separator {
-	background-color: var(--border);
-	width: 1.2px;
-	height: 24px;
-	margin-left: .25rem;
-	margin-right: .25rem;
+  background-color: var(--border);
+  width: 1.2px;
+  height: 24px;
+  margin-left: .25rem;
+  margin-right: .25rem;
 }
 
 .c15t-devtool-tab-button {
-	border-radius: .75rem;
-	flex-grow: 1;
-	justify-content: center;
-	align-items: center;
-	padding: .5rem 1rem;
-	font-size: .875rem;
-	font-weight: 500;
-	transition-property: color, background-color;
-	transition-duration: .3s;
-	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-	display: flex;
-	position: relative;
+  border-radius: .75rem;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  padding: .5rem 1rem;
+  font-size: .875rem;
+  font-weight: 500;
+  transition-property: color, background-color;
+  transition-duration: .3s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  display: flex;
+  position: relative;
 }
 
 .c15t-devtool-tab-button:not(.selected) {
-	color: var(--c15t-dev-tools-muted-foreground);
+  color: var(--c15t-dev-tools-muted-foreground);
 }
 
 .c15t-devtool-tab-button:not(.selected):hover {
-	background-color: var(--c15t-dev-tools-muted);
-	color: var(--c15t-dev-tools-foreground);
+  background-color: var(--c15t-dev-tools-muted);
+  color: var(--c15t-dev-tools-foreground);
 }
 
 .c15t-devtool-tab-button.selected {
-	background-color: var(--c15t-dev-tools-muted);
+  background-color: var(--c15t-dev-tools-muted);
 }
 
 .c15t-devtool-tab-button.selected.primary {
-	color: var(--c15t-dev-tools-primary);
+  color: var(--c15t-dev-tools-primary);
 }
 
 .c15t-devtool-tab-title {
-	white-space: nowrap;
-	overflow: hidden;
+  white-space: nowrap;
+  overflow: hidden;
 }
+