@equinor/eds-core-react 0.32.3 → 0.33.0

package/dist/esm/components/Checkbox/Input.js

@@ -11,11 +11,11 @@ import { useEds } from '../EdsProvider/eds.context.js';
 
 var _excluded = ["disabled", "indeterminate", "style", "className"];
 var StyledPath = styled.path.attrs(function (_ref) {
-  var icon = _ref.icon;
+  var $icon = _ref.$icon;
   return {
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    d: icon.svgPathData
+    d: $icon.svgPathData
   };
 }).withConfig({
   displayName: "Input__StyledPath",
@@ -32,8 +32,8 @@ var Input = styled.input.attrs(function (_ref2) {
   componentId: "sc-rqj7qf-1"
 })(["--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='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], function (_ref3) {
   var theme = _ref3.theme,
-    iconSize = _ref3.iconSize;
-  return parseFloat(theme.clickbound.height) / iconSize;
+    $iconSize = _ref3.$iconSize;
+  return parseFloat(theme.clickbound.height) / $iconSize;
 }, function (_ref4) {
   var disabled = _ref4.disabled;
   return disabled ? 'not-allowed' : 'pointer';
@@ -62,7 +62,7 @@ var Svg = styled.svg.attrs(function (_ref7) {
 var InputWrapper = styled.span.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-rqj7qf-3"
-})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;", " &::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], function (_ref8) {
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;", " &::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], function (_ref8) {
   var theme = _ref8.theme;
   return spacingsTemplate(theme.spacings);
 }, function (_ref9) {
@@ -99,7 +99,7 @@ var CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref11, ref)
     theme: token,
     children: /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({}, inputWrapperProps), {}, {
       children: [/*#__PURE__*/jsx(Input, _objectSpread({
-        iconSize: iconSize
+        $iconSize: iconSize
       }, inputProps)), indeterminate ? /*#__PURE__*/jsx(Svg, {
         width: iconSize,
         height: iconSize,
@@ -107,7 +107,7 @@ var CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref11, ref)
         fill: fill,
         "aria-hidden": true,
         children: /*#__PURE__*/jsx(StyledPath, {
-          icon: checkbox_indeterminate,
+          $icon: checkbox_indeterminate,
           name: "indeterminate"
         })
       }) : /*#__PURE__*/jsxs(Svg, {
@@ -117,10 +117,10 @@ var CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref11, ref)
         fill: fill,
         "aria-hidden": true,
         children: [/*#__PURE__*/jsx(StyledPath, {
-          icon: checkbox$1,
+          $icon: checkbox$1,
           name: "checked"
         }), /*#__PURE__*/jsx(StyledPath, {
-          icon: checkbox_outline,
+          $icon: checkbox_outline,
           name: "not-checked"
         })]
       })]

package/dist/esm/components/Chip/Chip.js

@@ -17,21 +17,21 @@ var background = enabled.background,
   border = enabled.border,
   states = enabled.states;
 var StyledChips = styled.div.attrs(function (_ref) {
-  var clickable = _ref.clickable,
-    deletable = _ref.deletable;
+  var $clickable = _ref.$clickable,
+    $deletable = _ref.$deletable;
   return {
-    tabIndex: clickable || deletable ? 0 : null,
-    role: clickable ? 'button' : null
+    tabIndex: $clickable || $deletable ? 0 : null,
+    role: $clickable ? 'button' : null
   };
 }).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), function (_ref2) {
-  var clickable = _ref2.clickable;
-  return clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), function (_ref2) {
+  var $clickable = _ref2.$clickable;
+  return $clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;color:", ";svg{fill:", ";}}}"], states.hover.typography.color, states.hover.typography.color);
 }, function (_ref3) {
-  var variant = _ref3.variant;
-  switch (variant) {
+  var $variant = _ref3.$variant;
+  switch ($variant) {
     case 'active':
       return css(["background:", ";"], states.active.background);
     case 'error':
@@ -40,14 +40,14 @@ var StyledChips = styled.div.attrs(function (_ref) {
       return '';
   }
 }, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled && css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color);
+  var $disabled = _ref4.$disabled;
+  return $disabled && css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color);
 }, function (_ref5) {
-  var deletable = _ref5.deletable;
-  return deletable && css(["padding-right:4px;"]);
+  var $deletable = _ref5.$deletable;
+  return $deletable && css(["padding-right:4px;"]);
 }, function (_ref6) {
-  var onlyChild = _ref6.onlyChild;
-  return onlyChild ? css(["padding-left:8px;"]) : '';
+  var $onlyChild = _ref6.$onlyChild;
+  return $onlyChild ? css(["padding-left:8px;"]) : '';
 });
 var Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
   var children = _ref7.children,
