@festo-ui/react 8.2.0-dev.582 → 8.2.0-dev.584

package/node/lib/components/modals/image-gallery/ImageGallery.stories.helper.js

@@ -39,17 +39,17 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 
 const images = [{
   src: _gallery01Webp.default,
-  alt: 'Asset1',
+  alt: "Asset1",
   imageContent: {
-    title: 'Asset 1',
-    body: 'Asset 1 description'
+    title: "Asset 1",
+    body: "Asset 1 description"
   }
 }, {
   src: _gallery02Webp.default,
-  alt: 'Asset2',
+  alt: "Asset2",
   containMode: true,
   imageContent: {
-    title: 'Asset 2',
+    title: "Asset 2",
     body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: "Asset 2 description with some html inside."
@@ -64,60 +64,60 @@ const images = [{
   }
 }, {
   src: _gallery03Webp.default,
-  alt: 'Asset3',
+  alt: "Asset3",
   containMode: true,
   imageContent: {
-    title: 'Asset 3',
-    body: 'Asset 3 description'
+    title: "Asset 3",
+    body: "Asset 3 description"
   }
 }, {
   src: _gallery04Webp.default,
-  alt: 'Asset4',
+  alt: "Asset4",
   imageContent: {
-    title: 'Asset 4',
-    body: 'Asset 4 description'
+    title: "Asset 4",
+    body: "Asset 4 description"
   }
 }, {
   src: _gallery05Webp.default,
-  alt: 'Asset5',
+  alt: "Asset5",
   imageContent: {
-    title: 'Asset 5',
-    body: 'Asset 5 description'
+    title: "Asset 5",
+    body: "Asset 5 description"
   }
 }, {
   src: _gallery06Webp.default,
-  alt: 'Asset6',
+  alt: "Asset6",
   imageContent: {
-    title: 'Asset 6',
-    body: 'Asset 6 description'
+    title: "Asset 6",
+    body: "Asset 6 description"
   }
 }, {
   src: _gallery07Webp.default,
-  alt: 'Asset7',
+  alt: "Asset7",
   imageContent: {
-    title: 'Asset 7',
-    body: 'Asset 7 description'
+    title: "Asset 7",
+    body: "Asset 7 description"
   }
 }, {
   src: _gallery08Webp.default,
-  alt: 'Asset8',
+  alt: "Asset8",
   imageContent: {
-    title: 'Asset 8',
-    body: 'Asset 8 description'
+    title: "Asset 8",
+    body: "Asset 8 description"
   }
 }, {
   src: _gallery09Webp.default,
-  alt: 'Asset9',
+  alt: "Asset9",
   imageContent: {
-    title: 'Asset 9',
-    body: 'Asset 9 description'
+    title: "Asset 9",
+    body: "Asset 9 description"
   }
 }, {
   src: _gallery10Webp.default,
-  alt: 'Asset10',
+  alt: "Asset10",
   imageContent: {
-    title: 'Asset 10',
-    body: 'Asset 1ß description'
+    title: "Asset 10",
+    body: "Asset 1ß description"
   }
 }];
 var _default = exports.default = images;

package/node/lib/components/modals/image-gallery/ImageGallerySwiper.js

@@ -26,8 +26,8 @@ function ImageGallerySwiper(_ref) {
     },
     modules: [_swiper.Thumbs, _swiper.Navigation],
     navigation: {
-      nextEl: '.fwe-navigate-btn-up',
-      prevEl: '.fwe-navigate-btn-down'
+      nextEl: ".fwe-navigate-btn-up",
+      prevEl: ".fwe-navigate-btn-down"
     },
     zoom: true,
     className: "gallery-swiper fwe-image-gallery",
@@ -36,4 +36,4 @@ function ImageGallerySwiper(_ref) {
     children: children
   });
 }
-ImageGallerySwiper.displayName = 'Swiper';
+ImageGallerySwiper.displayName = "Swiper";

package/node/lib/components/modals/image-gallery/image-gallery-item/ImageGalleryItem.js

@@ -18,18 +18,18 @@ function ImageGalleryItem(_ref) {
     ...props
   } = _ref;
   const swiperType = (0, _react2.useContext)(_ImageGalleryContext.SwiperContext);
