@conduction/components 2.2.17 → 2.2.19

package/src/components/Pagination/Pagination.module.css

@@ -150,7 +150,7 @@
   border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important;
   border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important;
   border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important;
-  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius));
+  border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)) !important;
   padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important;
   padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important;
   padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important;

package/src/components/formFields/select/select.module.css

@@ -12,6 +12,11 @@
 
   --conduction-input-select-list-option-font-family: "Noto Sans", Arial, sans-serif;
   /* --conduction-input-select-list-option-background-color: unset; */
+  /* --conduction-input-select-list-option-color: unset; */
+  /* --conduction-input-select-list-option-selected--background-color: unset; */
+  /* --conduction-input-select-list-option-selected-color: unset; */
+  /* --conduction-input-select-list-option-focus-background-color: unset; */
+  /* --conduction-input-select-list-option-focus-color: unset; */
 
   /* --conduction-input-select-list-option-hover-background-color: unset; */
   /* --conduction-input-select-list-option-hover-color: unset; */

package/src/components/formFields/select/select.tsx

@@ -23,10 +23,24 @@ interface ISelectProps {
 
 const selectStyles: StylesConfig = {
   menuPortal: (base) => ({ ...base, zIndex: 100 }),
-  option: (base) => ({
+  option: (base, state) => ({
     ...base,
     fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+    backgroundColor: [
+      state.isFocused
+        ? `var(--conduction-input-select-list-option-focus-background-color, ${base.backgroundColor})`
+        : state.isSelected
+        ? `var(--conduction-input-select-list-option-selected-background-color, ${base.backgroundColor})`
+        : `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor})`,
+    ],
+
+    color: [
+      state.isFocused
+        ? `var(--conduction-input-select-list-option-focus-color, ${base.color})`
+        : state.isSelected
+        ? `var(--conduction-input-select-list-option-selected-color, ${base.color})`
+        : `var(--conduction-input-select-list-option-color, ${base.color})`,
+    ],
 
     "&:hover": {
       backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
@@ -41,24 +55,16 @@ const selectStyles: StylesConfig = {
   }),
 };
 
-const selectMultiStyles: StylesConfig = {
-  menuPortal: (base) => ({ ...base, zIndex: 100 }),
-  option: (base) => ({
-    ...base,
-    fontFamily: `var(--conduction-input-select-list-option-font-family, ${base.fontFamily})`,
-    backgroundColor: `var(--conduction-input-select-list-option-background-color, ${base.backgroundColor}) `,
+const setAttributes = (): void => {
+  const setRoleToPresentation = (selector: string, role: string) => {
+    document.querySelectorAll(selector).forEach((element) => {
+      if (element.getAttribute("role") !== "presentation") element.setAttribute("role", role);
+    });
+  };
 
-    "&:hover": {
-      backgroundColor: `var(--conduction-input-select-list-option-hover-background-color, ${base.backgroundColor})`,
-      color: `var(--conduction-input-select-list-option-hover-color, ${base.color})`,
-      fontFamily: `var(--conduction-input-select-list-option-hover-font-family, var(--conduction-input-select-list-option-font-family, ${base.fontFamily}))`,
-    },
-  }),
-  placeholder: (base) => ({
-    ...base,
-    fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
-    color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
-  }),
+  setRoleToPresentation('[id*="live-region"]', "presentation");
+  setRoleToPresentation('[class*="indicatorSeparator"]', "separator");
+  setRoleToPresentation('[class*="a11yText"]', "presentation");
 };
 
 export const SelectMultiple = ({
@@ -76,21 +82,7 @@ export const SelectMultiple = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element?.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller
@@ -135,21 +127,7 @@ export const SelectCreate = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller
@@ -195,21 +173,7 @@ export const SelectSingle = ({
   ariaLabel,
 }: ISelectProps & IReactHookFormProps): JSX.Element => {
   React.useEffect(() => {
-    document.querySelectorAll('[id*="live-region"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
-    document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => {
-      if (element.role !== "presentation") {
-        element.setAttribute("role", "presentation");
-      }
-    });
+    setAttributes();
   }, []);
   return (
     <Controller

package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.module.css

@@ -0,0 +1,41 @@
+:root {
+  --conduction-horizontal-overflow-wrapper-background-color: unset;
+  --conduction-horizontal-overflow-wrapper-buttons-top: 12px;
+
+  --conduction-horizontal-overflow-wrapper-margin-inline-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-inline-end: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-start: 8px;
+  --conduction-horizontal-overflow-wrapper-margin-block-end: 8px;
+}
+
+.container {
+  position: relative;
+  background-color: var(--conduction-horizontal-overflow-wrapper-background-color);
+}
+
+.wrapper {
+  overflow-x: scroll;
+}
+
+.scrollButton {
+  position: sticky;
+  top: var(--conduction-horizontal-overflow-wrapper-buttons-top);
+
+  margin-inline-start: var(--conduction-horizontal-overflow-wrapper-margin-inline-start);
+  margin-inline-end: var(--conduction-horizontal-overflow-wrapper-margin-inline-end);
+  margin-block-start: var(--conduction-horizontal-overflow-wrapper-margin-block-start);
+  margin-block-end: var(--conduction-horizontal-overflow-wrapper-margin-block-end);
+}
+
+.scrollButton.right {
+  left: 100%;
+}
+
+/* Hide scrollbar */
+.wrapper::-webkit-scrollbar {
+  display: none;
+}
+.wrapper {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import * as styles from "./HorizontalOverflowWrapper.module.css";
+import clsx from "clsx";
+import { Button } from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+
+interface HorizontalOverflowWrapperProps {
+  children: React.ReactNode;
+  ariaLabels: {
+    scrollRightButton: string;
+    scrollLeftButton: string;
+  };
+}
+
+export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps> = ({ children, ariaLabels }) => {
+  const [canScrollRight, setCanScrollRight] = React.useState<boolean>(false);
+  const [canScrollLeft, setCanScrollLeft] = React.useState<boolean>(false);
+
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null);
+
+  const scrollRight = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  const scrollLeft = (): void => {
+    wrapperRef.current?.scrollTo({
+      left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+      behavior: "smooth",
+    });
+  };
+
+  React.useEffect(() => {
+    checkScrollDirections(); // initiate available scroll directions
+
+    window.addEventListener("resize", checkScrollDirections);
+
+    return () => window.removeEventListener("resize", checkScrollDirections);
+  }, []);
+
+  const checkScrollDirections = (): void => {
+    if (!wrapperRef.current) return;
+
+    setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
+    setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
+  };
+
+  return (
+    <div className={styles.container}>
+      {canScrollLeft && (
+        <Button
+          className={clsx(styles.scrollButton, styles.left)}
+          onClick={scrollLeft}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollLeftButton}
+        >
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </Button>
+      )}
+
+      {canScrollRight && (
+        <Button
+          className={clsx(styles.scrollButton, styles.right)}
+          onClick={scrollRight}
+          appearance="secondary-action-button"
+          aria-label={ariaLabels.scrollRightButton}
+        >
+          <FontAwesomeIcon icon={faChevronRight} />
+        </Button>
+      )}
+
+      <div ref={wrapperRef} className={styles.wrapper} onScroll={checkScrollDirections}>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/tabs/Tabs.tsx

@@ -41,11 +41,19 @@ export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ..
   };
 
   const handleScrollRight = () => {
-    if (wrapperRef.current) wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
+    if (wrapperRef.current)
+      wrapperRef.current.scrollTo({
+        left: wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth * 0.9,
+        behavior: "smooth",
+      });
   };
 
   const handleScrollLeft = () => {
-    if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
+    if (wrapperRef.current)
+      wrapperRef.current.scrollTo({
+        left: wrapperRef.current.scrollLeft - wrapperRef.current.clientWidth * 0.9,
+        behavior: "smooth",
+      });
   };
 
   React.useEffect(() => {

package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -116,6 +116,11 @@
 }
 .primary .link {
   text-decoration: none;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  max-width: 100%;
+  white-space: wrap;
 }
 
 .primary .link:not(.currentLink) {
@@ -187,6 +192,11 @@
   margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
 }
 
+.li:hover .dropdown {
+  display: block;
+  z-index: 1;
+}
+
 @media only screen and (min-width: 992px) {
   .container {
     width: fit-content;
@@ -215,11 +225,6 @@
     display: none;
   }
 
-  .primary .li:hover .dropdown {
-    display: block;
-    z-index: 1;
-  }
-
   .mobileLink {
     margin-block-end: unset;
   }

package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx

@@ -5,19 +5,24 @@ import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 
-interface ITopNavItem {
+interface ITopNavItemBase {
   label: string;
   icon?: JSX.Element;
   current?: boolean;
+}
+
+interface ITopNavItemWithSubItems extends ITopNavItemBase {
+  handleClick?: never;
+  subItems: ITopNavItem[];
+}
+
+interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
   handleClick?: () => any;
-  subItems?: {
-    label: string;
-    icon?: JSX.Element;
-    current?: boolean;
-    handleClick?: () => any;
-  }[];
+  subItems?: never;
 }
 
+export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
+
 export interface TopNavProps {
   items: ITopNavItem[];
   mobileLogo?: JSX.Element;
@@ -26,30 +31,24 @@ export interface TopNavProps {
 
 export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [subNavIsOpen, setSubNavIsOpen] = React.useState({});
+  const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 992);
+    };
 
-  const handleItemClick = (handleClick?: () => any) => {
-    if (handleClick) {
-      handleClick();
+    window.addEventListener("resize", handleResize);
 
-      setIsOpen(false);
-    }
-  };
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
-  const handleSubItemMenu = (idx: number, value: boolean) => {
-    setSubNavIsOpen({
-      ...subNavIsOpen,
-      [idx as keyof typeof subNavIsOpen]: value,
-    });
-  };
+  const handleSubItemClick = (handleClick: any) => {
+    setIsOpen(false);
 
-  const screenWidth = window.innerWidth;
+    handleClick();
+  };
 
-  React.useEffect(() => {
-    if (screenWidth > 992) {
-      setSubNavIsOpen({});
-    }
-  }, [screenWidth]);
   return (
     <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
       <div className={styles.menuToggleContainer}>
@@ -63,17 +62,7 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
       <nav className={clsx(styles.primary, isOpen && styles.isOpen)}>
         <ul className={styles.ul}>
           {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
-            <li
-              onClick={() =>
-                !subItems
-                  ? handleItemClick(handleClick)
-                  : screenWidth > 992
-                  ? handleItemClick(handleClick)
-                  : handleSubItemMenu(idx, !subNavIsOpen[idx as keyof typeof subNavIsOpen] ?? true)
-              }
-              className={clsx(styles.li, current && styles.current)}
-              key={idx}
-            >
+            <li onClick={handleClick} className={clsx(styles.li, current && styles.current)} key={idx}>
               <Link
                 className={clsx(
                   styles.link,
@@ -84,21 +73,16 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
               >
                 {icon}
                 {label}{" "}
-                {subItems && screenWidth < 992 && (
-                  <FontAwesomeIcon
-                    className={clsx(styles.toggleIcon, subNavIsOpen[idx as keyof typeof subNavIsOpen] && styles.isOpen)}
-                    icon={faChevronRight}
-                  />
-                )}
+                {subItems && isMobile && <FontAwesomeIcon className={styles.toggleIcon} icon={faChevronRight} />}
               </Link>
 
               {subItems && (
-                <ul className={clsx(styles.dropdown, subNavIsOpen[idx as keyof typeof subNavIsOpen] && styles.isOpen)}>
+                <ul className={styles.dropdown}>
                   {subItems.map(({ label, icon, current, handleClick }, idx) => (
                     <li
                       key={idx}
                       className={clsx(styles.li, current && styles.current)}
-                      onClick={() => handleItemClick(handleClick)}
+                      onClick={() => handleSubItemClick(handleClick)}
                     >
                       <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
                         {icon}

package/src/index.ts

@@ -40,7 +40,7 @@ import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
 import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
-import { TableWrapper } from "./components/tableWrapper/TableWrapper";
+import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
 
 export {
   DownloadCard,
@@ -82,5 +82,5 @@ export {
   TabList,
   Tab,
   TabPanel,
-  TableWrapper,
+  HorizontalOverflowWrapper,
 };

package/tsconfig.json

@@ -3,10 +3,7 @@
     "declaration": true,
     "outDir": "./lib",
     "target": "esnext",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
+    "lib": ["dom", "esnext"],
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "node",
@@ -15,15 +12,7 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "hooks": [
-    "copy-files"
-  ],
-  "include": [
-    "src",
-    "src/**/*.css"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/__tests__/*"
-  ]
-}
+  "hooks": ["copy-files"],
+  "include": ["src", "src/**/*.css"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}

package/lib/components/tableWrapper/TableWrapper.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-export declare const TableWrapper: React.FC<{
-    children: React.ReactNode;
-}>;

package/lib/components/tableWrapper/TableWrapper.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect } from "react";
-import * as styles from "./TableWrapper.module.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-export const TableWrapper = ({ children }) => {
-    const [canScrollRight, setCanScrollRight] = useState(false);
-    const [canScrollLeft, setCanScrollLeft] = useState(false);
-    const wrapperRef = React.useRef(null);
-    const handleScroll = () => {
-        if (wrapperRef.current) {
-            setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
-            setCanScrollRight(wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth);
-        }
-    };
-    const handleScrollRight = () => {
-        if (wrapperRef.current)
-            wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" });
-    };
-    const handleScrollLeft = () => {
-        if (wrapperRef.current)
-            wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" });
-    };
-    useEffect(() => {
-        if (wrapperRef.current) {
-            setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
-        }
-    }, []);
-    return (_jsx("div", { className: styles.container, children: _jsxs("div", { onScroll: handleScroll, ref: wrapperRef, className: styles.wrapper, children: [canScrollLeft && (_jsx("div", { onClick: handleScrollLeft, className: styles.scrollLeftButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && (_jsx("div", { onClick: handleScrollRight, className: styles.scrollRightButton, children: _jsx("div", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }));
-};

package/lib/components/tableWrapper/TableWrapper.module.css

@@ -1,67 +0,0 @@
-:root {
-  --conduction-table-wrapper-scroll-button-background-color: #ffffff;
-  --conduction-table-wrapper-scroll-button-color: #000000;
-  --conduction-table-wrapper-scroll-button-padding-inline-start: 14px;
-  --conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
-  /* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
-  /* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
-  /* --conduction-table-wrapper-scroll-button-border-color: 1px; */
-  /* --conduction-table-wrapper-scroll-button-border-color: solid; */
-  /* --conduction-table-wrapper-scroll-button-border-color: #000000; */
-
-  --conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
-  --conduction-table-wrapper-scroll-button-hover-color: #4376fc;
-}
-.container {
-  position: relative;
-}
-
-.wrapper,
-.wrapperTouchscreen {
-  overflow-x: scroll;
-}
-
-.scrollRightButton,
-.scrollLeftButton {
-  top: 0%;
-  position: absolute;
-  display: flex;
-  height: 100%;
-  background-color: var(--conduction-table-wrapper-scroll-button-background-color);
-  color: var(--conduction-table-wrapper-scroll-button-color);
-  padding-inline-start: var(--conduction-table-wrapper-scroll-button-padding-inline-start);
-  padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
-  padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
-  padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
-  border-width: var(--conduction-table-wrapper-scroll-button-border-width);
-  border-style: var(--conduction-table-wrapper-scroll-button-border-style);
-  border-color: var(--conduction-table-wrapper-scroll-button-border-color);
-}
-
-.scrollLeftButton:hover,
-.scrollRightButton:hover {
-  background-color: var(--conduction-table-wrapper-scroll-button-hover-background-color);
-  color: var(--conduction-table-wrapper-scroll-button-hover-color);
-  cursor: pointer;
-}
-
-.scrollRightButton {
-  right: 0;
-}
-
-.scrollLeftButton {
-  left: 0;
-}
-
-.scrollButton {
-  align-self: center;
-}
-
-/* Hide scrollbar */
-.wrapper::-webkit-scrollbar {
-  display: none;
-}
-.wrapper {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}

package/lib/components/temp/Temp.d.ts

@@ -1,5 +0,0 @@
-import { ReactTabsFunctionComponent, TabProps, TabPanelProps, TabListProps, TabsProps } from "react-tabs";
-export declare const Tabs: ReactTabsFunctionComponent<TabsProps>;
-export declare const TabList: ReactTabsFunctionComponent<TabListProps>;
-export declare const Tab: ReactTabsFunctionComponent<TabProps>;
-export declare const TabPanel: ReactTabsFunctionComponent<TabPanelProps>;

package/lib/components/temp/Temp.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tabs as RTabs, TabList as RTabList, Tab as RTab, TabPanel as RTabPanel, } from "react-tabs";
-// Tabs
-export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { ...otherProps, children: _jsx("h1", { children: children }) }));
-Tabs.tabsRole = "Tabs";
-// TabList
-export const TabList = ({ children, ...otherProps }) => (_jsx(RTabList, { ...otherProps, children: children }));
-TabList.tabsRole = "TabList";
-// Tab
-export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { ...otherProps, children: children }));
-Tab.tabsRole = "Tab";
-// TabPanel
-export const TabPanel = ({ children, ...otherProps }) => (_jsx(RTabPanel, { ...otherProps, children: children }));
-TabPanel.tabsRole = "TabPanel";