@equinor/eds-core-react 0.25.0 → 0.27.0

package/dist/esm/components/Search/Search.js

@@ -22,33 +22,27 @@ var InsideButton = styled(Button).withConfig({
 })(["height:24px;width:24px;"]);
 var Search = /*#__PURE__*/forwardRef(function Search(_ref, ref) {
   var _onChange = _ref.onChange,
-      style = _ref.style,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    style = _ref.style,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useRef(null);
-
   var _useState = useState(Boolean(rest.defaultValue)),
-      _useState2 = _slicedToArray(_useState, 2),
-      showClear = _useState2[0],
-      setShowClear = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showClear = _useState2[0],
+    setShowClear = _useState2[1];
   useEffect(function () {
     if (rest.value) {
       setShowClear(Boolean(rest.value));
     }
   }, [rest.value]);
-
   var clearInputValue = function clearInputValue() {
     var input = inputRef.current;
     var clearedValue = '';
     setReactInputValue(input, clearedValue);
   };
-
   var handleOnChange = function handleOnChange(e) {
     setShowClear(Boolean(e.currentTarget.value));
   };
-
   var combinedRef = useMemo(function () {
     return mergeRefs(inputRef, ref);
   }, [inputRef, ref]);
@@ -59,7 +53,6 @@ var Search = /*#__PURE__*/forwardRef(function Search(_ref, ref) {
     children: /*#__PURE__*/jsx(SearchInput, _objectSpread({
       onChange: function onChange(e) {
         handleOnChange(e);
-
         if (_onChange) {
           _onChange(e);
         }

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

@@ -22,21 +22,19 @@ var StyledSelect = styled.select.withConfig({
 }, nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
 var NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
   var label = _ref2.label,
-      children = _ref2.children,
-      className = _ref2.className,
-      style = _ref2.style,
-      selectRef = _ref2.selectRef,
-      id = _ref2.id,
-      meta = _ref2.meta,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$multiple = _ref2.multiple,
-      multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
-      other = _objectWithoutProperties(_ref2, _excluded);
-
+    children = _ref2.children,
+    className = _ref2.className,
+    style = _ref2.style,
+    selectRef = _ref2.selectRef,
+    id = _ref2.id,
+    meta = _ref2.meta,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$multiple = _ref2.multiple,
+    multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
+    other = _objectWithoutProperties(_ref2, _excluded);
   var _useEds = useEds(),
-      density = _useEds.density;
-
+    density = _useEds.density;
   var token = useToken({
     density: density
   }, nativeselect);
@@ -45,14 +43,12 @@ var NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
     className: className,
     style: style
   };
-
   var selectProps = _objectSpread({
     ref: selectRef,
     id: id,
     disabled: disabled,
     multiple: multiple
   }, other);
-
   var labelProps = {
     htmlFor: id,
     label: label,

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

@@ -2,11 +2,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
 var colors = tokens.colors,
-    _tokens$spacings$comf = tokens.spacings.comfortable,
-    small = _tokens$spacings$comf.small,
-    x_small = _tokens$spacings$comf.x_small,
-    typography = tokens.typography,
-    shape = tokens.shape;
+  _tokens$spacings$comf = tokens.spacings.comfortable,
+  small = _tokens$spacings$comf.small,
+  x_small = _tokens$spacings$comf.x_small,
+  typography = tokens.typography,
+  shape = tokens.shape;
 var nativeselect = {
   background: colors.ui.background__light.rgba,
   typography: _objectSpread(_objectSpread({}, typography.input.text), {}, {

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

@@ -0,0 +1,49 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useContext, createContext, useState, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var initalState = {
+  isOpen: false,
+  onToggle: null
+};
+var SideBarContext = /*#__PURE__*/createContext(initalState);
+var SideBarProvider = function SideBarProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(initalState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var isOpen = state.isOpen,
+    onToggle = state.onToggle;
+  var setIsOpen = useCallback(function (open) {
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        isOpen: open
+      });
+    });
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(open);
+  }, [onToggle]);
+  var setOnToggle = function setOnToggle(onToggle) {
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        onToggle: onToggle
+      });
+    });
+  };
+  var value = {
+    setIsOpen: setIsOpen,
+    setOnToggle: setOnToggle,
+    onToggle: onToggle,
+    isOpen: isOpen
+  };
+  return /*#__PURE__*/jsx(SideBarContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+var useSideBar = function useSideBar() {
+  return useContext(SideBarContext);
+};
+
+export { SideBarProvider, useSideBar };

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

@@ -0,0 +1,74 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef, useEffect } from 'react';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { sidebar } from './SideBar.tokens.js';
+import { bordersTemplate, useToken } from '@equinor/eds-utils';
+import { SideBarProvider, useSideBar } from './SideBar.context.js';
+import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
+
+var _excluded = ["onToggle", "open", "children"],
+  _excluded2 = ["onToggle", "open", "children"];
+var SideBarContainer = /*#__PURE__*/forwardRef(function SideBarContainer(_ref, ref) {
+  var onToggleCallback = _ref.onToggle,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useSideBar = useSideBar(),
+    isOpen = _useSideBar.isOpen,
+    setIsOpen = _useSideBar.setIsOpen,
+    onToggle = _useSideBar.onToggle,
+    setOnToggle = _useSideBar.setOnToggle;
+  useEffect(function () {
+    if (onToggle === null && onToggleCallback) {
+      setOnToggle(onToggleCallback);
+    }
+  }, [onToggle, onToggleCallback, setOnToggle]);
+  useEffect(function () {
+    setIsOpen(open);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return /*#__PURE__*/jsx(GridContainer, _objectSpread(_objectSpread({}, rest), {}, {
+    open: isOpen,
+    ref: ref,
+    children: children
+  }));
+});
+var GridContainer = styled.div.withConfig({
+  displayName: "SideBar__GridContainer",
+  componentId: "sc-a84pkc-0"
+})(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);
+});
+var SideBar = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var onToggle = _ref3.onToggle,
+    _ref3$open = _ref3.open,
+    open = _ref3$open === void 0 ? false : _ref3$open,
+    children = _ref3.children,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var _useEds = useEds(),
+    density = _useEds.density;
+  var token = useToken({
+    density: density
+  }, sidebar);
+  var props = _objectSpread({
+    onToggle: onToggle,
+    open: open,
+    children: children
+  }, rest);
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    theme: token,
+    children: /*#__PURE__*/jsx(SideBarProvider, {
+      children: /*#__PURE__*/jsx(SideBarContainer, _objectSpread(_objectSpread({}, props), {}, {
+        ref: ref
+      }))
+    })
+  });
+});
+SideBar.displayName = 'SideBar';
+
+export { SideBar };

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

@@ -0,0 +1,110 @@
+import { tokens } from '@equinor/eds-tokens';
+
+var _tokens$colors = tokens.colors,
+  _tokens$colors$ui = _tokens$colors.ui,
+  background__light = _tokens$colors$ui.background__light.rgba,
+  background__medium = _tokens$colors$ui.background__medium.rgba,
+  background = _tokens$colors$ui.background__default.rgba,
+  _tokens$colors$intera = _tokens$colors.interactive,
+  focusColor = _tokens$colors$intera.focus.rgba,
+  primary__resting = _tokens$colors$intera.primary__resting.rgba,
+  menuActive = _tokens$colors$intera.primary__selected_highlight.rgba,
+  menuDisabledBackground = _tokens$colors$intera.disabled__fill.rgba,
+  menuDisabledText = _tokens$colors$intera.disabled__text.rgba,
+  _tokens$colors$text = _tokens$colors.text,
+  expandTextColor = _tokens$colors$text.static_icons__default.rgba,
+  primaryWhite = _tokens$colors$text.static_icons__primary_white.rgba,
+  _tokens$spacings$comf = tokens.spacings.comfortable,
+  medium = _tokens$spacings$comf.medium,
+  large = _tokens$spacings$comf.large,
+  small = _tokens$spacings$comf.small;
+var sidebar = {
+  background: background,
+  minWidth: '72px',
+  maxWidth: '256px',
+  spacings: {
+    top: large,
+    bottom: large
+  },
+  border: {
+    type: 'bordergroup',
+    right: {
+      color: background__light,
+      width: '2px',
+      style: 'solid'
+    }
+  },
+  entities: {
+    actionButton: {
+      typography: {
+        color: primaryWhite
+      },
+      spacings: {
+        top: medium,
+        bottom: medium,
+        right: large,
+        left: large
+      }
+    },
+    sidebarItem: {
+      minHeight: '48px',
+      spacings: {
+        top: '0',
+        bottom: '0'
+      },
+      typography: {
+        color: expandTextColor
+      },
+      border: {
+        type: 'bordergroup',
+        bottom: {
+          color: background__light,
+          width: '2px',
+          style: 'solid'
+        }
+      },
+      states: {
+        active: {
+          background: menuActive,
+          typography: {
+            color: primary__resting
+          }
+        },
+        hover: {
+          background: background__medium
+        },
+        focus: {
+          outline: {
+            color: focusColor,
+            style: 'dashed',
+            type: 'outline',
+            width: '2px',
+            offset: '-2px'
+          }
+        },
+        disabled: {
+          background: menuDisabledBackground,
+          typography: {
+            color: menuDisabledText
+          }
+        }
+      }
+    },
+    toggleOpen: {
+      spacings: {
+        top: small,
+        bottom: small
+      },
+      typography: {
+        color: expandTextColor
+      }
+    }
+  },
+  modes: {
+    compact: {
+      entities: {}
+    }
+  }
+};
+
+export { sidebar };

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

@@ -0,0 +1,81 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef } from 'react';
+import { Button } from '../../Button/index.js';
+import { Icon } from '../../Icon/index.js';
+import { sidebar } from '../SideBar.tokens.js';
+import { useSideBar } from '../SideBar.context.js';
+import styled, { css } from 'styled-components';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+
+var _excluded = ["label", "icon", "style", "className"];
+var primaryWhite = sidebar.entities.actionButton.typography.color;
+var MenuButtonContainer = styled.div.withConfig({
+  displayName: "SideBarButton__MenuButtonContainer",
+  componentId: "sc-15xlkyo-0"
+})(function (_ref) {
+  var open = _ref.open,
+    theme = _ref.theme;
+  var _theme$entities$actio = theme.entities.actionButton.spacings,
+    right = _theme$entities$actio.right,
+    left = _theme$entities$actio.left,
+    top = _theme$entities$actio.top,
+    bottom = _theme$entities$actio.bottom;
+  return css(["display:", ";grid-template-columns:", " 1fr ", ";justify-content:center;align-items:center;margin-block-start:", ";margin-block-end:", ";box-sizing:border-box;"], open ? 'grid' : 'flex', left, right, top, bottom);
+});
+var ExtendedButton = styled(Button).withConfig({
+  displayName: "SideBarButton__ExtendedButton",
+  componentId: "sc-15xlkyo-1"
+})(function () {
+  return css(["height:40px;grid-column:2;width:fit-content;"]);
+});
+var SideBarButton = /*#__PURE__*/forwardRef(function SideBarToggle(_ref2, ref) {
+  var label = _ref2.label,
+    icon = _ref2.icon,
+    style = _ref2.style,
+    className = _ref2.className,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref
+  });
+  var styleProps = {
+    style: style,
+    className: className
+  };
+  var _useSideBar = useSideBar(),
+    isOpen = _useSideBar.isOpen;
+  if (isOpen) {
+    return /*#__PURE__*/jsx(MenuButtonContainer, _objectSpread(_objectSpread({
+      open: isOpen
+    }, styleProps), {}, {
+      children: /*#__PURE__*/jsxs(ExtendedButton, _objectSpread(_objectSpread({
+        open: true,
+        variant: "contained"
+      }, props), {}, {
+        children: [/*#__PURE__*/jsx(Icon, {
+          data: icon,
+          color: primaryWhite
+        }), " ", label]
+      }))
+    }));
+  }
+  return /*#__PURE__*/jsx(Tooltip, {
+    title: label,
+    placement: "right",
+    children: /*#__PURE__*/jsx(MenuButtonContainer, _objectSpread(_objectSpread({
+      open: isOpen
+    }, styleProps), {}, {
+      children: /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+        variant: "contained_icon"
+      }, props), {}, {
+        children: /*#__PURE__*/jsx(Icon, {
+          data: icon,
+          color: primaryWhite
+        })
+      }))
+    }))
+  });
+});
+
+export { SideBarButton };

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

