@equinor/eds-core-react 0.29.2-dev14022023 → 0.31.0

package/dist/esm/components/Radio/Radio.tokens.js

@@ -9,6 +9,8 @@ var _tokens$colors$intera = tokens.colors.interactive,
   _tokens$spacings$comf = tokens.spacings.comfortable,
   medium_small = _tokens$spacings$comf.medium_small,
   x_small = _tokens$spacings$comf.x_small,
+  x_large = _tokens$spacings$comf.x_large,
+  xx_large = _tokens$spacings$comf.xx_large,
   _tokens$clickbounds = tokens.clickbounds,
   clicboundSize = _tokens$clickbounds.default__base,
   compactClickboundSize = _tokens$clickbounds.compact__standard,
@@ -16,6 +18,7 @@ var _tokens$colors$intera = tokens.colors.interactive,
 var comfortable = {
   background: primaryColor,
   typography: labelTypography,
+  width: xx_large,
   spacings: {
     bottom: medium_small,
     top: medium_small,
@@ -44,6 +47,7 @@ var comfortable = {
   },
   modes: {
     compact: {
+      width: x_large,
       spacings: {
         bottom: x_small,
         top: x_small,

package/dist/esm/components/Select/NativeSelect/NativeSelect.js

@@ -52,7 +52,8 @@ var NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
   var labelProps = {
     htmlFor: id,
     label: label,
-    meta: meta
+    meta: meta,
+    disabled: disabled
   };
   var showLabel = label || meta;
   return /*#__PURE__*/jsx(ThemeProvider, {

package/dist/esm/components/SideBar/SideBar.js

@@ -42,7 +42,7 @@ var GridContainer = styled.div.withConfig({
 })(function (_ref2) {
   var theme = _ref2.theme,
     open = _ref2.open;
-  return css(["box-sizing:content-box;", " display:grid;grid-template-rows:1fr auto;height:100%;grid-template-areas:'content' 'footer';background-color:", ";overflow:hidden;width:", ";min-width:", ";"], bordersTemplate(theme.border), theme.background, open ? theme.maxWidth : theme.minWidth, open ? theme.maxWidth : theme.minWidth);
+  return css(["box-sizing:content-box;", " display:grid;grid-template-rows:1fr auto;height:100%;grid-template-areas:'content' 'footer';background-color:", ";overflow:auto;width:", ";min-width:", ";"], bordersTemplate(theme.border), theme.background, open ? theme.maxWidth : theme.minWidth, open ? theme.maxWidth : theme.minWidth);
 });
 var SideBar = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var onToggle = _ref3.onToggle,

package/dist/esm/components/SideBar/SideBarAccordion/index.js

@@ -0,0 +1,228 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef, useState, useMemo, Children } from 'react';
+import styled, { css } from 'styled-components';
+import { bordersTemplate, outlineTemplate, useId, mergeRefs } from '@equinor/eds-utils';
+import { chevron_up, chevron_down, arrow_drop_down } from '@equinor/eds-icons';
+import { useSideBar } from '../SideBar.context.js';
+import { sidebar } from '../SideBar.tokens.js';
+import { Icon } from '../../Icon/index.js';
+import { Menu } from '../../Menu/index.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Typography } from '../../Typography/Typography.js';
+import { Tooltip as Tooltip$1 } from '../../Tooltip/Tooltip.js';
+
+var _excluded = ["icon", "label", "isExpanded", "id", "active", "toggleExpand", "onClick", "children", "disabled"];
+var minWidth = sidebar.minWidth,
+  _tokens$entities$side = sidebar.entities.sidebarItem,
+  minHeight = _tokens$entities$side.minHeight,
+  border = _tokens$entities$side.border,
+  typographyColor = _tokens$entities$side.typography.color,
+  _tokens$entities$side2 = _tokens$entities$side.states,
+  _tokens$entities$side3 = _tokens$entities$side2.active,
+  menuActiveBackground = _tokens$entities$side3.background,
+  typographyActiveColor = _tokens$entities$side3.typography.color,
+  menuHoverBackground = _tokens$entities$side2.hover.background,
+  focus = _tokens$entities$side2.focus,
+  _tokens$entities$side4 = _tokens$entities$side2.disabled,
+  menuDisabledBackground = _tokens$entities$side4.background,
+  menuDisabledText = _tokens$entities$side4.typography.color;
+var MenuItem = styled.div.withConfig({
+  displayName: "SideBarAccordion__MenuItem",
+  componentId: "sc-1ekwnbi-0"
+})(function (_ref) {
+  var $isExpanded = _ref.$isExpanded;
+  return css(["display:grid;grid-template-columns:1fr;place-items:center;text-decoration:none;min-height:", ";", ";&:hover{cursor:pointer;background-color:", ";}&:focus-visible{", ";}"], minHeight, !$isExpanded && bordersTemplate(border), !$isExpanded ? menuHoverBackground : 'none', outlineTemplate(focus.outline));
+});
+var AccordionHeader = styled.h2.withConfig({
+  displayName: "SideBarAccordion__AccordionHeader",
+  componentId: "sc-1ekwnbi-1"
+})(function (_ref2) {
+  var $active = _ref2.$active;
+  return css(["margin:0;width:100%;min-height:", ";background-color:", ";&:hover{cursor:pointer;background-color:", ";}"], minHeight, $active ? menuActiveBackground : 'none', $active ? menuActiveBackground : menuHoverBackground);
+});
+var Button = styled.button.withConfig({
+  displayName: "SideBarAccordion__Button",
+  componentId: "sc-1ekwnbi-2"
+})(function (_ref3) {
+  var $active = _ref3.$active;
+  return css(["width:100%;min-height:", ";padding:0;border:none;background-color:", ";cursor:pointer;display:grid;place-items:center;&:focus-visible{", ";}&:disabled{background-color:", ";cursor:auto;}"], minHeight, $active ? menuActiveBackground : 'transparent', outlineTemplate(focus.outline), menuDisabledBackground);
+});
+var OpenSidebarButton = styled(Button).withConfig({
+  displayName: "SideBarAccordion__OpenSidebarButton",
+  componentId: "sc-1ekwnbi-3"
+})(["grid-template-columns:", " 1fr 48px;"], minWidth);
+var ClosedSidebarButton = styled(Button).withConfig({
+  displayName: "SideBarAccordion__ClosedSidebarButton",
+  componentId: "sc-1ekwnbi-4"
+})(["grid-template-columns:", ";position:relative;overflow:hidden;"], minWidth);
+var AccordionIcon = styled(Icon).withConfig({
+  displayName: "SideBarAccordion__AccordionIcon",
+  componentId: "sc-1ekwnbi-5"
+})(["position:absolute;bottom:-10px;right:-10px;transform:rotate(-45deg);"]);
+var Panel = styled.div.withConfig({
+  displayName: "SideBarAccordion__Panel",
+  componentId: "sc-1ekwnbi-6"
+})(["width:100%;", ""], bordersTemplate(border));
+var ItemText = styled(Typography).withConfig({
+  displayName: "SideBarAccordion__ItemText",
+  componentId: "sc-1ekwnbi-7"
+})(function (_ref4) {
+  var $textColor = _ref4.$textColor;
+  return css(["justify-self:start;color:", ";&::first-letter{text-transform:capitalize;}"], $textColor);
+});
+var Tooltip = styled(Tooltip$1).withConfig({
+  displayName: "SideBarAccordion__Tooltip",
+  componentId: "sc-1ekwnbi-8"
+})(["text-transform:capitalize;"]);
+var SideBarAccordion = /*#__PURE__*/forwardRef(function SideBarAccordion(_ref5, ref) {
+  var icon = _ref5.icon,
+    label = _ref5.label,
+    isExpanded = _ref5.isExpanded,
+    id = _ref5.id,
+    active = _ref5.active,
+    toggleExpand = _ref5.toggleExpand,
+    onClick = _ref5.onClick,
+    children = _ref5.children,
+    disabled = _ref5.disabled,
+    rest = _objectWithoutProperties(_ref5, _excluded);
+  var accordionId = useId(id, 'accordion');
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuIsOpen = _useState2[0],
+    setMenuIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    accordionIsOpen = _useState4[0],
+    setAccordionIsOpen = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    anchorEl = _useState6[0],
+    setAnchorEl = _useState6[1];
+  var _useSideBar = useSideBar(),
+    isOpen = _useSideBar.isOpen;
+  var showPanel = toggleExpand !== undefined ? isExpanded : accordionIsOpen;
+  var showAsActive = useMemo(function () {
+    // Active-state is controlled
+    if (active !== undefined) {
+      return active;
+    }
+    var hasActiveChild = false;
+    Children.forEach(children, function (child) {
+      var item = child;
+      if (item.props.active) {
+        hasActiveChild = true;
+      }
+    });
+
+    // When Sidebar is expanded, we only show accordion header as active if the accordion is closed, to avoid showing two active items at the same time.
+    return isOpen ? !showPanel && hasActiveChild : hasActiveChild;
+  }, [active, children, showPanel, isOpen]);
+  var combinedRefs = useMemo(function () {
+    return mergeRefs(setAnchorEl, ref);
+  }, [ref]);
+  var closeMenu = function closeMenu() {
+    setMenuIsOpen(false);
+  };
+  var onClickWhenSidePanelExpanded = function onClickWhenSidePanelExpanded() {
+    if (toggleExpand === undefined) {
+      setAccordionIsOpen(!accordionIsOpen);
+    } else {
+      toggleExpand();
+    }
+    onClick && onClick();
+  };
+  var onClickWhenSidePanelClosed = function onClickWhenSidePanelClosed() {
+    setMenuIsOpen(!menuIsOpen);
+    onClick && onClick();
+  };
+  var getTextColor = function getTextColor() {
+    if (showAsActive) {
+      return typographyActiveColor;
+    } else if (disabled) {
+      return menuDisabledText;
+    }
+    return typographyColor;
+  };
+  if (isOpen) {
+    return /*#__PURE__*/jsxs(MenuItem, {
+      $isExpanded: showPanel,
+      children: [/*#__PURE__*/jsx(AccordionHeader, {
+        $active: showAsActive,
+        children: /*#__PURE__*/jsxs(OpenSidebarButton, _objectSpread(_objectSpread({
+          ref: ref,
+          id: "header_".concat(accordionId),
+          "aria-expanded": showPanel,
+          "aria-controls": "panel_".concat(accordionId),
+          onClick: onClickWhenSidePanelExpanded,
+          disabled: disabled
+        }, rest), {}, {
+          children: [icon && /*#__PURE__*/jsx(Icon, {
+            data: icon,
+            color: getTextColor()
+          }), /*#__PURE__*/jsx(ItemText, {
+            variant: "cell_text",
+            group: "table",
+            $textColor: getTextColor(),
+            children: label
+          }), /*#__PURE__*/jsx(Icon, {
+            data: showPanel ? chevron_up : chevron_down,
+            size: 24,
+            color: getTextColor()
+          })]
+        }))
+      }), showPanel && /*#__PURE__*/jsx(Panel, {
+        id: "panel_".concat(accordionId),
+        role: "region",
+        "aria-labelledby": "header_".concat(accordionId),
+        children: children
+      })]
+    });
+  }
+  var tooltip = menuIsOpen ? '' : label;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Tooltip, {
+      title: tooltip,
+      placement: "right",
+      children: /*#__PURE__*/jsx(MenuItem, {
+        $isExpanded: showPanel,
+        children: /*#__PURE__*/jsx(AccordionHeader, {
+          $active: showAsActive,
+          children: /*#__PURE__*/jsxs(ClosedSidebarButton, _objectSpread(_objectSpread({
+            ref: combinedRefs,
+            id: "anchor-default",
+            "aria-haspopup": "true",
+            "aria-expanded": menuIsOpen,
+            "aria-controls": "menu-default",
+            onClick: onClickWhenSidePanelClosed,
+            disabled: disabled
+          }, rest), {}, {
+            children: [icon && /*#__PURE__*/jsx(Icon, {
+              data: icon,
+              color: getTextColor()
+            }), /*#__PURE__*/jsx(AccordionIcon, {
+              data: arrow_drop_down,
+              size: 24,
+              color: getTextColor()
+            })]
+          }))
+        })
+      })
+    }), /*#__PURE__*/jsx(Menu, {
+      open: menuIsOpen,
+      placement: 'right-start',
+      onClose: closeMenu,
+      anchorEl: anchorEl,
+      children: Children.map(children, function (child) {
+        var item = child;
+        return /*#__PURE__*/jsx(Menu.Item, _objectSpread(_objectSpread({}, child.props), {}, {
+          children: item.props.label
+        }));
+      })
+    })]
+  });
+});
+SideBarAccordion.displayName = 'SidebarAccordion';
+
+export { SideBarAccordion };

package/dist/esm/components/SideBar/SideBarAccordionItem/index.js

@@ -0,0 +1,71 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { outlineTemplate } from '@equinor/eds-utils';
+import { sidebar } from '../SideBar.tokens.js';
+import { useSideBar } from '../SideBar.context.js';
+import { jsx } from 'react/jsx-runtime';
+import { Typography } from '../../Typography/Typography.js';
+
+var _excluded = ["label", "active", "onClick", "as"];
+var minWidth = sidebar.minWidth,
+  _tokens$entities$side = sidebar.entities.sidebarItem,
+  minHeight = _tokens$entities$side.minHeight,
+  typographyColor = _tokens$entities$side.typography.color,
+  _tokens$entities$side2 = _tokens$entities$side.states,
+  _tokens$entities$side3 = _tokens$entities$side2.active,
+  menuActiveBackground = _tokens$entities$side3.background,
+  typographyActiveColor = _tokens$entities$side3.typography.color,
+  focus = _tokens$entities$side2.focus,
+  menuHoverBackground = _tokens$entities$side2.hover.background;
+var Container = styled.a.withConfig({
+  displayName: "SideBarAccordionItem__Container",
+  componentId: "sc-1aeo1e1-0"
+})(function (_ref) {
+  var $active = _ref.$active;
+  return css(["display:grid;grid-template-columns:", " 1fr;justify-items:stretch;background-color:", ";cursor:pointer;text-decoration:none;border:0;width:100%;padding:0;&:hover{background-color:", ";}&:focus-visible{", ";}"], minWidth, $active ? menuActiveBackground : 'transparent', $active ? menuActiveBackground : menuHoverBackground, outlineTemplate(focus.outline));
+});
+var TextWrapper = styled.div.withConfig({
+  displayName: "SideBarAccordionItem__TextWrapper",
+  componentId: "sc-1aeo1e1-1"
+})(["min-height:", ";grid-column:2;justify-self:start;display:flex;align-items:center;width:100%;"], minHeight);
+var Text = styled(Typography).withConfig({
+  displayName: "SideBarAccordionItem__Text",
+  componentId: "sc-1aeo1e1-2"
+})(function (_ref2) {
+  var $active = _ref2.$active;
+  return css(["color:", ";width:100%;&::first-letter{text-transform:capitalize;}"], $active ? typographyActiveColor : typographyColor);
+});
+var SideBarAccordionItem = /*#__PURE__*/forwardRef(function SidebarLink(_ref3, ref) {
+  var label = _ref3.label,
+    active = _ref3.active,
+    onClick = _ref3.onClick,
+    _ref3$as = _ref3.as,
+    as = _ref3$as === void 0 ? 'a' : _ref3$as,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  var _useSideBar = useSideBar(),
+    isOpen = _useSideBar.isOpen;
+  if (isOpen) {
+    return /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({
+      as: as,
+      tabIndex: 0,
+      $active: active,
+      onClick: onClick,
+      ref: ref
+    }, rest), {}, {
+      children: /*#__PURE__*/jsx(TextWrapper, {
+        children: /*#__PURE__*/jsx(Text, {
+          variant: "cell_text",
+          group: "table",
+          $active: active,
+          children: label
+        })
+      })
+    }));
+  }
+  return null;
+});
+SideBarAccordionItem.displayName = 'SideBarAccordionItem';
+
+export { SideBarAccordionItem };

