@cleartrip/ct-design-tabs 1.1.1 → 1.2.0-beta.0

package/dist/ct-design-tabs.browser.esm.js

@@ -1,217 +1,2 @@
-import { __rest as e, __assign as t } from 'tslib';
-import { jsx as o, jsxs as r } from 'react/jsx-runtime';
-import i, { useTheme as l } from 'styled-components';
-import { forwardRef as n, useCallback as c, useState as a, useRef as d, useEffect as s } from 'react';
-import { Button as u } from '@cleartrip/ct-design-button';
-import f from '@cleartrip/ct-design-use-theme';
-import { Typography as h, TypographyVariant as m } from '@cleartrip/ct-design-typography';
-import b from '@cleartrip/ct-design-use-merge-refs';
-import v from '@cleartrip/ct-design-use-props-state';
-var p = function (e) {
-		switch (e.size) {
-			case 'small':
-			default:
-				return m.B2;
-			case 'medium':
-			case 'large':
-				return m.B1;
-		}
-	},
-	C = function (e) {
-		var t = e.selected,
-			o = e.theme,
-			r = e.focusColor,
-			i = e.color;
-		return t ? r || i || o.color.tab.selectedPrimaryLabel : i || o.color.tab.nonSelectedPrimaryLabel;
-	},
-	g = n(function (r) {
-		var i = r.tabKey,
-			l = r.onClick,
-			n = r.tabIndex,
-			a = r.selected,
-			d = void 0 !== a && a,
-			s = r.label,
-			m = r.disabled,
-			b = r.size,
-			v = r.tabItemCSS,
-			g = void 0 === v ? { label: {}, Root: {} } : v,
-			w = r.css,
-			S = r.focusColor,
-			x = r.children,
-			y = f(),
-			z = (function (o) {
-				o.theme;
-				var r = e(o, ['theme']);
-				return t({ backgroundColor: 'transparent', outline: 0, border: 0 }, r);
-			})(t(t({ theme: y }, w), null == g ? void 0 : g.Root)),
-			I = c(
-				function (e) {
-					m || l(e, r);
-				},
-				[i, l]
-			),
-			k = g.label,
-			H = k.color;
-		return (
-			e(k, ['color']),
-			o(
-				u,
-				t(
-					{ disabled: m, css: z, onClick: I, tabIndex: n },
-					{
-						children: s
-							? o(
-									h,
-									t(
-										{
-											variant: p({ size: b }),
-											colorCode: C({ selected: d, theme: y, focusColor: S, color: H }),
-										},
-										{ children: s }
-									)
-							  )
-							: x,
-					}
-				)
-			)
-		);
-	}),
-	w = i.div(function (o) {
-		var r = o.css,
-			i = o.theme,
-			l = o.isHorizontal,
-			n = void 0 === l || l,
-			c = o.width,
-			a = o.height;
-		return (function (o) {
-			var r = o.theme,
-				i = o.isHorizontal,
-				l = o.width,
-				n = o.height,
-				c = e(o, ['theme', 'isHorizontal', 'width', 'height']);
-			return t(
-				{
-					display: 'flex',
-					flexDirection: i ? 'row' : 'column',
-					width: l || i ? '100%' : '',
-					height: n || !i ? '100%' : '',
-					justifyContent: 'space-between',
-					borderBottomWidth: r.border.width.sm,
-					borderColor: r.color.border.default,
-					borderBottomStyle: r.border.style.solid,
-					cursor: 'pointer',
-					position: 'relative',
-				},
-				c
-			);
-		})(t({ theme: i, isHorizontal: n, width: c, height: a }, r));
-	}),
-	S = i.div(function (e) {
-		return e.theme, { display: 'flex', flexDirection: 'row' };
-	}),
-	x = i.div(function (e) {
-		var t = e.theme,
-			o = e.width,
-			r = e.left;
-		return {
-			position: 'absolute',
-			height: '2px',
-			bottom: 0,
-			transition: 'all ease-in 0.3s',
-			backgroundColor: e.color || t.color.background.primary,
-			width: o,
-			left: r,
-		};
-	}),
-	y = n(function (i, c) {
-		i.children;
-		var u = i.tabList,
-			f = i.selectedTabIndex,
-			h = void 0 === f ? 0 : f,
-			m = i.onClick,
-			p = i.isHorizontal,
-			C = void 0 === p || p,
-			y = i.css,
-			z = i.tabCSS,
-			I = i.focusColor,
-			k = e(i, [
-				'children',
-				'tabList',
-				'selectedTabIndex',
-				'onClick',
-				'isHorizontal',
-				'css',
-				'tabCSS',
-				'focusColor',
-			]),
-			H = l(),
-			L = (function () {
-				var e = a(!1),
-					t = e[0],
-					o = e[1];
-				return (
-					s(function () {
-						o(!0);
-					}, []),
-					t
-				);
-			})(),
-			B = v(h),
-			R = B[0],
-			T = B[1],
-			j = a({ width: 0, left: 0 }),
-			D = j[0],
-			K = j[1],
-			M = d(null),
-			P = d(null),
-			W = b(n, P);
-		s(
-			function () {
-				!(function () {
-					var e, t;
-					if (M.current && void 0 !== R) {
-						var o = M.current.children[R],
-							r = o ? o.getBoundingClientRect() : { left: 0, width: 0 },
-							i = null === (e = P.current) || void 0 === e ? void 0 : e.getBoundingClientRect(),
-							l = {
-								scrollLeft: (null === (t = P.current) || void 0 === t ? void 0 : t.scrollLeft) || 0,
-								left: (null == i ? void 0 : i.left) || 0,
-							},
-							n = l.scrollLeft,
-							c = { left: r.left - l.left + n, width: r.width },
-							a = Math.abs(D.left - c.left),
-							d = Math.abs(D.width - c.width);
-						(a >= 1 || d >= 1) && K(c);
-					}
-				})();
-			},
-			[R]
-		);
-		var q = function (e, t) {
-				T(t.tabIndex || 0), m && m(e, t);
-			},
-			A = u.map(function (e, t) {
-				return o(
-					g,
-					{
-						selected: t === R,
-						tabIndex: t,
-						tabKey: t,
-						onClick: q,
-						label: e.label,
-						tabItemCSS: null == z ? void 0 : z.TabItemCSS,
-						focusColor: I,
-					},
-					t
-				);
-			}),
-			E = t(t({}, D), null == z ? void 0 : z.IndicatorCSS);
-		return r(
-			w,
-			t({ ref: W, theme: H, isHorizontal: C, css: t(t({}, y), null == z ? void 0 : z.Root) }, k, {
-				children: [o(S, t({ ref: M }, { children: A })), L && o(x, t({ color: I }, E))],
-			})
-		);
-	});
-export { g as TabItem, y as Tabs };
+import{__rest as e,__assign as t}from"tslib";import{jsx as o,jsxs as r}from"react/jsx-runtime";import i,{useTheme as l}from"styled-components";import{forwardRef as n,useCallback as s,useState as c,useRef as a,useEffect as d}from"react";import{Button as u}from"@cleartrip/ct-design-button";import{useTheme as f}from"@cleartrip/ct-design-theme";import{Typography as m,TypographyVariant as h}from"@cleartrip/ct-design-typography";import b from"@cleartrip/ct-design-use-merge-refs";import v from"@cleartrip/ct-design-use-prop-state";var p=function(e){switch(e.size){case"small":default:return h.B2;case"medium":case"large":return h.B1}},C=function(e){var t=e.selected,o=e.theme,r=e.focusColor,i=e.color;return t?r||i||o.color.tab.selectedPrimaryLabel:i||o.color.tab.nonSelectedPrimaryLabel},g=n((function(r){var i=r.tabKey,l=r.onClick,n=r.tabIndex,c=r.selected,a=void 0!==c&&c,d=r.label,h=r.disabled,b=r.size,v=r.tabItemCSS,g=void 0===v?{label:{},Root:{}}:v,y=r.css,w=r.focusColor,S=r.children,x=r.styleConfig,I=void 0===x?{}:x,z=f(),k=I.labelTypography,H=I.root,L=function(o){o.theme;var r=e(o,["theme"]);return t({backgroundColor:"transparent",outline:0,border:0},r)}(t(t({theme:z},y),(null==H?void 0:H.css)||(null==g?void 0:g.Root))),B=s((function(e){h||l(e,r)}),[i,l]),N=g.label,T=N.color;return e(N,["color"]),o(u,t({disabled:h,css:L,onClick:B,tabIndex:n,className:null==H?void 0:H.className},{children:d?o(m,t({variant:p({size:b}),colorCode:C({selected:a,theme:z,focusColor:w,color:T}),styleConfig:k},{children:d})):S}))})),y=i.div((function(o){var r=o.css,i=o.theme,l=o.isHorizontal,n=void 0===l||l,s=o.width,c=o.height;return function(o){var r=o.theme,i=o.isHorizontal,l=o.width,n=o.height,s=e(o,["theme","isHorizontal","width","height"]);return t({display:"flex",flexDirection:i?"row":"column",width:l||i?"100%":"",height:n||!i?"100%":"",justifyContent:"space-between",borderBottomWidth:r.border.width.sm,borderColor:r.color.border.default,borderBottomStyle:r.border.style.solid,cursor:"pointer",position:"relative"},s)}(t({theme:i,isHorizontal:n,width:s,height:c},r))})),w=i.div((function(e){e.theme;var o=e.css;return t({display:"flex",flexDirection:"row"},void 0===o?{}:o)})),S=i.div((function(e){var o=e.theme,r=e.width,i=e.left,l=e.color,n=e.css,s=void 0===n?{}:n;return t({position:"absolute",height:"2px",bottom:0,transition:"all ease-in 0.3s",backgroundColor:l||o.color.background.primary,width:r,left:i},s)})),x=n((function(i,s){i.children;var u=i.tabList,f=i.selectedTabIndex,m=void 0===f?0:f,h=i.onClick,p=i.isHorizontal,C=void 0===p||p,x=i.css,I=i.tabCSS,z=i.focusColor,k=i.styleConfig,H=void 0===k?{}:k,L=e(i,["children","tabList","selectedTabIndex","onClick","isHorizontal","css","tabCSS","focusColor","styleConfig"]),B=l(),N=H.indicator,T=H.listItemContainer,R=H.root,j=H.tabItem,D=function(){var e=c(!1),t=e[0],o=e[1];return d((function(){o(!0)}),[]),t}(),K=v(m),M=K[0],P=K[1],W=c({width:0,left:0}),q=W[0],A=W[1],E=a(null),F=a(null),G=b(n,F);d((function(){!function(){var e,t;if(E.current&&void 0!==M){var o=E.current.children[M],r=o?o.getBoundingClientRect():{left:0,width:0},i=null===(e=F.current)||void 0===e?void 0:e.getBoundingClientRect(),l={scrollLeft:(null===(t=F.current)||void 0===t?void 0:t.scrollLeft)||0,left:(null==i?void 0:i.left)||0},n=l.scrollLeft,s={left:r.left-l.left+n,width:r.width},c=Math.abs(q.left-s.left),a=Math.abs(q.width-s.width);(c>=1||a>=1)&&A(s)}}()}),[M]);var J=function(e,t){P(t.tabIndex||0),h&&h(e,t)},O=u.map((function(e,t){return o(g,{selected:t===M,tabIndex:t,tabKey:t,onClick:J,label:e.label,tabItemCSS:null==I?void 0:I.TabItemCSS,focusColor:z,styleConfig:j},t)})),Q=t(t({},q),null==I?void 0:I.IndicatorCSS);return r(y,t({ref:G,theme:B,isHorizontal:C,css:(null==R?void 0:R.css)||t(t({},x),null==I?void 0:I.Root)},L,{children:[o(w,t({ref:E,className:null==T?void 0:T.className,css:null==T?void 0:T.css},{children:O})),D&&o(S,t({color:z},Q,{className:null==N?void 0:N.className,css:null==N?void 0:N.css}))]}))}));export{g as TabItem,x as Tabs};
 //# sourceMappingURL=ct-design-tabs.browser.esm.js.map