-  const isThumbsSwiper = swiperType === 'thumbs';
+  const isThumbsSwiper = swiperType === "thumbs";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.SwiperSlide, {
     ...props,
     className: (0, _classnames.default)(className, {
-      'fr-image-gallery-item--contain': containMode && isThumbsSwiper
+      "fr-image-gallery-item--contain": containMode && isThumbsSwiper
     }),
     children: isThumbsSwiper ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('swiper-zoom-container', {
-        'fr-image-gallery-item--contain': containMode
+      className: (0, _classnames.default)("swiper-zoom-container", {
+        "fr-image-gallery-item--contain": containMode
       }),
       children: children
     })
   });
 }
-ImageGalleryItem.displayName = 'SwiperSlide';
+ImageGalleryItem.displayName = "SwiperSlide";

package/node/lib/components/modals/image-gallery/internal/CloseButton.js

@@ -15,9 +15,9 @@ function CloseButton(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
     type: "button",
     "aria-label": "close",
-    className: (0, _classnames.default)('fwe-image-gallery-close-btn', {
-      'fwe-ml-auto': !showScaleButton,
-      'fwe-ml-3': showScaleButton
+    className: (0, _classnames.default)("fwe-image-gallery-close-btn", {
+      "fwe-ml-auto": !showScaleButton,
+      "fwe-ml-3": showScaleButton
     }),
     onClick: onClose
   });

package/node/lib/components/pagination/Pagination.js

@@ -58,18 +58,18 @@ function Pagination(props) {
     handleChange(newPageCurrent);
   }
   function handleKeyPress(event, index) {
-    if (event.key === 'Enter' || event.key === ' ') {
+    if (event.key === "Enter" || event.key === " ") {
       onDotClick(index);
     }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [type !== PaginationType.Dots && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('fwe-pagination fwe-p-m', {
-        'fwe-d-none': pageMax < 2
+      className: (0, _classnames.default)("fwe-pagination fwe-p-m", {
+        "fwe-d-none": pageMax < 2
       }, className),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        className: (0, _classnames.default)('fwe-navigate-btn-down', {
-          'fwe-disabled': innerPageCurrent <= 1
+        className: (0, _classnames.default)("fwe-navigate-btn-down", {
+          "fwe-disabled": innerPageCurrent <= 1
         }),
         onClick: onBtnDown,
         type: "button",
@@ -83,25 +83,25 @@ function Pagination(props) {
           children: pageMax
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        className: (0, _classnames.default)('fwe-navigate-btn-up', {
-          'fwe-disabled': innerPageCurrent >= pageMax,
-          'fwe-ml-4': type === PaginationType.Simple
+        className: (0, _classnames.default)("fwe-navigate-btn-up", {
+          "fwe-disabled": innerPageCurrent >= pageMax,
+          "fwe-ml-4": type === PaginationType.Simple
         }),
         onClick: onBtnUp,
         type: "button",
         "aria-label": "navigate-btn-up"
       })]
     }), type === PaginationType.Dots && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('fwe-p-m', {
-        'fwe-d-none': pageMax < 2
+      className: (0, _classnames.default)("fwe-p-m", {
+        "fwe-d-none": pageMax < 2
       }, className),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "fwe-pagination",
         children: dotArray.map(index => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           tabIndex: 0,
           role: "button",
-          className: (0, _classnames.default)('fwe-page-dot', {
-            'fwe-selected': index + 1 === innerPageCurrent
+          className: (0, _classnames.default)("fwe-page-dot", {
+            "fwe-selected": index + 1 === innerPageCurrent
           }),
           onClick: () => onDotClick(index),
           "aria-label": "page-dot",

package/node/lib/components/popovers/popover/Popover.js

@@ -44,19 +44,19 @@ function Popover(_ref) {
   } = (0, _reactPopper.usePopper)(referenceElement.current, popperElement, {
     placement: position,
     modifiers: [{
-      name: 'arrow',
+      name: "arrow",
       options: {
         element: arrowElement
       }
     }, {
-      name: 'offset',
+      name: "offset",
       options: {
         offset: [0, 24]
       }
     }, {
-      name: 'flip',
+      name: "flip",
       options: {
-        fallbackPlacements: flip ? fallbackPositions : [position || 'auto']
+        fallbackPlacements: flip ? fallbackPositions : [position || "auto"]
       }
     }]
   });
@@ -75,15 +75,15 @@ function Popover(_ref) {
   }
   (0, _useOnClickOutside.default)(popperElRef, closePopover, referenceElement);
   function handleKeyDown(event) {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       handleChange(undefined, true);
     }
-    if (event.key === 'Escape') {
+    if (event.key === "Escape") {
       handleChange(undefined, false);
     }
   }
   function handleKeyUp(event) {
-    if (event.key === ' ') {
+    if (event.key === " ") {
       handleChange(undefined, true);
     }
   }
@@ -99,7 +99,7 @@ function Popover(_ref) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [wrapper ? wrapper(childrenWrapper) : childrenWrapper, showPopper && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('fwe-popover-container', containerClassName),
+      className: (0, _classnames.default)("fwe-popover-container", containerClassName),
       ref: combinedRef,
       style: styles.popper,
       ...attributes.popper,

package/node/lib/components/popovers/popover-menu/PopoverMenu.js

@@ -45,7 +45,7 @@ function PopoverMenu(_ref) {
     }, item.icon + item.text))
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)('fwe-popover-menu', className),
+    className: (0, _classnames.default)("fwe-popover-menu", className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
       popoverContent: content,
       position: "right",

package/node/lib/components/progress/Progress.js

@@ -9,20 +9,20 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Progress(_ref) {
   let {
-    background = 'white',
+    background = "white",
     error = false,
     progress,
     className
   } = _ref;
-  const classes = (0, _classnames.default)('fwe-progress-bar', {
-    'fwe-bg-red': error
+  const classes = (0, _classnames.default)("fwe-progress-bar", {
+    "fwe-bg-red": error
   }, {
-    'fwe-progress-bar-black': background === 'black'
+    "fwe-progress-bar-black": background === "black"
   }, {
-    'fwe-progress-bar-background': background === 'background'
+    "fwe-progress-bar-background": background === "background"
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)('fwe-progress', className),
+    className: (0, _classnames.default)("fwe-progress", className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes,
       role: "progressbar",

package/node/lib/components/search-input/SearchInput.js

@@ -65,7 +65,7 @@ function SearchInput(_ref) {
         "aria-label": suggestion.value,
         "aria-selected": selectedSuggestionIndex === i,
         onClick: () => handleSuggestionClick(suggestion),
-        className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? 'fwe-selected' : ''}`,
+        className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? "fwe-selected" : ""}`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML: {

package/node/lib/components/search-input/useSearchInput.js

@@ -8,7 +8,7 @@ var _react = require("react");
 var _useControlled = _interopRequireDefault(require("../../helper/useControlled.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function useSearchInput(inputRef, cappedSuggestions, value) {
-  let defaultValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
+  let defaultValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
   let onChange = arguments.length > 4 ? arguments[4] : undefined;
   let onSearch = arguments.length > 5 ? arguments[5] : undefined;
   let onKeyboardNavigate = arguments.length > 6 ? arguments[6] : undefined;
@@ -41,7 +41,7 @@ function useSearchInput(inputRef, cappedSuggestions, value) {
   }
   function handleClearQuery() {
     reset();
-    updateValue('');
+    updateValue("");
   }
   function handleArrowKey(newSuggestionIndex) {
     if (!cappedSuggestions || !cappedSuggestions.length) {
@@ -60,16 +60,16 @@ function useSearchInput(inputRef, cappedSuggestions, value) {
   }
   function handleKeyDown(event) {
     switch (event.key) {
-      case 'Enter':
+      case "Enter":
         handleSearch();
         break;
-      case 'Escape':
+      case "Escape":
         handleClearQuery();
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         handleUpArrowKey();
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         handleDownArrowKey();
         break;
       default:

package/node/lib/components/snackbar/Snackbar.js

@@ -34,7 +34,7 @@ function Snackbar(props) {
   function handleClose() {
     setShow(false);
   }
-  const classes = first ? 'fr-snackbar-wrapper--first' : 'fr-snackbar-wrapper';
+  const classes = first ? "fr-snackbar-wrapper--first" : "fr-snackbar-wrapper";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
     nodeRef: nodeRef,
     onExited: () => onClose ? onClose() : undefined,
@@ -50,13 +50,13 @@ function Snackbar(props) {
       className: classes,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames.default)({
-          'fwe-snackbar': true,
-          'fwe-snackbar-b': data?.variant === 'b',
-          'fwe-snackbar-c': data?.variant === 'c',
-          'fwe-snackbar-info': data?.type === 'info',
-          'fwe-snackbar-warning': data?.type === 'warning',
-          'fwe-snackbar-error': data?.type === 'error',
-          'fwe-snackbar-shadow': data?.darkBackground
+          "fwe-snackbar": true,
+          "fwe-snackbar-b": data?.variant === "b",
+          "fwe-snackbar-c": data?.variant === "c",
+          "fwe-snackbar-info": data?.type === "info",
+          "fwe-snackbar-warning": data?.type === "warning",
+          "fwe-snackbar-error": data?.type === "error",
+          "fwe-snackbar-shadow": data?.darkBackground
         }, data?.className),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: data?.text

package/node/lib/components/snackbar/SnackbarProvider.js

@@ -51,7 +51,7 @@ function SnackbarProvider(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SnackbarContext.default.Provider, {
     value: contextValue,
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames.default)('fwe-snackbar-container', className),
+      className: (0, _classnames.default)("fwe-snackbar-container", className),
       children: snacks.map(snack => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Snackbar.default, {
         data: snack.data,
         onAction: () => snack.onAction ? snack.onAction() : undefined,

package/node/lib/components/stepper-horizontal/StepperHorizontal.js

@@ -28,12 +28,12 @@ const StepperHorizontal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }
   }
   const handleKeyDown = i => event => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       handleStepClick(i);
     }
   };
   const handleKeyUp = i => event => {
-    if (event.key === ' ') {
+    if (event.key === " ") {
       handleStepClick(i);
     }
   };
@@ -46,9 +46,9 @@ const StepperHorizontal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         ref: ref,
         onKeyDown: handleKeyDown(i),
         onKeyUp: handleKeyUp(i),
-        className: (0, _classnames.default)('fwe-step-container', {
-          'fwe-step-done': stepIndex > i,
-          'fwe-step-active': i === stepIndex
+        className: (0, _classnames.default)("fwe-step-container", {
+          "fwe-step-done": stepIndex > i,
+          "fwe-step-active": i === stepIndex
         }),
         onClick: () => handleStepClick(i),
         ...props,

package/node/lib/components/stepper-horizontal/step-horizontal/StepHorizontal.js

@@ -17,7 +17,7 @@ const StepHorizontal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('overflow-hidden', {
+    className: (0, _classnames.default)("overflow-hidden", {
       hidden: !isActive
     }),
     ...props,

package/node/lib/components/stepper-vertical/StepperVertical.js

@@ -38,7 +38,7 @@ const StepperVertical = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('fwe-stepper-vertical', className),
+    className: (0, _classnames.default)("fwe-stepper-vertical", className),
     ...props,
     children: stepComponents
   });

package/node/lib/components/stepper-vertical/step-vertical/StepVertical.js

@@ -28,7 +28,7 @@ const StepVertical = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         const itemHeight = contentRef.current?.offsetHeight;
         containerRef.current.style.height = `${itemHeight}px`;
       } else {
-        containerRef.current.style.height = '20px';
+        containerRef.current.style.height = "20px";
       }
     }
   }, [isActive]);
@@ -38,21 +38,21 @@ const StepVertical = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }
   }
   const handleKeyDown = event => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       handleClick();
     }
   };
   const handleKeyUp = event => {
-    if (event.key === ' ') {
+    if (event.key === " ") {
       handleClick();
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    className: (0, _classnames.default)('fwe-step-container', {
-      'fwe-last-element': isLastElement,
-      'fwe-step-active': isActive,
-      'fwe-step-done': isDone
+    className: (0, _classnames.default)("fwe-step-container", {
+      "fwe-last-element": isLastElement,
+      "fwe-step-active": isActive,
+      "fwe-step-done": isDone
     }),
     ...props,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/node/lib/components/tab/Tabs.js

@@ -23,7 +23,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children,
     className,
     onChange,
-    viewType = 'responsive',
+    viewType = "responsive",
     showDivider = false,
     ...props
   } = _ref;
@@ -34,10 +34,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const scrollContent = (0, _react.useRef)(null);
   const scrollArea = (0, _react.useRef)(null);
   const observer = (0, _react.useRef)(null);
-  let activeId = '';
+  let activeId = "";
   _react.default.Children.forEach(children, (element, i) => {
     if (/*#__PURE__*/_react.default.isValidElement(element)) {
-      if (activeId === '') {
+      if (activeId === "") {
         activeId = `${componentId.current}-tab-panel-${i}`;
       } else if (element.props.active) {
         activeId = `${componentId.current}-tab-panel-${i}`;
@@ -112,16 +112,16 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     /*#__PURE__*/
     // eslint-disable-next-line react/jsx-no-useless-fragment
     (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: viewType === 'legacy' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)('fwe-legacy-tabs', className),
+      children: viewType === "legacy" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)("fwe-legacy-tabs", className),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
           role: "tablist",
-          className: (0, _classnames.default)('fwe-legacy-tab-bar', {
-            'fwe-legacy-tab-bar-full-width': config?.tabBar?.fullWidth
+          className: (0, _classnames.default)("fwe-legacy-tab-bar", {
+            "fwe-legacy-tab-bar-full-width": config?.tabBar?.fullWidth
           }, {
-            'fwe-legacy-tab-items-equal-width': config?.tabItems?.appearance === 'equal'
+            "fwe-legacy-tab-items-equal-width": config?.tabItems?.appearance === "equal"
           }, {
-            'fwe-legacy-tab-items-fill': config?.tabItems?.appearance === 'fill'
+            "fwe-legacy-tab-items-fill": config?.tabItems?.appearance === "fill"
           }),
           children: innerChildren && innerChildren.map((child, i) => {
             const {
@@ -135,8 +135,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
               /*#__PURE__*/
               // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
               (0, _jsxRuntime.jsx)("li", {
-                className: (0, _classnames.default)('fwe-legacy-tab-item', {
-                  'fwe-active': active
+                className: (0, _classnames.default)("fwe-legacy-tab-item", {
+                  "fwe-active": active
                 }),
                 onClick: () => showTabPane(id),
                 children: icon ?
@@ -144,8 +144,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
                 // eslint-disable-next-line jsx-a11y/anchor-is-valid
                 (0, _jsxRuntime.jsxs)("a", {
                   id: tabId,
-                  className: (0, _classnames.default)('fwe-legacy-tab-link', {
-                    'fwe-can-swap-icon': innerChildren.length === 2 && i === 1
+                  className: (0, _classnames.default)("fwe-legacy-tab-link", {
+                    "fwe-can-swap-icon": innerChildren.length === 2 && i === 1
                   }),
                   role: "tab",
                   "aria-controls": id,
@@ -179,15 +179,15 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         ref: combinedRef,
         ...props,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _classnames.default)('fr-tab-scroller', classes),
+          className: (0, _classnames.default)("fr-tab-scroller", classes),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classnames.default)('fr-tab-scroller-scroll-area fr-tab-scroller-scroll-area--scroll', {
-              'fr-tab-scroller-scroll-area--compact': useCompactDensity
+            className: (0, _classnames.default)("fr-tab-scroller-scroll-area fr-tab-scroller-scroll-area--scroll", {
+              "fr-tab-scroller-scroll-area--compact": useCompactDensity
             }),
             ref: scrollArea,
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: (0, _classnames.default)('fr-tab-scroller-scroll-content', {
-                'fr-tab-scroller-scroll-content--with-divider': showDivider
+              className: (0, _classnames.default)("fr-tab-scroller-scroll-content", {
+                "fr-tab-scroller-scroll-content--with-divider": showDivider
               }),
               ref: scrollContent,
               style: style,
@@ -201,8 +201,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
                 return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
                   type: "button",
                   role: "tab",
-                  className: (0, _classnames.default)('fr-tab', {
-                    'fr-tab--active': active
+                  className: (0, _classnames.default)("fr-tab", {
+                    "fr-tab--active": active
                   }),
                   id: tabId,
                   "aria-controls": id,
@@ -216,8 +216,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
                       children: name
                     })
                   }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    className: (0, _classnames.default)('fr-tab-indicator', {
-                      'fr-tab-indicator--active': active
+                    className: (0, _classnames.default)("fr-tab-indicator", {
+                      "fr-tab-indicator--active": active
                     }),
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                       className: "fr-tab-indicator-content fr-tab-indicator-content--underline"

package/node/lib/components/tab/tab-pane/TabPane.js

@@ -16,9 +16,9 @@ function TabPane(_ref) {
     id
   } = _ref;
   const tabPaneClasses = (0, _classnames.default)({
-    'fr-show': isVisible
+    "fr-show": isVisible
   }, {
-    'fr-hide': !isVisible
+    "fr-hide": !isVisible
   }, className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     id: id,