@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.4

package/TabList.js

@@ -1,190 +1,190 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import React__default, { useRef, useEffect } from "react";
-import classNames from "classnames";
-import { palette } from "./theme/palette.js";
-import { I as Icon } from "./Icon.js";
-import { IconSize } from "./constants.js";
-import { L as LazyIcon } from "./LazyIcon.js";
+import { a as IconSize } from "./constants2.js";
+import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { t as palette } from "./palette.js";
+import { t as Icon_default } from "./Icon.js";
+import { t as LazyIcon_default } from "./LazyIcon.js";
+import { t as isComponent } from "./component.js";
+import { t as useIsVisible } from "./useIsVisible.js";
+import { t as ChevronLeft_default } from "./ChevronLeft.js";
+import { t as ChevronRight_default } from "./ChevronRight.js";
+import { t as useRovingFocus } from "./useRovingFocus.js";
+import React, { useEffect, useRef } from "react";
+import cn from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabList/styles.module.scss";
-import { useIsVisible } from "./hooks/useIsVisible.js";
-import { useRovingFocus } from "./hooks/useRovingFocus.js";
-import { isComponent } from "./utils/component.js";
-import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
-import ChevronLeft from "./components/Icons/ChevronLeft.js";
-import ChevronRight from "./components/Icons/ChevronRight.js";
-const Tab = (props) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: props.children ?? null });
+var Tab = (props) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: props.children ?? null });
 };
-const TabItem = (props) => {
-  const isSelected = props.index === props.selectedTab;
-  const { title, onTabClick, icon, testId } = props.tabProps;
-  const handleClick = () => {
-    if (onTabClick) onTabClick(props.index);
-    props.onTabListClick(props.index);
-    scrollToTab(props.index);
-  };
-  const tabButtonClasses = classNames(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
-    [styles["tab-list__tab--selected"]]: isSelected,
-    [styles["tab-list__tab--not-selected"]]: !isSelected
-  });
-  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];
-  const scrollToTab = (index) => {
-    var _a, _b;
-    const currentRef2 = props.tabRefs.current && props.tabRefs.current[index];
-    if ((_a = currentRef2 == null ? void 0 : currentRef2.current) == null ? void 0 : _a.scrollIntoView) {
-      (_b = currentRef2 == null ? void 0 : currentRef2.current) == null ? void 0 : _b.scrollIntoView({ behavior: "smooth", inline: "nearest", block: "nearest" });
-    }
-  };
-  const itemRef = useRef(null);
-  useEffect(() => {
-    if (isSelected && props.tabListVisible) {
-      scrollToTab(props.index);
-    }
-  }, [isSelected]);
-  return /* @__PURE__ */ jsx("li", { role: "presentation", ref: itemRef, children: /* @__PURE__ */ jsx(
-    "button",
-    {
-      role: "tab",
-      "aria-selected": isSelected,
-      onClick: handleClick,
-      className: tabButtonClasses,
-      "data-testid": testId,
-      ref: currentRef,
-      children: /* @__PURE__ */ jsxs("span", { className: styles["tab-list__tab__title-and-icon"], children: [
-        icon && (typeof icon === "string" ? /* @__PURE__ */ jsx(
-          LazyIcon,
-          {
-            iconName: icon,
-            size: IconSize.XSmall,
-            color: isSelected ? palette[`black`] : palette["blueberry500"]
-          }
-        ) : /* @__PURE__ */ jsx(Icon, { svgIcon: icon, size: IconSize.XSmall, color: isSelected ? palette[`black`] : palette["blueberry500"] })),
-        title
-      ] })
-    }
-  ) });
+var Tab_default = Tab;
+var TabItem = (props) => {
+	const isSelected = props.index === props.selectedTab;
+	const { title, onTabClick, icon, testId } = props.tabProps;
+	const handleClick = () => {
+		if (onTabClick) onTabClick(props.index);
+		props.onTabListClick(props.index);
+		scrollToTab(props.index);
+	};
+	const tabButtonClasses = cn(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
+		[styles["tab-list__tab--selected"]]: isSelected,
+		[styles["tab-list__tab--not-selected"]]: !isSelected
+	});
+	const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];
+	const scrollToTab = (index) => {
+		const currentRef$1 = props.tabRefs.current && props.tabRefs.current[index];
+		if (currentRef$1?.current?.scrollIntoView) currentRef$1?.current?.scrollIntoView({
+			behavior: "smooth",
+			inline: "nearest",
+			block: "nearest"
+		});
+	};
+	const itemRef = useRef(null);
+	useEffect(() => {
+		if (isSelected && props.tabListVisible) scrollToTab(props.index);
+	}, [isSelected]);
+	return /* @__PURE__ */ jsx("li", {
+		role: "presentation",
+		ref: itemRef,
+		children: /* @__PURE__ */ jsx("button", {
+			role: "tab",
+			"aria-selected": isSelected,
+			onClick: handleClick,
+			className: tabButtonClasses,
+			"data-testid": testId,
+			ref: currentRef,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: styles["tab-list__tab__title-and-icon"],
+				children: [icon && (typeof icon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
+					iconName: icon,
+					size: IconSize.XSmall,
+					color: isSelected ? palette[`black`] : palette["blueberry500"]
+				}) : /* @__PURE__ */ jsx(Icon_default, {
+					svgIcon: icon,
+					size: IconSize.XSmall,
+					color: isSelected ? palette[`black`] : palette["blueberry500"]
+				})), title]
+			})
+		})
+	});
 };
