@ultraviolet/ui 1.0.0

package/dist/src/components/Loader/index.js

@@ -0,0 +1,87 @@
+import _styled from '@emotion/styled/base';
+import { keyframes, useTheme, css } from '@emotion/react';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const VIEWBOX_WIDTH = 100;
+const VIEWBOX_HEIGHT = 100;
+const HALF_VIEWBOX_WIDTH = VIEWBOX_WIDTH / 2;
+const HALF_VIEWBOX_HEIGHT = VIEWBOX_HEIGHT / 2;
+const spin = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+const Text = /*#__PURE__*/_styled('text', {
+  shouldForwardProp: prop => !['color'].includes(prop),
+  target: "e1y1n78x0"
+})("fill:", _ref2 => {
+  let {
+    theme,
+    color
+  } = _ref2;
+  return theme.colors[color]?.backgroundStrong || color;
+}, ";font-size:26px;dominant-baseline:middle;text-anchor:middle;");
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "si0mpz",
+  styles: "transition:stroke-dashoffset 0.5s ease 0s"
+} : {
+  name: "si0mpz",
+  styles: "transition:stroke-dashoffset 0.5s ease 0s",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const Loader = _ref3 => {
+  let {
+    percentage = 20,
+    text,
+    size = 40,
+    strokeWidth = 16,
+    color = 'primary',
+    trailColor = 'neutral',
+    active = false,
+    label = 'Loading'
+  } = _ref3;
+  const theme = useTheme();
+  const circleRadius = HALF_VIEWBOX_HEIGHT - strokeWidth / 2;
+  const boundedPercentage = Math.min(Math.max(percentage, 0), 100) / 100;
+  const circleDiameter = Math.PI * 2 * circleRadius;
+  return jsxs("svg", {
+    role: "progressbar",
+    "aria-label": label,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": percentage,
+    "aria-valuetext": `${percentage}%`,
+    css: active && /*#__PURE__*/css("animation:", spin, " 0.75s linear infinite;"),
+    viewBox: `0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`,
+    style: {
+      height: typeof size === 'string' ? size : `${size}px`,
+      width: typeof size === 'string' ? size : `${size}px`
+    },
+    children: [jsx("circle", {
+      cx: HALF_VIEWBOX_WIDTH,
+      cy: HALF_VIEWBOX_HEIGHT,
+      r: circleRadius,
+      fill: "none",
+      strokeWidth: strokeWidth,
+      stroke: theme.colors[trailColor]?.borderWeak || trailColor
+    }), jsx("circle", {
+      css: _ref,
+      cx: HALF_VIEWBOX_WIDTH,
+      cy: HALF_VIEWBOX_HEIGHT,
+      r: circleRadius,
+      fill: "none",
+      strokeWidth: strokeWidth,
+      strokeDasharray: circleDiameter,
+      strokeDashoffset: (1 - boundedPercentage) * circleDiameter,
+      stroke: theme.colors[color]?.backgroundStrong || color,
+      strokeLinecap: "round"
+    }), text ? jsx(Text, {
+      color: color,
+      x: HALF_VIEWBOX_WIDTH,
+      y: HALF_VIEWBOX_HEIGHT,
+      children: text
+    }) : null]
+  });
+};
+
+export { Loader };

package/dist/src/components/Menu/Item.js

@@ -0,0 +1,122 @@
+import _styled from '@emotion/styled/base';
+import { forwardRef } from 'react';
+import { Tooltip } from '../Tooltip/index.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const itemCoreStyle = _ref => {
+  let {
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  } = _ref;
+  return `
+  display: inline-block;
+  font-size: ${theme.typography.bodySmall.fontSize};
+  line-height: ${theme.typography.bodySmall.lineHeight};
+  font-weight: inherit;
+  padding: ${`${theme.space['0.5']} ${theme.space['1']}`};
+  border: none;
+  ${borderless ? '' : `border-bottom: 1px solid ${theme.colors.neutral.border};`}
+  cursor: pointer;
+  min-width: 110px;
+
+  color: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
+  svg {
+    fill: ${theme.colors[sentiment][disabled ? 'textDisabled' : 'text']};
+  }
+
+  ${disabled ? `
+        cursor: not-allowed;
+      ` : `
+          &:hover,
+          &:focus {
+            color: ${theme.colors[sentiment].textHover};
+            svg {
+              fill: ${theme.colors[sentiment].textHover};
+            }
+          }`}
+  `;
+};
+const StyledItem = /*#__PURE__*/_styled('button', {
+  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
+  target: "e10f690h1"
+})(_ref2 => {
+  let {
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  } = _ref2;
+  return itemCoreStyle({
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  });
+}, " background:none;");
+const StyledLinkItem = /*#__PURE__*/_styled('a', {
+  shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
+  target: "e10f690h0"
+})(_ref3 => {
+  let {
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  } = _ref3;
+  return itemCoreStyle({
+    theme,
+    borderless,
+    sentiment,
+    disabled
+  });
+}, " text-decoration:none;&:focus{text-decoration:none;}");
+const Item = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    borderless = false,
+    disabled = false,
+    onClick,
+    sentiment = 'neutral',
+    href,
+    children,
+    tooltip,
+    className,
+    'data-testid': dataTestId
+  } = _ref4;
+  if (href && !disabled) {
+    return jsx(Tooltip, {
+      text: tooltip,
+      children: jsx(StyledLinkItem, {
+        borderless: true,
+        href: href,
+        ref: ref,
+        onClick: disabled ? undefined : onClick,
+        role: "menuitem",
+        disabled: disabled,
+        sentiment: sentiment,
+        className: className,
+        "data-testid": dataTestId,
+        children: children
+      })
+    });
+  }
+  return jsx(Tooltip, {
+    text: tooltip,
+    children: jsx(StyledItem, {
+      type: "button",
+      ref: ref,
+      role: "menuitem",
+      disabled: disabled,
+      onClick: onClick,
+      borderless: borderless,
+      sentiment: sentiment,
+      className: className,
+      "data-testid": dataTestId,
+      children: children
+    })
+  });
+});
+var Item$1 = Item;
+
+export { Item$1 as default };

