@equinor/eds-core-react 0.15.0-dev.20211116v2 → 0.16.1-dev.12072021

package/dist/esm/components/Pagination/Pagination.js

@@ -44,7 +44,7 @@ const Text = styled(Typography).withConfig({
 })(["white-space:nowrap;"]);
 
 function getAriaLabel(page, selected) {
-  return `${selected === page ? 'Current page, ' : 'Go to '}page ${page}`;
+  return "".concat(selected === page ? 'Current page, ' : 'Go to ', "page ").concat(page);
 }
 
 const Pagination = /*#__PURE__*/forwardRef(function Pagination({
@@ -95,7 +95,7 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination({
     ...props,
     children: /*#__PURE__*/jsxs(OrderedList, {
       style: {
-        gridTemplateColumns: `repeat(${columns}, 48px)`
+        gridTemplateColumns: "repeat(".concat(columns, ", 48px)")
       },
       children: [/*#__PURE__*/jsx(ListItem, {
         children: /*#__PURE__*/jsx(Button, {
@@ -122,13 +122,13 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination({
             onPageChange(event, page);
           }
         })
-      }, `list-item ${index}`) : /*#__PURE__*/jsx(ListItem // eslint-disable-next-line react/no-array-index-key
+      }, "list-item ".concat(index)) : /*#__PURE__*/jsx(ListItem // eslint-disable-next-line react/no-array-index-key
       , {
         children: /*#__PURE__*/jsx(StyledIcon, {
           name: "more_horizontal",
           "aria-label": "Ellipsis of pages"
         })
-      }, `ellipsis-${index}`)) : undefined, /*#__PURE__*/jsx(ListItem, {
+      }, "ellipsis-".concat(index))) : undefined, /*#__PURE__*/jsx(ListItem, {
         children: /*#__PURE__*/jsx(Button, {
           variant: "ghost_icon",
           onClick: activePage < pages ? event => {
@@ -146,12 +146,7 @@ const Pagination = /*#__PURE__*/forwardRef(function Pagination({
 
   return withItemIndicator ? /*#__PURE__*/jsxs(FlexContainer, {
     children: [/*#__PURE__*/jsx(Text, {
-      children: currentItemFirst !== currentItemLast ? `${currentItemFirst}
-              ${' - '}
-              ${currentItemLast}
-              ${' of '}
-              ${totalItems}
-              ${' items'}` : `${currentItemFirst} ${' of '} ${totalItems} ${' items'}`
+      children: currentItemFirst !== currentItemLast ? "".concat(currentItemFirst, "\n              ", ' - ', "\n              ").concat(currentItemLast, "\n              ", ' of ', "\n              ").concat(totalItems, "\n              ", ' items') : "".concat(currentItemFirst, " ", ' of ', " ").concat(totalItems, " ", ' items')
     }), pagination]
   }) : pagination;
 });

package/dist/esm/components/Progress/Circular/CircularProgress.js

@@ -53,7 +53,7 @@ const CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress({
 
   if (variant === 'determinate') {
     trackStyle.stroke = circumference.toFixed(3);
-    trackStyle.strokeDashoffset = `${((100 - progress) / 100 * circumference).toFixed(3)}px`;
+    trackStyle.strokeDashoffset = "".concat(((100 - progress) / 100 * circumference).toFixed(3), "px");
     props['aria-valuenow'] = progress;
 
     if (value !== undefined) {

package/dist/esm/components/Progress/Linear/LinearProgress.js

@@ -32,7 +32,7 @@ const LinearProgress = /*#__PURE__*/forwardRef(function LinearProgress({
       props['aria-valuemin'] = 0;
       props['aria-valuemax'] = 100;
       const transform = value - 100;
-      barStyle = `translateX(${transform}%)`;
+      barStyle = "translateX(".concat(transform, "%)");
     }
   }
 

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

@@ -16,13 +16,15 @@ const Input = styled.input.attrs(({
 })).withConfig({
   displayName: "Radio__Input",
   componentId: "sc-we59oz-0"
-})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], ({
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], ({
   theme,
   iconSize
 }) => parseFloat(theme.clickbound.height) / iconSize, ({
   disabled
 }) => disabled ? 'not-allowed' : 'pointer', ({
   theme
+}) => outlineTemplate(theme.states.focus.outline), ({
+  theme
 }) => outlineTemplate(theme.states.focus.outline));
 const StyledLabel = styled.label.withConfig({
   displayName: "Radio__StyledLabel",
@@ -86,7 +88,7 @@ const Radio = /*#__PURE__*/forwardRef(function Radio({
     return /*#__PURE__*/jsxs(Svg, {
       width: iconSize,
       height: iconSize,
-      viewBox: `0 0 ${iconSize} ${iconSize}`,
+      viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
       fill: fill,
       "aria-hidden": true,
       children: [/*#__PURE__*/jsx(StyledPath, {

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

@@ -8,6 +8,7 @@ import { useCombinedRefs } from '../../hooks/useCombinedRefs.js';
 import { setReactInputValue } from '../../utils/setReactInputValue.js';
 import { bordersTemplate } from '../../utils/templates/borders.js';
 import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
+import { Button } from '../Button/Button.js';
 
 const {
   height,
@@ -18,7 +19,8 @@ const {
   clickbound,
   entities: {
     icon,
-    placeholder
+    placeholder,
+    button
   },
   states
 } = search;
@@ -36,12 +38,12 @@ const Input = styled.input.withConfig({
 })(["min-height:0;min-width:0;width:100%;height:100%;margin:0;padding:0;border:none;appearance:none;box-sizing:border-box;background:transparent;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}", ""], typographyTemplate(typography), ({
   disabled
 }) => disabled && css(["cursor:not-allowed;"]));
-const InsideButton = styled.div.withConfig({
+const InsideButton = styled(Button).withConfig({
   displayName: "Search__InsideButton",
   componentId: "sc-v8l23u-2"
-})(["", " display:flex;align-items:center;visibility:hidden;z-index:1;padding:4px;height:16px;width:16px;position:relative;&::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}", ""], bordersTemplate(icon.border), icon.clickbound.offset.top, icon.clickbound.height, ({
+})(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, ({
   isActive
-}) => isActive && css(["visibility:visible;@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], icon.states.hover.background));
+}) => isActive && css(["visibility:visible;"]));
 const Search = /*#__PURE__*/forwardRef(function Search({
   onChange,
   defaultValue = '',
@@ -151,8 +153,6 @@ const Search = /*#__PURE__*/forwardRef(function Search({
   }, value, defaultValue);
   const clearButtonProps = {
     isActive: state.isActive,
-    size,
-    role: 'button',
     onClick: e => {
       e.stopPropagation();
 
@@ -168,10 +168,12 @@ const Search = /*#__PURE__*/forwardRef(function Search({
       size: size
     }), /*#__PURE__*/jsx(Input, { ...inputProps
     }), /*#__PURE__*/jsx(InsideButton, { ...clearButtonProps,
-      "aria-label": "Clear search",
+      "aria-label": 'clear search',
+      title: "clear",
+      variant: "ghost_icon",
       children: /*#__PURE__*/jsx(Icon, {
         data: close,
-        size: size
+        size: 16
       })
     })]
   });

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

@@ -89,6 +89,13 @@ const search = {
         },
         height: '36px'
       }
+    },
+    button: {
+      height: '24px',
+      width: '24px',
+      spacings: {
+        right: small
+      }
     }
   }
 };

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

@@ -126,7 +126,7 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
       }
     }
   });
-  const placeholderText = items.length > 0 ? `${selectedItems.length}/${items.length} selected` : '';
+  const placeholderText = items.length > 0 ? "".concat(selectedItems.length, "/").concat(items.length, " selected") : '';
 
   const openSelect = () => {
     if (!isOpen && !(disabled || readOnly)) {
@@ -193,7 +193,7 @@ const MultiSelect = /*#__PURE__*/forwardRef(function MultiSelect({
           }), /*#__PURE__*/jsx("span", {
             children: item
           })]
-        }, `${item}`))
+        }, "".concat(item)))
       })]
     })
   });

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

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import * as R from 'ramda';
+import mergeDeepRight_1 from '../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   typography,
@@ -78,7 +78,7 @@ const select = {
     }
   }
 };
-const multiSelect = R.mergeDeepRight(select, {
+const multiSelect = mergeDeepRight_1(select, {
   spacings: {
     top: '0',
     bottom: '0',

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

@@ -136,7 +136,7 @@ const SingleSelect = /*#__PURE__*/forwardRef(function SingleSelect({
             disabled: disabled
           }),
           children: item
-        }, `${item}`))
+        }, "".concat(item)))
       })]
     })
   });

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

@@ -16,7 +16,7 @@ const {
 } = slider;
 const fakeTrackBg = css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
 const fakeTrackBgHover = css({
-  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
+  backgroundImage: "url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='".concat(track.states.hover.background, "' width='100%' height='4' rx='2' /></svg>\")")
 });
 const trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 const wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
@@ -144,9 +144,9 @@ const Slider = /*#__PURE__*/forwardRef(function Slider({
     }
   };
 
-  const inputIdA = `${ariaLabelledby}-thumb-a`;
-  const inputIdB = `${ariaLabelledby}-thumb-b`;
-  const inputId = `${ariaLabelledby}-thumb`;
+  const inputIdA = "".concat(ariaLabelledby, "-thumb-a");
+  const inputIdB = "".concat(ariaLabelledby, "-thumb-b");
+  const inputId = "".concat(ariaLabelledby, "-thumb");
   return /*#__PURE__*/jsx(Fragment, {
     children: isRangeSlider ? /*#__PURE__*/jsxs(RangeWrapper, { ...rest,
       ref: ref,

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

@@ -23,7 +23,7 @@ const StyledSliderInput = styled.input.attrs(() => ({
 })).withConfig({
   displayName: "SliderInput__StyledSliderInput",
   componentId: "sc-17orw4f-0"
-})(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track, track);
+})(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:focus-visible{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track, track);
 const SliderInput = /*#__PURE__*/forwardRef(function SliderInput({
   value,
   min,

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

@@ -25,7 +25,7 @@ const BaseInput = styled.input.attrs(({
 })(({
   disabled,
   theme
-}) => css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline)));
+}) => 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({
   displayName: "Switchstyles__GridWrapper",
   componentId: "sc-x39lde-2"

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

@@ -67,8 +67,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: {
@@ -117,8 +117,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/SwitchSmall.js

@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { BaseInput, GridWrapper, BaseInputWrapper } from './Switch.styles.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { outlineTemplate } from '../../utils/templates/focus.js';
 
 const Input = styled(BaseInput).withConfig({
   displayName: "SwitchSmall__Input",
@@ -15,7 +16,7 @@ const Input = styled(BaseInput).withConfig({
       track
     }
   }
-}) => css(["&[data-focus-visible-added]:focus + span{outline-offset:", ";}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], states.focus.outline.offset, disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background));
+}) => css(["&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background));
 const Track = styled.span.withConfig({
   displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"

package/dist/esm/components/Table/DataCell/DataCell.tokens.js

@@ -1,5 +1,5 @@
 import { tokens } from '@equinor/eds-tokens';
-import * as R from 'ramda';
+import mergeDeepRight_1 from '../../../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
 
 const {
   typography: {
@@ -141,7 +141,7 @@ const tableCell = {
 const applyVariant = (variant, token) => {
   switch (variant) {
     case 'numeric':
-      return R.mergeDeepRight(token, token.variants.numeric);
+      return mergeDeepRight_1(token, token.variants.numeric);
 
     default:
       return token;

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

@@ -23,9 +23,9 @@ const StyledTab = styled.button.attrs(({
 })).withConfig({
   displayName: "Tab__StyledTab",
   componentId: "sc-scjkct-0"
-})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), ({
+})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), ({
   active
-}) => active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), ({
+}) => active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), ({
   active
 }) => active ? tab.states.active.states.hover.typography.color : tab.typography.color, ({
   disabled

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

@@ -40,8 +40,8 @@ const TabList = /*#__PURE__*/forwardRef(function TabsList({
     const tabRef = index === activeTab ? // eslint-disable-next-line react-hooks/rules-of-hooks
     useCombinedRefs(child.ref, selectedTabRef) : child.ref;
     return /*#__PURE__*/cloneElement(child, {
-      id: `${tabsId}-tab-${index + 1}`,
-      'aria-controls': `${tabsId}-panel-${index + 1}`,
+      id: "".concat(tabsId, "-tab-").concat(index + 1),
+      'aria-controls': "".concat(tabsId, "-panel-").concat(index + 1),
       active: index === activeTab,
       index,
       onClick: () => handleChange(index),

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

@@ -16,7 +16,7 @@ const StyledTabPanel = styled.div.attrs(() => ({
 })).withConfig({
   displayName: "TabPanel__StyledTabPanel",
   componentId: "sc-e8v1d4-0"
-})(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline));
+})(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
 const TabPanel = /*#__PURE__*/forwardRef(function TabPanel({ ...props
 }, ref) {
   return /*#__PURE__*/jsx(StyledTabPanel, {

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

@@ -11,8 +11,8 @@ const TabPanels = /*#__PURE__*/forwardRef(function TabPanels({
     tabsId
   } = useContext(TabsContext);
   const Panels = Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
-    id: `${tabsId}-panel-${index + 1}`,
-    'aria-labelledby': `${tabsId}-tab-${index + 1}`,
+    id: "".concat(tabsId, "-panel-").concat(index + 1),
+    'aria-labelledby': "".concat(tabsId, "-tab-").concat(index + 1),
     hidden: activeTab !== index
   }));
   return /*#__PURE__*/jsx("div", {

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

@@ -22,10 +22,10 @@ const Variation = ({
   var _token$border, _token$border2, _token$border3, _token$border4;
 
   if (!variant) {
-    return ``;
+    return "";
   }
 
-  return css(["box-shadow:", ";", ""], isFocused ? `none` : variant === 'default' ? `inset 0 -1px 0 0 ${((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)}` : `0 0 0 1px ${((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)}`, isFocused && outlineTemplate(token.states.focus.outline));
+  return css(["box-shadow:", ";", ""], isFocused ? "none" : variant === 'default' ? "inset 0 -1px 0 0 ".concat(((_token$border = token.border) === null || _token$border === void 0 ? void 0 : _token$border.type) === 'border' && ((_token$border2 = token.border) === null || _token$border2 === void 0 ? void 0 : _token$border2.color)) : "0 0 0 1px ".concat(((_token$border3 = token.border) === null || _token$border3 === void 0 ? void 0 : _token$border3.type) === 'border' && ((_token$border4 = token.border) === null || _token$border4 === void 0 ? void 0 : _token$border4.color)), isFocused && outlineTemplate(token.states.focus.outline));
 };
 
 const StrippedInput = styled(Input).withConfig({

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

@@ -12,7 +12,7 @@ const Variation = ({
   isDisabled
 }) => {
   if (!variant) {
-    return ``;
+    return "";
   }
 
   const {

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

@@ -19,7 +19,7 @@ const Variation = ({
   density
 }) => {
   if (!variant) {
-    return ``;
+    return "";
   }
 
   const {

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

@@ -5,7 +5,7 @@ import { jsx } from 'react/jsx-runtime';
 const StyledActions = styled.div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
-})(["grid-area:right;text-align:right;"]);
+})(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
 const Actions = /*#__PURE__*/forwardRef(function Actions({
   children,
   ...props

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

@@ -41,7 +41,7 @@ const findTypography = (variantName, group) => {
 
 const findColor = (inputColor = null) => typeof colors[inputColor] === 'undefined' ? inputColor : colors[inputColor];
 
-const toVariantName = (variant, bold = false, italic = false, link = false) => `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
+const toVariantName = (variant, bold = false, italic = false, link = false) => "".concat(variant).concat(bold ? '_bold' : '').concat(italic ? '_italic' : '').concat(link ? '_link' : '');
 
 const StyledTypography = styled.p.withConfig({
   displayName: "Typography__StyledTypography",
@@ -58,7 +58,7 @@ const StyledTypography = styled.p.withConfig({
 }) => //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), ({
   link: link$1
-}) => link$1 && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}"], outlineTemplate(link.states.focus.outline)));
+}) => link$1 && css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], outlineTemplate(link.states.focus.outline), outlineTemplate(link.states.focus.outline)));
 const Typography = /*#__PURE__*/forwardRef(function Typography({
   variant = 'body_short',
   children,
@@ -75,7 +75,7 @@ const Typography = /*#__PURE__*/forwardRef(function Typography({
   const typography = findTypography(variantName, group);
 
   if (typeof typography === 'undefined') {
-    throw new Error(`Typography variant not found for variant "${variantName}" ("${variant}") & group "${group || ''}"`);
+    throw new Error("Typography variant not found for variant \"".concat(variantName, "\" (\"").concat(variant, "\") & group \"").concat(group || '', "\""));
   }
 
   return /*#__PURE__*/jsx(StyledTypography, {

package/dist/esm/hooks/useAutoResize.js

@@ -20,7 +20,7 @@ const useAutoResize = (targetEl, maxHeight) => {
         }
 
         if (newHeight > clientHeight) {
-          targetEl.style.height = `${newHeight}px`;
+          targetEl.style.height = "".concat(newHeight, "px");
         }
       }
     };

package/dist/esm/hooks/useId.js

@@ -5,7 +5,7 @@ const useId = (idOverride, type) => {
   const id = idOverride || defaultId;
   useEffect(() => {
     if (defaultId == null) {
-      setDefaultId(`eds-${type ? type + `-` : ''}${Math.round(Math.random() * 1e5)}`);
+      setDefaultId("eds-".concat(type ? type + "-" : '').concat(Math.round(Math.random() * 1e5)));
     }
   }, [defaultId, type]);
   return id;

package/dist/esm/hooks/useToken.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { mergeDeepRight } from 'ramda';
+import mergeDeepRight_1 from '../node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/mergeDeepRight.js';
 
 const useToken = (options, token) => useCallback(() => {
   const {
@@ -7,7 +7,7 @@ const useToken = (options, token) => useCallback(() => {
   } = options;
 
   if (density === 'compact') {
-    return mergeDeepRight(token, token.modes.compact);
+    return mergeDeepRight_1(token, token.modes.compact);
   }
 
   return token;

package/dist/esm/index.js

@@ -1,4 +1,3 @@
-import 'focus-visible';
 export { Table } from './components/Table/index.js';
 export { Icon } from './components/Icon/index.js';
 export { List } from './components/List/index.js';

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_curry1.js

@@ -0,0 +1,25 @@
+import _isPlaceholder_1 from './_isPlaceholder.js';
+
+var _isPlaceholder = _isPlaceholder_1;
+/**
+ * Optimized internal one-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry1(fn) {
+  return function f1(a) {
+    if (arguments.length === 0 || _isPlaceholder(a)) {
+      return f1;
+    } else {
+      return fn.apply(this, arguments);
+    }
+  };
+}
+
+var _curry1_1 = _curry1;
+
+export default _curry1_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_curry2.js

@@ -0,0 +1,38 @@
+import _curry1_1 from './_curry1.js';
+import _isPlaceholder_1 from './_isPlaceholder.js';
+
+var _curry1 = _curry1_1;
+var _isPlaceholder = _isPlaceholder_1;
+/**
+ * Optimized internal two-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry2(fn) {
+  return function f2(a, b) {
+    switch (arguments.length) {
+      case 0:
+        return f2;
+
+      case 1:
+        return _isPlaceholder(a) ? f2 : _curry1(function (_b) {
+          return fn(a, _b);
+        });
+
+      default:
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f2 : _isPlaceholder(a) ? _curry1(function (_a) {
+          return fn(_a, b);
+        }) : _isPlaceholder(b) ? _curry1(function (_b) {
+          return fn(a, _b);
+        }) : fn(a, b);
+    }
+  };
+}
+
+var _curry2_1 = _curry2;
+
+export default _curry2_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_curry3.js

@@ -0,0 +1,57 @@
+import _curry1_1 from './_curry1.js';
+import _curry2_1 from './_curry2.js';
+import _isPlaceholder_1 from './_isPlaceholder.js';
+
+var _curry1 = _curry1_1;
+var _curry2 = _curry2_1;
+var _isPlaceholder = _isPlaceholder_1;
+/**
+ * Optimized internal three-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry3(fn) {
+  return function f3(a, b, c) {
+    switch (arguments.length) {
+      case 0:
+        return f3;
+
+      case 1:
+        return _isPlaceholder(a) ? f3 : _curry2(function (_b, _c) {
+          return fn(a, _b, _c);
+        });
+
+      case 2:
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f3 : _isPlaceholder(a) ? _curry2(function (_a, _c) {
+          return fn(_a, b, _c);
+        }) : _isPlaceholder(b) ? _curry2(function (_b, _c) {
+          return fn(a, _b, _c);
+        }) : _curry1(function (_c) {
+          return fn(a, b, _c);
+        });
+
+      default:
+        return _isPlaceholder(a) && _isPlaceholder(b) && _isPlaceholder(c) ? f3 : _isPlaceholder(a) && _isPlaceholder(b) ? _curry2(function (_a, _b) {
+          return fn(_a, _b, c);
+        }) : _isPlaceholder(a) && _isPlaceholder(c) ? _curry2(function (_a, _c) {
+          return fn(_a, b, _c);
+        }) : _isPlaceholder(b) && _isPlaceholder(c) ? _curry2(function (_b, _c) {
+          return fn(a, _b, _c);
+        }) : _isPlaceholder(a) ? _curry1(function (_a) {
+          return fn(_a, b, c);
+        }) : _isPlaceholder(b) ? _curry1(function (_b) {
+          return fn(a, _b, c);
+        }) : _isPlaceholder(c) ? _curry1(function (_c) {
+          return fn(a, b, _c);
+        }) : fn(a, b, c);
+    }
+  };
+}
+
+var _curry3_1 = _curry3;
+
+export default _curry3_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_has.js

@@ -0,0 +1,7 @@
+function _has(prop, obj) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+var _has_1 = _has;
+
+export default _has_1;

package/dist/esm/node_modules/.pnpm/ramda@0.27.1/node_modules/ramda/src/internal/_isObject.js

@@ -0,0 +1,7 @@
+function _isObject(x) {
+  return Object.prototype.toString.call(x) === '[object Object]';
+}
+
+var _isObject_1 = _isObject;
+
+export default _isObject_1;