@@ -0,0 +1,25 @@
+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 { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children"];
+var StyledSideBarContent = styled.div.withConfig({
+  displayName: "SideBarContent__StyledSideBarContent",
+  componentId: "sc-kq9ra8-0"
+})(function () {
+  return css(["grid-area:content;"]);
+});
+var SideBarContent = /*#__PURE__*/forwardRef(function SideBarContent(_ref, ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var props = _objectSpread({
+    ref: ref
+  }, rest);
+  return /*#__PURE__*/jsx(StyledSideBarContent, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+});
+
+export { SideBarContent };

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

@@ -0,0 +1,25 @@
+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 { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children"];
+var StyledSideBarFooter = styled.div.withConfig({
+  displayName: "SideBarFooter__StyledSideBarFooter",
+  componentId: "sc-1hsu72u-0"
+})(function () {
+  return css(["grid-area:footer;"]);
+});
+var SideBarFooter = /*#__PURE__*/forwardRef(function SideBarFooter(_ref, ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var props = _objectSpread({
+    ref: ref
+  }, rest);
+  return /*#__PURE__*/jsx(StyledSideBarFooter, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+});
+
+export { SideBarFooter };

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

@@ -0,0 +1,54 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import { Button } from '../Button/index.js';
+import { Icon } from '../Icon/index.js';
+import { useSideBar } from './SideBar.context.js';
+import { sidebar } from './SideBar.tokens.js';
+import { collapse, expand } from '@equinor/eds-icons';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+
+var iconColor = sidebar.entities.toggleOpen.typography.color;
+var ToggleContainer = styled.div.withConfig({
+  displayName: "SideBarToggle__ToggleContainer",
+  componentId: "sc-1w5e44y-0"
+})(function (_ref) {
+  var theme = _ref.theme;
+  var minWidth = theme.minWidth,
+    _theme$entities$toggl = theme.entities.toggleOpen.spacings,
+    top = _theme$entities$toggl.top,
+    bottom = _theme$entities$toggl.bottom;
+  return css(["width:", ";display:grid;place-items:center;margin-block-start:", ";margin-block-end:", ";"], minWidth, top, bottom);
+});
+var SideBarToggle = /*#__PURE__*/forwardRef(function SideBarToggle(_ref2, ref) {
+  var rest = _extends({}, _ref2);
+  var props = _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref
+  });
+  var _useSideBar = useSideBar(),
+    isOpen = _useSideBar.isOpen,
+    setIsOpen = _useSideBar.setIsOpen;
+  return /*#__PURE__*/jsx(ToggleContainer, _objectSpread(_objectSpread({
+    open: isOpen
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(Tooltip, {
+      title: isOpen ? 'Collapse' : 'Expand',
+      placement: "right",
+      children: /*#__PURE__*/jsx(Button, {
+        variant: "ghost_icon",
+        onClick: function onClick() {
+          return setIsOpen(!isOpen);
+        },
+        children: /*#__PURE__*/jsx(Icon, {
+          size: 24,
+          data: isOpen ? collapse : expand,
+          color: iconColor
+        })
+      })
+    })
+  }));
+});
+
+export { SideBarToggle };

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

@@ -0,0 +1,102 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { forwardRef } from 'react';
+import { sidebar } from '../SideBar.tokens.js';
+import { bordersTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { Icon } from '../../Icon/index.js';
+import styled, { css } from 'styled-components';
+import { useSideBar } from '../SideBar.context.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../../Typography/Typography.js';
+import { Tooltip as Tooltip$1 } from '../../Tooltip/Tooltip.js';
+
+var _excluded = ["icon", "label", "active", "onClick", "as"];
+var _tokens$entities$side = sidebar.entities.sidebarItem,
+  itemTextColor = _tokens$entities$side.typography.color,
+  iconActive = _tokens$entities$side.states.active.typography.color;
+var Container = styled.a.withConfig({
+  displayName: "SidebarLink__Container",
+  componentId: "sc-gbehcj-0"
+})(function (_ref) {
+  var theme = _ref.theme,
+    $active = _ref.$active;
+  var minWidth = theme.minWidth,
+    _theme$entities$sideb = theme.entities.sidebarItem,
+    minHeight = _theme$entities$sideb.minHeight,
+    border = _theme$entities$sideb.border,
+    _theme$entities$sideb2 = _theme$entities$sideb.states,
+    menuActiveBackground = _theme$entities$sideb2.active.background,
+    menuHoverBackground = _theme$entities$sideb2.hover.background,
+    focus = _theme$entities$sideb2.focus,
+    _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));
+});
+var ItemText = styled(Typography).withConfig({
+  displayName: "SidebarLink__ItemText",
+  componentId: "sc-gbehcj-1"
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    $active = _ref2.$active;
+  var _theme$entities$sideb4 = theme.entities.sidebarItem,
+    itemTextColor = _theme$entities$sideb4.typography.color,
+    itemActiveTextColor = _theme$entities$sideb4.states.active.typography.color;
+  return css(["justify-self:start;color:", ";&::first-letter{text-transform:capitalize;}"], $active ? itemActiveTextColor : itemTextColor);
+});
+var Tooltip = styled(Tooltip$1).withConfig({
+  displayName: "SidebarLink__Tooltip",
+  componentId: "sc-gbehcj-2"
+})(["text-transform:capitalize;"]);
+var SidebarLink = /*#__PURE__*/forwardRef(function SidebarLink(_ref3, ref) {
+  var icon = _ref3.icon,
+    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;
+  var getIconColor = function getIconColor() {
+    return active ? iconActive : itemTextColor;
+  };
+  if (isOpen) {
+    return /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({
+      as: as,
+      tabIndex: 0,
+      $active: active,
+      onClick: onClick,
+      ref: ref
+    }, rest), {}, {
+      children: [icon && /*#__PURE__*/jsx(Icon, {
+        data: icon,
+        color: getIconColor()
+      }), /*#__PURE__*/jsx(ItemText, {
+        variant: "cell_text",
+        group: "table",
+        $active: active,
+        children: label
+      })]
+    }));
+  }
+  return /*#__PURE__*/jsx(Tooltip, {
+    title: label,
+    placement: "right",
+    children: /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({
+      tabIndex: 0,
+      as: as,
+      $active: active,
+      onClick: onClick,
+      ref: ref
+    }, rest), {}, {
+      children: icon && /*#__PURE__*/jsx(Icon, {
+        data: icon,
+        color: getIconColor()
+      })
+    }))
+  });
+});
+SidebarLink.displayName = 'SidebarLink';
+
+export { SidebarLink };

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

@@ -0,0 +1,20 @@
+import { SideBar as SideBar$1 } from './SideBar.js';
+import { SidebarLink } from './SidebarLink/index.js';
+import { SideBarContent } from './SideBarContent.js';
+import { SideBarFooter } from './SideBarFooter.js';
+import { SideBarToggle } from './SideBarToggle.js';
+import { SideBarButton } from './SideBarButton/index.js';
+
+var SideBar = SideBar$1;
+SideBar.Link = SidebarLink;
+SideBar.Content = SideBarContent;
+SideBar.Footer = SideBarFooter;
+SideBar.Toggle = SideBarToggle;
+SideBar.Button = SideBarButton;
+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';
+
+export { SideBar };