wex-ui-lib 1.4.1 → 1.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +35 -27
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +4 -4
- package/dist/index.esm.js +35 -27
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Footer/Footer.types.d.ts +2 -1
- package/dist/types/components/Navbar/Navbar.stories.d.ts +1 -0
- package/dist/types/components/Navbar/Navbar.types.d.ts +1 -2
- package/dist/types/components/Tabs/Tabs.d.ts +2 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -41,10 +41,9 @@ type ButtonProps = {
|
|
|
41
41
|
declare function Button(props: ButtonProps): React$1.JSX.Element;
|
|
42
42
|
|
|
43
43
|
type NavbarProps = {
|
|
44
|
-
config
|
|
44
|
+
config?: {
|
|
45
45
|
colors?: ComponentColors;
|
|
46
46
|
height?: string;
|
|
47
|
-
centeredItems?: boolean;
|
|
48
47
|
};
|
|
49
48
|
logo?: {
|
|
50
49
|
url: string;
|
|
@@ -123,8 +122,8 @@ type FooterProps = {
|
|
|
123
122
|
url: string;
|
|
124
123
|
callback?: () => void;
|
|
125
124
|
};
|
|
125
|
+
colors?: ComponentColors;
|
|
126
126
|
subtitle?: string;
|
|
127
|
-
backgroundColor?: string;
|
|
128
127
|
socialMediaUrls?: {
|
|
129
128
|
instagram?: string;
|
|
130
129
|
twitter?: string;
|
|
@@ -190,12 +189,13 @@ type EntrySelectorProps = {
|
|
|
190
189
|
declare function EntrySelector(props: EntrySelectorProps): React$1.JSX.Element;
|
|
191
190
|
|
|
192
191
|
interface TabsProps {
|
|
192
|
+
activeTabId?: string;
|
|
193
193
|
tabPadding?: string;
|
|
194
194
|
accentColor?: string;
|
|
195
195
|
displayMode?: DisplayMode;
|
|
196
196
|
font?: Font;
|
|
197
197
|
tabs: {
|
|
198
|
-
id
|
|
198
|
+
id: string;
|
|
199
199
|
label: string;
|
|
200
200
|
content: React$1.ReactNode;
|
|
201
201
|
}[];
|
package/dist/index.esm.js
CHANGED
|
@@ -2174,9 +2174,9 @@ var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4
|
|
|
2174
2174
|
function Navbar(props) {
|
|
2175
2175
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
2176
2176
|
return (React__default.createElement(React__default.Fragment, null,
|
|
2177
|
-
React__default.createElement(NavbarContainer, {
|
|
2177
|
+
React__default.createElement(NavbarContainer, __assign({}, props),
|
|
2178
2178
|
React__default.createElement(Logo$1, { src: logo === null || logo === undefined ? undefined : logo.url, width: logo === null || logo === undefined ? undefined : logo.width, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
|
|
2179
|
-
React__default.createElement(ItemsContainer,
|
|
2179
|
+
React__default.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
|
|
2180
2180
|
var _a, _b;
|
|
2181
2181
|
return (React__default.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
|
|
2182
2182
|
e.preventDefault();
|
|
@@ -2193,12 +2193,12 @@ function Navbar(props) {
|
|
|
2193
2193
|
} }, subitem.label)));
|
|
2194
2194
|
})))));
|
|
2195
2195
|
})),
|
|
2196
|
-
button
|
|
2196
|
+
button && (React__default.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))));
|
|
2197
2197
|
}
|
|
2198
|
-
var NavbarContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n
|
|
2199
|
-
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 100%;\n
|
|
2200
|
-
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"], ["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"])), function (props) { var _a; return ((_a = props.config
|
|
2201
|
-
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"], ["\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"])), function (props) { return props.width || '130px'; }, function (props) { return props.width || '130px'; });
|
|
2198
|
+
var NavbarContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n ", ";\n ", ";\n grid-template-rows: 100%;\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n grid-area: button;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n ", ";\n ", ";\n grid-template-rows: 100%;\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n grid-area: button;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.background) || theme.black; }, function (props) { var _a; return ((_a = props.config) === null || _a === undefined ? undefined : _a.height) || '80px'; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-columns: auto auto auto" : "grid-template-columns: auto auto"; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-areas: \"logo items button\"" : "grid-template-areas: \"logo items\""; });
|
|
2199
|
+
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"], ["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"])));
|
|
2200
|
+
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"], ["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, theme.gray, disappearAnimation, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.textHover) || theme.primary; }, appearAnimation, function (props) { var _a, _b; return !props.hasSubitems ? ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.borderHover) || "white" : "transparent"; }, appearAnimation);
|
|
2201
|
+
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n grid-area: logo;\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"], ["\n grid-area: logo;\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"])), function (props) { return props.width || '130px'; }, function (props) { return props.width || '130px'; });
|
|
2202
2202
|
var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"], ["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"])));
|
|
2203
2203
|
var templateObject_1$9, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
|
|
2204
2204
|
|
|
@@ -2431,21 +2431,21 @@ function Footer(props) {
|
|
|
2431
2431
|
var _a = props.logo, logo = _a === undefined ? {
|
|
2432
2432
|
url: "",
|
|
2433
2433
|
callback: function () { }
|
|
2434
|
-
} : _a, subtitle = props.subtitle,
|
|
2434
|
+
} : _a, subtitle = props.subtitle, _b = props.colors, colors = _b === undefined ? {} : _b, _c = props.socialMediaUrls, socialMediaUrls = _c === undefined ? {
|
|
2435
2435
|
instagram: "",
|
|
2436
2436
|
twitter: "",
|
|
2437
2437
|
facebook: "",
|
|
2438
2438
|
linkedin: "",
|
|
2439
2439
|
youtube: ""
|
|
2440
|
-
} :
|
|
2440
|
+
} : _c, _d = props.contactData, contactData = _d === undefined ? {
|
|
2441
2441
|
phone: "",
|
|
2442
2442
|
phone2: "",
|
|
2443
2443
|
email: "",
|
|
2444
2444
|
email2: "",
|
|
2445
2445
|
address: "",
|
|
2446
2446
|
address2: "",
|
|
2447
|
-
} :
|
|
2448
|
-
return (React__default.createElement(Container$3, {
|
|
2447
|
+
} : _d, navItems = props.navItems;
|
|
2448
|
+
return (React__default.createElement(Container$3, { colors: colors },
|
|
2449
2449
|
React__default.createElement(Logo, { onClick: function () { return logo.callback; }, src: logo.url, alt: "logo" }),
|
|
2450
2450
|
React__default.createElement(Subtitle, null, subtitle),
|
|
2451
2451
|
React__default.createElement(SocialMedia, null,
|
|
@@ -2468,7 +2468,7 @@ function Footer(props) {
|
|
|
2468
2468
|
contactData.email2 && React__default.createElement("p", null, contactData.email2)),
|
|
2469
2469
|
React__default.createElement(Nav, null, navItems && navItems.map(function (item, index) { return React__default.createElement("a", { key: index, onClick: item.callback }, item.label); }))));
|
|
2470
2470
|
}
|
|
2471
|
-
var Container$3 = newStyled.footer(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n
|
|
2471
|
+
var Container$3 = newStyled.footer(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n border-top: 2px solid ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n display: grid;\n gap: 18px;\n grid-template-columns: auto auto auto;\n grid-template-rows: auto auto auto;\n grid-template-areas: \n \"logo . contactData\"\n \"subtitle . contactData\"\n \"socialMedia . nav\"\n ;\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 34px 4vw;\n gap: 40px;\n grid-template-areas: \n \"logo\"\n \"subtitle\"\n \"nav\"\n \"contactData\"\n \"socialMedia\"\n ;\n }\n"], ["\n width: 100%;\n background-color: ", ";\n border-top: 2px solid ", ";\n padding: 48px;\n color: white;\n font-weight: 400;\n font-size: 14px;\n display: grid;\n gap: 18px;\n grid-template-columns: auto auto auto;\n grid-template-rows: auto auto auto;\n grid-template-areas: \n \"logo . contactData\"\n \"subtitle . contactData\"\n \"socialMedia . nav\"\n ;\n @media only screen and (max-width: 1024px) {\n grid-template-columns: 1fr;\n padding: 34px 4vw;\n gap: 40px;\n grid-template-areas: \n \"logo\"\n \"subtitle\"\n \"nav\"\n \"contactData\"\n \"socialMedia\"\n ;\n }\n"])), function (props) { return props.colors.background || theme.black2; }, function (props) { return props.colors.border || theme.black2; });
|
|
2472
2472
|
var Logo = newStyled.img(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n grid-area: logo;\n max-width: 160px;\n cursor: pointer;\n transition: 200ms;\n &:hover {\n filter: brightness(1.2);\n }\n"], ["\n grid-area: logo;\n max-width: 160px;\n cursor: pointer;\n transition: 200ms;\n &:hover {\n filter: brightness(1.2);\n }\n"])));
|
|
2473
2473
|
var Subtitle = newStyled.h5(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n grid-area: subtitle;\n font-size: 16px;\n letter-spacing: .5px;\n"], ["\n grid-area: subtitle;\n font-size: 16px;\n letter-spacing: .5px;\n"])));
|
|
2474
2474
|
var SocialMedia = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n grid-area: socialMedia;\n display: flex;\n gap: 12px;\n"], ["\n grid-area: socialMedia;\n display: flex;\n gap: 12px;\n"])));
|
|
@@ -2536,29 +2536,37 @@ var ItemContent = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __ma
|
|
|
2536
2536
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
|
|
2537
2537
|
|
|
2538
2538
|
var Tabs = function (_a) {
|
|
2539
|
-
var
|
|
2540
|
-
var
|
|
2541
|
-
var
|
|
2539
|
+
var _b, _c;
|
|
2540
|
+
var tabs = _a.tabs, font = _a.font, _d = _a.displayMode, displayMode = _d === undefined ? "dark" : _d, accentColor = _a.accentColor, tabPadding = _a.tabPadding, onTabChange = _a.onTabChange, activeTabId = _a.activeTabId;
|
|
2541
|
+
var _e = useState((_b = tabs[0]) === null || _b === undefined ? undefined : _b.id), internalActiveTabId = _e[0], setInternalActiveTabId = _e[1];
|
|
2542
|
+
var isControlled = activeTabId !== undefined;
|
|
2543
|
+
var activeTab = isControlled ? activeTabId : internalActiveTabId;
|
|
2544
|
+
var _f = useState({ left: 0, width: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
|
|
2542
2545
|
var tabRefs = useRef([]);
|
|
2543
2546
|
useEffect(function () {
|
|
2544
|
-
onTabChange && onTabChange(
|
|
2545
|
-
var updateIndicator = function (
|
|
2546
|
-
var
|
|
2547
|
-
if (
|
|
2548
|
-
|
|
2547
|
+
onTabChange && onTabChange(activeTab);
|
|
2548
|
+
var updateIndicator = function () {
|
|
2549
|
+
var index = tabs.findIndex(function (tab) { return tab.id === activeTab; });
|
|
2550
|
+
if (index !== -1) {
|
|
2551
|
+
var tab = tabRefs.current[index];
|
|
2552
|
+
if (tab) {
|
|
2553
|
+
setIndicatorStyle({ left: tab.offsetLeft, width: tab.offsetWidth });
|
|
2554
|
+
}
|
|
2549
2555
|
}
|
|
2550
2556
|
};
|
|
2551
|
-
updateIndicator(
|
|
2557
|
+
updateIndicator();
|
|
2552
2558
|
}, [activeTab]);
|
|
2559
|
+
var handleTabClick = function (id) {
|
|
2560
|
+
if (!isControlled) {
|
|
2561
|
+
setInternalActiveTabId(id);
|
|
2562
|
+
}
|
|
2563
|
+
onTabChange === null || onTabChange === undefined ? undefined : onTabChange(id);
|
|
2564
|
+
};
|
|
2553
2565
|
return (React__default.createElement(TabsContainer, null,
|
|
2554
2566
|
React__default.createElement(TabsList, null,
|
|
2555
|
-
tabs.map(function (tab, index) { return (React__default.createElement(Tab
|
|
2556
|
-
// @ts-ignore
|
|
2557
|
-
, {
|
|
2558
|
-
// @ts-ignore
|
|
2559
|
-
ref: function (el) { return (tabRefs.current[index] = el); }, key: index, active: activeTab === index, onClick: function () { return setActiveTab(index); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
|
|
2567
|
+
tabs.map(function (tab, index) { return (React__default.createElement(Tab, { ref: function (el) { tabRefs.current[index] = el; }, key: tab.id, active: activeTab === tab.id, onClick: function () { return handleTabClick(tab.id); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
|
|
2560
2568
|
React__default.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
|
|
2561
|
-
React__default.createElement(TabPanel, null, tabs
|
|
2569
|
+
React__default.createElement(TabPanel, null, (_c = tabs.find(function (tab) { return tab.id === activeTab; })) === null || _c === undefined ? undefined : _c.content)));
|
|
2562
2570
|
};
|
|
2563
2571
|
var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n"], ["\n width: 100%;\n position: relative;\n"])));
|
|
2564
2572
|
var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n position: relative;\n"], ["\n display: flex;\n justify-content: center;\n position: relative;\n"])));
|