@sebgroup/green-react 3.16.0 → 3.18.0

package/src/lib/modal/modal.js

@@ -0,0 +1,235 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { _ as __rest } from '../../../_tslib.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { randomId } from '@sebgroup/extract';
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '../form/button/button.js';
+import classNames from 'classnames';
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+
+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,
+    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
+    }), jsxs("button", {
+      className: "close",
+      onClick: handleClose,
+      children: [jsx("span", {
+        className: "sr-only",
+        children: "Close"
+      }), 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,
+    props = __rest(_a, ["type", "id", "isOpen", "size"]);
+  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) {
+      // Disable scrolling on the body when the modal is open
+      disableBodyScroll(modalRef.current);
+    } 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]);
+  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

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

package/src/lib/navbar/index.js

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

package/src/lib/navbar/navbar.js

@@ -0,0 +1,65 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Link } from '../link/link.js';
+import { useState, useEffect } from 'react';
+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

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

package/src/lib/popover/index.js

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

package/src/lib/popover/popover.js

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

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

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

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

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

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

@@ -0,0 +1,42 @@
+import { _ as __rest } from '../../../_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { GdsSegmentedControl } from '@sebgroup/green-core/components/segmented-control/index.js';
+import { GdsSegment } from '@sebgroup/green-core/components/segmented-control/segment/index.js';
+import { getScopedTagName } from '@sebgroup/green-core/scoping';
+import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
+import classNames from 'classnames';
+
+registerTransitionalStyles();
+var CoreSegementedControl = createComponent({
+  tagName: getScopedTagName('gds-segmented-control'),
+  elementClass: GdsSegmentedControl,
+  events: {
+    onchange: 'change'
+  },
+  react: React
+});
+var CoreSegment = createComponent({
+  tagName: getScopedTagName('gds-segment'),
+  elementClass: GdsSegment,
+  react: React
+});
+var SegmentedControl = function SegmentedControl(_a) {
+  var onChange = _a.onChange,
+    className = _a.className,
+    props = __rest(_a, ["onChange", "className"]);
+  return jsx(CoreSegementedControl, Object.assign({
+    onchange: onChange,
+    className: classNames(className)
+  }, props));
+};
+var Segment = function Segment(_a) {
+  var className = _a.className,
+    props = __rest(_a, ["className"]);
+  return jsx(CoreSegment, Object.assign({
+    className: classNames(className)
+  }, props));
+};
+
+export { CoreSegementedControl, CoreSegment, Segment, SegmentedControl };

package/src/lib/select/index.js

@@ -0,0 +1,12 @@
+export { Option, OptionGroup, Select } from './select.js';
+import '../../../_rollupPluginBabelHelpers.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@sebgroup/extract';
+import '../icons/chevronDown.js';
+import '../formItem/formItem.js';
+import 'classnames';
+import '../form/iconButton/iconButton.js';
+import '../icons/times.js';
+import '../icons/infoCircle.js';

package/src/lib/select/select.js

