@sebgroup/green-react 3.29.0 → 3.29.1-rc.20250730100346308

package/src/lib/modal/modal.js

@@ -1,243 +0,0 @@
-import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
-import { _ as __rest } from '../../../_tslib.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
-import classNames from 'classnames';
-import { randomId } from '@sebgroup/extract';
-import { Button } from '../form/button/button.js';
-
-var ModalHeader = function ModalHeader(_ref) {
-  var type = _ref.type,
-    setStatus = _ref.setStatus,
-    setShouldRender = _ref.setShouldRender,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? '' : _ref$header,
-    _ref$closeText = _ref.closeText,
-    closeText = _ref$closeText === void 0 ? 'Close Modal' : _ref$closeText,
-    id = _ref.id,
-    onClose = _ref.onClose;
-  var handleClose = function handleClose(event) {
-    if (type === 'slideout') {
-      setStatus && setStatus(IS_EXITING);
-      setTimeout(function () {
-        if (onClose) onClose(event);
-        setStatus && setStatus(UNMOUNTED);
-        setShouldRender && setShouldRender(false);
-      }, DELAY);
-    } else {
-      if (onClose) onClose(event);
-      setStatus && setStatus(UNMOUNTED);
-      setShouldRender && setShouldRender(false);
-    }
-  };
-  return jsxs("div", {
-    className: "header",
-    children: [jsx("h3", {
-      id: id,
-      children: header
-    }), jsx("button", {
-      className: "close",
-      "aria-label": closeText,
-      onClick: handleClose,
-      children: jsx("i", {})
-    })]
-  });
-};
-var ModalBody = function ModalBody(_ref2) {
-  var children = _ref2.children,
-    id = _ref2.id;
-  return jsx("div", {
-    className: "body",
-    id: id,
-    children: children
-  });
-};
-var ModalFooter = function ModalFooter(_ref3) {
-  var confirm = _ref3.confirm,
-    dismiss = _ref3.dismiss,
-    onClose = _ref3.onClose,
-    onConfirm = _ref3.onConfirm,
-    onDismiss = _ref3.onDismiss;
-    _ref3.preventBackdropClose;
-  var handleConfirm = function handleConfirm(event) {
-    if (onConfirm) onConfirm(event);
-    if (onClose) onClose(event);
-  };
-  var handleDismiss = function handleDismiss(event) {
-    if (onDismiss) onDismiss(event);
-    if (onClose) onClose(event);
-  };
-  return jsxs("div", {
-    className: "footer",
-    children: [dismiss && jsx(Button, {
-      variant: "secondary",
-      onClick: handleDismiss,
-      children: dismiss
-    }), confirm && jsx(Button, {
-      variant: "primary",
-      onClick: handleConfirm,
-      children: confirm
-    })]
-  });
-};
-/* This delay is the same as the one used in the aside modal mixin: /libs/chlorophyll/scss/components/modal/_mixins.scss */
-var DELAY = 500;
-var UNMOUNTED = 'unmounted';
-var IS_MOUNTING = 'is-mounting';
-var IS_ENTERING = 'is-entering';
-var ENTERED = 'entered';
-var IS_EXITING = 'is-exiting';
-var Modal = function Modal(_a) {
-  var _a$type = _a.type,
-    type = _a$type === void 0 ? 'default' : _a$type,
-    _a$id = _a.id,
-    id = _a$id === void 0 ? randomId() : _a$id,
-    isOpen = _a.isOpen,
-    _a$size = _a.size,
-    size = _a$size === void 0 ? 'sm' : _a$size,
-    _a$enableBodyScrollLo = _a.enableBodyScrollLock,
-    enableBodyScrollLock = _a$enableBodyScrollLo === void 0 ? true : _a$enableBodyScrollLo,
-    props = __rest(_a, ["type", "id", "isOpen", "size", "enableBodyScrollLock"]);
-  var _useState = useState(id),
-    _useState2 = _slicedToArray(_useState, 2),
-    uuid = _useState2[0];
-    _useState2[1];
-  var _useState3 = useState(UNMOUNTED),
-    _useState4 = _slicedToArray(_useState3, 2),
-    status = _useState4[0],
-    setStatus = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    shouldRender = _useState6[0],
-    setShouldRender = _useState6[1];
-  var modalRef = useRef(null);
-  useEffect(function () {
-    if (isOpen && !shouldRender && status === UNMOUNTED) {
-      setShouldRender(true);
-      setStatus(IS_MOUNTING);
-    }
-    if (isOpen && shouldRender && status === IS_MOUNTING) {
-      setStatus(IS_ENTERING);
-      setTimeout(function () {
-        setStatus(ENTERED);
-      }, DELAY);
-    }
-    if (!isOpen && status === ENTERED) {
-      setStatus(IS_EXITING);
-      setTimeout(function () {
-        setStatus(UNMOUNTED);
-        setShouldRender(false);
-      }, DELAY);
-    }
-    if (isOpen && modalRef.current && enableBodyScrollLock) {
-      // Disable scrolling on the body when the modal is open
-      disableBodyScroll(modalRef.current, {
-        allowTouchMove: function allowTouchMove(el) {
-          var _a;
-          // Allow touchmove for elements inside modal, its required for scroll to work on iOS devices
-          return ((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.contains(el)) || false;
-        }
-      });
-    } else if (modalRef.current) {
-      // Enable scrolling on the body when the modal is closed
-      enableBodyScroll(modalRef.current);
-    }
-    return function () {
-      // Cleanup by enabling body scroll and removing all scroll locks
-      clearAllBodyScrollLocks();
-    };
-  }, [isOpen, shouldRender, status, enableBodyScrollLock]);
-  if (!isOpen) return null;
-  var bodyId = "".concat(uuid, "_body");
-  var headerId = "".concat(uuid, "_header");
-  var dialogProps = {
-    id: uuid,
-    role: 'dialog',
-    'aria-modal': true,
-    'aria-labelledby': headerId,
-    'aria-describedby': bodyId
-  };
-  var modalContent;
-  switch (type) {
-    case 'slideout':
-      {
-        var className = classNames(status, {
-          'gds-slide-out--960': size === 'lg',
-          'gds-slide-out--768': size === 'md'
-        });
-        modalContent = jsxs("aside", Object.assign({
-          className: className
-        }, dialogProps, {
-          ref: modalRef,
-          children: [jsx(ModalHeader, Object.assign({
-            id: headerId,
-            setStatus: setStatus,
-            setShouldRender: setShouldRender,
-            type: type
-          }, props)), jsx(ModalBody, Object.assign({
-            id: bodyId
-          }, props)), jsx(ModalFooter, Object.assign({}, props))]
-        }));
-        break;
-      }
-    case 'takeover':
-      {
-        modalContent = jsxs("main", Object.assign({}, dialogProps, {
-          ref: modalRef,
-          children: [jsx(ModalHeader, Object.assign({
-            id: headerId
-          }, props)), jsx(ModalBody, Object.assign({
-            id: bodyId
-          }, props)), jsx(ModalFooter, Object.assign({}, props))]
-        }));
-        break;
-      }
-    default:
-      {
-        modalContent = jsx("div", {
-          className: "gds-dialog-wrapper",
-          ref: modalRef,
-          children: jsxs("section", Object.assign({}, dialogProps, {
-            children: [jsx(ModalHeader, Object.assign({
-              id: headerId
-            }, props)), jsx(ModalBody, Object.assign({
-              id: bodyId
-            }, props)), jsx(ModalFooter, Object.assign({}, props))]
-          }))
-        });
-        break;
-      }
-  }
-  var backdropClassnames = classNames('backdrop', {
-    'backdrop--transparent': type === 'slideout'
-  }, status);
-  var handleBackdropClick = function handleBackdropClick(event) {
-    if (props.onClose && !props.preventBackdropClose) {
-      if (type === 'slideout') {
-        setStatus && setStatus(IS_EXITING);
-        setTimeout(function () {
-          if (props.onClose) props.onClose(event);
-          setStatus && setStatus(UNMOUNTED);
-          setShouldRender && setShouldRender(false);
-        }, DELAY);
-      } else {
-        if (props.onClose) props.onClose(event);
-        setStatus && setStatus(UNMOUNTED);
-        setShouldRender && setShouldRender(false);
-      }
-    }
-  };
-  return jsxs(Fragment, {
-    children: [modalContent, jsx("div", {
-      "data-testid": "modal-backdrop",
-      className: backdropClassnames,
-      onClick: function onClick(e) {
-        return handleBackdropClick(e);
-      },
-      "aria-hidden": "true"
-    })]
-  });
-};
-
-export { Modal, Modal as default };

package/src/lib/navbar/index.d.ts

@@ -1 +0,0 @@
-export * from './navbar';

package/src/lib/navbar/index.js

@@ -1,7 +0,0 @@
-export { Navbar } from './navbar.js';
-import '../../../_rollupPluginBabelHelpers.js';
-import 'react/jsx-runtime';
-import 'react';
-import '../link/link.js';
-import '../../../_tslib.js';
-import 'classnames';

package/src/lib/navbar/navbar.d.ts

@@ -1,12 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { NavbarVariant } from '@sebgroup/extract';
-export interface NavProps extends HTMLAttributes<HTMLElement> {
-    title?: string;
-    titleLink?: string;
-    brandLink?: string;
-    brandAriaLabel?: string;
-    variant?: NavbarVariant;
-    children?: ReactNode;
-}
-export declare const Navbar: ({ children, variant, title, titleLink, brandLink, brandAriaLabel, }: NavProps) => import("react/jsx-runtime").JSX.Element;
-export default Navbar;

package/src/lib/navbar/navbar.js

@@ -1,65 +0,0 @@
-import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { Link } from '../link/link.js';
-import '../../../_tslib.js';
-import 'classnames';
-
-//TODO: Add variants
-var Navbar = function Navbar(_ref) {
-  var children = _ref.children,
-    variant = _ref.variant,
-    title = _ref.title,
-    titleLink = _ref.titleLink,
-    _ref$brandLink = _ref.brandLink,
-    brandLink = _ref$brandLink === void 0 ? 'https://www.seb.se' : _ref$brandLink,
-    _ref$brandAriaLabel = _ref.brandAriaLabel,
-    brandAriaLabel = _ref$brandAriaLabel === void 0 ? 'Open seb.se in new tab' : _ref$brandAriaLabel;
-  var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    props = _useState2[0],
-    setProps = _useState2[1];
-  useEffect(function () {
-    var classNames = [];
-    if (variant) classNames.push(variant);
-    setProps(Object.assign(Object.assign({}, props), {
-      className: classNames.join(' ')
-    }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [variant]);
-  return jsxs("nav", Object.assign({
-    role: "navigation"
-  }, props, {
-    children: [jsx(Link, {
-      "aria-label": brandAriaLabel,
-      href: brandLink,
-      target: "_blank",
-      className: "brand"
-    }), jsx("div", {
-      className: "container-fluid",
-      children: jsxs("div", {
-        className: "row justify-content-between align-items-center",
-        children: [jsx("div", {
-          className: "col-auto",
-          children: titleLink ? jsx(Link, {
-            className: "mx-4",
-            href: titleLink,
-            children: jsx("h1", {
-              children: title
-            })
-          }) : jsx("h1", {
-            children: title
-          })
-        }), jsx("div", {
-          className: "col-auto",
-          children: jsx("div", {
-            className: "group size-sm",
-            children: children
-          })
-        })]
-      })
-    })]
-  }));
-};
-
-export { Navbar, Navbar as default };

package/src/lib/popover/index.d.ts

@@ -1 +0,0 @@
-export * from './popover';

package/src/lib/popover/index.js

@@ -1,6 +0,0 @@
-export { Popover } from './popover.js';
-import 'react';
-import '@lit/react';
-import '@sebgroup/green-core/components/popover/popover.component';
-import '@sebgroup/green-core/components/popover/popover.trans.styles';
-import '@sebgroup/green-core/scoping';

package/src/lib/popover/popover.d.ts

@@ -1,2 +0,0 @@
-import { GdsPopover } from '@sebgroup/green-core/components/popover/popover.component';
-export declare const Popover: import("@lit/react").ReactWebComponent<GdsPopover, {}>;

package/src/lib/popover/popover.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { createComponent } from '@lit/react';
-import { GdsPopover } from '@sebgroup/green-core/components/popover/popover.component';
-import * as PopoverTransitionalStyles from '@sebgroup/green-core/components/popover/popover.trans.styles';
-import { getScopedTagName } from '@sebgroup/green-core/scoping';
-
-GdsPopover.define();
-PopoverTransitionalStyles.register();
-var Popover = createComponent({
-  tagName: getScopedTagName('gds-popover'),
-  elementClass: GdsPopover,
-  react: React
-});
-
-export { Popover };

package/src/lib/segmented-control/index.d.ts

@@ -1 +0,0 @@
-export * from './segmented-control';

package/src/lib/segmented-control/index.js

@@ -1,10 +0,0 @@
-export { GdsSegementedControl, GdsSegment, Segment, SegmentedControl } from './segmented-control.js';
-import '../../../_tslib.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@lit/react';
-import 'classnames';
-import '@sebgroup/green-core/components/segmented-control/segment/segment.component';
-import '@sebgroup/green-core/components/segmented-control/segmented-control.component';
-import '@sebgroup/green-core/scoping';
-import '@sebgroup/green-core/transitional-styles';

package/src/lib/segmented-control/segmented-control.d.ts

@@ -1,29 +0,0 @@
-import React, { ReactNode } from 'react';
-import { GdsSegment as CoreSegment } from '@sebgroup/green-core/components/segmented-control/segment/segment.component';
-import { GdsSegmentedControl as CoreSegmentedControl } from '@sebgroup/green-core/components/segmented-control/segmented-control.component';
-export declare const GdsSegementedControl: import("@lit/react").ReactWebComponent<CoreSegmentedControl<any>, {
-    onchange: string;
-}>;
-export declare const GdsSegment: import("@lit/react").ReactWebComponent<CoreSegment<any>, {}>;
-export interface SegmentedControlProps {
-    value?: string;
-    size?: 'small' | 'medium';
-    onChange?: (event: Event) => void;
-    className?: string;
-    children?: ReactNode | ReactNode[];
-}
-export interface SegmentProps {
-    value?: string;
-    className?: string;
-    disabled?: boolean;
-    children?: ReactNode | ReactNode[];
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    /** @deprecated */
-    segMinWidth?: number;
-}
-/** @deprecated - Use `GdsSegmentedControl` instead */
-export declare const SegmentedControl: React.FC<SegmentedControlProps>;
-/** @deprecated - Use `GdsSegmented` instead */
-export declare const Segment: React.FC<SegmentProps>;

package/src/lib/segmented-control/segmented-control.js

@@ -1,52 +0,0 @@
-import { _ as __rest } from '../../../_tslib.js';
-import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import { createComponent } from '@lit/react';
-import classNames from 'classnames';
-import { GdsSegment as GdsSegment$1 } from '@sebgroup/green-core/components/segmented-control/segment/segment.component';
-import { GdsSegmentedControl } from '@sebgroup/green-core/components/segmented-control/segmented-control.component';
-import { getScopedTagName } from '@sebgroup/green-core/scoping';
-import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
-
-GdsSegmentedControl.define();
-registerTransitionalStyles();
-var GdsSegementedControl = createComponent({
-  tagName: getScopedTagName('gds-segmented-control'),
-  elementClass: GdsSegmentedControl,
-  events: {
-    onchange: 'change'
-  },
-  react: React
-});
-var GdsSegment = createComponent({
-  tagName: getScopedTagName('gds-segment'),
-  elementClass: GdsSegment$1,
-  react: React
-});
-/** @deprecated - Use `GdsSegmentedControl` instead */
-var SegmentedControl = function SegmentedControl(_a) {
-  var onChange = _a.onChange,
-    className = _a.className,
-    props = __rest(_a, ["onChange", "className"]);
-  return jsx(GdsSegementedControl, Object.assign({
-    onchange: onChange,
-    className: classNames(className)
-  }, props));
-};
-/** @deprecated - Use `GdsSegmented` instead */
-var Segment = function Segment(_a) {
-  var className = _a.className,
-    minWidth = _a.minWidth,
-    maxWidth = _a.maxWidth,
-    segMinWidth = _a.segMinWidth,
-    props = __rest(_a, ["className", "minWidth", "maxWidth", "segMinWidth"]);
-  var formattedSegMinWidth = segMinWidth ? "".concat(segMinWidth, "px") : undefined;
-  return jsx(GdsSegment, Object.assign({
-    className: classNames(className)
-  }, props, {
-    "min-width": minWidth || formattedSegMinWidth,
-    "max-width": maxWidth
-  }));
-};
-
-export { GdsSegementedControl, GdsSegment, Segment, SegmentedControl };

package/src/lib/select/index.d.ts

@@ -1 +0,0 @@
-export * from './select';

package/src/lib/select/index.js

@@ -1,17 +0,0 @@
-export { Option, OptionGroup, Select } from './select.js';
-import '../../../_rollupPluginBabelHelpers.js';
-import '../../../_tslib.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'classnames';
-import '@sebgroup/extract';
-import '../formItem/formItem.js';
-import '@lit/react';
-import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
-import '@sebgroup/green-core/scoping';
-import '../form/iconButton/iconButton.js';
-import '../form/button/button.js';
-import '@sebgroup/green-core/react';
-import '../icons/times.js';
-import '../icons/infoCircle.js';
-import '../icons/chevronDown.js';

package/src/lib/select/select.d.ts

@@ -1,30 +0,0 @@
-import React from 'react';
-import { IExpandableInformation, ILabelAndLabelInformation, IValidator } from '@sebgroup/extract';
-export interface SelectProps extends IExpandableInformation, ILabelAndLabelInformation, React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> {
-    /**
-     * Set the live region attribute of the form control footer, this will change how error messages are read by screen readers
-     * @default 'assertive'
-     */
-    'aria-live'?: React.AriaAttributes['aria-live'];
-    label: string;
-    info?: string;
-    validator?: IValidator | undefined;
-    value?: string;
-    testId?: string;
-    /**
-     * @deprecated
-     * Use `info` instead
-     */
-    labelInformation?: string;
-}
-export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
-type OptionProps = React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>;
-export declare const Option: (props: OptionProps) => import("react/jsx-runtime").JSX.Element;
-type OptGroupProps = React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>;
-export declare const OptionGroup: (props: OptGroupProps) => import("react/jsx-runtime").JSX.Element;
-declare const _default: {
-    Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
-    Option: (props: OptionProps) => import("react/jsx-runtime").JSX.Element;
-    OptionGroup: (props: OptGroupProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default _default;

package/src/lib/select/select.js

@@ -1,71 +0,0 @@
-import { _ as _slicedToArray, a as _defineProperty } from '../../../_rollupPluginBabelHelpers.js';
-import { _ as __rest } from '../../../_tslib.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import { randomId, validateClassName } from '@sebgroup/extract';
-import { FormItem } from '../formItem/formItem.js';
-import { ChevronDown } from '../icons/chevronDown.js';
-import '@lit/react';
-import '@sebgroup/green-core/components/icon/icons/triangle-exclamation';
-import '@sebgroup/green-core/scoping';
-import '../form/iconButton/iconButton.js';
-import '../form/button/button.js';
-import '@sebgroup/green-core/react';
-import '../icons/times.js';
-import '../icons/infoCircle.js';
-
-var Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _a$ariaLive = _a['aria-live'],
-    ariaLive = _a$ariaLive === void 0 ? 'assertive' : _a$ariaLive,
-    ariaDescribedBy = _a['aria-describedby'],
-    _a$id = _a.id,
-    id = _a$id === void 0 ? randomId() : _a$id,
-    validator = _a.validator,
-    label = _a.label,
-    info = _a.info,
-    testId = _a.testId,
-    expandableInfo = _a.expandableInfo,
-    expandableInfoButtonLabel = _a.expandableInfoButtonLabel,
-    required = _a.required,
-    props = __rest(_a, ['aria-live', 'aria-describedby', "id", "validator", "label", "info", "testId", "expandableInfo", "expandableInfoButtonLabel", "required"]);
-  var _useState = useState(id),
-    _useState2 = _slicedToArray(_useState, 1),
-    uuid = _useState2[0];
-  var selectClassName = classNames('gds-select', _defineProperty({}, "".concat(validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator)), validator));
-  var describedBy = classNames(ariaDescribedBy, _defineProperty(_defineProperty(_defineProperty({}, "".concat(uuid, "_message"), (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0), "".concat(uuid, "_info"), info || props.labelInformation), "gds-expandable-info-".concat(uuid), expandableInfo));
-  return jsx(FormItem, {
-    "aria-live": ariaLive,
-    label: label,
-    labelInformation: info !== null && info !== void 0 ? info : props.labelInformation,
-    expandableInfo: expandableInfo,
-    expandableInfoButtonLabel: expandableInfoButtonLabel,
-    inputId: uuid,
-    validator: validator,
-    children: jsxs("div", {
-      className: selectClassName,
-      children: [jsx("select", Object.assign({
-        "aria-describedby": describedBy || undefined,
-        "aria-invalid": (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
-        "aria-required": required,
-        id: uuid,
-        "data-testid": testId,
-        ref: ref,
-        required: required
-      }, props)), jsx(ChevronDown, {})]
-    })
-  });
-});
-var Option = function Option(props) {
-  return jsx("option", Object.assign({}, props));
-};
-var OptionGroup = function OptionGroup(props) {
-  return jsx("optgroup", Object.assign({}, props));
-};
-var select = {
-  Select: Select,
-  Option: Option,
-  OptionGroup: OptionGroup
-};
-
-export { Option, OptionGroup, Select, select as default };

package/src/lib/slider/index.d.ts

@@ -1 +0,0 @@
-export * from './slider';

package/src/lib/slider/index.js

@@ -1,5 +0,0 @@
-export { Slider } from './slider.js';
-import '../../../_rollupPluginBabelHelpers.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@sebgroup/extract';

package/src/lib/slider/slider.d.ts

@@ -1,3 +0,0 @@
-import { SliderProps } from '../../types';
-export declare function Slider({ name, value, defaultValue, min, max, minMaxFormat, showMinMax, step, label, instruction, errorMessage, hasTextbox, unitLabel, disabled, onChange, enableClamping, onClamp, enterKeyHint, }: SliderProps): import("react/jsx-runtime").JSX.Element;
-export default Slider;