@equinor/eds-core-react 0.24.0 → 0.26.0

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

@@ -0,0 +1,57 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+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 { Button } from '../Button/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Icon } from '../Icon/index.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,106 @@
+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 styled, { css } from 'styled-components';
+import { useSideBar } from '../SideBar.context.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../../Icon/index.js';
+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 };

package/dist/esm/components/TextField/TextField.js

@@ -1,21 +1,22 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef } from 'react';
-import styled, { ThemeProvider } from 'styled-components';
-import { Field } from './Field.js';
-import { TextFieldProvider } from './TextField.context.js';
-import { textfield } from './TextField.tokens.js';
-import { useId, useToken } from '@equinor/eds-utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Label } from '../Label/Label.js';
-import { HelperText as TextfieldHelperText } from './HelperText/HelperText.js';
-import { useEds } from '../EdsProvider/eds.context.js';
+import { useId } from '@equinor/eds-utils';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { InputWrapper } from '../InputWrapper/InputWrapper.js';
+import { Textarea } from '../Textarea/Textarea.js';
+import { Input } from '../Input/Input.js';
+
+var _excluded = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
 
-var _excluded = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputRef", "inputIcon", "helperIcon", "rowsMax", "style"];
-var Container = styled.div.withConfig({
-  displayName: "TextField__Container",
-  componentId: "sc-o1nc07-0"
-})(["min-width:100px;width:100%;"]);
+/** Proxy component for working around typescript and element type switching */
+var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
+  return props.multiline ? /*#__PURE__*/jsx(Textarea, _objectSpread({
+    ref: ref
+  }, props)) : /*#__PURE__*/jsx(Input, _objectSpread({
+    ref: ref
+  }, props));
+});
 var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   var id = _ref.id,
       label = _ref.label,
@@ -24,43 +25,49 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
       helperText = _ref.helperText,
       placeholder = _ref.placeholder,
       disabled = _ref.disabled,
-      multiline = _ref.multiline,
+      _ref$multiline = _ref.multiline,
+      multiline = _ref$multiline === void 0 ? false : _ref$multiline,
       className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-      inputRef = _ref.inputRef,
+      variant = _ref.variant,
       inputIcon = _ref.inputIcon,
       helperIcon = _ref.helperIcon,
-      rowsMax = _ref.rowsMax,
       style = _ref.style,
+      rowsMax = _ref.rowsMax,
+      textareaRef = _ref.textareaRef,
+      inputRef = _ref.inputRef,
       other = _objectWithoutProperties(_ref, _excluded);
 
   var helperTextId = useId(null, 'helpertext');
 
-  var inputProps = _objectSpread({
-    'aria-describedby': helperTextId,
-    multiline: multiline,
+  var fieldProps = _objectSpread({
+    'aria-invalid': variant === 'error' || undefined,
     disabled: disabled,
     placeholder: placeholder,
     id: id,
     variant: variant,
-    ref: inputRef,
-    inputIcon: inputIcon,
-    unit: unit,
-    rowsMax: rowsMax
+    rightAdornments: /*#__PURE__*/jsxs(Fragment, {
+      children: [inputIcon, /*#__PURE__*/jsx("span", {
+        children: unit
+      })]
+    }),
+    rowsMax: rowsMax,
+    ref: inputRef || textareaRef,
+    multiline: multiline
   }, other);
 
   var helperProps = {
-    id: helperTextId,
-    variant: variant,
-    helperText: helperText,
+    id: null,
+    text: helperText,
     icon: helperIcon,
     disabled: disabled
   };
   var containerProps = {
     ref: ref,
     className: className,
-    style: style
+    style: _objectSpread({
+      width: '100%'
+    }, style),
+    color: variant
   };
   var labelProps = {
     htmlFor: id,
@@ -68,23 +75,22 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     meta: meta,
     disabled: disabled
   };
-  var showLabel = label || meta;
-  var showHelperText = helperText;
 
-  var _useEds = useEds(),
-      density = _useEds.density;
+  if (helperText) {
+    fieldProps = _objectSpread({
+      'aria-describedby': helperTextId
+    }, fieldProps);
+    helperProps = _objectSpread(_objectSpread({}, helperProps), {}, {
+      id: helperTextId
+    });
+  }
 
-  var token = useToken({
-    density: density
-  }, textfield);
-  return /*#__PURE__*/jsx(ThemeProvider, {
-    theme: token,
-    children: /*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
-      children: /*#__PURE__*/jsxs(TextFieldProvider, {
-        children: [showLabel && /*#__PURE__*/jsx(Label, _objectSpread({}, labelProps)), /*#__PURE__*/jsx(Field, _objectSpread({}, inputProps)), showHelperText && /*#__PURE__*/jsx(TextfieldHelperText, _objectSpread({}, helperProps))]
-      })
-    }))
-  });
+  return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
+    helperProps: helperProps,
+    labelProps: labelProps
+  }, containerProps), {}, {
+    children: /*#__PURE__*/jsx(Field, _objectSpread({}, fieldProps))
+  }));
 });
 
 export { TextField };