@@ -65,11 +65,11 @@ var Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
   var onlyChild = typeof children === 'string';
   var chipProps = _objectSpread(_objectSpread({}, other), {}, {
     ref: ref,
-    disabled: disabled,
-    deletable: deletable,
-    clickable: clickable,
-    onlyChild: onlyChild,
-    variant: variant
+    $disabled: disabled,
+    $deletable: deletable,
+    $clickable: clickable,
+    $onlyChild: onlyChild,
+    $variant: variant
   });
   var handleKeyPress = function handleKeyPress(event) {
     var _ref8 = event,
@@ -104,12 +104,12 @@ var Chip = /*#__PURE__*/forwardRef(function Chip(_ref7, ref) {
     onClick: function onClick(event) {
       return clickable && handleClick(event);
     },
-    onKeyPress: handleKeyPress,
+    onKeyDown: handleKeyPress,
     children: [resizedChildren, onDelete && /*#__PURE__*/jsx(Icon, {
       name: "close",
       title: "close",
-      disabled: disabled,
-      variant: variant,
+      $disabled: disabled,
+      $variant: variant,
       onClick: onDeleteClick,
       size: 16
     })]

package/dist/esm/components/Chip/Icon.js

@@ -12,17 +12,17 @@ var enabled = enabled$1,
 var Icon = styled(Icon$1).withConfig({
   displayName: "Icon",
   componentId: "sc-50ffvg-0"
-})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), function (_ref) {
-  var variant = _ref.variant;
-  switch (variant) {
+})(["cursor:pointer;padding:1px;", " &:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), function (_ref) {
+  var $variant = _ref.$variant;
+  switch ($variant) {
     case 'error':
       return css(["background:", ";svg{fill:", ";}"], error.entities.icon.background, error.entities.icon.typography.color);
     default:
       return css(["background:", ";svg{fill:", ";}"], enabled.entities.icon.states.hover.background, enabled.states.hover.typography.color);
   }
 }, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]);
+  var $disabled = _ref2.$disabled;
+  return $disabled && css(["cursor:not-allowed;&:hover{background:transparent;}"]);
 });
 
 export { Icon };

package/dist/esm/components/Dialog/Dialog.js