package/dist/src/components/Menu/index.js

@@ -0,0 +1,143 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import { forwardRef, isValidElement, useRef, useImperativeHandle, cloneElement } from 'react';
+import { usePopoverState, PopoverDisclosure, Popover } from 'reakit/Popover';
+import { Portal } from 'reakit/Portal';
+import Item from './Item.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const StyledPopover = /*#__PURE__*/_styled(Popover, {
+  target: "e1hqs9p51"
+})("border-radius:", _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.radii.default;
+}, ";background-color:", _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.neutral.background;
+}, ";color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral.text;
+}, ";box-shadow:", _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.shadows.dropdown;
+}, ";");
+const bottomStyles = theme => /*#__PURE__*/css("box-shadow:", theme.shadows.menu, ";&:after,&:before{bottom:100%;}&:after{border-bottom-color:", theme.colors.neutral.background, ";}&:before{border-bottom-color:transparent;}");
+const topStyles = theme => /*#__PURE__*/css("box-shadow:", theme.shadows.menu, ";&:after,&:before{top:100%;}&:after{border-top-color:", theme.colors.neutral.background, ";}&:before{border-top-color:rgba(165, 165, 205, 0.4);}");
+const endStyles = process.env.NODE_ENV === "production" ? {
+  name: "15zu3sa",
+  styles: "&:after{margin-left:-9px;right:24px;}&:before{margin-left:-11px;right:24px;}"
+} : {
+  name: "15zu3sa",
+  styles: "&:after{margin-left:-9px;right:24px;}&:before{margin-left:-11px;right:24px;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const startStyles = process.env.NODE_ENV === "production" ? {
+  name: "17k88rr",
+  styles: "&:after{margin-right:-9px;left:24px;}&:before{margin-right:-11px;left:24px;}"
+} : {
+  name: "17k88rr",
+  styles: "&:after{margin-right:-9px;left:24px;}&:before{margin-right:-11px;left:24px;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const centerStyles = process.env.NODE_ENV === "production" ? {
+  name: "1qzrhtz",
+  styles: "&:after,&:before{left:50%;transform:translateX(-50%);}"
+} : {
+  name: "1qzrhtz",
+  styles: "&:after,&:before{left:50%;transform:translateX(-50%);}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const arrowPlacementStyles = {
+  bottom: theme => /*#__PURE__*/css(centerStyles, ";", bottomStyles(theme), ";"),
+  'bottom-end': theme => /*#__PURE__*/css(endStyles, ";", bottomStyles(theme), ";"),
+  'bottom-start': theme => /*#__PURE__*/css(startStyles, ";", bottomStyles(theme), ";"),
+  top: theme => /*#__PURE__*/css(centerStyles, ";", topStyles(theme), ";"),
+  'top-end': theme => /*#__PURE__*/css(endStyles, ";", topStyles(theme), ";"),
+  'top-start': theme => /*#__PURE__*/css(startStyles, ";", topStyles(theme), ";")
+};
+const MenuList = /*#__PURE__*/_styled("div", {
+  target: "e1hqs9p50"
+})("&:after,&:before{border:solid transparent;border-width:9px;content:' ';height:0;width:0;position:absolute;pointer-events:none;}&:after{border-color:transparent;}&:before{border-color:transparent;}background-color:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";display:flex;flex-direction:column;text-align:center;justify-content:center;color:", _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colors.neutral.text;
+}, ";border-radius:", _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.radii.default;
+}, ";position:relative;", _ref8 => {
+  let {
+    placement,
+    theme,
+    hasArrow
+  } = _ref8;
+  return hasArrow && arrowPlacementStyles[placement]?.(theme);
+}, ";");
+const FwdMenu = /*#__PURE__*/forwardRef((_ref9, ref) => {
+  let {
+    ariaLabel = 'Menu',
+    id,
+    children,
+    disclosure,
+    hasArrow = true,
+    placement = 'bottom',
+    visible = false,
+    className,
+    'data-testid': dataTestId
+  } = _ref9;
+  const popover = usePopoverState({
+    baseId: id,
+    placement,
+    visible
+  });
+
+  // if you need dialog inside your component, use function, otherwise component is fine
+  const target = /*#__PURE__*/isValidElement(disclosure) ? disclosure : disclosure(popover);
+  const innerRef = useRef(target);
+  useImperativeHandle(ref, () => innerRef.current);
+  return jsxs(Fragment, {
+    children: [disclosure &&
+    // @ts-expect-error reakit types are invalid, no need to pass as something, default is div
+    jsx(PopoverDisclosure, {
+      ...popover,
+      ref: innerRef,
+      children: disclosureProps => /*#__PURE__*/cloneElement(target, disclosureProps)
+    }), jsx(Portal, {
+      children: jsx(StyledPopover, {
+        ...popover,
+        "aria-label": ariaLabel,
+        className: className,
+        children: /* Required to avoid loading menu content if not visible */
+        popover.visible ? jsx(MenuList, {
+          "data-testid": dataTestId,
+          className: className,
+          hasArrow: hasArrow,
+          placement: popover.placement,
+          role: "menu",
+          children: typeof children === 'function' ? children(popover) : children
+        }) : null
+      })
+    })]
+  });
+});
+const Menu = /*#__PURE__*/Object.assign(FwdMenu, {
+  Item
+});
+
+export { Menu };