package/dist/esm/components/Textarea/Textarea.js

@@ -1,55 +1,26 @@
 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 } from 'react';
-import styled, { css } from 'styled-components';
+import { forwardRef, useState, useCallback } from 'react';
 import * as Input_tokens from '../Input/Input.tokens.js';
 import { input as input$1 } from '../Input/Input.tokens.js';
-import { typographyTemplate, useAutoResize, mergeRefs, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { useAutoResize, mergeRefs } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
+import { Input } from '../Input/Input.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
 var _excluded = ["variant", "disabled", "type", "rowsMax"];
 var input = input$1;
-
-var Variation = function Variation(_ref) {
+var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref, ref) {
   var variant = _ref.variant,
-      token = _ref.token,
-      density = _ref.density;
-
-  if (!variant) {
-    return "";
-  }
-
-  var _token$states = token.states,
-      focusOutline = _token$states.focus.outline,
-      activeOutline = _token$states.active.outline,
-      boxShadow = token.boxShadow;
-  var spacings = input.spacings;
-
-  if (density === 'compact') {
-    spacings = input.modes.compact.spacings;
-  }
-
-  return css(["border:none;", " ", " box-shadow:", ";&:active,&:focus{outline-offset:0;box-shadow:none;", "}&:disabled{cursor:not-allowed;box-shadow:none;outline:none;&:focus,&:active{outline:none;}}"], spacingsTemplate(spacings), outlineTemplate(activeOutline), boxShadow, outlineTemplate(focusOutline));
-};
-
-var StyledTextarea = styled.textarea.withConfig({
-  displayName: "Textarea__StyledTextarea",
-  componentId: "sc-2yjdcc-0"
-})(["width:100%;box-sizing:border-box;margin:0;border:none;appearance:none;background:", ";height:auto;", " ", " &::placeholder{color:", ";}&:disabled{color:", ";}&[readOnly]{box-shadow:", ";background:", ";}"], input.background, typographyTemplate(input.typography), Variation, input.entities.placeholder.typography.color, input.states.disabled.typography.color, input.states.readOnly.boxShadow, input.states.readOnly.background);
-var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref2, ref) {
-  var _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? 'text' : _ref2$type,
-      rowsMax = _ref2.rowsMax,
-      other = _objectWithoutProperties(_ref2, _excluded);
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      rowsMax = _ref.rowsMax,
+      other = _objectWithoutProperties(_ref, _excluded);
 
-  var actualVariant = variant === 'default' ? 'input' : variant;
-  var inputVariant = Input_tokens[actualVariant];
+  var inputVariant = Input_tokens[variant] ? Input_tokens[variant] : input$1;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -72,9 +43,9 @@ var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref2, ref) {
   var padding = parseInt(top) + parseInt(bottom);
   var maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
   useAutoResize(textareaEl, rowsMax ? maxHeight : null);
-  var combinedRef = useMemo(function () {
+  var combinedRef = useCallback(function () {
     return mergeRefs(ref, setTextareaEl);
-  }, [setTextareaEl, ref]);
+  }, [setTextareaEl, ref])();
 
   var inputProps = _objectSpread({
     ref: combinedRef,
@@ -85,7 +56,19 @@ var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref2, ref) {
     density: density
   }, other);
 
-  return /*#__PURE__*/jsx(StyledTextarea, _objectSpread({}, inputProps));
+  var adornmentsToTop = {
+    style: {
+      alignItems: 'flex-start'
+    }
+  };
+  return /*#__PURE__*/jsx(Input, _objectSpread({
+    as: "textarea",
+    rightAdornmentsProps: adornmentsToTop,
+    leftAdornmentsProps: adornmentsToTop,
+    style: {
+      height: 'auto'
+    }
+  }, inputProps));
 });
 
 export { Textarea };