-const TabChevron = ({ direction, onClick, backgroundColor, ariaLabel }) => {
-  const buttonRef = React__default.useRef(null);
-  const { isHovered } = usePseudoClasses(buttonRef);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      ref: buttonRef,
-      className: styles["tab-list__button"],
-      onClick,
-      "aria-label": ariaLabel,
-      style: { backgroundColor },
-      children: direction === "left" ? /* @__PURE__ */ jsx(Icon, { color: "var(--color-action-graphics-onlight)", isHovered, svgIcon: ChevronLeft, size: IconSize.XSmall }) : /* @__PURE__ */ jsx(Icon, { color: "var(--color-action-graphics-onlight)", isHovered, svgIcon: ChevronRight, size: IconSize.XSmall })
-    }
-  );
+var TabItem_default = TabItem;
+var TabChevron = ({ direction, onClick, backgroundColor, ariaLabel }) => {
+	const buttonRef = React.useRef(null);
+	const { isHovered } = usePseudoClasses(buttonRef);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		ref: buttonRef,
+		className: styles["tab-list__button"],
+		onClick,
+		"aria-label": ariaLabel,
+		style: { backgroundColor },
+		children: direction === "left" ? /* @__PURE__ */ jsx(Icon_default, {
+			color: "var(--color-action-graphics-onlight)",
+			isHovered,
+			svgIcon: ChevronLeft_default,
+			size: IconSize.XSmall
+		}) : /* @__PURE__ */ jsx(Icon_default, {
+			color: "var(--color-action-graphics-onlight)",
+			isHovered,
+			svgIcon: ChevronRight_default,
+			size: IconSize.XSmall
+		})
+	});
 };