package/dist/esm/components/SideBar/SidebarLink/index.js

@@ -31,7 +31,7 @@ var Container = styled.a.withConfig({
     _theme$entities$sideb3 = _theme$entities$sideb2.disabled,
     menuDisabledBackground = _theme$entities$sideb3.background,
     menuDisabledText = _theme$entities$sideb3.typography.color;
-  return css(["background-color:", ";display:grid;grid-template-columns:", " 1fr;place-items:center;", " text-decoration:none;min-height:", ";&:hover{cursor:pointer;background-color:", ";}&:disabled{background-color:", ";color:", ";}&:focus-visible{", ";}"], $active ? menuActiveBackground : 'none', minWidth, bordersTemplate(border), minHeight, $active ? menuActiveBackground : menuHoverBackground, menuDisabledBackground, menuDisabledText, outlineTemplate(focus.outline));
+  return css(["background-color:", ";display:grid;grid-template-columns:", " 1fr;width:100%;padding:0;place-items:center;border:0;", " text-decoration:none;min-height:", ";&:hover{cursor:pointer;background-color:", ";}&:disabled{background-color:", ";color:", ";cursor:not-allowed;& > p{color:", ";}& > svg{fill:", ";}}&:focus-visible{", ";}"], $active ? menuActiveBackground : 'transparent', minWidth, bordersTemplate(border), minHeight, $active ? menuActiveBackground : menuHoverBackground, menuDisabledBackground, menuDisabledText, menuDisabledText, menuDisabledText, outlineTemplate(focus.outline));
 });
 var ItemText = styled(Typography).withConfig({
   displayName: "SidebarLink__ItemText",

package/dist/esm/components/SideBar/index.js

@@ -4,6 +4,8 @@ import { SideBarContent } from './SideBarContent.js';
 import { SideBarFooter } from './SideBarFooter.js';
 import { SideBarToggle } from './SideBarToggle.js';
 import { SideBarButton } from './SideBarButton/index.js';
+import { SideBarAccordion } from './SideBarAccordion/index.js';
+import { SideBarAccordionItem } from './SideBarAccordionItem/index.js';
 
 var SideBar = SideBar$1;
 SideBar.Link = SidebarLink;
@@ -11,10 +13,14 @@ SideBar.Content = SideBarContent;
 SideBar.Footer = SideBarFooter;
 SideBar.Toggle = SideBarToggle;
 SideBar.Button = SideBarButton;
+SideBar.Accordion = SideBarAccordion;
+SideBar.AccordionItem = SideBarAccordionItem;
 SideBar.Link.displayName = 'SideBar.Link';
 SideBar.Content.displayName = 'SideBar.Content';
 SideBar.Footer.displayName = 'SideBar.Footer';
 SideBar.Toggle.displayName = 'SideBar.Toggle';
 SideBar.Button.displayName = 'SideBar.Button';
+SideBar.Accordion.displayName = 'SideBar.Accordion';
+SideBar.AccordionItem.displayName = 'SideBar.AccordionItem';
 
 export { SideBar };

package/dist/esm/components/Slider/Output.js

@@ -10,17 +10,16 @@ var _tokens$entities = slider.entities,
 var StyledOutput = styled.output.withConfig({
   displayName: "Output__StyledOutput",
   componentId: "sc-1dy945x-0"
-})(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], function (_ref) {
-  var value = _ref.value;
-  return value;
-}, typographyTemplate(output.typography), slider.background, track.spacings.top);
-var Output = /*#__PURE__*/forwardRef(function Output(_ref2, ref) {
-  var children = _ref2.children,
-    value = _ref2.value,
-    htmlFor = _ref2.htmlFor;
+})(["--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], typographyTemplate(output.typography), slider.background, track.spacings.top);
+var Output = /*#__PURE__*/forwardRef(function Output(_ref, ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    htmlFor = _ref.htmlFor;
   return /*#__PURE__*/jsx(StyledOutput, {
     ref: ref,
-    value: value,
+    style: {
+      '--val': value
+    },
     htmlFor: htmlFor,
     children: children
   });

package/dist/esm/components/Slider/Slider.js

@@ -1,6 +1,6 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { slider } from './Slider.tokens.js';
@@ -21,41 +21,44 @@ var fakeTrackBgHover = css({
 });
 var trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 var wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
-var RangeWrapper = styled.div.withConfig({
+var RangeWrapper = styled.div.attrs(function (_ref) {
+  var $min = _ref.$min,
+    $max = _ref.$max,
+    valA = _ref.valA,
+    valB = _ref.valB,
+    disabled = _ref.disabled,
+    style = _ref.style;
+  return {
+    style: _objectSpread({
+      '--a': valA,
+      '--b': valB,
+      '--min': $min,
+      '--max': $max,
+      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+    }, style)
+  };
+}).withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], function (_ref) {
-  var valA = _ref.valA;
-  return valA;
-}, function (_ref2) {
-  var valB = _ref2.valB;
-  return valB;
-}, function (_ref3) {
-  var min = _ref3.min;
-  return min;
-}, function (_ref4) {
-  var max = _ref4.max;
-  return max;
-}, wrapperGrid, fakeTrackBg, trackFill, function (_ref5) {
-  var disabled = _ref5.disabled;
-  return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
-}, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
-var Wrapper = styled.div.withConfig({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+var Wrapper = styled.div.attrs(function (_ref2) {
+  var $min = _ref2.$min,
+    $max = _ref2.$max,
+    value = _ref2.value,
+    disabled = _ref2.disabled,
+    style = _ref2.style;
+  return {
+    style: _objectSpread({
+      '--min': $min,
+      '--max': $max,
+      '--value': value,
+      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+    }, style)
+  };
+}).withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], function (_ref6) {
-  var min = _ref6.min;
-  return min;
-}, function (_ref7) {
-  var max = _ref7.max;
-  return max;
-}, function (_ref8) {
-  var value = _ref8.value;
-  return value;
-}, wrapperGrid, fakeTrackBg, trackFill, function (_ref9) {
-  var disabled = _ref9.disabled;
-  return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
-}, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover, track.entities.indicator.states.hover.background);
 var WrapperGroupLabel = styled.div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
@@ -68,26 +71,26 @@ var SrOnlyLabel = styled.label.withConfig({
   displayName: "Slider__SrOnlyLabel",
   componentId: "sc-n1grrg-4"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
-  var _ref10$min = _ref10.min,
-    min = _ref10$min === void 0 ? 0 : _ref10$min,
-    _ref10$max = _ref10.max,
-    max = _ref10$max === void 0 ? 100 : _ref10$max,
-    _ref10$value = _ref10.value,
-    value = _ref10$value === void 0 ? [40, 60] : _ref10$value,
-    outputFunction = _ref10.outputFunction,
-    onChange = _ref10.onChange,
-    onChangeCommitted = _ref10.onChangeCommitted,
-    _ref10$minMaxDots = _ref10.minMaxDots,
-    minMaxDots = _ref10$minMaxDots === void 0 ? true : _ref10$minMaxDots,
-    _ref10$minMaxValues = _ref10.minMaxValues,
-    minMaxValues = _ref10$minMaxValues === void 0 ? true : _ref10$minMaxValues,
-    _ref10$step = _ref10.step,
-    step = _ref10$step === void 0 ? 1 : _ref10$step,
-    disabled = _ref10.disabled,
-    ariaLabelledby = _ref10.ariaLabelledby,
-    ariaLabelledbyNative = _ref10['aria-labelledby'],
-    rest = _objectWithoutProperties(_ref10, _excluded);
+var Slider = /*#__PURE__*/forwardRef(function Slider(_ref3, ref) {
+  var _ref3$min = _ref3.min,
+    min = _ref3$min === void 0 ? 0 : _ref3$min,
+    _ref3$max = _ref3.max,
+    max = _ref3$max === void 0 ? 100 : _ref3$max,
+    _ref3$value = _ref3.value,
+    value = _ref3$value === void 0 ? [40, 60] : _ref3$value,
+    outputFunction = _ref3.outputFunction,
+    onChange = _ref3.onChange,
+    onChangeCommitted = _ref3.onChangeCommitted,
+    _ref3$minMaxDots = _ref3.minMaxDots,
+    minMaxDots = _ref3$minMaxDots === void 0 ? true : _ref3$minMaxDots,
+    _ref3$minMaxValues = _ref3.minMaxValues,
+    minMaxValues = _ref3$minMaxValues === void 0 ? true : _ref3$minMaxValues,
+    _ref3$step = _ref3.step,
+    step = _ref3$step === void 0 ? 1 : _ref3$step,
+    disabled = _ref3.disabled,
+    ariaLabelledby = _ref3.ariaLabelledby,
+    ariaLabelledbyNative = _ref3['aria-labelledby'],
+    rest = _objectWithoutProperties(_ref3, _excluded);
   var isRangeSlider = Array.isArray(value);
   var parsedValue = isRangeSlider ? value : [value];
   var _useState = useState(parsedValue),
@@ -98,6 +101,10 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     sliderValue = _useState4[0],
     setSliderValue = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mousePressed = _useState6[0],
+    setMousePressed = _useState6[1];
   useEffect(function () {
     if (isRangeSlider) {
       if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
@@ -118,6 +125,18 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
     if (isRangeSlider) {
       var _newValue = sliderValue.slice();
       _newValue[valueArrIdx] = changedValue;
+
+      //Prevent min/max values from crossing eachother
+      if (valueArrIdx === 0 && _newValue[0] >= _newValue[1]) {
+        var _maxRange$current;
+        _newValue[0] = _newValue[1];
+        (_maxRange$current = maxRange.current) === null || _maxRange$current === void 0 ? void 0 : _maxRange$current.focus();
+      }
+      if (valueArrIdx === 1 && _newValue[1] <= _newValue[0]) {
+        var _minRange$current;
+        _newValue[1] = _newValue[0];
+        (_minRange$current = minRange.current) === null || _minRange$current === void 0 ? void 0 : _minRange$current.focus();
+      }
       setSliderValue(_newValue);
       if (onChange) {
         // Callback for provided onChange func
@@ -146,18 +165,18 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
   };
   var findClosestRange = function findClosestRange(event) {
     var target = event.target;
-    if (target.type === 'output') {
+    if (target.type === 'output' || mousePressed) {
       return;
     }
     var bounds = target.getBoundingClientRect();
     var x = event.clientX - bounds.left;
     var inputWidth = minRange.current.offsetWidth;
-    var minValue = minRange.current.value;
-    var maxValue = maxRange.current.value;
+    var minValue = parseFloat(minRange.current.value);
+    var maxValue = parseFloat(maxRange.current.value);
     var diff = max - min;
     var normX = x / inputWidth * diff + min;
-    var maxX = Math.abs(normX - parseFloat(maxValue));
-    var minX = Math.abs(normX - parseFloat(minValue));
+    var maxX = Math.abs(normX - maxValue);
+    var minX = Math.abs(normX - minValue);
     if (minX > maxX) {
       minRange.current.style.zIndex = '10';
       maxRange.current.style.zIndex = '20';
@@ -165,6 +184,22 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
       minRange.current.style.zIndex = '20';
       maxRange.current.style.zIndex = '10';
     }
+    //special cases where both thumbs are all the way to the left or right
+    if (minValue === maxValue && minValue === min) {
+      minRange.current.style.zIndex = '10';
+      maxRange.current.style.zIndex = '20';
+    }
+    if (minValue === maxValue && maxValue === max) {
+      minRange.current.style.zIndex = '20';
+      maxRange.current.style.zIndex = '10';
+    }
+  };
+  var handleDragging = function handleDragging(e) {
+    if (e.type === 'mousedown') {
+      setMousePressed(true);
+    } else {
+      setMousePressed(false);
+    }
   };
   var inputIdA = useId(null, 'inputA');
   var inputIdB = useId(null, 'inputB');
@@ -187,10 +222,12 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
       "aria-labelledby": getAriaLabelledby(),
       valA: sliderValue[0],
       valB: sliderValue[1],
-      max: max,
-      min: min,
+      $max: max,
+      $min: min,
       disabled: disabled,
       onMouseMove: findClosestRange,
+      onMouseDown: handleDragging,
+      onMouseUp: handleDragging,
       children: [minMaxDots && /*#__PURE__*/jsx(WrapperGroupLabelDots, {}), /*#__PURE__*/jsx(SrOnlyLabel, {
         htmlFor: inputIdA,
         children: "Value A"
@@ -256,8 +293,8 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
       })]
     })) : /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
-      max: max,
-      min: min,
+      $max: max,
+      $min: min,
       value: sliderValue[0],
       disabled: disabled,
       children: [/*#__PURE__*/jsx(SliderInput, {