package/dist/ct-design-tabs.browser.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-tabs.browser.esm.js","sources":["../packages/components/Tabs/src/style.ts","../packages/components/Tabs/src/TabItem/TabItem.tsx","../packages/components/Tabs/src/Tabs.tsx"],"sourcesContent":[null,null,null],"names":["getLabelVariant","_a","size","TypographyVariant","B2","B1","getTabLabelColor","selected","theme","focusColor","color","tab","selectedPrimaryLabel","nonSelectedPrimaryLabel","TabItem","forwardRef","props","tabKey","onClick","tabIndex","label","disabled","_b","tabItemCSS","Root","css","children","useTheme","tabItemStyles","rest","__rest","__assign","backgroundColor","outline","border","getTabItemStyles","handleClick","useCallback","event","_c","_jsx","Button","Typography","variant","colorCode","StyledTab","styled","div","isHorizontal","width","height","display","flexDirection","justifyContent","borderBottomWidth","sm","borderColor","default","borderBottomStyle","style","solid","cursor","position","getTabStyles","StyledFlexContainer","Indicator","left","bottom","transition","background","primary","Tab","forwardedRef","tabList","selectedTabIndex","tabCSS","isMounted","useState","setIsMounted","useEffect","useMounted","_d","usePropState","selectedIndex","setSelectedIndex","_e","indicatorStyle","setIndicatorStyle","listRef","useRef","tabsRef","handleRef","useMergeRefs","current","undefined","tabMeta","getBoundingClientRect","rect","tabsMeta","scrollLeft","correction","newIndicatorStyle","dStart","Math","abs","dSize","updateIndicatorState","e","tabItem","tabItemList","map","item","index","TabItemCSS","indicatorStyles","IndicatorCSS","_jsxs","ref"],"mappings":"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"}
+{"version":3,"file":"ct-design-tabs.browser.esm.js","sources":["../packages/components/Tabs/src/style.ts","../packages/components/Tabs/src/TabItem/TabItem.tsx","../packages/components/Tabs/src/Tabs.tsx"],"sourcesContent":[null,null,null],"names":["getLabelVariant","_a","size","TypographyVariant","B2","B1","getTabLabelColor","selected","theme","focusColor","color","tab","selectedPrimaryLabel","nonSelectedPrimaryLabel","TabItem","forwardRef","props","tabKey","onClick","tabIndex","label","disabled","_b","tabItemCSS","Root","css","children","_c","styleConfig","useTheme","labelTypography","root","tabItemStyles","rest","__rest","__assign","backgroundColor","outline","border","getTabItemStyles","handleClick","useCallback","event","_d","_jsx","Button","className","Typography","variant","colorCode","StyledTab","styled","div","isHorizontal","width","height","display","flexDirection","justifyContent","borderBottomWidth","sm","borderColor","default","borderBottomStyle","style","solid","cursor","position","getTabStyles","StyledFlexContainer","Indicator","left","bottom","transition","background","primary","Tab","forwardedRef","tabList","selectedTabIndex","tabCSS","indicator","listItemContainer","tabItem","isMounted","useState","setIsMounted","useEffect","useMounted","_e","usePropState","selectedIndex","setSelectedIndex","_f","indicatorStyle","setIndicatorStyle","listRef","useRef","tabsRef","handleRef","useMergeRefs","current","undefined","tabMeta","getBoundingClientRect","rect","tabsMeta","scrollLeft","correction","newIndicatorStyle","dStart","Math","abs","dSize","updateIndicatorState","e","tabItemList","map","item","index","TabItemCSS","indicatorStyles","IndicatorCSS","_jsxs","ref"],"mappings":"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"}