-const TabList = (props) => {
-  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;
-  const listRef = useRef(null);
-  const tabRefs = useRef(React__default.Children.map(children, () => React__default.createRef()) || []);
-  useRovingFocus(onTabListClick, tabRefs, listRef, true);
-  const tablistClasses = classNames(styles["tab-list"], styles[`tab-list--${onColor}`]);
-  const getBackgroundColor = (onColor2) => {
-    switch (onColor2) {
-      case "onwhite":
-        return "var(--color-base-background-white)";
-      case "onblueberry":
-        return "var(--color-base-background-blueberry)";
-      case "onneutral":
-        return "var(--color-base-background-neutral)";
-    }
-  };
-  const firstTab = tabRefs.current && tabRefs.current[0];
-  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];
-  const firstTabVisible = useIsVisible(firstTab);
-  const lastTabVisible = useIsVisible(lastTab);
-  const tabListVisible = useIsVisible(listRef);
-  const shouldShowFadeStart = () => {
-    return !firstTabVisible;
-  };
-  const shouldShowFadeEnd = () => {
-    return !lastTabVisible;
-  };
-  const scrollInList = (direction) => {
-    if (listRef.current) {
-      const listWidth = listRef.current.clientWidth;
-      const listScrollLeft = listRef.current.scrollLeft;
-      const maxScrollLeft = listRef.current.scrollWidth - listWidth;
-      if (direction === "right" && !lastTabVisible) {
-        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);
-        listRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
-      } else if (direction === "left" && !firstTabVisible) {
-        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);
-        listRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
-      }
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: styles["tab-list-wrapper"], children: [
-    shouldShowFadeStart() && /* @__PURE__ */ jsxs("div", { className: classNames(styles["tab-list__start-wrapper"]), children: [
-      /* @__PURE__ */ jsx(
-        TabChevron,
-        {
-          onClick: () => scrollInList("left"),
-          direction: "left",
-          backgroundColor: `${getBackgroundColor(onColor)}`,
-          ariaLabel: ariaLabelLeftButton
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: classNames(styles["tab-list__fade-start"]),
-          style: {
-            backgroundColor: `${getBackgroundColor(onColor)}`
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("ul", { className: tablistClasses, ref: listRef, role: "tablist", "aria-orientation": "horizontal", children: React__default.Children.map(children, (child, index) => {
-      if (isComponent(child, Tab)) {
-        return /* @__PURE__ */ jsx(
-          TabItem,
-          {
-            tabRefs,
-            tabListVisible,
-            index,
-            selectedTab,
-            onTabListClick,
-            tabProps: child.props,
-            color
-          },
-          child.props.title
-        );
-      }
-      return null;
-    }) }),
-    shouldShowFadeEnd() && /* @__PURE__ */ jsxs("div", { className: classNames(styles["tab-list__end-wrapper"]), children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: classNames(styles["tab-list__fade-end"]),
-          style: {
-            backgroundColor: `${getBackgroundColor(onColor)}`
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TabChevron,
-        {
-          onClick: () => scrollInList("right"),
-          direction: "right",
-          backgroundColor: `${getBackgroundColor(onColor)}`,
-          ariaLabel: ariaLabelRightButton
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: classNames(styles["tab-list__border"]) })
-  ] });
+var TabChevron_default = TabChevron;
+var TabList = (props) => {
+	const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;
+	const listRef = useRef(null);
+	const tabRefs = useRef(React.Children.map(children, () => React.createRef()) || []);
+	useRovingFocus(onTabListClick, tabRefs, listRef, true);
+	const tablistClasses = cn(styles["tab-list"], styles[`tab-list--${onColor}`]);
+	const getBackgroundColor = (onColor$1) => {
+		switch (onColor$1) {
+			case "onwhite": return "var(--color-base-background-white)";
+			case "onblueberry": return "var(--color-base-background-blueberry)";
+			case "onneutral": return "var(--color-base-background-neutral)";
+		}
+	};
+	const firstTab = tabRefs.current && tabRefs.current[0];
+	const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];
+	const firstTabVisible = useIsVisible(firstTab);
+	const lastTabVisible = useIsVisible(lastTab);
+	const tabListVisible = useIsVisible(listRef);
+	const shouldShowFadeStart = () => {
+		return !firstTabVisible;
+	};
+	const shouldShowFadeEnd = () => {
+		return !lastTabVisible;
+	};
+	const scrollInList = (direction) => {
+		if (listRef.current) {
+			const listWidth = listRef.current.clientWidth;
+			const listScrollLeft = listRef.current.scrollLeft;
+			const maxScrollLeft = listRef.current.scrollWidth - listWidth;
+			if (direction === "right" && !lastTabVisible) {
+				const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);
+				listRef.current.scrollBy({
+					left: scrollAmount,
+					behavior: "smooth"
+				});
+			} else if (direction === "left" && !firstTabVisible) {
+				const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);
+				listRef.current.scrollBy({
+					left: scrollAmount,
+					behavior: "smooth"
+				});
+			}
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles["tab-list-wrapper"],
+		children: [
+			shouldShowFadeStart() && /* @__PURE__ */ jsxs("div", {
+				className: cn(styles["tab-list__start-wrapper"]),
+				children: [/* @__PURE__ */ jsx(TabChevron_default, {
+					onClick: () => scrollInList("left"),
+					direction: "left",
+					backgroundColor: `${getBackgroundColor(onColor)}`,
+					ariaLabel: ariaLabelLeftButton
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn(styles["tab-list__fade-start"]),
+					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
+				})]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: tablistClasses,
+				ref: listRef,
+				role: "tablist",
+				"aria-orientation": "horizontal",
+				children: React.Children.map(children, (child, index) => {
+					if (isComponent(child, Tab_default)) return /* @__PURE__ */ jsx(TabItem_default, {
+						tabRefs,
+						tabListVisible,
+						index,
+						selectedTab,
+						onTabListClick,
+						tabProps: child.props,
+						color
+					}, child.props.title);
+					return null;
+				})
+			}),
+			shouldShowFadeEnd() && /* @__PURE__ */ jsxs("div", {
+				className: cn(styles["tab-list__end-wrapper"]),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn(styles["tab-list__fade-end"]),
+					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
+				}), /* @__PURE__ */ jsx(TabChevron_default, {
+					onClick: () => scrollInList("right"),
+					direction: "right",
+					backgroundColor: `${getBackgroundColor(onColor)}`,
+					ariaLabel: ariaLabelRightButton
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", { className: cn(styles["tab-list__border"]) })
+		]
+	});
 };
-export {
-  TabList as T,
-  Tab as a
-};
-//# sourceMappingURL=TabList.js.map
+var TabList_default$1 = TabList;
+export { Tab_default as n, TabList_default$1 as t };
+
+//# sourceMappingURL=TabList.js.map

package/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    if (onTabClick) onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n    if (currentRef?.current?.scrollIntoView) {\n      currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n    }\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n  direction: 'left' | 'right';\n  onClick: () => void;\n  backgroundColor?: string;\n  ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement>(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      className={styles['tab-list__button']}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      style={{ backgroundColor: backgroundColor }}\n    >\n      {direction === 'left' ? (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n      ) : (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n      )}\n    </button>\n  );\n};\n\nexport default TabChevron;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\nimport TabChevron from './TabChevron';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n  ariaLabelRightButton?: string;\n  ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible;\n  };\n\n  const scrollInList = (direction: string): void => {\n    if (listRef.current) {\n      const listWidth = listRef.current.clientWidth;\n      const listScrollLeft = listRef.current.scrollLeft;\n      const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n      if (direction === 'right' && !lastTabVisible) {\n        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      } else if (direction === 'left' && !firstTabVisible) {\n        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={styles['tab-list-wrapper']}>\n      {shouldShowFadeStart() && (\n        <div className={classNames(styles['tab-list__start-wrapper'])}>\n          <TabChevron\n            onClick={() => scrollInList('left')}\n            direction=\"left\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelLeftButton}\n          />\n          <div\n            className={classNames(styles['tab-list__fade-start'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n        </div>\n      )}\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      {shouldShowFadeEnd() && (\n        <div className={classNames(styles['tab-list__end-wrapper'])}>\n          <div\n            className={classNames(styles['tab-list__fade-end'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n          <TabChevron\n            onClick={() => scrollInList('right')}\n            direction=\"right\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelRightButton}\n          />\n        </div>\n      )}\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n"],"names":["currentRef","React","onColor"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,MAA0B,CAAA,UAAS;AACvC,SAAO,oBAAA,UAAA,EAAG,UAAA,MAAM,YAAY,MAAK;AACnC;ACGA,MAAM,UAAkC,CAAA,UAAS;AAC/C,QAAM,aAAa,MAAM,UAAU,MAAM;AACzC,QAAM,EAAE,OAAO,YAAY,MAAM,OAAA,IAAW,MAAM;AAClD,QAAM,cAAc,MAAY;AAC9B,QAAI,WAAY,YAAW,MAAM,KAAK;AACtC,UAAM,eAAe,MAAM,KAAK;AAChC,gBAAY,MAAM,KAAK;AAAA,EACzB;AACA,QAAM,mBAAmB,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,MAAM,KAAK,EAAE,GAAG;AAAA,IACpG,CAAC,OAAO,yBAAyB,CAAC,GAAG;AAAA,IACrC,CAAC,OAAO,6BAA6B,CAAC,GAAG,CAAC;AAAA,EAAA,CAC3C;AAED,QAAM,aAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,QAAQ,MAAM,KAAK;AAE7E,QAAM,cAAc,CAAC,UAAwB;;AAC3C,UAAMA,cAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,QAAQ,KAAK;AAEvE,SAAIA,gDAAY,YAAZA,mBAAqB,gBAAgB;AACvCA,uDAAY,YAAZA,mBAAqB,eAAe,EAAE,UAAU,UAAU,QAAQ,WAAW,OAAO;IACtF;AAAA,EACF;AAEA,QAAM,UAAU,OAAsB,IAAI;AAE1C,YAAU,MAAM;AACd,QAAI,cAAc,MAAM,gBAAgB;AACtC,kBAAY,MAAM,KAAK;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,oBAAC,MAAA,EAAG,MAAK,gBAAe,KAAK,SAC3B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,eAAa;AAAA,MACb,KAAK;AAAA,MAEL,UAAA,qBAAC,QAAA,EAAK,WAAW,OAAO,+BAA+B,GACpD,UAAA;AAAA,QAAA,SACE,OAAO,SAAS,WACf;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV,MAAM,SAAS;AAAA,YACf,OAAO,aAAa,QAAQ,OAAO,IAAI,QAAQ,cAAc;AAAA,UAAA;AAAA,QAAA,IAG/D,oBAAC,MAAA,EAAK,SAAS,MAAM,MAAM,SAAS,QAAQ,OAAO,aAAa,QAAQ,OAAO,IAAI,QAAQ,cAAc,EAAA,CAAG;AAAA,QAE/G;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AChEA,MAAM,aAAwC,CAAC,EAAE,WAAW,SAAS,iBAAiB,gBAAgB;AACpG,QAAM,YAAYC,eAAM,OAA0B,IAAI;AACtD,QAAM,EAAE,UAAA,IAAc,iBAAoC,SAAS;AAEnE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAK;AAAA,MACL,WAAW,OAAO,kBAAkB;AAAA,MACpC;AAAA,MACA,cAAY;AAAA,MACZ,OAAO,EAAE,gBAAA;AAAA,MAER,UAAA,cAAc,SACb,oBAAC,MAAA,EAAK,OAAO,wCAAwC,WAAsB,SAAS,aAAa,MAAM,SAAS,QAAQ,IAExH,oBAAC,QAAK,OAAO,wCAAwC,WAAsB,SAAS,cAAc,MAAM,SAAS,OAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAIjI;ACbA,MAAM,UAAkC,CAAA,UAAS;AAC/C,QAAM,EAAE,aAAa,gBAAgB,UAAU,OAAO,SAAS,qBAAqB,yBAAyB;AAE7G,QAAM,UAAU,OAAyB,IAAI;AAE7C,QAAM,UAAU,OAAOA,eAAM,SAAS,IAAI,UAAU,MAAMA,eAAM,UAAA,CAA8B,KAAK,CAAA,CAAE;AACrG,iBAAe,gBAAgB,SAAS,SAAS,IAAI;AAErD,QAAM,iBAAiB,WAAW,OAAO,UAAU,GAAG,OAAO,aAAa,OAAO,EAAE,CAAC;AAEpF,QAAM,qBAAqB,CAACC,aAAiC;AAC3D,YAAQA,UAAAA;AAAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,IAAA;AAAA,EAEb;AACA,QAAM,WAAW,QAAQ,WAAW,QAAQ,QAAQ,CAAC;AACrD,QAAM,UAAU,QAAQ,WAAW,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,CAAC;AAE7E,QAAM,kBAAkB,aAAa,QAAQ;AAC7C,QAAM,iBAAiB,aAAa,OAAO;AAC3C,QAAM,iBAAiB,aAAa,OAAO;AAE3C,QAAM,sBAAsB,MAAe;AACzC,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,oBAAoB,MAAe;AACvC,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,eAAe,CAAC,cAA4B;AAChD,QAAI,QAAQ,SAAS;AACnB,YAAM,YAAY,QAAQ,QAAQ;AAClC,YAAM,iBAAiB,QAAQ,QAAQ;AACvC,YAAM,gBAAgB,QAAQ,QAAQ,cAAc;AAEpD,UAAI,cAAc,WAAW,CAAC,gBAAgB;AAC5C,cAAM,eAAe,KAAK,IAAI,YAAY,GAAG,gBAAgB,cAAc;AAC3E,gBAAQ,QAAQ,SAAS,EAAE,MAAM,cAAc,UAAU,UAAU;AAAA,MACrE,WAAW,cAAc,UAAU,CAAC,iBAAiB;AACnD,cAAM,eAAe,CAAC,KAAK,IAAI,YAAY,GAAG,cAAc;AAC5D,gBAAQ,QAAQ,SAAS,EAAE,MAAM,cAAc,UAAU,UAAU;AAAA,MACrE;AAAA,IACF;AAAA,EACF;AAEA,SACE,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,GACtC,UAAA;AAAA,IAAA,oBAAA,0BACE,OAAA,EAAI,WAAW,WAAW,OAAO,yBAAyB,CAAC,GAC1D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,MAAM,aAAa,MAAM;AAAA,UAClC,WAAU;AAAA,UACV,iBAAiB,GAAG,mBAAmB,OAAO,CAAC;AAAA,UAC/C,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAEb;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,WAAW,OAAO,sBAAsB,CAAC;AAAA,UACpD,OAAO;AAAA,YACL,iBAAiB,GAAG,mBAAmB,OAAO,CAAC;AAAA,UAAA;AAAA,QACjD;AAAA,MAAA;AAAA,IACD,GACH;AAAA,wBAED,MAAA,EAAG,WAAW,gBAAgB,KAAK,SAAS,MAAK,WAAU,oBAAiB,cAC1E,yBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC9C,UAAI,YAAsB,OAAO,GAAG,GAAG;AACrC,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YAEA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,MAAM;AAAA,YAChB;AAAA,UAAA;AAAA,UALK,MAAM,MAAM;AAAA,QAAA;AAAA,MAQvB;AACA,aAAO;AAAA,IACT,CAAC,EAAA,CACH;AAAA,IACC,kBAAA,KACC,qBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,uBAAuB,CAAC,GACxD,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,WAAW,OAAO,oBAAoB,CAAC;AAAA,UAClD,OAAO;AAAA,YACL,iBAAiB,GAAG,mBAAmB,OAAO,CAAC;AAAA,UAAA;AAAA,QACjD;AAAA,MAAA;AAAA,MAEF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,MAAM,aAAa,OAAO;AAAA,UACnC,WAAU;AAAA,UACV,iBAAiB,GAAG,mBAAmB,OAAO,CAAC;AAAA,UAC/C,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACb,GACF;AAAA,wBAED,OAAA,EAAI,WAAW,WAAW,OAAO,kBAAkB,CAAC,EAAA,CAAG;AAAA,EAAA,GAC1D;AAEJ;"}
+{"version":3,"file":"TabList.js","names":["Tab: React.FC<TabProps>","TabItem: React.FC<TabItemProps>","TabChevron: React.FC<TabChevronProps>","TabList: React.FC<TabListProps>"],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    if (onTabClick) onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n    if (currentRef?.current?.scrollIntoView) {\n      currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n    }\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n  direction: 'left' | 'right';\n  onClick: () => void;\n  backgroundColor?: string;\n  ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement>(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      className={styles['tab-list__button']}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      style={{ backgroundColor: backgroundColor }}\n    >\n      {direction === 'left' ? (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n      ) : (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n      )}\n    </button>\n  );\n};\n\nexport default TabChevron;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\nimport TabChevron from './TabChevron';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n  ariaLabelRightButton?: string;\n  ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible;\n  };\n\n  const scrollInList = (direction: string): void => {\n    if (listRef.current) {\n      const listWidth = listRef.current.clientWidth;\n      const listScrollLeft = listRef.current.scrollLeft;\n      const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n      if (direction === 'right' && !lastTabVisible) {\n        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      } else if (direction === 'left' && !firstTabVisible) {\n        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div className={styles['tab-list-wrapper']}>\n      {shouldShowFadeStart() && (\n        <div className={classNames(styles['tab-list__start-wrapper'])}>\n          <TabChevron\n            onClick={() => scrollInList('left')}\n            direction=\"left\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelLeftButton}\n          />\n          <div\n            className={classNames(styles['tab-list__fade-start'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n        </div>\n      )}\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      {shouldShowFadeEnd() && (\n        <div className={classNames(styles['tab-list__end-wrapper'])}>\n          <div\n            className={classNames(styles['tab-list__fade-end'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n          <TabChevron\n            onClick={() => scrollInList('right')}\n            direction=\"right\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelRightButton}\n          />\n        </div>\n      )}\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n","import TabList from './TabList';\nexport * from './TabList';\nexport default TabList;\n"],"mappings":"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"}

package/TabPanel.js

@@ -1,16 +1,18 @@
+import React, { forwardRef } from "react";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import classNames from "classnames";
 import styles from "./components/Tabs/TabPanel/styles.module.scss";
-const TabPanel = forwardRef((props, ref) => {
-  const { children, color = "white", isFirst = false, style } = props;
-  const tabPanelClasses = classNames(styles["tab-panel"], styles[`tab-panel--${color}`], {
-    [styles["tab-panel--first"]]: isFirst
-  });
-  return /* @__PURE__ */ jsx("div", { ref, className: tabPanelClasses, style, children: /* @__PURE__ */ jsx("div", { children }) });
+var TabPanel = forwardRef((props, ref) => {
+	const { children, color = "white", isFirst = false, style } = props;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn(styles["tab-panel"], styles[`tab-panel--${color}`], { [styles["tab-panel--first"]]: isFirst }),
+		style,
+		children: /* @__PURE__ */ jsx("div", { children })
+	});
 });
 TabPanel.displayName = "TabPanel";
-export {
-  TabPanel as T
-};
-//# sourceMappingURL=TabPanel.js.map
+var TabPanel_default$1 = TabPanel;
+export { TabPanel_default$1 as t };
+
+//# sourceMappingURL=TabPanel.js.map

package/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, color = 'white', isFirst = false, style } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div>{children}</div>\n    </div>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n"],"names":[],"mappings":";;;;AAeA,MAAM,WAAW,WAA0C,CAAC,OAAO,QAAQ;AACzE,QAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,UAAU;AAE9D,QAAM,kBAAkB,WAAW,OAAO,WAAW,GAAG,OAAO,cAAc,KAAK,EAAE,GAAG;AAAA,IACrF,CAAC,OAAO,kBAAkB,CAAC,GAAG;AAAA,EAAA,CAC/B;AAED,SACE,oBAAC,SAAI,KAAU,WAAW,iBAAiB,OACzC,UAAA,oBAAC,OAAA,EAAK,SAAA,CAAS,EAAA,CACjB;AAEJ,CAAC;AAED,SAAS,cAAc;"}
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  isFirst?: boolean;\n  style?: React.CSSProperties;\n}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, color = 'white', isFirst = false, style } = props;\n\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div>{children}</div>\n    </div>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport * from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;;AAeA,IAAM,WAAW,YAA2C,OAAO,QAAQ;CACzE,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,UAAU;AAM9D,QACE,oBAAC,OAAA;EAAS;EAAK,WALO,GAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,SAC/B,CAAC;EAGkD;YAChD,oBAAC,OAAA,EAAK,UAAA,CAAe;GACjB;EAER;AAEF,SAAS,cAAc;AC3BvB,IAAA,qBD4Be"}