@@ -0,0 +1,63 @@
+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 { randomId, validateClassName } from '@sebgroup/extract';
+import { ChevronDown } from '../icons/chevronDown.js';
+import { FormItem } from '../formItem/formItem.js';
+import classNames from 'classnames';
+import '../form/iconButton/iconButton.js';
+import '../icons/times.js';
+import '../icons/infoCircle.js';
+
+var Select = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var 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-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, {
+    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.js

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

package/src/lib/slider/slider.js

@@ -0,0 +1,174 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { randomId, sliderColors, getSliderTrackBackground } from '@sebgroup/extract';
+
+var InputWrapper = function InputWrapper(_ref) {
+  var children = _ref.children,
+    unitLabel = _ref.unitLabel;
+  return jsx(Fragment, {
+    children: unitLabel ? jsxs("div", {
+      className: "group group-border group-focus",
+      children: [children, jsx("span", {
+        className: "form-text",
+        children: unitLabel
+      })]
+    }) : children
+  });
+};
+var minMaxFormatFn = function minMaxFormatFn(value, unit) {
+  if (unit) return "".concat(value, " ").concat(unit);
+  return value.toString();
+};
+function Slider(_ref2) {
+  var _ref2$name = _ref2.name,
+    name = _ref2$name === void 0 ? "".concat(randomId(), "-slider") : _ref2$name,
+    value = _ref2.value,
+    defaultValue = _ref2.defaultValue,
+    _ref2$min = _ref2.min,
+    min = _ref2$min === void 0 ? 0 : _ref2$min,
+    _ref2$max = _ref2.max,
+    max = _ref2$max === void 0 ? 100 : _ref2$max,
+    _ref2$minMaxFormat = _ref2.minMaxFormat,
+    minMaxFormat = _ref2$minMaxFormat === void 0 ? minMaxFormatFn : _ref2$minMaxFormat,
+    _ref2$showMinMax = _ref2.showMinMax,
+    showMinMax = _ref2$showMinMax === void 0 ? false : _ref2$showMinMax,
+    _ref2$step = _ref2.step,
+    step = _ref2$step === void 0 ? 1 : _ref2$step,
+    label = _ref2.label,
+    instruction = _ref2.instruction,
+    errorMessage = _ref2.errorMessage,
+    _ref2$hasTextbox = _ref2.hasTextbox,
+    hasTextbox = _ref2$hasTextbox === void 0 ? false : _ref2$hasTextbox,
+    unitLabel = _ref2.unitLabel,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    onChange = _ref2.onChange,
+    _ref2$enableClamping = _ref2.enableClamping,
+    enableClamping = _ref2$enableClamping === void 0 ? true : _ref2$enableClamping,
+    onClamp = _ref2.onClamp,
+    enterKeyHint = _ref2.enterKeyHint;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    background = _React$useState2[0],
+    setBackground = _React$useState2[1];
+  var _React$useState3 = React.useState(value !== null && value !== void 0 ? value : defaultValue),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    sliderValue = _React$useState4[0],
+    setSliderValue = _React$useState4[1];
+  var _React$useState5 = React.useState(sliderValue + ''),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    inputFieldValue = _React$useState6[0],
+    setInputFieldValue = _React$useState6[1];
+  React.useLayoutEffect(function () {
+    if (disabled) {
+      setBackground(sliderColors.disabled);
+      return;
+    }
+    var percent = 0;
+    if (sliderValue !== undefined) percent = (sliderValue - min) / (max - min) * 100;
+    setBackground(getSliderTrackBackground(percent));
+  }, [disabled, sliderValue]);
+  var clamp = function clamp(unclamped) {
+    if (!enableClamping) return Number(unclamped);
+    if (typeof unclamped === 'string') unclamped = Number(unclamped);
+    if (!unclamped || Number.isNaN(unclamped)) return min;
+    var clamped = Math.min(Math.max(min, unclamped), max);
+    if (clamped !== unclamped && onClamp) onClamp(unclamped);
+    return clamped;
+  };
+  var setNumValue = function setNumValue(value) {
+    if (value === '') value = min;
+    var unclamped = Number(value);
+    var clamped = clamp(unclamped);
+    setSliderValue(clamped);
+    return [unclamped, clamped];
+  };
+  React.useEffect(function () {
+    setNumValue(value);
+  }, [value]);
+  var handleChange = function handleChange(value) {
+    var _setNumValue = setNumValue(value),
+      _setNumValue2 = _slicedToArray(_setNumValue, 2),
+      unclamped = _setNumValue2[0],
+      clamped = _setNumValue2[1];
+    setInputFieldValue(unclamped + '');
+    if (onChange) onChange(clamped);
+  };
+  var handleInputFieldChange = function handleInputFieldChange(value) {
+    var shouldClamp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    handleChange(value);
+    if (value === '') setInputFieldValue('');else if (shouldClamp) setInputFieldValue(clamp(value) + '');
+  };
+  return jsxs(Fragment, {
+    children: [jsxs("div", {
+      className: "gds-slider-label-container",
+      children: [jsx("div", {
+        children: label && jsxs(Fragment, {
+          children: [jsx("label", {
+            htmlFor: name,
+            id: "".concat(name, "-label"),
+            children: label
+          }), instruction && jsx("p", {
+            children: instruction
+          })]
+        })
+      }), hasTextbox && jsx(InputWrapper, {
+        unitLabel: unitLabel,
+        children: jsx("input", {
+          type: "text",
+          inputMode: "numeric",
+          pattern: "[0-9]*",
+          value: inputFieldValue,
+          id: "".concat(name, "-textbox"),
+          name: name,
+          "aria-labelledby": "".concat(name, "-label"),
+          enterKeyHint: enterKeyHint,
+          className: errorMessage ? 'is-invalid' : '',
+          disabled: disabled,
+          onChange: function onChange(e) {
+            return handleInputFieldChange(e.currentTarget.value);
+          },
+          onKeyDown: function onKeyDown(e) {
+            return e.key === 'Enter' && handleInputFieldChange(e.currentTarget.value, true);
+          },
+          onBlur: function onBlur(e) {
+            return handleInputFieldChange(e.currentTarget.value, true);
+          },
+          min: min,
+          max: max,
+          onInvalid: function onInvalid(e) {
+            e.preventDefault();
+          }
+        })
+      })]
+    }), jsx("input", {
+      type: "range",
+      value: sliderValue || 0,
+      id: name,
+      name: name,
+      min: min,
+      max: max,
+      step: step,
+      disabled: disabled,
+      onChange: function onChange(e) {
+        return handleChange(e.currentTarget.value);
+      },
+      style: {
+        background: background
+      }
+    }), showMinMax && jsxs("div", {
+      className: "gds-slider-min-max",
+      children: [jsx("div", {
+        children: minMaxFormat(min, unitLabel)
+      }), jsx("div", {
+        children: minMaxFormat(max, unitLabel)
+      })]
+    }), errorMessage && jsx("p", {
+      className: "gds-slider-error-info",
+      children: errorMessage
+    })]
+  });
+}
+
+export { Slider, Slider as default };

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

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

package/src/lib/stepper/index.js

@@ -0,0 +1,4 @@
+export { Stepper } from './stepper.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+import '@sebgroup/extract';