package/dist/ct-design-tabs.cjs.js

@@ -5,282 +5,130 @@ var jsxRuntime = require('react/jsx-runtime');
 var styled = require('styled-components');
 var react = require('react');
 var ctDesignButton = require('@cleartrip/ct-design-button');
-var useTheme = require('@cleartrip/ct-design-use-theme');
+var ctDesignTheme = require('@cleartrip/ct-design-theme');
 var ctDesignTypography = require('@cleartrip/ct-design-typography');
 var useMergeRefs = require('@cleartrip/ct-design-use-merge-refs');
-var usePropState = require('@cleartrip/ct-design-use-props-state');
+var usePropState = require('@cleartrip/ct-design-use-prop-state');
 
-function _interopDefault(e) {
-	return e && e.__esModule ? e : { default: e };
-}
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/ _interopDefault(styled);
-var useTheme__default = /*#__PURE__*/ _interopDefault(useTheme);
-var useMergeRefs__default = /*#__PURE__*/ _interopDefault(useMergeRefs);
-var usePropState__default = /*#__PURE__*/ _interopDefault(usePropState);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var useMergeRefs__default = /*#__PURE__*/_interopDefault(useMergeRefs);
+var usePropState__default = /*#__PURE__*/_interopDefault(usePropState);
 
 var getTabStyles = function (_a) {
-	var theme = _a.theme,
-		isHorizontal = _a.isHorizontal,
-		width = _a.width,
-		height = _a.height,
-		rest = tslib.__rest(_a, ['theme', 'isHorizontal', 'width', 'height']);
-	return tslib.__assign(
-		{
-			display: 'flex',
-			flexDirection: isHorizontal ? 'row' : 'column',
-			width: width || isHorizontal ? '100%' : '',
-			height: height || !isHorizontal ? '100%' : '',
-			justifyContent: 'space-between',
-			borderBottomWidth: theme.border.width.sm,
-			borderColor: theme.color.border.default,
-			borderBottomStyle: theme.border.style.solid,
-			cursor: 'pointer',
-			position: 'relative',
-		},
-		rest
-	);
+    var theme = _a.theme, isHorizontal = _a.isHorizontal, width = _a.width, height = _a.height, rest = tslib.__rest(_a, ["theme", "isHorizontal", "width", "height"]);
+    return (tslib.__assign({ display: 'flex', flexDirection: isHorizontal ? 'row' : 'column', width: width || isHorizontal ? '100%' : '', height: height || !isHorizontal ? '100%' : '', justifyContent: 'space-between', borderBottomWidth: theme.border.width.sm, borderColor: theme.color.border.default, borderBottomStyle: theme.border.style.solid, cursor: 'pointer', position: 'relative' }, rest));
 };
 
 var getTabItemStyles = function (_a) {
-	_a.theme;
-	var rest = tslib.__rest(_a, ['theme']);
-	return tslib.__assign({ backgroundColor: 'transparent', outline: 0, border: 0 }, rest);
+    _a.theme; var rest = tslib.__rest(_a, ["theme"]);
+    return (tslib.__assign({ backgroundColor: 'transparent', outline: 0, border: 0 }, rest));
 };
 var getLabelVariant = function (_a) {
-	var size = _a.size;
-	switch (size) {
-		case 'small': {
-			return ctDesignTypography.TypographyVariant.B2;
-		}
-		case 'medium': {
-			return ctDesignTypography.TypographyVariant.B1;
-		}
-		case 'large': {
-			return ctDesignTypography.TypographyVariant.B1;
-		}
-		default: {
-			return ctDesignTypography.TypographyVariant.B2;
-		}
-	}
+    var size = _a.size;
+    switch (size) {
+        case 'small': {
+            return ctDesignTypography.TypographyVariant.B2;
+        }
+        case 'medium': {
+            return ctDesignTypography.TypographyVariant.B1;
+        }
+        case 'large': {
+            return ctDesignTypography.TypographyVariant.B1;
+        }
+        default: {
+            return ctDesignTypography.TypographyVariant.B2;
+        }
+    }
 };
 var getTabLabelColor = function (_a) {
-	var selected = _a.selected,
-		theme = _a.theme,
-		focusColor = _a.focusColor,
-		color = _a.color;
-	if (selected) {
-		return focusColor || color || theme.color.tab.selectedPrimaryLabel;
-	} else {
-		return color || theme.color.tab.nonSelectedPrimaryLabel;
-	}
+    var selected = _a.selected, theme = _a.theme, focusColor = _a.focusColor, color = _a.color;
+    if (selected) {
+        return focusColor || color || theme.color.tab.selectedPrimaryLabel;
+    }
+    else {
+        return color || theme.color.tab.nonSelectedPrimaryLabel;
+    }
 };
 var TabItem = react.forwardRef(function (props) {
-	var tabKey = props.tabKey,
-		onClick = props.onClick,
-		tabIndex = props.tabIndex,
-		_a = props.selected,
-		selected = _a === void 0 ? false : _a,
-		label = props.label,
-		disabled = props.disabled,
-		size = props.size,
-		_b = props.tabItemCSS,
-		tabItemCSS = _b === void 0 ? { label: {}, Root: {} } : _b,
-		css = props.css,
-		focusColor = props.focusColor,
-		children = props.children;
-	var theme = useTheme__default.default();
-	var tabItemStyles = getTabItemStyles(
-		tslib.__assign(
-			tslib.__assign({ theme: theme }, css),
-			tabItemCSS === null || tabItemCSS === void 0 ? void 0 : tabItemCSS.Root
-		)
-	);
-	var handleClick = react.useCallback(
-		function (event) {
-			if (!disabled) {
-				onClick(event, props);
-			}
-		},
-		[tabKey, onClick]
-	);
-	var _c = tabItemCSS.label,
-		color = _c.color;
-	tslib.__rest(_c, ['color']);
-	return jsxRuntime.jsx(
-		ctDesignButton.Button,
-		tslib.__assign(
-			{ disabled: disabled, css: tabItemStyles, onClick: handleClick, tabIndex: tabIndex },
-			{
-				children: label
-					? jsxRuntime.jsx(
-							ctDesignTypography.Typography,
-							tslib.__assign(
-								{
-									variant: getLabelVariant({ size: size }),
-									colorCode: getTabLabelColor({
-										selected: selected,
-										theme: theme,
-										focusColor: focusColor,
-										color: color,
-									}),
-								},
-								{ children: label }
-							)
-					  )
-					: children,
-			}
-		)
-	);
+    var tabKey = props.tabKey, onClick = props.onClick, tabIndex = props.tabIndex, _a = props.selected, selected = _a === void 0 ? false : _a, label = props.label, disabled = props.disabled, size = props.size, _b = props.tabItemCSS, tabItemCSS = _b === void 0 ? { label: {}, Root: {} } : _b, css = props.css, focusColor = props.focusColor, children = props.children, _c = props.styleConfig, styleConfig = _c === void 0 ? {} : _c;
+    var theme = ctDesignTheme.useTheme();
+    var labelTypography = styleConfig.labelTypography, root = styleConfig.root;
+    var tabItemStyles = getTabItemStyles(tslib.__assign(tslib.__assign({ theme: theme }, css), ((root === null || root === void 0 ? void 0 : root.css) || (tabItemCSS === null || tabItemCSS === void 0 ? void 0 : tabItemCSS.Root))));
+    var handleClick = react.useCallback(function (event) {
+        if (!disabled) {
+            onClick(event, props);
+        }
+    }, [tabKey, onClick]);
+    var _d = tabItemCSS.label, color = _d.color; tslib.__rest(_d, ["color"]);
+    return (jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({ disabled: disabled, css: tabItemStyles, onClick: handleClick, tabIndex: tabIndex, className: root === null || root === void 0 ? void 0 : root.className }, { children: label ? (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: getLabelVariant({ size: size }), colorCode: getTabLabelColor({ selected: selected, theme: theme, focusColor: focusColor, color: color }), styleConfig: labelTypography }, { children: label }))) : (children) })));
 });
 
 var useMounted = function () {
-	var _a = react.useState(false),
-		isMounted = _a[0],
-		setIsMounted = _a[1];
-	react.useEffect(function () {
-		setIsMounted(true);
-	}, []);
-	return isMounted;
+    var _a = react.useState(false), isMounted = _a[0], setIsMounted = _a[1];
+    react.useEffect(function () {
+        setIsMounted(true);
+    }, []);
+    return isMounted;
 };
 var StyledTab = styled__default.default.div(function (_a) {
-	var css = _a.css,
-		theme = _a.theme,
-		_b = _a.isHorizontal,
-		isHorizontal = _b === void 0 ? true : _b,
-		width = _a.width,
-		height = _a.height;
-	return getTabStyles(
-		tslib.__assign({ theme: theme, isHorizontal: isHorizontal, width: width, height: height }, css)
-	);
+    var css = _a.css, theme = _a.theme, _b = _a.isHorizontal, isHorizontal = _b === void 0 ? true : _b, width = _a.width, height = _a.height;
+    return getTabStyles(tslib.__assign({ theme: theme, isHorizontal: isHorizontal, width: width, height: height }, css));
 });
 var StyledFlexContainer = styled__default.default.div(function (_a) {
-	_a.theme;
-	return {
-		display: 'flex',
-		flexDirection: 'row',
-	};
+    _a.theme; var _b = _a.css, css = _b === void 0 ? {} : _b;
+    return (tslib.__assign({ display: 'flex', flexDirection: 'row' }, css));
 });
 var Indicator = styled__default.default.div(function (_a) {
-	var theme = _a.theme,
-		width = _a.width,
-		left = _a.left,
-		color = _a.color;
-	return {
-		position: 'absolute',
-		height: '2px',
-		bottom: 0,
-		transition: 'all ease-in 0.3s',
-		backgroundColor: color || theme.color.background.primary,
-		width: width,
-		left: left,
-	};
+    var theme = _a.theme, width = _a.width, left = _a.left, color = _a.color, _b = _a.css, css = _b === void 0 ? {} : _b;
+    return (tslib.__assign({ position: 'absolute', height: '2px', bottom: 0, transition: 'all ease-in 0.3s', backgroundColor: color || theme.color.background.primary, width: width, left: left }, css));
 });
 var Tab = react.forwardRef(function (_a, forwardedRef) {
-	_a.children;
-	var tabList = _a.tabList,
-		_b = _a.selectedTabIndex,
-		selectedTabIndex = _b === void 0 ? 0 : _b,
-		onClick = _a.onClick,
-		_c = _a.isHorizontal,
-		isHorizontal = _c === void 0 ? true : _c,
-		css = _a.css,
-		tabCSS = _a.tabCSS,
-		focusColor = _a.focusColor,
-		props = tslib.__rest(_a, [
-			'children',
-			'tabList',
-			'selectedTabIndex',
-			'onClick',
-			'isHorizontal',
-			'css',
-			'tabCSS',
-			'focusColor',
-		]);
-	var theme = styled.useTheme();
-	var isMounted = useMounted();
-	var _d = usePropState__default.default(selectedTabIndex),
-		selectedIndex = _d[0],
-		setSelectedIndex = _d[1];
-	var _e = react.useState({ width: 0, left: 0 }),
-		indicatorStyle = _e[0],
-		setIndicatorStyle = _e[1];
-	var listRef = react.useRef(null);
-	var tabsRef = react.useRef(null);
-	var handleRef = useMergeRefs__default.default(react.forwardRef, tabsRef);
-	var updateIndicatorState = function () {
-		var _a, _b;
-		if (listRef.current && selectedIndex !== undefined) {
-			var children = listRef.current.children;
-			var tab = children[selectedIndex];
-			var tabMeta = tab ? tab.getBoundingClientRect() : { left: 0, width: 0 };
-			var rect = (_a = tabsRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-			var tabsMeta = {
-				scrollLeft: ((_b = tabsRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0,
-				left: (rect === null || rect === void 0 ? void 0 : rect.left) || 0,
-			};
-			var correction = tabsMeta.scrollLeft;
-			var startValue = tabMeta.left - tabsMeta.left + correction;
-			var newIndicatorStyle = { left: startValue, width: tabMeta.width };
-			var dStart = Math.abs(indicatorStyle.left - newIndicatorStyle.left);
-			var dSize = Math.abs(indicatorStyle.width - newIndicatorStyle.width);
-			if (dStart >= 1 || dSize >= 1) {
-				setIndicatorStyle(newIndicatorStyle);
-			}
-		}
-	};
-	react.useEffect(
-		function () {
-			updateIndicatorState();
-		},
-		[selectedIndex]
-	);
-	var handleClick = function (e, tabItem) {
-		setSelectedIndex(tabItem.tabIndex || 0);
-		if (onClick) {
-			onClick(e, tabItem);
-		}
-	};
-	var tabItemList = tabList.map(function (item, index) {
-		return jsxRuntime.jsx(
-			TabItem,
-			{
-				selected: index === selectedIndex,
-				tabIndex: index,
-				tabKey: index,
-				onClick: handleClick,
-				label: item.label,
-				tabItemCSS: tabCSS === null || tabCSS === void 0 ? void 0 : tabCSS.TabItemCSS,
-				focusColor: focusColor,
-			},
-			index
-		);
-	});
-	var indicatorStyles = tslib.__assign(
-		tslib.__assign({}, indicatorStyle),
-		tabCSS === null || tabCSS === void 0 ? void 0 : tabCSS.IndicatorCSS
-	);
-	return jsxRuntime.jsxs(
-		StyledTab,
-		tslib.__assign(
-			{
-				ref: handleRef,
-				theme: theme,
-				isHorizontal: isHorizontal,
-				css: tslib.__assign(
-					tslib.__assign({}, css),
-					tabCSS === null || tabCSS === void 0 ? void 0 : tabCSS.Root
-				),
-			},
-			props,
-			{
-				children: [
-					jsxRuntime.jsx(StyledFlexContainer, tslib.__assign({ ref: listRef }, { children: tabItemList })),
-					isMounted && jsxRuntime.jsx(Indicator, tslib.__assign({ color: focusColor }, indicatorStyles)),
-				],
-			}
-		)
-	);
+    _a.children; var tabList = _a.tabList, _b = _a.selectedTabIndex, selectedTabIndex = _b === void 0 ? 0 : _b, onClick = _a.onClick, _c = _a.isHorizontal, isHorizontal = _c === void 0 ? true : _c, css = _a.css, tabCSS = _a.tabCSS, focusColor = _a.focusColor, _d = _a.styleConfig, styleConfig = _d === void 0 ? {} : _d, props = tslib.__rest(_a, ["children", "tabList", "selectedTabIndex", "onClick", "isHorizontal", "css", "tabCSS", "focusColor", "styleConfig"]);
+    var theme = styled.useTheme();
+    var indicator = styleConfig.indicator, listItemContainer = styleConfig.listItemContainer, root = styleConfig.root, tabItem = styleConfig.tabItem;
+    var isMounted = useMounted();
+    var _e = usePropState__default.default(selectedTabIndex), selectedIndex = _e[0], setSelectedIndex = _e[1];
+    var _f = react.useState({ width: 0, left: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
+    var listRef = react.useRef(null);
+    var tabsRef = react.useRef(null);
+    var handleRef = useMergeRefs__default.default(react.forwardRef, tabsRef);
+    var updateIndicatorState = function () {
+        var _a, _b;
+        if (listRef.current && selectedIndex !== undefined) {
+            var children = listRef.current.children;
+            var tab = children[selectedIndex];
+            var tabMeta = tab ? tab.getBoundingClientRect() : { left: 0, width: 0 };
+            var rect = (_a = tabsRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var tabsMeta = {
+                scrollLeft: ((_b = tabsRef.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0,
+                left: (rect === null || rect === void 0 ? void 0 : rect.left) || 0,
+            };
+            var correction = tabsMeta.scrollLeft;
+            var startValue = tabMeta.left - tabsMeta.left + correction;
+            var newIndicatorStyle = { left: startValue, width: tabMeta.width };
+            var dStart = Math.abs(indicatorStyle.left - newIndicatorStyle.left);
+            var dSize = Math.abs(indicatorStyle.width - newIndicatorStyle.width);
+            if (dStart >= 1 || dSize >= 1) {
+                setIndicatorStyle(newIndicatorStyle);
+            }
+        }
+    };
+    react.useEffect(function () {
+        updateIndicatorState();
+    }, [selectedIndex]);
+    var handleClick = function (e, tabItem) {
+        setSelectedIndex(tabItem.tabIndex || 0);
+        if (onClick) {
+            onClick(e, tabItem);
+        }
+    };
+    var tabItemList = tabList.map(function (item, index) {
+        return (jsxRuntime.jsx(TabItem, { selected: index === selectedIndex, tabIndex: index, tabKey: index, onClick: handleClick, label: item.label, tabItemCSS: tabCSS === null || tabCSS === void 0 ? void 0 : tabCSS.TabItemCSS, focusColor: focusColor, styleConfig: tabItem }, index));
+    });
+    var indicatorStyles = tslib.__assign(tslib.__assign({}, indicatorStyle), tabCSS === null || tabCSS === void 0 ? void 0 : tabCSS.IndicatorCSS);
+    return (jsxRuntime.jsxs(StyledTab, tslib.__assign({ ref: handleRef, theme: theme, isHorizontal: isHorizontal, css: (root === null || root === void 0 ? void 0 : root.css) || tslib.__assign(tslib.__assign({}, css), tabCSS === null || tabCSS === void 0 ? void 0 : tabCSS.Root) }, props, { children: [jsxRuntime.jsx(StyledFlexContainer, tslib.__assign({ ref: listRef, className: listItemContainer === null || listItemContainer === void 0 ? void 0 : listItemContainer.className, css: listItemContainer === null || listItemContainer === void 0 ? void 0 : listItemContainer.css }, { children: tabItemList })), isMounted && (jsxRuntime.jsx(Indicator, tslib.__assign({ color: focusColor }, indicatorStyles, { className: indicator === null || indicator === void 0 ? void 0 : indicator.className, css: indicator === null || indicator === void 0 ? void 0 : indicator.css })))] })));
 });
 
 exports.TabItem = TabItem;