@equinor/eds-core-react 0.23.0 → 0.24.0-dev.20221006

package/dist/esm/components/Snackbar/Snackbar.js

@@ -1,3 +1,6 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import * as ReactDom from 'react-dom';
 import styled, { css, ThemeProvider } from 'styled-components';
@@ -7,14 +10,13 @@ import { jsx } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const StyledSnackbar = styled(Paper).withConfig({
+var _excluded = ["open", "autoHideDuration", "onClose", "placement", "children"];
+var StyledSnackbar = styled(Paper).withConfig({
   displayName: "Snackbar__StyledSnackbar",
   componentId: "sc-ac6no8-0"
-})(_ref => {
-  let {
-    theme,
-    placement
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme,
+      placement = _ref.placement;
   return css(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:1400;", " a,button{color:", ";}"], theme.background, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), theme.minHeight, {
     top: placement.includes('top') ? theme.spacings.top : placement === 'left' || placement === 'right' ? '50%' : undefined,
     bottom: placement.includes('bottom') ? theme.spacings.bottom : undefined,
@@ -23,47 +25,56 @@ const StyledSnackbar = styled(Paper).withConfig({
     transform: placement === 'left' || placement === 'right' ? 'translateY(-50%)' : placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : undefined
   }, theme.entities.button.typography.color);
 });
-const Snackbar = /*#__PURE__*/forwardRef(function Snackbar(_ref2, ref) {
-  let {
-    open = false,
-    autoHideDuration = 7000,
-    onClose,
-    placement = 'bottom',
-    children,
-    ...rest
-  } = _ref2;
-  const [visible, setVisible] = useState(open);
-  const timer = useRef();
-  useEffect(() => {
+var Snackbar = /*#__PURE__*/forwardRef(function Snackbar(_ref2, ref) {
+  var _ref2$open = _ref2.open,
+      open = _ref2$open === void 0 ? false : _ref2$open,
+      _ref2$autoHideDuratio = _ref2.autoHideDuration,
+      autoHideDuration = _ref2$autoHideDuratio === void 0 ? 7000 : _ref2$autoHideDuratio,
+      onClose = _ref2.onClose,
+      _ref2$placement = _ref2.placement,
+      placement = _ref2$placement === void 0 ? 'bottom' : _ref2$placement,
+      children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var timer = useRef();
+  useEffect(function () {
     setVisible(open);
-    timer.current = setTimeout(() => {
+    timer.current = setTimeout(function () {
       setVisible(false);
 
       if (onClose) {
         onClose();
       }
     }, autoHideDuration);
-    return () => clearTimeout(timer.current);
+    return function () {
+      return clearTimeout(timer.current);
+    };
   }, [open, autoHideDuration, setVisible, onClose]);
-  const props = {
-    ref,
-    placement,
-    ...rest
-  };
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+
+  var props = _objectSpread({
+    ref: ref,
+    placement: placement
+  }, rest);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, snackbar);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: visible && /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/jsx(StyledSnackbar, {
+    children: visible && /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/jsx(StyledSnackbar, _objectSpread(_objectSpread({
       role: "alert",
-      elevation: "overlay",
-      ...props,
+      elevation: "overlay"
+    }, props), {}, {
       children: children
-    }), document.body)
+    })), document.body)
   });
 });
 

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

@@ -1,50 +1,23 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  typography: {
-    ui: {
-      snackbar: typography
-    }
-  },
-  colors: {
-    ui: {
-      background__overlay: {
-        rgba: background
-      }
-    },
-    text: {
-      static_icons__primary_white: {
-        rgba: color
-      }
-    },
-    interactive: {
-      link_in_snackbars: {
-        rgba: buttonColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium: spacingMedium,
-      x_large: spacingXLarge
-    }
-  },
-  clickbounds: {
-    default__base: clickbounds
-  },
-  shape: {
-    button: {
-      borderRadius: radius
-    }
-  }
-} = tokens;
-const snackbar = {
-  background,
+var typography = tokens.typography.ui.snackbar,
+    _tokens$colors = tokens.colors,
+    background = _tokens$colors.ui.background__overlay.rgba,
+    color = _tokens$colors.text.static_icons__primary_white.rgba,
+    buttonColor = _tokens$colors.interactive.link_in_snackbars.rgba,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    spacingMedium = _tokens$spacings$comf.medium,
+    spacingXLarge = _tokens$spacings$comf.x_large,
+    clickbounds = tokens.clickbounds.default__base,
+    radius = tokens.shape.button.borderRadius;
+var snackbar = {
+  background: background,
   minHeight: clickbounds,
   border: {
     type: 'border',
     width: 0,
-    radius
+    radius: radius
   },
   entities: {
     actions: {
@@ -66,9 +39,9 @@ const snackbar = {
     right: spacingMedium,
     top: spacingMedium
   },
-  typography: { ...typography,
-    color
-  },
+  typography: _objectSpread(_objectSpread({}, typography), {}, {
+    color: color
+  }),
   modes: {
     compact: {}
   }

package/dist/esm/components/Snackbar/SnackbarAction.js

@@ -1,27 +1,28 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, Children } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledSnackbarAction = styled.div.withConfig({
+var _excluded = ["children"];
+var StyledSnackbarAction = styled.div.withConfig({
   displayName: "SnackbarAction__StyledSnackbarAction",
   componentId: "sc-1v5mjvd-0"
-})(_ref => {
-  let {
-    theme
-  } = _ref;
+})(function (_ref) {
+  var theme = _ref.theme;
   return css(["display:inline-flex;margin-left:", ";margin-top:", ";margin-bottom:", ";"], theme.entities.actions.spacings.left, theme.entities.actions.spacings.top, theme.entities.actions.spacings.bottom);
 });
-const SnackbarAction = /*#__PURE__*/forwardRef(function SnackbarAction(_ref2, ref) {
-  let {
-    children,
-    ...rest
-  } = _ref2;
-  const props = { ...rest,
-    ref
-  };
-  return /*#__PURE__*/jsx(StyledSnackbarAction, { ...props,
-    children: Children.only(children)
+var SnackbarAction = /*#__PURE__*/forwardRef(function SnackbarAction(_ref2, ref) {
+  var children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref
   });
+
+  return /*#__PURE__*/jsx(StyledSnackbarAction, _objectSpread(_objectSpread({}, props), {}, {
+    children: Children.only(children)
+  }));
 });
 
 export { SnackbarAction };

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

@@ -1,7 +1,7 @@
 import { SnackbarAction } from './SnackbarAction.js';
 import { Snackbar as Snackbar$1 } from './Snackbar.js';
 
-const Snackbar = Snackbar$1;
+var Snackbar = Snackbar$1;
 Snackbar.Action = SnackbarAction;
 
 export { Snackbar };

package/dist/esm/components/Switch/Switch.js

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { SwitchSmall } from './SwitchSmall.js';
@@ -7,39 +9,36 @@ import { typographyTemplate, useToken } from '@equinor/eds-utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const StyledLabel = styled.label.withConfig({
+var _excluded = ["size", "disabled", "label", "className", "style"];
+var StyledLabel = styled.label.withConfig({
   displayName: "Switch__StyledLabel",
   componentId: "sc-sdaahx-0"
-})(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;"], _ref => {
-  let {
-    isDisabled
-  } = _ref;
+})(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;"], function (_ref) {
+  var isDisabled = _ref.isDisabled;
   return isDisabled ? 'not-allowed' : 'pointer';
 });
-const Label = styled.span.withConfig({
+var Label = styled.span.withConfig({
   displayName: "Switch__Label",
   componentId: "sc-sdaahx-1"
-})(_ref2 => {
-  let {
-    theme
-  } = _ref2;
+})(function (_ref2) {
+  var theme = _ref2.theme;
   return css(["", " margin-left:", ";"], typographyTemplate(theme.typography), theme.entities.label.spacings.left);
 });
-const Switch = /*#__PURE__*/forwardRef(function Switch(_ref3, ref) {
-  let {
-    size = 'default',
-    disabled,
-    label,
-    className,
-    style,
-    ...rest
-  } = _ref3;
-  const {
-    density
-  } = useEds(); // TODO Temporary workaround untill we can deprecate "size" property (controlled by EdsProvider in the future)
+var Switch = /*#__PURE__*/forwardRef(function Switch(_ref3, ref) {
+  var _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? 'default' : _ref3$size,
+      disabled = _ref3.disabled,
+      label = _ref3.label,
+      className = _ref3.className,
+      style = _ref3.style,
+      rest = _objectWithoutProperties(_ref3, _excluded);
 
-  const overrideDensity = size === 'small' ? 'compact' : density;
-  const token = useToken({
+  var _useEds = useEds(),
+      density = _useEds.density; // TODO Temporary workaround untill we can deprecate "size" property (controlled by EdsProvider in the future)
+
+
+  var overrideDensity = size === 'small' ? 'compact' : density;
+  var token = useToken({
     density: overrideDensity
   }, comfortable);
   return /*#__PURE__*/jsx(ThemeProvider, {
@@ -48,30 +47,30 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(_ref3, ref) {
       isDisabled: disabled,
       className: className,
       style: style,
-      children: [size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, {
-        disabled: disabled,
-        ...rest,
+      children: [size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, _objectSpread(_objectSpread({
+        disabled: disabled
+      }, rest), {}, {
         ref: ref
-      }) : /*#__PURE__*/jsx(SwitchDefault, {
-        disabled: disabled,
-        ...rest,
+      })) : /*#__PURE__*/jsx(SwitchDefault, _objectSpread(_objectSpread({
+        disabled: disabled
+      }, rest), {}, {
         ref: ref
-      }), label && /*#__PURE__*/jsx(Label, {
+      })), label && /*#__PURE__*/jsx(Label, {
         children: label
       })]
-    }) : size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, {
+    }) : size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, _objectSpread(_objectSpread({
       disabled: disabled,
       className: className,
-      style: style,
-      ...rest,
+      style: style
+    }, rest), {}, {
       ref: ref
-    }) : /*#__PURE__*/jsx(SwitchDefault, {
+    })) : /*#__PURE__*/jsx(SwitchDefault, _objectSpread(_objectSpread({
       disabled: disabled,
       className: className,
-      style: style,
-      ...rest,
+      style: style
+    }, rest), {}, {
       ref: ref
-    })
+    }))
   });
 });
 Switch.displayName = 'Switch';

package/dist/esm/components/Switch/Switch.styles.js

@@ -1,39 +1,33 @@
 import styled, { css } from 'styled-components';
 import { outlineTemplate } from '@equinor/eds-utils';
 
-const BaseInputWrapper = styled.span.withConfig({
+var BaseInputWrapper = styled.span.withConfig({
   displayName: "Switchstyles__BaseInputWrapper",
   componentId: "sc-x39lde-0"
-})(_ref => {
+})(function (_ref) {
   var _clickbound$offset, _clickbound$offset2;
 
-  let {
-    theme: {
-      clickbound,
-      width,
-      height
-    }
-  } = _ref;
+  var _ref$theme = _ref.theme,
+      clickbound = _ref$theme.clickbound,
+      width = _ref$theme.width,
+      height = _ref$theme.height;
   return css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;pointer-events:none;&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}"], width, height, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height);
 });
-const BaseInput = styled.input.attrs(_ref2 => {
-  let {
-    type = 'checkbox'
-  } = _ref2;
+var BaseInput = styled.input.attrs(function (_ref2) {
+  var _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'checkbox' : _ref2$type;
   return {
-    type
+    type: type
   };
 }).withConfig({
   displayName: "Switchstyles__BaseInput",
   componentId: "sc-x39lde-1"
-})(_ref3 => {
-  let {
-    disabled,
-    theme
-  } = _ref3;
+})(function (_ref3) {
+  var disabled = _ref3.disabled,
+      theme = _ref3.theme;
   return css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline), outlineTemplate(theme.states.focus.outline));
 });
-const GridWrapper = styled.span.withConfig({
+var GridWrapper = styled.span.withConfig({
   displayName: "Switchstyles__GridWrapper",
   componentId: "sc-x39lde-2"
 })(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;"]);

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

@@ -1,70 +1,25 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    ui: {
-      background__medium: {
-        rgba: backgroundColorMedium
-      }
-    },
-    interactive: {
-      primary__hover_alt: {
-        rgba: primaryHoverAlt
-      },
-      primary__hover: {
-        rgba: primaryHover
-      },
-      primary__selected_highlight: {
-        rgba: activeColor
-      },
-      primary__resting: {
-        rgba: primaryResting
-      },
-      disabled__fill: {
-        rgba: backgroundDisabled
-      },
-      focus: {
-        rgba: focusOutlineColor
-      },
-      icon_on_interactive_colors: {
-        rgba: iconInteractive
-      }
-    },
-    text: {
-      static_icons__tertiary: {
-        rgba: iconTertiary
-      }
-    }
-  },
-  typography: {
-    navigation: {
-      menu_title: labelTypography
-    }
-  },
-  clickbounds,
-  elevation: {
-    raised: boxShadow
-  },
-  spacings: {
-    comfortable: {
-      medium_small
-    }
-  },
-  shape: {
-    circle,
-    _modes: {
-      compact: {
-        icon_button: compactIconButton
-      }
-    }
-  },
-  interactions: {
-    focused: {
-      width: focusOutlineWidth
-    }
-  }
-} = tokens;
-const comfortable = {
+var _tokens$colors = tokens.colors,
+    backgroundColorMedium = _tokens$colors.ui.background__medium.rgba,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
+    primaryHover = _tokens$colors$intera.primary__hover.rgba,
+    activeColor = _tokens$colors$intera.primary__selected_highlight.rgba,
+    primaryResting = _tokens$colors$intera.primary__resting.rgba,
+    backgroundDisabled = _tokens$colors$intera.disabled__fill.rgba,
+    focusOutlineColor = _tokens$colors$intera.focus.rgba,
+    iconInteractive = _tokens$colors$intera.icon_on_interactive_colors.rgba,
+    iconTertiary = _tokens$colors.text.static_icons__tertiary.rgba,
+    labelTypography = tokens.typography.navigation.menu_title,
+    clickbounds = tokens.clickbounds,
+    boxShadow = tokens.elevation.raised,
+    medium_small = tokens.spacings.comfortable.medium_small,
+    _tokens$shape = tokens.shape,
+    circle = _tokens$shape.circle,
+    compactIconButton = _tokens$shape._modes.compact.icon_button,
+    focusOutlineWidth = tokens.interactions.focused.width;
+var comfortable = {
   typography: labelTypography,
   height: circle.minHeight,
   width: circle.minWidth,
@@ -72,8 +27,8 @@ const comfortable = {
     height: clickbounds.default__base,
     width: clickbounds.default__base,
     offset: {
-      top: `${(parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2}px`,
-      left: `${(parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2}px`
+      top: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minHeight)) / 2, "px"),
+      left: "".concat((parseInt(clickbounds.default__base) - parseInt(circle.minWidth)) / 2, "px")
     }
   },
   entities: {
@@ -102,7 +57,7 @@ const comfortable = {
     handle: {
       height: '16px',
       width: '16px',
-      boxShadow,
+      boxShadow: boxShadow,
       background: iconTertiary,
       states: {
         active: {
@@ -122,8 +77,8 @@ const comfortable = {
         height: clickbounds.compact__standard,
         width: clickbounds.compact__standard,
         offset: {
-          top: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2}px`,
-          left: `${(parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2}px`
+          top: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minHeight)) / 2, "px"),
+          left: "".concat((parseInt(clickbounds.compact__standard) - parseInt(compactIconButton.minWidth)) / 2, "px")
         }
       },
       entities: {

package/dist/esm/components/Switch/SwitchDefault.js

@@ -1,67 +1,57 @@
+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 { bordersTemplate } from '@equinor/eds-utils';
 import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-const Input = styled(BaseInput).withConfig({
+var _excluded = ["disabled", "className", "style"];
+var Input = styled(BaseInput).withConfig({
   displayName: "SwitchDefault__Input",
   componentId: "sc-16ym5pn-0"
-})(_ref => {
-  let {
-    disabled,
-    theme
-  } = _ref;
+})(function (_ref) {
+  var disabled = _ref.disabled,
+      theme = _ref.theme;
   return css(["&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background);
 });
-const Track = styled.span.withConfig({
+var Track = styled.span.withConfig({
   displayName: "SwitchDefault__Track",
   componentId: "sc-16ym5pn-1"
-})(_ref2 => {
-  let {
-    isDisabled,
-    theme: {
-      states,
-      entities: {
-        track
-      }
-    }
-  } = _ref2;
+})(function (_ref2) {
+  var isDisabled = _ref2.isDisabled,
+      _ref2$theme = _ref2.theme,
+      states = _ref2$theme.states,
+      track = _ref2$theme.entities.track;
   return css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], bordersTemplate(track.border), track.width, track.height, track.background, isDisabled && {
     backgroundColor: states.disabled.background
   });
 });
-const Handle = styled.span.withConfig({
+var Handle = styled.span.withConfig({
   displayName: "SwitchDefault__Handle",
   componentId: "sc-16ym5pn-2"
-})(_ref3 => {
-  let {
-    isDisabled,
-    theme: {
-      states,
-      entities: {
-        handle
-      }
-    }
-  } = _ref3;
+})(function (_ref3) {
+  var isDisabled = _ref3.isDisabled,
+      _ref3$theme = _ref3.theme,
+      states = _ref3$theme.states,
+      handle = _ref3$theme.entities.handle;
   return css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, isDisabled && {
     backgroundColor: states.disabled.background
   }, handle.boxShadow, handle.width, handle.height);
 });
-const SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault(_ref4, ref) {
-  let {
-    disabled,
-    className,
-    style,
-    ...rest
-  } = _ref4;
+var SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault(_ref4, ref) {
+  var disabled = _ref4.disabled,
+      className = _ref4.className,
+      style = _ref4.style,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+
   return /*#__PURE__*/jsxs(GridWrapper, {
     className: className,
     style: style,
-    children: [/*#__PURE__*/jsx(Input, { ...rest,
+    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
       disabled: disabled
-    }), /*#__PURE__*/jsxs(BaseInputWrapper, {
+    })), /*#__PURE__*/jsxs(BaseInputWrapper, {
       children: [/*#__PURE__*/jsx(Track, {
         isDisabled: disabled
       }), /*#__PURE__*/jsx(Handle, {