package/dist/src/components/Modal/index.js

@@ -0,0 +1,279 @@
+import _styled from '@emotion/styled/base';
+import { css } from '@emotion/react';
+import { memo, useEffect, useCallback, isValidElement, useRef, cloneElement } from 'react';
+import { useDialogState, DialogBackdrop, Dialog, DialogDisclosure } from 'reakit/Dialog';
+import { Button } from '../Button/index.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { unfoldIn, unfoldOut, scaleForward, scaleBack, scaleUp, scaleDown, sketchIn, sketchOut, slideFromBottom, slideToBottom, slideFromLeft, slideToLeft, slideFromRight, slideToRight, slideFromTop, slideToTop, zoomIn, zoomOut } from '../../utils/animations.js';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const MODAL_WIDTH = {
+  large: 850,
+  medium: 708,
+  small: 616,
+  xsmall: 400,
+  xxsmall: 360
+};
+const MODAL_PLACEMENT = {
+  bottom: `
+    margin: auto;
+    margin-bottom: 0;
+  `,
+  'bottom-left': `
+    margin: auto;
+    margin-left: 0;
+    margin-bottom: 0;
+  `,
+  'bottom-right': `
+    margin: auto;
+    margin-right: 0;
+    margin-bottom: 0;
+  `,
+  center: `
+    margin: auto;
+  `,
+  left: `
+    margin: auto;
+    margin-left: 0;
+  `,
+  right: `
+    margin: auto;
+    margin-right: 0;
+  `,
+  top: `
+    margin: auto;
+    margin-top: 0px;
+  `,
+  'top-left': `
+    margin: auto;
+    margin-left: 0;
+    margin-top: 0;
+  `,
+  'top-right': `
+    margin: auto;
+    margin-right: 0;
+    margin-top: 0;
+  `
+};
+const MODAL_ANIMATION = {
+  fold: {
+    enter: unfoldIn,
+    leave: unfoldOut
+  },
+  scaleBack: {
+    enter: scaleForward,
+    leave: scaleBack
+  },
+  scaleUp: {
+    enter: scaleUp,
+    leave: scaleDown
+  },
+  sketch: {
+    enter: sketchIn,
+    leave: sketchOut
+  },
+  slideBottom: {
+    enter: slideFromBottom,
+    leave: slideToBottom
+  },
+  slideLeft: {
+    enter: slideFromLeft,
+    leave: slideToLeft
+  },
+  slideRight: {
+    enter: slideFromRight,
+    leave: slideToRight
+  },
+  slideTop: {
+    enter: slideFromTop,
+    leave: slideToTop
+  },
+  zoom: {
+    enter: zoomIn,
+    leave: zoomOut
+  }
+};
+const backdropAnimatedStyle = `
+  opacity: 0;
+  transition: opacity 250ms ease-in-out;
+  &[data-enter] {
+    opacity: 1;
+    transition: opacity 250ms ease-in-out;
+  }
+  &[data-leave] {
+    opacity: 0;
+    transition: opacity 400ms ease-in-out;
+  }
+`;
+const dialogAnimatedStyle = _ref => {
+  let {
+    animation
+  } = _ref;
+  return /*#__PURE__*/css("opacity:0;&[data-enter]{opacity:1;transition:opacity 500ms ease-in-out;animation:", MODAL_ANIMATION[animation].enter, " 500ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}&[data-leave]{opacity:0;transition:opacity 500ms ease-in-out;animation:", MODAL_ANIMATION[animation].leave, " 500ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}");
+};
+const Disclosure = _ref2 => {
+  let {
+    disclosure,
+    dialog
+  } = _ref2;
+  // if you need dialog inside your component, use function, otherwise component is fine
+  const target = /*#__PURE__*/isValidElement(disclosure) ? disclosure : disclosure(dialog);
+  const innerRef = useRef(target);
+  return (
+    // @ts-expect-error reakit types are invalid, no need to pass as something, default is div
+    jsx(DialogDisclosure, {
+      ...dialog,
+      ref: innerRef,
+      children: disclosureProps => /*#__PURE__*/cloneElement(target, disclosureProps)
+    })
+  );
+};
+const MemoDisclosure = /*#__PURE__*/memo(Disclosure);
+const StyledDialogBackdrop = /*#__PURE__*/_styled(DialogBackdrop, {
+  target: "ebywm9u2"
+})("display:flex;position:fixed;overflow:auto;padding:16px;top:0;bottom:0;right:0;left:0;opacity:1;background-color:", _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.overlay;
+}, ";", _ref4 => {
+  let {
+    animated
+  } = _ref4;
+  return animated && backdropAnimatedStyle;
+}, ";");
+const StyledDialog = /*#__PURE__*/_styled(Dialog, {
+  shouldForwardProp: prop => !['animation', 'placement', 'width', 'height', 'bordered'].includes(prop),
+  target: "ebywm9u1"
+})("background-color:", _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colors.neutral.backgroundWeakElevated;
+}, ";position:relative;border-radius:", _ref6 => {
+  let {
+    bordered,
+    theme
+  } = _ref6;
+  return bordered ? theme.radii.default : theme.radii.none;
+}, ";border:0;padding:32px;", _ref7 => {
+  let {
+    placement
+  } = _ref7;
+  return MODAL_PLACEMENT[placement];
+}, " width:", _ref8 => {
+  let {
+    width
+  } = _ref8;
+  return MODAL_WIDTH[width];
+}, "px;min-height:", _ref9 => {
+  let {
+    height
+  } = _ref9;
+  return height;
+}, ";box-shadow:", _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.shadows.modal;
+}, ";opacity:1;&::before{content:'';height:100%;width:100%;}", _ref11 => {
+  let {
+    animated,
+    animation
+  } = _ref11;
+  return animated && dialogAnimatedStyle({
+    animation
+  });
+}, ";");
+const StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "ebywm9u0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "et21s3",
+  styles: "display:flex;flex-grow:1;flex-wrap:wrap;justify-content:flex-end;position:absolute;top:16px;right:16px;left:16px"
+} : {
+  name: "et21s3",
+  styles: "display:flex;flex-grow:1;flex-wrap:wrap;justify-content:flex-end;position:absolute;top:16px;right:16px;left:16px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Modal = /*#__PURE__*/memo(_ref12 => {
+  let {
+    animated = false,
+    animation = 'zoom',
+    ariaLabel = 'modal',
+    id,
+    bordered = true,
+    children,
+    customDialogBackdropStyles,
+    customDialogStyles = {},
+    disclosure,
+    height = 'initial',
+    hideOnClickOutside = true,
+    hideOnEsc = true,
+    isClosable = true,
+    modal = true,
+    onClose,
+    onBeforeClose,
+    opened = false,
+    placement = 'center',
+    preventBodyScroll = true,
+    width = 'small',
+    className,
+    'data-testid': dataTestId
+  } = _ref12;
+  const dialog = useDialogState({
+    animated,
+    baseId: id,
+    modal,
+    visible: opened
+  });
+  const {
+    setVisible
+  } = dialog;
+  useEffect(() => setVisible(opened), [setVisible, opened]);
+  const onCloseCallBack = useCallback(async () => {
+    await onBeforeClose?.();
+    dialog.toggle();
+  }, [dialog, onBeforeClose]);
+  return jsxs(Fragment, {
+    children: [disclosure && jsx(MemoDisclosure, {
+      dialog: dialog,
+      disclosure: disclosure
+    }), jsx(StyledDialogBackdrop, {
+      ...dialog,
+      css: customDialogBackdropStyles,
+      children: jsx(StyledDialog, {
+        "aria-label": ariaLabel,
+        role: "dialog",
+        tabIndex: 0,
+        animation: animation,
+        bordered: bordered,
+        height: height,
+        placement: placement,
+        width: width,
+        css: customDialogStyles,
+        hideOnClickOutside: hideOnClickOutside,
+        hideOnEsc: hideOnEsc,
+        preventBodyScroll: preventBodyScroll,
+        ...dialog,
+        hide: onClose || onCloseCallBack,
+        className: className,
+        "data-testid": dataTestId,
+        children: jsxs(Fragment, {
+          children: [dialog.visible && (typeof children === 'function' ? children(dialog) : children), jsx(StyledContainer, {
+            children: isClosable && jsx(Button, {
+              "data-testid": dataTestId ? `${dataTestId}-close-button` : undefined,
+              onClick: onClose || onCloseCallBack,
+              variant: "ghost",
+              size: "small",
+              icon: "close",
+              sentiment: "neutral",
+              "aria-label": "close"
+            })
+          })]
+        })
+      })
+    })]
+  });
+});
+
+export { MODAL_ANIMATION, MODAL_PLACEMENT, MODAL_WIDTH, Modal };

