@via-profit/ui-kit 0.2.1-alpha.1 → 0.2.2

package/Selectbox/SelectboxButtonWrapper.js

@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = require("@emotion/react");
 const Wrapper = styled_1.default.div `
   min-width: 16em;
   font-size: 0.9em;
@@ -48,28 +47,13 @@ const Wrapper = styled_1.default.div `
   display: flex;
   align-items: stretch;
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  border: 1px solid transparent;
-
-  border: 1px solid;
   outline: 1px solid transparent;
-
-  border-color: ${({ theme }) => theme.isDark
-    ? theme.color.textPrimary.darken(100).toString()
-    : theme.color.textPrimary.lighten(150).toString()};
   width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
-
   background-color: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
   transition: all 180ms ease-out 0s;
 
-  ${props => props.$error &&
-    (0, react_1.css) `
-      border-color: ${props.theme.color.error.toString()};
-      color: ${props.theme.color.error.toString()};
-      &:focus {
-        border-color: ${props.theme.color.error.lighten(0.6).toString()};
-      }
-    `}
+
 `;
 const SelectboxButtonWrapper = (props, ref) => {
     const { fullWidth, children, error } = props, nativeProps = __rest(props, ["fullWidth", "children", "error"]);

package/Selectbox/SelectboxMenu.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { MenuProps, MenuRef } from '../Menu';
+import { AnchorPos } from '../Popper';
+import { OnChange } from 'Selectbox';
+export interface SelectbosMenuProps<T, Multiple extends boolean | undefined = undefined> extends MenuProps<T, Multiple> {
+    readonly actualPlacement: AnchorPos;
+    readonly onChange?: OnChange<T, Multiple>;
+}
+declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: SelectbosMenuProps<T, Multiple> & {
+    ref?: React.Ref<MenuRef> | undefined;
+}) => JSX.Element;
+export default _default;

package/Selectbox/SelectboxMenu.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const Menu_1 = __importDefault(require("../Menu"));
+const OverrideMenuList_1 = __importDefault(require("../Autocomplete/OverrideMenuList"));
+const SelectboxMenu = React.forwardRef((props, ref) => {
+    const { actualPlacement, multiple, items, value, isOpen, anchorElement, getOptionSelected, onChange, onRequestClose, children, onAnchorPosChanged, } = props;
+    const handleSelectItem = React.useCallback((item) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(item);
+    }, [onChange]);
+    const handleRequestClose = React.useCallback(evt => {
+        if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
+            if (onRequestClose) {
+                onRequestClose(evt);
+            }
+            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
+        }
+    }, [onRequestClose, anchorElement]);
+    return (React.createElement(Menu_1.default, { ref: ref, offset: 0, anchorPos: actualPlacement, onAnchorPosChanged: onAnchorPosChanged, multiple: multiple, items: items, value: value, isOpen: isOpen && items.length > 0, autofocus: true, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onSelectItem: handleSelectItem, overrides: {
+            List: OverrideMenuList_1.default,
+        }, closeOnSelect: !multiple, onRequestClose: handleRequestClose }, ({ index, item }, itemProps) => children({ index, item: item }, itemProps)));
+});
+SelectboxMenu.displayName = 'SelectboxMenu';
+exports.default = React.memo(SelectboxMenu);

package/Selectbox/index.d.ts

@@ -1,17 +1,17 @@
-import React, { ButtonHTMLAttributes } from 'react';
-import { Value, OnRequestClose, GetOptionSelected } from '../Menu';
+import * as React from 'react';
+import { GetOptionSelected, OnRequestClose, Value } from '../Menu';
+import type { MenuItemCommonProps } from '../Menu/MenuItem';
 import SelectboxItem from '../Menu/MenuItem';
 import { SelectboxButtonProps } from './SelectboxButton';
 import { SelectboxChevronIconProps } from './SelectboxChevronIcon';
-import type { AnchorPos } from '../Popper';
-import type { MenuItemCommonProps } from '../Menu/MenuItem';
+import { AnchorPos } from '../Popper';
 import { TextFieldLabelProps } from '../TextField/TextFieldLabel';
 import { TextFieldLabelAsteriskProps } from '../TextField/TextFieldLabelAsterisk';
 import { TextFieldErrorTextProps } from '../TextField/TextFieldErrorText';
 import { SelectboxButtonWrapperProps } from './SelectboxButtonWrapper';
 import { SelectboxContainerProps } from './SelectboxContainer';
 export { SelectboxItem };
-export interface SelectboxProps<T, Multiple extends boolean | undefined = undefined> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange' | 'children'> {
+export interface SelectboxProps<T, Multiple extends boolean | undefined = undefined> extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange' | 'children'> {
     /**
      * Array of values
      */

package/Selectbox/index.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,8 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectboxItem = void 0;
-const react_1 = __importDefault(require("react"));
-const Menu_1 = __importDefault(require("../Menu"));
+const React = __importStar(require("react"));
 const MenuItem_1 = __importDefault(require("../Menu/MenuItem"));
 exports.SelectboxItem = MenuItem_1.default;
 const SelectboxButton_1 = __importDefault(require("./SelectboxButton"));
@@ -28,112 +50,108 @@ const TextFieldLabelAsterisk_1 = __importDefault(require("../TextField/TextField
 const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErrorText"));
 const SelectboxButtonWrapper_1 = __importDefault(require("./SelectboxButtonWrapper"));
 const SelectboxContainer_1 = __importDefault(require("./SelectboxContainer"));
-const Selectbox = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set' } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel"]);
-    const menuRef = react_1.default.useRef(null);
-    const overridesMap = react_1.default.useMemo(() => ({
-        Button: (overrides === null || overrides === void 0 ? void 0 : overrides.Button) || SelectboxButton_1.default,
-        Icon: (overrides === null || overrides === void 0 ? void 0 : overrides.Icon) || SelectboxChevronIcon_1.default,
-        Label: (overrides === null || overrides === void 0 ? void 0 : overrides.Label) || TextFieldLabel_1.default,
-        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || TextFieldLabelAsterisk_1.default,
-        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || TextFieldErrorText_1.default,
-        ButtonWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.ButtonWrapper) || SelectboxButtonWrapper_1.default,
-        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || SelectboxContainer_1.default,
-    }), [overrides]);
-    const [anchorElement, setAnchorElement] = react_1.default.useState(null);
-    react_1.default.useEffect(() => {
+const SelectboxMenu_1 = __importDefault(require("./SelectboxMenu"));
+const DEFAULT_OVERRIDES = {
+    Button: SelectboxButton_1.default,
+    Icon: SelectboxChevronIcon_1.default,
+    Label: TextFieldLabel_1.default,
+    Asterisk: TextFieldLabelAsterisk_1.default,
+    ErrorText: TextFieldErrorText_1.default,
+    ButtonWrapper: SelectboxButtonWrapper_1.default,
+    Container: SelectboxContainer_1.default,
+};
+const generateGuid = () => {
+    const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
+    return [
+        u.substring(0, 8),
+        u.substring(8, 12),
+        '4000-8' + u.substring(13, 16),
+        u.substring(16, 28),
+    ].join('-');
+};
+const Selectbox = React.forwardRef((props, ref) => {
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set' } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel"]);
+    const menuRef = React.useRef(null);
+    const [actualPlacement, setActualPlacement] = React.useState(anchorPos);
+    const [anchorElement, setAnchorElement] = React.useState(null);
+    const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);
+    const inputID = React.useMemo(() => {
+        if (typeof id === 'string') {
+            return id;
+        }
+        return generateGuid();
+    }, [id]);
+    React.useEffect(() => {
         if (isOpen && menuRef.current) {
             menuRef.current.scrollToFirstSelected();
         }
     }, [isOpen]);
-    react_1.default.useEffect(() => {
-        const mouseDownEvent = (event) => {
-            var _a;
-            let parentElem = event.target;
-            let needToClose = true;
-            while (parentElem && 'parentNode' in parentElem) {
-                if (parentElem === anchorElement || parentElem === ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.getListElement())) {
-                    needToClose = false;
-                    break;
-                }
-                parentElem = parentElem.parentNode;
-            }
-            if (needToClose) {
-                onRequestClose(event);
-            }
-        };
-        window.document.addEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
-        return () => {
-            window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, mouseDownEvent);
-        };
-    }, [onRequestClose, anchorElement]);
-    const renderValueAsString = react_1.default.useCallback(() => {
+    const renderValueAsString = React.useCallback(() => {
         if ((!multiple && !value) || (multiple && value.length === 0)) {
             return notSetLabel;
         }
         return selectedItemToString(value);
     }, [multiple, selectedItemToString, value, notSetLabel]);
-    const inputID = react_1.default.useMemo(() => {
-        if (typeof id === 'string') {
-            return id;
+    const handleButtonClick = React.useCallback((event) => {
+        var _a;
+        if (isOpen) {
+            onRequestClose(event);
         }
-        const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-        const guid = [
-            u.substring(0, 8),
-            u.substring(8, 12),
-            '4000-8' + u.substring(13, 16),
-            u.substring(16, 28),
-        ].join('-');
-        return guid;
-    }, [id]);
-    return (react_1.default.createElement(overridesMap.Container, null,
-        typeof label !== 'undefined' && label !== null && (react_1.default.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
+        else {
+            onRequestOpen(event);
+        }
+        (_a = nativeButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(nativeButtonProps, event);
+    }, [isOpen, nativeButtonProps, onRequestClose, onRequestOpen]);
+    const setRefs = React.useCallback((el) => {
+        if (anchorElement !== el) {
+            setAnchorElement(el);
+        }
+        if (typeof ref === 'function') {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+    }, [anchorElement, ref]);
+    const handleMouseDown = React.useCallback((event) => {
+        var _a;
+        let parentElem = event.target;
+        let needToClose = true;
+        while (parentElem && 'parentNode' in parentElem) {
+            if (parentElem === anchorElement || parentElem === ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.getListElement())) {
+                needToClose = false;
+                break;
+            }
+            parentElem = parentElem.parentNode;
+        }
+        if (needToClose) {
+            onRequestClose(event);
+        }
+    }, [onRequestClose, anchorElement]);
+    React.useEffect(() => {
+        window.document.addEventListener(ClickOutside_1.mouseEventMap.onMouseDown, handleMouseDown);
+        return () => {
+            window.document.removeEventListener(ClickOutside_1.mouseEventMap.onMouseDown, handleMouseDown);
+        };
+    }, [handleMouseDown]);
+    const buttonProps = React.useMemo(() => (Object.assign({ fullWidth,
+        error,
+        isOpen, anchorPos: actualPlacement, endIcon: isLoading ? React.createElement(Spinner_1.default, null) : React.createElement(overridesMap.Icon, { isOpen: isOpen }) }, nativeButtonProps)), [fullWidth, error, isOpen, actualPlacement, isLoading, overridesMap, nativeButtonProps]);
+    const labelProps = React.useMemo(() => ({
+        htmlFor: inputID,
+        error,
+    }), [inputID, error]);
+    if (!(items === null || items === void 0 ? void 0 : items.length) && !isLoading) {
+        return null;
+    }
+    return (React.createElement(overridesMap.Container, null,
+        label != null && (React.createElement(overridesMap.Label, Object.assign({}, labelProps),
             label,
-            typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (react_1.default.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
-        react_1.default.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error },
-            react_1.default.createElement(overridesMap.Button, Object.assign({ fullWidth: fullWidth, error: error, endIcon: isLoading ? react_1.default.createElement(Spinner_1.default, null) : react_1.default.createElement(overridesMap.Icon, { isOpen: isOpen }), onClick: event => {
-                    if (isOpen) {
-                        onRequestClose(event);
-                    }
-                    else {
-                        onRequestOpen(event);
-                    }
-                    if (typeof nativeButtonProps.onClick === 'function') {
-                        nativeButtonProps.onClick(event);
-                    }
-                } }, nativeButtonProps, { ref: el => {
-                    if (anchorElement !== el) {
-                        setAnchorElement(el);
-                    }
-                    if (typeof ref === 'function') {
-                        ref(el);
-                    }
-                    if (ref && typeof ref === 'object') {
-                        ref.current = el;
-                    }
-                } }), renderValueAsString())),
-        react_1.default.createElement(overridesMap.ErrorText, { error: error }, errorText),
-        react_1.default.useMemo(() => (react_1.default.createElement(Menu_1.default, { ref: menuRef, anchorPos: anchorPos, multiple: multiple, items: items, value: value, isOpen: isOpen && items.length > 0, autofocus: true, anchorElement: anchorElement, closeOutsideClick: false, getOptionSelected: getOptionSelected, onSelectItem: item => {
-                if (typeof onChange === 'function') {
-                    onChange(item);
-                }
-            }, closeOnSelect: !multiple, onRequestClose: evt => {
-                if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
-                    onRequestClose(evt);
-                    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
-                }
-            } }, ({ index, item }, itemProps) => children({ index, item: item }, itemProps))), [
-            items,
-            anchorPos,
-            multiple,
-            value,
-            isOpen,
-            getOptionSelected,
-            onChange,
-            onRequestClose,
-            children,
-            anchorElement,
-        ])));
+            requiredAsterisk != null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        React.createElement(overridesMap.ButtonWrapper, { fullWidth: fullWidth, error: error, isOpen: isOpen },
+            React.createElement(overridesMap.Button, Object.assign({}, buttonProps, { onClick: handleButtonClick, ref: setRefs }), renderValueAsString())),
+        React.createElement(overridesMap.ErrorText, { error: error }, errorText),
+        React.createElement(SelectboxMenu_1.default, { actualPlacement: actualPlacement, multiple: multiple, items: items, value: value, isOpen: isOpen, anchorElement: anchorElement, getOptionSelected: getOptionSelected, onChange: onChange, onRequestClose: onRequestClose, onAnchorPosChanged: setActualPlacement, ref: menuRef }, children)));
 });
 Selectbox.displayName = 'Selectbox';
 exports.default = Selectbox;

package/Surface/index.js

@@ -56,7 +56,7 @@ const Surface = (props, ref) => {
         Footer: (overrides === null || overrides === void 0 ? void 0 : overrides.Footer) || SurfaceFooter_1.default,
     }), [overrides]);
     if (!hasHeader && hasSubheader) {
-        console.warn(`[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header`);
+        console.warn('[@via-profit/ui-kit] Surface component. If you use a subheader, then you should add a header');
     }
     return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { inline: inline, noPadding: noPadding, rounded: rounded, ref: ref }),
         hasHeader && (React.createElement(overridesMap.Header, { noPadding: noPadding, rounded: rounded }, header)),

package/Swiper/Swiper.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { SwiperContainerProps } from './SwiperContainer';
+import { SwiperWrapperProps } from './SwiperWrapper';
+import { SwiperTrackProps } from './SwiperTrack';
+import SwiperSlide, { SwiperSlideBaseProps, SwiperSlideProps } from './SwiperSlide';
+export * from './SwiperSlide';
+export type SwiperSlideBaseElement = React.ReactElement<SwiperSlideBaseProps, typeof SwiperSlide>;
+export type SwiperSlideElement = React.ReactElement<SwiperSlideProps, typeof SwiperSlide>;
+export type SwiperRef = {
+    next: () => void;
+    prev: () => void;
+    goToIndex: (index: number) => void;
+    getRealIndex: () => number;
+    getTotalSlides: () => number;
+    pause: () => void;
+    resume: () => void;
+};
+export interface SwiperOverrides {
+    readonly Container?: React.ComponentType<SwiperContainerProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Wrapper?: React.ComponentType<SwiperWrapperProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Track?: React.ComponentType<SwiperTrackProps & React.RefAttributes<HTMLDivElement>>;
+}
+export type SwiperProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    readonly dragThreshold?: number;
+    readonly snap?: boolean;
+    readonly draggable?: boolean;
+    readonly initialIndex?: number;
+    readonly infinite?: boolean;
+    readonly onSlideChange?: (realIndex: number) => void;
+    readonly autoplay?: boolean;
+    readonly autoplayInterval?: number;
+    readonly pauseOnHover?: boolean;
+    readonly keyboardControl?: boolean;
+    readonly threshold?: number;
+    readonly resistance?: boolean;
+    readonly slidesPerView?: number;
+    readonly children?: readonly SwiperSlideBaseElement[];
+    readonly overrides?: SwiperOverrides;
+};
+export declare const Swiper: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    readonly dragThreshold?: number | undefined;
+    readonly snap?: boolean | undefined;
+    readonly draggable?: boolean | undefined;
+    readonly initialIndex?: number | undefined;
+    readonly infinite?: boolean | undefined;
+    readonly onSlideChange?: ((realIndex: number) => void) | undefined;
+    readonly autoplay?: boolean | undefined;
+    readonly autoplayInterval?: number | undefined;
+    readonly pauseOnHover?: boolean | undefined;
+    readonly keyboardControl?: boolean | undefined;
+    readonly threshold?: number | undefined;
+    readonly resistance?: boolean | undefined;
+    readonly slidesPerView?: number | undefined;
+    readonly children?: readonly SwiperSlideBaseElement[] | undefined;
+    readonly overrides?: SwiperOverrides | undefined;
+} & React.RefAttributes<SwiperRef>>;
+export default Swiper;