package/dist/esm/components/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef, useRef, useState, useMemo, cloneElement } from 'react';
+import { forwardRef, useRef, useState, useMemo, useEffect, cloneElement } from 'react';
 import styled from 'styled-components';
 import { typographyTemplate, spacingsTemplate, bordersTemplate, mergeRefs } from '@equinor/eds-utils';
 import { tooltip } from './Tooltip.tokens.js';
@@ -13,7 +13,7 @@ var _excluded = ["title", "placement", "children", "style", "enterDelay"];
 var StyledTooltip = styled.div.withConfig({
   displayName: "Tooltip__StyledTooltip",
   componentId: "sc-m2im2p-0"
-})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background);
+})(["", " ", " ", " background:", ";z-index:1500;white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}"], typographyTemplate(tooltip.typography), spacingsTemplate(tooltip.spacings), bordersTemplate(tooltip.border), tooltip.background);
 var ArrowWrapper = styled.div.withConfig({
   displayName: "Tooltip__ArrowWrapper",
   componentId: "sc-m2im2p-1"
@@ -81,43 +81,44 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
       getReferenceProps = _useInteractions.getReferenceProps,
       getFloatingProps = _useInteractions.getFloatingProps;
 
-  var staticSide = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right'
-  }[finalPlacement.split('-')[0]];
-  var arrowTransform = 'none';
-
-  switch (staticSide) {
-    case 'right':
-      arrowTransform = 'rotateY(180deg)';
-      break;
-
-    case 'left':
-      arrowTransform = 'none';
-      break;
-
-    case 'top':
-      arrowTransform = 'rotate(90deg)';
-      break;
-
-    case 'bottom':
-      arrowTransform = 'rotate(-90deg)';
-      break;
-  }
-
-  if (arrowRef.current) {
-    var _Object$assign;
+  useEffect(function () {
+    var staticSide = {
+      top: 'bottom',
+      right: 'left',
+      bottom: 'top',
+      left: 'right'
+    }[finalPlacement.split('-')[0]];
+    var arrowTransform = 'none';
+
+    switch (staticSide) {
+      case 'right':
+        arrowTransform = 'rotateY(180deg)';
+        break;
+
+      case 'left':
+        arrowTransform = 'none';
+        break;
+
+      case 'top':
+        arrowTransform = 'rotate(90deg)';
+        break;
+
+      case 'bottom':
+        arrowTransform = 'rotate(-90deg)';
+        break;
+    }
 
-    Object.assign(arrowRef.current.style, (_Object$assign = {
-      left: arrowX != null ? "".concat(arrowX, "px") : '',
-      top: arrowY != null ? "".concat(arrowY, "px") : '',
-      right: '',
-      bottom: ''
-    }, _defineProperty(_Object$assign, staticSide, '-6px'), _defineProperty(_Object$assign, "transform", arrowTransform), _Object$assign));
-  }
+    if (arrowRef.current) {
+      var _Object$assign;
 
+      Object.assign(arrowRef.current.style, (_Object$assign = {
+        left: arrowX != null ? "".concat(arrowX, "px") : '',
+        top: arrowY != null ? "".concat(arrowY, "px") : '',
+        right: '',
+        bottom: ''
+      }, _defineProperty(_Object$assign, staticSide, '-6px'), _defineProperty(_Object$assign, "transform", arrowTransform), _Object$assign));
+    }
+  });
   var updatedChildren = /*#__PURE__*/cloneElement(children, _objectSpread({}, getReferenceProps(_objectSpread({
     ref: anchorRef
   }, children.props))));

package/dist/esm/components/TopBar/Header.js

@@ -8,7 +8,7 @@ var _excluded = ["children"];
 var StyledHeader = styled.div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "sc-1fpllve-0"
-})(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:24px;align-items:center;"]);
+})(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:12px;align-items:center;"]);
 var Header = /*#__PURE__*/forwardRef(function Header(_ref, ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/index.js

@@ -14,6 +14,7 @@ export { Banner } from './components/Banner/index.js';
 export { Progress } from './components/Progress/index.js';
 export { Breadcrumbs } from './components/Breadcrumbs/index.js';
 export { Menu } from './components/Menu/index.js';
+export { SideBar } from './components/SideBar/index.js';
 export { Typography } from './components/Typography/Typography.js';
 export { Divider } from './components/Divider/Divider.js';
 export { TextField } from './components/TextField/TextField.js';
@@ -40,3 +41,5 @@ export { Switch } from './components/Switch/Switch.js';
 export { EdsProvider, useEds } from './components/EdsProvider/eds.context.js';
 export { Paper } from './components/Paper/Paper.js';
 export { Autocomplete } from './components/Autocomplete/Autocomplete.js';
+export { InputWrapper } from './components/InputWrapper/InputWrapper.js';
+export { useSideBar } from './components/SideBar/SideBar.context.js';

package/dist/types/components/Input/Input.d.ts

@@ -1,5 +1,6 @@
-import { InputHTMLAttributes } from 'react';
-import type { Variants } from '../TextField/types';
+import { ReactNode, CSSProperties, ElementType, ComponentPropsWithoutRef } from 'react';
+import { OverridableComponent } from '@equinor/eds-utils';
+import type { Variants } from '../types';
 export declare type InputProps = {
     /** Placeholder */
     placeholder?: string;
@@ -11,16 +12,22 @@ export declare type InputProps = {
     type?: string;
     /** Read Only */
     readOnly?: boolean;
-} & InputHTMLAttributes<HTMLInputElement>;
-export declare const Input: import("react").ForwardRefExoticComponent<{
-    /** Placeholder */
-    placeholder?: string;
-    /** Variant */
-    variant?: Variants;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Type */
-    type?: string;
-    /** Read Only */
-    readOnly?: boolean;
-} & InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
+    /** Left adornments */
+    leftAdornments?: ReactNode;
+    /** Right adornments */
+    rightAdornments?: ReactNode;
+    /** Left adornments props */
+    leftAdornmentsProps?: ComponentPropsWithoutRef<'div'>;
+    /** Right adornments props */
+    rightAdornmentsProps?: ComponentPropsWithoutRef<'div'>;
+    /** Manually specify left adornments width. The width will be the dom element width if not defined */
+    leftAdornmentsWidth?: number;
+    /**  Manually specify right adornments width. The width will be the dom element width if not defined */
+    rightAdornmentsWidth?: number;
+    /** Cast the input to another element */
+    as?: ElementType;
+    /**  */
+    className?: string;
+    style?: CSSProperties;
+};
+export declare const Input: OverridableComponent<InputProps, HTMLInputElement>;

package/dist/types/components/InputWrapper/HelperText/HelperText.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export declare type HelperTextProps = {
+    /** Helper text */
+    text?: string;
+    /** Icon */
+    icon?: ReactNode;
+    /** Color */
+    color?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const TextfieldHelperText: import("react").ForwardRefExoticComponent<{
+    /** Helper text */
+    text?: string;
+    /** Icon */
+    icon?: ReactNode;
+    /** Color */
+    color?: string;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { TextfieldHelperText as HelperText };

package/dist/types/components/{TextField → InputWrapper}/HelperText/HelperText.token.d.ts

@@ -1,5 +1,4 @@
 import type { Spacing, Typography } from '@equinor/eds-tokens';
-import { ColorStateProps } from '../types';
 export declare type HelperTextProps = {
     background: string;
     typography: Typography;
@@ -7,9 +6,5 @@ export declare type HelperTextProps = {
         comfortable: Spacing;
         compact: Spacing;
     };
-    default: ColorStateProps;
-    error: ColorStateProps;
-    warning: ColorStateProps;
-    success: ColorStateProps;
 };
 export declare const helperText: HelperTextProps;

package/dist/types/components/InputWrapper/HelperText/index.d.ts

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