package/dist/src/components/Notice/index.js

@@ -0,0 +1,33 @@
+import { Icon } from '../Icon/index.js';
+import { Stack } from '../Stack/index.js';
+import { Text } from '../Text/index.js';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+const Notice = _ref => {
+  let {
+    children,
+    className,
+    'data-testid': dataTestId
+  } = _ref;
+  return jsxs(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: 1,
+    "data-testid": dataTestId,
+    className: className,
+    children: [jsx(Icon, {
+      name: "information-outline",
+      size: 20,
+      color: "neutral",
+      prominence: "weak"
+    }), typeof children === 'string' ? jsx(Text, {
+      as: "p",
+      variant: "caption",
+      color: "neutral",
+      prominence: "weak",
+      children: children
+    }) : children]
+  });
+};
+
+export { Notice };

package/dist/src/components/NumberInput/helpers.js

@@ -0,0 +1,6 @@
+const bounded = (value, min, max) => Math.max(min, Math.min(value, max));
+const roundStep = (value, step, direction) => direction === -1 ? Math.floor(value / step) * step : Math.ceil(value / step) * step;
+const getMinusRoundedValue = (currentValue, step) => currentValue % step === 0 ? roundStep(currentValue - step, step, -1) : roundStep(currentValue, step, -1);
+const getPlusRoundedValue = (currentValue, step) => currentValue % step === 0 ? roundStep(currentValue + step, step, 1) : roundStep(currentValue, step, 1);
+
+export { bounded, getMinusRoundedValue, getPlusRoundedValue, roundStep };