@equinor/eds-core-react 0.32.4 → 0.33.0

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

@@ -24,17 +24,17 @@ var wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-te
 var RangeWrapper = styled.div.attrs(function (_ref) {
   var $min = _ref.$min,
     $max = _ref.$max,
-    valA = _ref.valA,
-    valB = _ref.valB,
-    disabled = _ref.disabled,
+    $valA = _ref.$valA,
+    $valB = _ref.$valB,
+    $disabled = _ref.$disabled,
     style = _ref.style;
   return {
     style: _objectSpread({
-      '--a': valA,
-      '--b': valB,
+      '--a': $valA,
+      '--b': $valB,
       '--min': $min,
       '--max': $max,
-      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+      '--background': $disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
     }, style)
   };
 }).withConfig({
@@ -220,11 +220,11 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref3, ref) {
       ref: ref,
       role: "group",
       "aria-labelledby": getAriaLabelledby(),
-      valA: sliderValue[0],
-      valB: sliderValue[1],
+      $valA: sliderValue[0],
+      $valB: sliderValue[1],
       $max: max,
       $min: min,
-      disabled: disabled,
+      $disabled: disabled,
       onMouseMove: findClosestRange,
       onMouseDown: handleDragging,
       onMouseUp: handleDragging,

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

@@ -16,13 +16,13 @@ var StyledSnackbar = styled(Paper).withConfig({
   componentId: "sc-ac6no8-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    placement = _ref.placement;
+    $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,
-    right: placement.includes('right') ? theme.spacings.right : undefined,
-    left: placement.includes('left') ? theme.spacings.left : placement === 'top' || placement === 'bottom' ? '50%' : undefined,
-    transform: placement === 'left' || placement === 'right' ? 'translateY(-50%)' : placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : undefined
+    top: $placement.includes('top') ? theme.spacings.top : $placement === 'left' || $placement === 'right' ? '50%' : undefined,
+    bottom: $placement.includes('bottom') ? theme.spacings.bottom : undefined,
+    right: $placement.includes('right') ? theme.spacings.right : undefined,
+    left: $placement.includes('left') ? theme.spacings.left : $placement === 'top' || $placement === 'bottom' ? '50%' : undefined,
+    transform: $placement === 'left' || $placement === 'right' ? 'translateY(-50%)' : $placement === 'top' || $placement === 'bottom' ? 'translateX(-50%)' : undefined
   }, theme.entities.button.typography.color);
 });
 var Snackbar = /*#__PURE__*/forwardRef(function Snackbar(_ref2, ref) {
@@ -54,7 +54,7 @@ var Snackbar = /*#__PURE__*/forwardRef(function Snackbar(_ref2, ref) {
   }, [open, autoHideDuration, setVisible, onClose]);
   var props = _objectSpread({
     ref: ref,
-    placement: placement
+    $placement: placement
   }, rest);
   var _useEds = useEds(),
     density = _useEds.density;

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

@@ -14,11 +14,11 @@ 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;gap:", ";"], function (_ref) {
-  var isDisabled = _ref.isDisabled;
-  return isDisabled ? 'not-allowed' : 'pointer';
+  var $isDisabled = _ref.$isDisabled;
+  return $isDisabled ? 'not-allowed' : 'pointer';
 }, function (_ref2) {
-  var size = _ref2.size;
-  return size === 'small' ? '12px' : '8px';
+  var $size = _ref2.$size;
+  return $size === 'small' ? '12px' : '8px';
 });
 var Label = styled.span.withConfig({
   displayName: "Switch__Label",
@@ -45,8 +45,8 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(_ref4, ref) {
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: label ? /*#__PURE__*/jsxs(StyledLabel, {
-      size: size,
-      isDisabled: disabled,
+      $size: size,
+      $isDisabled: disabled,
       className: className,
       style: style,
       children: [size === 'small' ? /*#__PURE__*/jsx(SwitchSmall, _objectSpread(_objectSpread({

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

@@ -27,6 +27,6 @@ var BaseInput = styled.input.attrs(function (_ref2) {
 var GridWrapper = styled.span.withConfig({
   displayName: "Switchstyles__GridWrapper",
   componentId: "sc-x39lde-2"
-})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;place-items:center;"]);
+})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;place-items:center;isolation:isolate;"]);
 
 export { BaseInput, BaseInputWrapper, GridWrapper };

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

@@ -19,11 +19,11 @@ var Track = styled.span.withConfig({
   displayName: "SwitchDefault__Track",
   componentId: "sc-16ym5pn-1"
 })(function (_ref2) {
-  var isDisabled = _ref2.isDisabled,
+  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 && {
+  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
   });
 });
@@ -31,11 +31,11 @@ var Handle = styled.span.withConfig({
   displayName: "SwitchDefault__Handle",
   componentId: "sc-16ym5pn-2"
 })(function (_ref3) {
-  var isDisabled = _ref3.isDisabled,
+  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 && {
+  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);
 });
@@ -52,9 +52,9 @@ var SwitchDefault = /*#__PURE__*/forwardRef(function SwitchDefault(_ref4, ref) {
       disabled: disabled
     })), /*#__PURE__*/jsxs(BaseInputWrapper, {
       children: [/*#__PURE__*/jsx(Track, {
-        isDisabled: disabled
+        $isDisabled: disabled
       }), /*#__PURE__*/jsx(Handle, {
-        isDisabled: disabled
+        $isDisabled: disabled
       })]
     })]
   });

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

@@ -23,11 +23,11 @@ var Track = styled.span.withConfig({
   displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"
 })(function (_ref2) {
-  var isDisabled = _ref2.isDisabled,
+  var $isDisabled = _ref2.$isDisabled,
     _ref2$theme = _ref2.theme,
     states = _ref2$theme.states,
     track = _ref2$theme.entities.track;
-  return css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, isDisabled ? states.disabled.background : track.states.disabled.background);
+  return css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, $isDisabled ? states.disabled.background : track.states.disabled.background);
 });
 var Handle = styled.span.withConfig({
   displayName: "SwitchSmall__Handle",
@@ -49,7 +49,7 @@ var SwitchSmall = /*#__PURE__*/forwardRef(function SwitchSmall(_ref4, ref) {
       disabled: disabled
     })), /*#__PURE__*/jsxs(BaseInputWrapper, {
       children: [/*#__PURE__*/jsx(Track, {
-        isDisabled: disabled
+        $isDisabled: disabled
       }), /*#__PURE__*/jsx(Handle, {})]
     })]
   });

package/dist/esm/components/Table/Caption.js

@@ -1,20 +1,24 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
+var _excluded = ["captionSide"];
 var StyledCaption = styled.caption.withConfig({
   displayName: "Caption__StyledCaption",
   componentId: "sc-rtfr07-0"
 })(function (_ref) {
-  var _ref$captionSide = _ref.captionSide,
-    captionSide = _ref$captionSide === void 0 ? 'top' : _ref$captionSide;
-  return {
-    captionSide: captionSide
-  };
+  var $captionSide = _ref.$captionSide;
+  return css(["caption-side:", ";"], $captionSide);
 });
-var Caption = /*#__PURE__*/forwardRef(function Caption(props, ref) {
-  return /*#__PURE__*/jsx(StyledCaption, _objectSpread(_objectSpread({}, props), {}, {
+var Caption = /*#__PURE__*/forwardRef(function Caption(_ref2, ref) {
+  var _ref2$captionSide = _ref2.captionSide,
+    captionSide = _ref2$captionSide === void 0 ? 'top' : _ref2$captionSide,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/jsx(StyledCaption, _objectSpread(_objectSpread({
+    $captionSide: captionSide
+  }, props), {}, {
     ref: ref
   }));
 });

package/dist/esm/components/Table/HeaderCell/HeaderCell.js

@@ -7,13 +7,13 @@ import { token } from './HeaderCell.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../../EdsProvider/eds.context.js';
 
-var _excluded = ["children", "sort"];
+var _excluded = ["children", "sort", "sticky"];
 var StyledTableCell = styled.th.withConfig({
   displayName: "HeaderCell__StyledTableCell",
   componentId: "sc-18w2o3a-0"
 })(function (props) {
   var theme = props.theme,
-    sticky = props.sticky;
+    $sticky = props.$sticky;
   var background = theme.background,
     height = theme.height,
     typography = theme.typography,
@@ -28,7 +28,7 @@ var StyledTableCell = styled.th.withConfig({
   if (ariaSort && ariaSort !== 'none') {
     sortStylingActive = css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
   }
-  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
+  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, $sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
 });
 var CellInner = styled.div.withConfig({
   displayName: "HeaderCell__CellInner",
@@ -37,18 +37,22 @@ var CellInner = styled.div.withConfig({
 var TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell(_ref, ref) {
   var children = _ref.children,
     sort = _ref.sort,
+    sticky = _ref.sticky,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useEds = useEds(),
     density = _useEds.density;
   var token$1 = useToken({
     density: density
   }, token);
+  var props = _objectSpread({
+    ref: ref,
+    $sticky: sticky
+  }, rest);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token$1,
     children: /*#__PURE__*/jsx(StyledTableCell, _objectSpread(_objectSpread({
       "aria-sort": sort
-    }, rest), {}, {
-      ref: ref,
+    }, props), {}, {
       children: /*#__PURE__*/jsx(CellInner, {
         children: children
       })

package/dist/esm/components/Table/Row/Row.js

@@ -6,25 +6,21 @@ import styled from 'styled-components';
 import { token } from './Row.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
+var _token$states$hover;
 var StyledRow = styled.tr.withConfig({
   displayName: "Row__StyledRow",
   componentId: "sc-12c5lns-0"
-})(function (_ref) {
-  var _token$states$active, _token$states$hover;
-  var active = _ref.active;
-  return {
-    background: active ? (_token$states$active = token.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null,
-    '@media (hover: hover) and (pointer: fine)': {
-      ':hover': {
-        background: (_token$states$hover = token.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background
-      }
-    }
-  };
-});
+})(["background:", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], function (_ref) {
+  var _token$states$active;
+  var $active = _ref.$active;
+  return $active ? (_token$states$active = token.states.active) === null || _token$states$active === void 0 ? void 0 : _token$states$active.background : null;
+}, (_token$states$hover = token.states.hover) === null || _token$states$hover === void 0 ? void 0 : _token$states$hover.background);
 var Row = /*#__PURE__*/forwardRef(function Row(_ref2, ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  var children = props.children;
+  var children = props.children,
+    active = props.active;
   return /*#__PURE__*/jsx(StyledRow, _objectSpread(_objectSpread({}, props), {}, {
+    $active: active,
     ref: ref,
     children: children
   }));

package/dist/esm/components/TableOfContents/TableOfContents.js

@@ -15,8 +15,8 @@ var StyledTableOfContents = styled.nav.withConfig({
   componentId: "sc-q23s6y-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    sticky = _ref.sticky;
-  return css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, sticky && css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.entities.sticky.spacings.right));
+    $sticky = _ref.$sticky;
+  return css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, $sticky && css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.entities.sticky.spacings.right));
 });
 var TocList = styled(List).withConfig({
   displayName: "TableOfContents__TocList",
@@ -45,8 +45,7 @@ var TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents(_ref3, re
     theme: token,
     children: /*#__PURE__*/jsxs(StyledTableOfContents, _objectSpread(_objectSpread({
       ref: ref,
-      label: label,
-      sticky: sticky
+      $sticky: sticky
     }, rest), {}, {
       children: [/*#__PURE__*/jsx(TocLabel, {
         variant: "overline",

package/dist/esm/components/Tabs/Tab.js

@@ -5,18 +5,19 @@ import styled, { css } from 'styled-components';
 import { spacingsTemplate, typographyTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["active"];
+var _excluded = ["active", "value"];
 var StyledTab = styled.button.attrs(function (_ref) {
   var _ref$$active = _ref.$active,
     $active = _ref$$active === void 0 ? false : _ref$$active,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    $value = _ref.$value;
   return {
     type: 'button',
     role: 'tab',
     'aria-selected': $active,
     'aria-disabled': disabled,
-    tabIndex: $active ? '0' : '-1'
+    tabIndex: $value ? 0 : $active ? 0 : -1
   };
 }).withConfig({
   displayName: "Tab__StyledTab",
@@ -30,10 +31,12 @@ var StyledTab = styled.button.attrs(function (_ref) {
 });
 var Tab = /*#__PURE__*/forwardRef(function Tab(_ref3, ref) {
   var active = _ref3.active,
+    value = _ref3.value,
     rest = _objectWithoutProperties(_ref3, _excluded);
   return /*#__PURE__*/jsx(StyledTab, _objectSpread({
     ref: ref,
-    $active: active
+    $active: active,
+    $value: value
   }, rest));
 });
 

package/dist/esm/components/Tabs/TabList.js

@@ -1,7 +1,7 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef, useContext, useRef, useState, useCallback, useEffect, Children, cloneElement } from 'react';
+import { forwardRef, useContext, useRef, useState, useCallback, Children, cloneElement } from 'react';
 import styled from 'styled-components';
 import { mergeRefs } from '@equinor/eds-utils';
 import { TabsContext } from './Tabs.context.js';
@@ -20,11 +20,11 @@ var StyledTabList = styled.div.attrs(function () {
   displayName: "TabList__StyledTabList",
   componentId: "sc-1g1p5i1-0"
 })(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:0;& ::-webkit-scrollbar{width:0;height:0;}}"], function (_ref) {
-  var variant = _ref.variant;
-  return variants[variant];
+  var $variant = _ref.$variant;
+  return variants[$variant];
 }, function (_ref2) {
-  var scrollable = _ref2.scrollable;
-  return scrollable ? 'auto' : 'hidden';
+  var $scrollable = _ref2.$scrollable;
+  return $scrollable ? 'auto' : 'hidden';
 });
 var TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
   var _ref3$children = _ref3.children,
@@ -39,7 +39,7 @@ var TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
     _useContext$scrollabl = _useContext.scrollable,
     scrollable = _useContext$scrollabl === void 0 ? false : _useContext$scrollabl,
     tabsFocused = _useContext.tabsFocused;
-  var currentTab = useRef(activeTab);
+  var currentTab = useRef();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     arrowNavigating = _useState2[0],
@@ -50,18 +50,19 @@ var TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
       node.focus();
     }
   }, [arrowNavigating, tabsFocused]);
-  useEffect(function () {
-    currentTab.current = activeTab;
-  }, [activeTab]);
-  var Tabs = Children.map(children, function (child, index) {
-    var tabRef = index === activeTab ? mergeRefs(child.ref, selectedTabRef) : child.ref;
+  var Tabs = Children.map(children, function (child, $index) {
+    var childProps = child.props;
+    var controlledActive = childProps.value;
+    var isActive = controlledActive ? controlledActive === activeTab : $index === activeTab;
+    var tabRef = isActive ? mergeRefs(child.ref, selectedTabRef) : child.ref;
+    if (isActive) currentTab.current = $index;
     return /*#__PURE__*/cloneElement(child, {
-      id: "".concat(tabsId, "-tab-").concat(index + 1),
-      'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
-      active: index === activeTab,
-      index: index,
+      id: "".concat(tabsId, "-tab-").concat($index + 1),
+      'aria-controls': "".concat(tabsId, "-panel-").concat($index + 1),
+      active: isActive,
+      $index: $index,
       onClick: function onClick() {
-        return handleChange(index);
+        return handleChange($index);
       },
       ref: tabRef
     });
@@ -71,7 +72,7 @@ var TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
     return !childProps.disabled;
   }).map(function (child) {
     var childProps = child.props;
-    return childProps.index;
+    return childProps.$index;
   });
   var firstFocusableChild = focusableChildren[0];
   var lastFocusableChild = focusableChildren[focusableChildren.length - 1];
@@ -96,8 +97,8 @@ var TabList = /*#__PURE__*/forwardRef(function TabsList(_ref3, ref) {
     onKeyDown: handleKeyPress,
     ref: ref
   }, props), {}, {
-    variant: variant,
-    scrollable: scrollable,
+    $variant: variant,
+    $scrollable: scrollable,
     children: Tabs
   }));
 });

package/dist/esm/components/Tabs/TabPanels.js

@@ -4,18 +4,20 @@ import { forwardRef, useContext, Children, cloneElement } from 'react';
 import { TabsContext } from './Tabs.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
+var _excluded = ["children", "conditionalRender"];
 var TabPanels = /*#__PURE__*/forwardRef(function TabPanels(_ref, ref) {
   var children = _ref.children,
+    conditionalRender = _ref.conditionalRender,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(TabsContext),
     activeTab = _useContext.activeTab,
     tabsId = _useContext.tabsId;
-  var Panels = Children.map(children, function (child, index) {
-    if (activeTab !== index) return null;
+  var Panels = Children.map(children, function (child, $index) {
+    if (conditionalRender && activeTab !== $index) return null;
     return /*#__PURE__*/cloneElement(child, {
-      id: "".concat(tabsId, "-panel-").concat(index + 1),
-      'aria-labelledby': "".concat(tabsId, "-tab-").concat(index + 1)
+      id: "".concat(tabsId, "-panel-").concat($index + 1),
+      'aria-labelledby': "".concat(tabsId, "-tab-").concat($index + 1),
+      hidden: activeTab !== $index
     });
   });
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({

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

@@ -10,7 +10,7 @@ import { Input } from '../Input/Input.js';
 var _excluded = ["id", "label", "meta", "unit", "helperText", "placeholder", "disabled", "multiline", "className", "variant", "inputIcon", "helperIcon", "style", "rowsMax", "textareaRef", "inputRef"];
 /** 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({
+  return props.$multiline ? /*#__PURE__*/jsx(Textarea, _objectSpread({
     ref: ref
   }, props)) : /*#__PURE__*/jsx(Input, _objectSpread({
     ref: ref
@@ -49,7 +49,7 @@ var TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     }),
     rowsMax: rowsMax,
     ref: inputRef || textareaRef,
-    multiline: multiline
+    $multiline: multiline
   }, other);
   var helperProps = {
     id: null,

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

@@ -2,7 +2,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, useCallback } from 'react';
-import * as Input_tokens from '../Input/Input.tokens.js';
 import { input as input$1 } from '../Input/Input.tokens.js';
 import { useAutoResize, mergeRefs } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
@@ -19,7 +18,6 @@ var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref, ref) {
     type = _ref$type === void 0 ? 'text' : _ref$type,
     rowsMax = _ref.rowsMax,
     other = _objectWithoutProperties(_ref, _excluded);
-  var inputVariant = Input_tokens[variant] ? Input_tokens[variant] : input$1;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     textareaEl = _useState2[0],
@@ -44,9 +42,7 @@ var Textarea = /*#__PURE__*/forwardRef(function Textarea(_ref, ref) {
     ref: combinedRef,
     type: type,
     disabled: disabled,
-    variant: variant,
-    token: inputVariant,
-    density: density
+    variant: variant
   }, other);
   var adornmentsToTop = {
     style: {

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

@@ -14,8 +14,8 @@ var StyledTopBar = styled(Paper).withConfig({
   componentId: "sc-1yj236q-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    sticky = _ref.sticky;
-  return css(["height:", ";background:", ";box-sizing:border-box;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", " ", ""], theme.height, theme.background, theme.spacings.left, bordersTemplate(theme.border), spacingsTemplate(theme.spacings), typographyTemplate(theme.typography), sticky && css(["position:sticky;top:0;z-index:1100;"]));
+    $sticky = _ref.$sticky;
+  return css(["height:", ";background:", ";box-sizing:border-box;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", " ", ""], theme.height, theme.background, theme.spacings.left, bordersTemplate(theme.border), spacingsTemplate(theme.spacings), typographyTemplate(theme.typography), $sticky && css(["position:sticky;top:0;z-index:1100;"]));
 });
 var TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
   var children = _ref2.children,
@@ -37,7 +37,7 @@ var TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
     children: /*#__PURE__*/jsx(StyledTopBar, _objectSpread(_objectSpread({
       forwardedAs: 'header',
       elevation: elevation,
-      sticky: sticky
+      $sticky: sticky
     }, rest), {}, {
       children: children
     }))

package/dist/esm/components/Typography/Typography.js

@@ -6,7 +6,7 @@ import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { link, quickVariants, typography, colors } from './Typography.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["variant", "children", "bold", "italic", "link", "color", "group", "token", "as"];
+var _excluded = ["variant", "children", "bold", "italic", "link", "lines", "color", "group", "token", "as"];
 var getElementType = function getElementType(variant, link) {
   if (link) {
     return 'a';
@@ -36,6 +36,9 @@ var findTypography = function findTypography(variantName, group) {
   }
   return typography[group][variantName];
 };
+
+//@TODO: fix typescript here
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 var findColor = function findColor() {
   var inputColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   return typeof colors[inputColor] === 'undefined' ? inputColor : colors[inputColor];
@@ -50,19 +53,19 @@ var StyledTypography = styled.p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "sc-179guof-0"
 })(["", " ", " ", " ", ""], function (_ref) {
-  var typography = _ref.typography,
+  var $typography = _ref.$typography,
     $link = _ref.$link;
-  return typographyTemplate(typography, $link);
+  return typographyTemplate($typography, $link);
 }, function (_ref2) {
   var $color = _ref2.$color;
   return css({
     color: findColor($color)
   });
 }, function (_ref3) {
-  var lines = _ref3.lines;
+  var $lines = _ref3.$lines;
   return (
     //https://caniuse.com/#feat=css-line-clamp
-    lines > 0 && css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], lines)
+    $lines > 0 && css(["&{display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}"], $lines)
   );
 }, function (_ref4) {
   var $link = _ref4.$link;
@@ -75,6 +78,7 @@ var Typography = /*#__PURE__*/forwardRef(function Typography(_ref5, ref) {
     bold = _ref5.bold,
     italic = _ref5.italic,
     link = _ref5.link,
+    lines = _ref5.lines,
     color = _ref5.color,
     group = _ref5.group,
     token = _ref5.token,
@@ -88,8 +92,9 @@ var Typography = /*#__PURE__*/forwardRef(function Typography(_ref5, ref) {
   }
   return /*#__PURE__*/jsx(StyledTypography, _objectSpread(_objectSpread({
     as: as,
-    typography: _objectSpread(_objectSpread({}, typography), token),
+    $typography: _objectSpread(_objectSpread({}, typography), token),
     $link: link,
+    $lines: lines,
     ref: ref,
     $color: color
   }, other), {}, {

package/dist/types/components/Autocomplete/Option.d.ts

@@ -1,5 +1,5 @@
 import { LiHTMLAttributes, ReactNode } from 'react';
-export type AutocompleteOptionProps<T> = {
+export type AutocompleteOptionProps = {
     value: string;
     multiple: boolean;
     highlighted: string;
@@ -8,16 +8,8 @@ export type AutocompleteOptionProps<T> = {
     multiline: boolean;
     optionComponent?: ReactNode;
 } & LiHTMLAttributes<HTMLLIElement>;
-declare function AutocompleteOptionInner<T>(props: AutocompleteOptionProps<T>, ref: React.ForwardedRef<HTMLLIElement>): JSX.Element;
-export declare const AutocompleteOption: <T>(props: {
-    value: string;
-    multiple: boolean;
-    highlighted: string;
-    isSelected: boolean;
-    isDisabled?: boolean;
-    multiline: boolean;
-    optionComponent?: ReactNode;
-} & LiHTMLAttributes<HTMLLIElement> & {
+declare function AutocompleteOptionInner(props: AutocompleteOptionProps, ref: React.ForwardedRef<HTMLLIElement>): JSX.Element;
+export declare const AutocompleteOption: (props: AutocompleteOptionProps & {
     ref?: React.ForwardedRef<HTMLLIElement>;
     displayName?: string | undefined;
 }) => ReturnType<typeof AutocompleteOptionInner>;