@@ -11,7 +11,8 @@ import { useEds } from '../EdsProvider/eds.context.js';
 var _excluded = ["children", "open", "onClose", "isDismissable", "dialogRef"];
 var StyledDialog = styled(Paper).attrs({
   'aria-labelledby': 'eds-dialog-title',
-  'aria-describedby': 'eds-dialog-customcontent'
+  'aria-describedby': 'eds-dialog-customcontent',
+  elevation: 'above_scrim'
 }).withConfig({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-1mewo3f-0"
@@ -44,13 +45,12 @@ var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref3, ref) {
     return mergeRefs(localRef, dialogRef);
   }, [localRef, dialogRef]);
   useEffect(function () {
-    var _localRef$current;
-    if (open && !(localRef !== null && localRef !== void 0 && (_localRef$current = localRef.current) !== null && _localRef$current !== void 0 && _localRef$current.hasAttribute('open'))) {
-      var _localRef$current2;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.showModal();
+    if (open) {
+      var _localRef$current;
+      localRef === null || localRef === void 0 ? void 0 : (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.showModal();
     } else {
-      var _localRef$current3;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current3 = localRef.current) === null || _localRef$current3 === void 0 ? void 0 : _localRef$current3.close();
+      var _localRef$current2;
+      localRef === null || localRef === void 0 ? void 0 : (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.close();
     }
   }, [open]);
 
@@ -73,9 +73,7 @@ var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref3, ref) {
     children: /*#__PURE__*/jsx(StyledNativeDialog, {
       ref: combinedDialogRef,
       onMouseDown: handleDismiss,
-      children: open && /*#__PURE__*/jsx(StyledDialog, _objectSpread(_objectSpread({
-        elevation: "above_scrim"
-      }, props), {}, {
+      children: open && /*#__PURE__*/jsx(StyledDialog, _objectSpread(_objectSpread({}, props), {}, {
         ref: ref,
         children: children
       }))

package/dist/esm/components/Dialog/DialogContent.js

@@ -12,8 +12,8 @@ var StyledDialogContent = styled.div.withConfig({
   componentId: "sc-1tze18k-0"
 })(function (_ref) {
   var theme = _ref.theme,
-    scrollable = _ref.scrollable;
-  return css(["--content-spacing-top:", ";", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:var(--content-spacing-top);}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.top, typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.bottom, scrollable && css(["&:not(:first-child){margin-top:calc(var(--content-spacing-top) * -1);}padding-top:var(--content-spacing-top);margin-bottom:calc(var(--content-spacing-top) * -1);padding-bottom:var(--content-spacing-top);min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
+    $scrollable = _ref.$scrollable;
+  return css(["--content-spacing-top:", ";", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:var(--content-spacing-top);}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.top, typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.bottom, $scrollable && css(["&:not(:first-child){margin-top:calc(var(--content-spacing-top) * -1);}padding-top:var(--content-spacing-top);margin-bottom:calc(var(--content-spacing-top) * -1);padding-bottom:var(--content-spacing-top);min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
 });
 var StyledDivider = styled(Divider).withConfig({
   displayName: "DialogContent__StyledDivider",
@@ -25,7 +25,7 @@ var DialogContent = /*#__PURE__*/forwardRef(function DialogContent(_ref2, ref) {
     scrollable = _ref2$scrollable === void 0 ? false : _ref2$scrollable,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var props = _objectSpread({
-    scrollable: scrollable,
+    $scrollable: scrollable,
     ref: ref
   }, rest);
   return /*#__PURE__*/jsxs(Fragment, {

package/dist/esm/components/Divider/Divider.js

@@ -12,11 +12,11 @@ var StyledDivider = styled.hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
 })(function (_ref) {
-  var backgroundColor = _ref.backgroundColor,
-    marginTop = _ref.marginTop,
-    marginBottom = _ref.marginBottom,
-    dividerHeight = _ref.dividerHeight;
-  return css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], backgroundColor, marginTop, marginBottom, dividerHeight, dividerHeight);
+  var $backgroundColor = _ref.$backgroundColor,
+    $marginTop = _ref.$marginTop,
+    $marginBottom = _ref.$marginBottom,
+    $dividerHeight = _ref.$dividerHeight;
+  return css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], $backgroundColor, $marginTop, $marginBottom, $dividerHeight, $dividerHeight);
 });
 var Divider = /*#__PURE__*/forwardRef(function Divider(_ref2, ref) {
   var _ref2$color = _ref2.color,
@@ -28,10 +28,10 @@ var Divider = /*#__PURE__*/forwardRef(function Divider(_ref2, ref) {
     rest = _objectWithoutProperties(_ref2, _excluded);
   var colorValue = color === 'medium' ? 'mediumColor' : color;
   var props = _objectSpread({
-    backgroundColor: divider[colorValue].background,
-    marginTop: Divider_tokens[variant].spacings.top,
-    marginBottom: Divider_tokens[variant].spacings.bottom,
-    dividerHeight: parseInt(size)
+    $backgroundColor: divider[colorValue].background,
+    $marginTop: Divider_tokens[variant].spacings.top,
+    $marginBottom: Divider_tokens[variant].spacings.bottom,
+    $dividerHeight: parseInt(size)
   }, rest);
   return /*#__PURE__*/jsx(StyledDivider, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref

package/dist/esm/components/Icon/Icon.js

@@ -6,33 +6,32 @@ import { get } from './library.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["size", "color", "name", "rotation", "title", "data"];
-var transform = function transform(_ref) {
-  var rotation = _ref.rotation;
-  return rotation ? "transform: rotate(".concat(rotation, "deg)") : '';
-};
-var StyledSvg = styled.svg.attrs(function (_ref2) {
-  var height = _ref2.height,
-    width = _ref2.width,
-    fill = _ref2.fill;
+var StyledSvg = styled.svg.attrs(function (_ref) {
+  var $height = _ref.$height,
+    $width = _ref.$width,
+    fill = _ref.fill;
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
-    height: "".concat(height, "px"),
-    width: "".concat(width, "px"),
+    height: "".concat($height, "px"),
+    width: "".concat($width, "px"),
     fill: fill
   };
 }).withConfig({
   displayName: "Icon__StyledSvg",
   componentId: "sc-6evbi1-0"
-})(["", ""], transform);
+})(["transform:", ";"], function (_ref2) {
+  var $rotation = _ref2.$rotation;
+  return $rotation ? "rotate(".concat($rotation, "deg)") : 'none';
+});
 var StyledPath = styled.path.attrs(function (_ref3) {
-  var height = _ref3.height,
-    size = _ref3.size;
+  var $height = _ref3.$height,
+    $size = _ref3.$size;
   return {
     size: null,
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+    transform: $size / $height !== 1 ? "scale(".concat($size / $height, ")") : null
   };
 }).withConfig({
   displayName: "Icon__StyledPath",
@@ -75,21 +74,21 @@ var Icon = /*#__PURE__*/forwardRef(function Icon(_ref5, ref) {
   if (typeof icon === 'undefined') {
     throw Error("Icon \"".concat(name, "\" not found. Have you added it using Icon.add() or using data props?"));
   }
-  var height = size ? size : parseInt(icon.width);
-  var width = size ? size : parseInt(icon.height);
+  var $height = size ? size : parseInt(icon.width);
+  var $width = size ? size : parseInt(icon.height);
   var svgProps = {
-    height: height,
-    width: width,
+    $height: $height,
+    $width: $width,
     fill: color,
-    viewBox: "0 0 ".concat(width, " ").concat(height),
-    rotation: rotation,
+    viewBox: "0 0 ".concat($width, " ").concat($height),
+    $rotation: rotation,
     name: name,
     'aria-hidden': true
   };
   var pathProps = {
     d: icon.svgPathData,
-    height: icon.height ? icon.height : size,
-    size: size || icon.height
+    $height: icon.height ? parseInt(icon.height) : size,
+    $size: size || parseInt(icon.height)
   };
 
   // Accessibility

package/dist/esm/components/Input/Input.js

@@ -14,12 +14,12 @@ var Container = styled.div.withConfig({
   componentId: "sc-1ykv024-0"
 })(function (_ref) {
   var _entities$adornment, _entities$adornment$s;
-  var token = _ref.token,
+  var $token = _ref.$token,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly;
-  var states = token.states,
-    entities = token.entities;
-  return css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
+  var states = $token.states,
+    entities = $token.entities;
+  return css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, $token.typography.color, $token.height, $token.width, $token.boxShadow, $token.background, outlineTemplate($token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));
@@ -28,31 +28,31 @@ var StyledInput = styled.input.withConfig({
   displayName: "Input__StyledInput",
   componentId: "sc-1ykv024-1"
 })(function (_ref2) {
-  var token = _ref2.token,
-    paddingLeft = _ref2.paddingLeft,
-    paddingRight = _ref2.paddingRight;
-  return css(["width:100%;border:none;background:transparent;", " ", " outline:none;padding-left:", ";padding-right:", ";&::placeholder{color:", ";}&:disabled{color:var(--eds-input-color);cursor:not-allowed;}"], spacingsTemplate(token.spacings), typographyMixin(token.typography), paddingLeft, paddingRight, token.entities.placeholder.typography.color);
+  var $token = _ref2.$token,
+    $paddingLeft = _ref2.$paddingLeft,
+    $paddingRight = _ref2.$paddingRight;
+  return css(["width:100%;border:none;background:transparent;", " ", " outline:none;padding-left:", ";padding-right:", ";&::placeholder{color:", ";}&:disabled{color:var(--eds-input-color);cursor:not-allowed;}"], spacingsTemplate($token.spacings), typographyMixin($token.typography), $paddingLeft, $paddingRight, $token.entities.placeholder.typography.color);
 });
 var Adornments = styled.div.withConfig({
   displayName: "Input__Adornments",
   componentId: "sc-1ykv024-2"
 })(function (_ref3) {
-  var token = _ref3.token;
-  return css(["position:absolute;top:", ";bottom:", ";display:flex;align-items:center;", " color:var(--eds-input-adornment-color);"], token.spacings.top, token.spacings.bottom, typographyMixin(token.entities.adornment.typography));
+  var $token = _ref3.$token;
+  return css(["position:absolute;top:", ";bottom:", ";display:flex;align-items:center;", " color:var(--eds-input-adornment-color);"], $token.spacings.top, $token.spacings.bottom, typographyMixin($token.entities.adornment.typography));
 });
 var LeftAdornments = styled(Adornments).withConfig({
   displayName: "Input__LeftAdornments",
   componentId: "sc-1ykv024-3"
 })(function (_ref4) {
-  var token = _ref4.token;
-  return css(["left:0;padding-left:", ";"], token.entities.adornment.spacings.left);
+  var $token = _ref4.$token;
+  return css(["left:0;padding-left:", ";"], $token.entities.adornment.spacings.left);
 });
 var RightAdornments = styled(Adornments).withConfig({
   displayName: "Input__RightAdornments",
   componentId: "sc-1ykv024-4"
 })(function (_ref5) {
-  var token = _ref5.token;
-  return css(["right:0;padding-right:", ";"], token.entities.adornment.spacings.right);
+  var $token = _ref5.$token;
+  return css(["right:0;padding-right:", ";"], $token.entities.adornment.spacings.right);
 });
 var Input = /*#__PURE__*/forwardRef(function Input(_ref6, ref) {
   var variant = _ref6.variant,
@@ -99,7 +99,7 @@ var Input = /*#__PURE__*/forwardRef(function Input(_ref6, ref) {
     type: type,
     disabled: disabled,
     readOnly: readOnly,
-    token: token,
+    $token: token,
     style: {
       resize: 'none'
     }
@@ -109,15 +109,15 @@ var Input = /*#__PURE__*/forwardRef(function Input(_ref6, ref) {
     readOnly: readOnly,
     className: className,
     style: style,
-    token: token
+    $token: token
   };
   var _leftAdornmentProps = _objectSpread(_objectSpread({}, leftAdornmentsProps), {}, {
     ref: setLeftAdornmentsRef,
-    token: token
+    $token: token
   });
   var _rightAdornmentProps = _objectSpread(_objectSpread({}, rightAdornmentsProps), {}, {
     ref: setRightAdornmentsRef,
-    token: token
+    $token: token
   });
   return (
     /*#__PURE__*/
@@ -126,8 +126,8 @@ var Input = /*#__PURE__*/forwardRef(function Input(_ref6, ref) {
       children: [leftAdornments ? /*#__PURE__*/jsx(LeftAdornments, _objectSpread(_objectSpread({}, _leftAdornmentProps), {}, {
         children: leftAdornments
       })) : null, /*#__PURE__*/jsx(StyledInput, _objectSpread({
-        paddingLeft: token.spacings.left,
-        paddingRight: token.spacings.right
+        $paddingLeft: token.spacings.left,
+        $paddingRight: token.spacings.right
       }, inputProps)), rightAdornments ? /*#__PURE__*/jsx(RightAdornments, _objectSpread(_objectSpread({}, _rightAdornmentProps), {}, {
         children: rightAdornments
       })) : null]

package/dist/esm/components/InputWrapper/InputWrapper.js

@@ -22,6 +22,8 @@ var Label = styled(Label$1).withConfig({
   displayName: "InputWrapper__Label",
   componentId: "sc-v6o9z1-2"
 })(["margin-left:8px;margin-right:8px;"]);
+/* @TODO fix no-unused-prop-types disabled & readOnly */
+
 /** InputWrapper is a internal skeleton component for structuring input elements  */
 var InputWrapper = /*#__PURE__*/forwardRef(function InputWrapper(_ref, ref) {
   var children = _ref.children,

package/dist/esm/components/Label/Label.js

@@ -11,8 +11,8 @@ var LabelBase = styled.label.withConfig({
   displayName: "Label__LabelBase",
   componentId: "sc-1gi2bcn-0"
 })(["display:flex;justify-content:space-between;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], typographyTemplate(label.typography), label.spacings.left, label.spacings.right, function (_ref) {
-  var disabledText = _ref.disabledText;
-  return disabledText ? label.states.disabled.typography.color : label.typography.color;
+  var $disabledText = _ref.$disabledText;
+  return $disabledText ? label.states.disabled.typography.color : label.typography.color;
 });
 var Text = styled.span.withConfig({
   displayName: "Label__Text",
@@ -30,7 +30,7 @@ var Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
     /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */
     jsxs(LabelBase, _objectSpread(_objectSpread({
       ref: ref,
-      disabledText: disabled
+      $disabledText: disabled
     }, other), {}, {
       children: [/*#__PURE__*/jsx(Text, {
         children: label

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

@@ -24,8 +24,8 @@ var Navigation = styled.nav.withConfig({
   displayName: "Pagination__Navigation",
   componentId: "sc-13cpp3o-0"
 })(["display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-left:", ";"], function (_ref) {
-  var withItemIndicator = _ref.withItemIndicator;
-  return withItemIndicator ? pagination.spacings.left : 0;
+  var $withItemIndicator = _ref.$withItemIndicator;
+  return $withItemIndicator ? pagination.spacings.left : 0;
 });
 var OrderedList = styled.ol.withConfig({
   displayName: "Pagination__OrderedList",
@@ -89,7 +89,7 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
   }, [itemsPerPage]);
   var props = _objectSpread({
     ref: ref,
-    withItemIndicator: withItemIndicator
+    $withItemIndicator: withItemIndicator
   }, rest);
   var pagination = /*#__PURE__*/jsx(Navigation, _objectSpread(_objectSpread({
     "aria-label": "pagination"
@@ -118,7 +118,7 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(_ref2, ref) {
           children: /*#__PURE__*/jsx(PaginationItem, {
             "aria-label": getAriaLabel(page, activePage),
             "aria-current": activePage,
-            page: page,
+            $page: page,
             selected: page === activePage,
             onClick: function onClick(event) {
               onPageChange(event, page);

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

@@ -5,15 +5,15 @@ import { Button } from '../Button/index.js';
 import { pagination } from './Pagination.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["page", "selected", "onClick"];
+var _excluded = ["$page", "selected", "onClick"];
 var PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem(_ref, ref) {
-  var page = _ref.page,
+  var $page = _ref.$page,
     selected = _ref.selected,
     onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   var props = _objectSpread({
     ref: ref,
-    page: page,
+    $page: $page,
     selected: selected
   }, rest);
   var background = selected ? pagination.entities.item.states.active.background : null;
@@ -24,7 +24,7 @@ var PaginationItem = /*#__PURE__*/forwardRef(function PaginationItem(_ref, ref)
     variant: "ghost_icon",
     onClick: onClick ? onClick : undefined
   }, props), {}, {
-    children: page
+    children: $page
   }));
 });
 

package/dist/esm/components/Paper/Paper.js

@@ -15,7 +15,8 @@ var StyledPaper = styled.div.withConfig({
 });
 var Paper = /*#__PURE__*/forwardRef(function Paper(_ref2, ref) {
   var _elevationToken$eleva;
-  var elevation$1 = _ref2.elevation,
+  var _ref2$elevation = _ref2.elevation,
+    elevation$1 = _ref2$elevation === void 0 ? 'none' : _ref2$elevation,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     $elevation: (_elevationToken$eleva = elevation[elevation$1]) !== null && _elevationToken$eleva !== void 0 ? _elevationToken$eleva : 'none'

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

@@ -12,8 +12,8 @@ var Svg = styled.svg.withConfig({
   displayName: "CircularProgress__Svg",
   componentId: "sc-hib054-0"
 })(["display:inline-block;", ";"], function (_ref) {
-  var variant = _ref.variant;
-  return variant === 'indeterminate' ? css(["animation:", " 1.4s linear infinite;"], indeterminate) : css(["transform:rotate(-90deg);"]);
+  var $variant = _ref.$variant;
+  return $variant === 'indeterminate' ? css(["animation:", " 1.4s linear infinite;"], indeterminate) : css(["transform:rotate(-90deg);"]);
 });
 var SrOnlyOutput = styled.output.withConfig({
   displayName: "CircularProgress__SrOnlyOutput",
@@ -55,7 +55,7 @@ var CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2,
   var trackStyle = {};
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
-    variant: variant
+    $variant: variant
   });
   var token = getToken(color);
   var _useState = useState(0),

package/dist/esm/components/Progress/Star/StarProgress.js

@@ -12,9 +12,9 @@ var Svg = styled.svg.withConfig({
   displayName: "StarProgress__Svg",
   componentId: "sc-c0byj9-0"
 })(["fill:", ";", ""], token.background, function (_ref) {
-  var variant = _ref.variant,
-    progress = _ref.progress;
-  return variant === 'indeterminate' ? css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, progress > 90 ? 'running' : 'paused', progress > 80 ? 'running' : 'paused', progress > 60 ? 'running' : 'paused', progress > 40 ? 'running' : 'paused', progress > 20 ? 'running' : 'paused', progress <= 20 ? 'running' : 'paused');
+  var $variant = _ref.$variant,
+    $progress = _ref.$progress;
+  return $variant === 'indeterminate' ? css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, $progress > 90 ? 'running' : 'paused', $progress > 80 ? 'running' : 'paused', $progress > 60 ? 'running' : 'paused', $progress > 40 ? 'running' : 'paused', $progress > 20 ? 'running' : 'paused', $progress <= 20 ? 'running' : 'paused');
 });
 var StarProgress = /*#__PURE__*/forwardRef(function StarProgress(_ref2, ref) {
   var _ref2$variant = _ref2.variant,
@@ -29,8 +29,8 @@ var StarProgress = /*#__PURE__*/forwardRef(function StarProgress(_ref2, ref) {
   var width = size;
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
-    variant: variant,
-    progress: progress
+    $variant: variant,
+    $progress: progress
   });
   if (variant === 'determinate') {
     if (value !== undefined) {