@equinor/eds-core-react 0.23.0-dev.20221003 → 0.24.0-dev.20221006

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

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useMemo } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { radio_button_selected, radio_button_unselected } from '@equinor/eds-icons';
@@ -6,52 +8,39 @@ import { outlineTemplate, typographyTemplate, spacingsTemplate, useToken } from
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-/* eslint camelcase: "off" */
-const Input = styled.input.attrs(_ref => {
-  let {
-    type = 'radio'
-  } = _ref;
+var _excluded = ["label", "disabled", "className", "style"];
+var Input = styled.input.attrs(function (_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'radio' : _ref$type;
   return {
-    type
+    type: type
   };
 }).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{", "}&: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;}"], _ref2 => {
-  let {
-    theme,
-    iconSize
-  } = _ref2;
+})(["--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;}"], function (_ref2) {
+  var theme = _ref2.theme,
+      iconSize = _ref2.iconSize;
   return parseFloat(theme.clickbound.height) / iconSize;
-}, _ref3 => {
-  let {
-    disabled
-  } = _ref3;
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
   return disabled ? 'not-allowed' : 'pointer';
-}, _ref4 => {
-  let {
-    theme
-  } = _ref4;
+}, function (_ref4) {
+  var theme = _ref4.theme;
   return outlineTemplate(theme.states.focus.outline);
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return outlineTemplate(theme.states.focus.outline);
 });
-const StyledLabel = styled.label.withConfig({
+var StyledLabel = styled.label.withConfig({
   displayName: "Radio__StyledLabel",
   componentId: "sc-we59oz-1"
-})(["display:inline-flex;align-items:center;cursor:", ";"], _ref6 => {
-  let {
-    disabled
-  } = _ref6;
+})(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref6) {
+  var disabled = _ref6.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 });
-const StyledPath = styled.path.attrs(_ref7 => {
-  let {
-    icon
-  } = _ref7;
+var StyledPath = styled.path.attrs(function (_ref7) {
+  var icon = _ref7.icon;
   return {
     fillRule: 'evenodd',
     clipRule: 'evenodd',
@@ -61,67 +50,59 @@ const StyledPath = styled.path.attrs(_ref7 => {
   displayName: "Radio__StyledPath",
   componentId: "sc-we59oz-2"
 })([""]);
-const Svg = styled.svg.attrs(_ref8 => {
-  let {
-    height,
-    width,
-    fill
-  } = _ref8;
+var Svg = styled.svg.attrs(function (_ref8) {
+  var height = _ref8.height,
+      width = _ref8.width,
+      fill = _ref8.fill;
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
-    height,
-    width,
-    fill
+    height: height,
+    width: width,
+    fill: fill
   };
 }).withConfig({
   displayName: "Radio__Svg",
   componentId: "sc-we59oz-3"
 })(["grid-area:input;pointer-events:none;"]);
-const LabelText = styled.span.withConfig({
+var LabelText = styled.span.withConfig({
   displayName: "Radio__LabelText",
   componentId: "sc-we59oz-4"
 })(["", ""], typographyTemplate(comfortable.typography));
-const InputWrapper = styled.span.withConfig({
+var InputWrapper = styled.span.withConfig({
   displayName: "Radio__InputWrapper",
   componentId: "sc-we59oz-5"
-})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], _ref9 => {
-  let {
-    theme
-  } = _ref9;
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref9) {
+  var theme = _ref9.theme;
   return spacingsTemplate(theme.spacings);
-}, _ref10 => {
-  let {
-    disabled
-  } = _ref10;
+}, function (_ref10) {
+  var disabled = _ref10.disabled;
   return disabled ? 'not-allowed' : 'pointer';
-}, _ref11 => {
-  let {
-    disabled
-  } = _ref11;
+}, function (_ref11) {
+  var disabled = _ref11.disabled;
   return disabled ? 'transparent' : comfortable.states.hover.background;
 });
-const Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
-  let {
-    label,
-    disabled = false,
-    className,
-    style,
-    ...rest
-  } = _ref12;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
+  var label = _ref12.label,
+      _ref12$disabled = _ref12.disabled,
+      disabled = _ref12$disabled === void 0 ? false : _ref12$disabled,
+      className = _ref12.className,
+      style = _ref12.style,
+      rest = _objectWithoutProperties(_ref12, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, comfortable);
-  const iconSize = 24;
-  const fill = disabled ? comfortable.states.disabled.background : comfortable.background;
-  const renderSVG = useMemo(() => {
+  var iconSize = 24;
+  var fill = disabled ? comfortable.states.disabled.background : comfortable.background;
+  var renderSVG = useMemo(function () {
     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, {
@@ -141,11 +122,11 @@ const Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
       style: style,
       children: [/*#__PURE__*/jsxs(InputWrapper, {
         disabled: disabled,
-        children: [/*#__PURE__*/jsx(Input, { ...rest,
+        children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, rest), {}, {
           ref: ref,
           disabled: disabled,
           iconSize: iconSize
-        }), renderSVG]
+        })), renderSVG]
       }), /*#__PURE__*/jsx(LabelText, {
         children: label
       })]
@@ -153,11 +134,11 @@ const Radio = /*#__PURE__*/forwardRef(function Radio(_ref12, ref) {
       disabled: disabled,
       className: className,
       style: style,
-      children: [/*#__PURE__*/jsx(Input, { ...rest,
+      children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, rest), {}, {
         ref: ref,
         disabled: disabled,
         iconSize: iconSize
-      }), renderSVG]
+      })), renderSVG]
     })
   });
 });

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

@@ -1,44 +1,19 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    interactive: {
-      primary__resting: {
-        rgba: primaryColor
-      },
-      primary__hover_alt: {
-        rgba: primaryHoverAlt
-      },
-      focus: {
-        rgba: focusOutlineColor
-      },
-      disabled__text: {
-        rgba: disabledText
-      }
-    }
-  },
-  typography: {
-    navigation: {
-      menu_title: labelTypography
-    }
-  },
-  spacings: {
-    comfortable: {
-      medium_small,
-      x_small
-    }
-  },
-  clickbounds: {
-    default__base: clicboundSize,
-    compact__standard: compactClickboundSize
-  },
-  interactions: {
-    focused: {
-      width: focusOutlineWidth
-    }
-  }
-} = tokens;
-const comfortable = {
+var _tokens$colors$intera = tokens.colors.interactive,
+    primaryColor = _tokens$colors$intera.primary__resting.rgba,
+    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
+    focusOutlineColor = _tokens$colors$intera.focus.rgba,
+    disabledText = _tokens$colors$intera.disabled__text.rgba,
+    labelTypography = tokens.typography.navigation.menu_title,
+    _tokens$spacings$comf = tokens.spacings.comfortable,
+    medium_small = _tokens$spacings$comf.medium_small,
+    x_small = _tokens$spacings$comf.x_small,
+    _tokens$clickbounds = tokens.clickbounds,
+    clicboundSize = _tokens$clickbounds.default__base,
+    compactClickboundSize = _tokens$clickbounds.compact__standard,
+    focusOutlineWidth = tokens.interactions.focused.width;
+var comfortable = {
   background: primaryColor,
   typography: labelTypography,
   spacings: {

package/dist/esm/components/Scrim/Scrim.js

@@ -1,3 +1,5 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { scrim } from './Scrim.tokens.js';
@@ -5,34 +7,35 @@ import { mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
 import { FloatingOverlay } from '@floating-ui/react-dom-interactions';
 import { jsx } from 'react/jsx-runtime';
 
-const {
-  background
-} = scrim;
-const StyledScrim = styled(FloatingOverlay).withConfig({
+var _excluded = ["children", "onClose", "open", "isDismissable"];
+var background = scrim.background;
+var StyledScrim = styled(FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
 })(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background);
-const ScrimContent = styled.div.withConfig({
+var ScrimContent = styled.div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
 })(["width:auto;height:auto;"]);
-const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
-  let {
-    children,
-    onClose,
-    open,
-    isDismissable = false,
-    ...rest
-  } = _ref;
-  const scrimRef = useRef(null);
-  const combinedScrimRef = useMemo(() => mergeRefs(scrimRef, ref), [scrimRef, ref]);
-  useGlobalKeyPress('Escape', () => {
+var Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
+  var children = _ref.children,
+      onClose = _ref.onClose,
+      open = _ref.open,
+      _ref$isDismissable = _ref.isDismissable,
+      isDismissable = _ref$isDismissable === void 0 ? false : _ref$isDismissable,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var scrimRef = useRef(null);
+  var combinedScrimRef = useMemo(function () {
+    return mergeRefs(scrimRef, ref);
+  }, [scrimRef, ref]);
+  useGlobalKeyPress('Escape', function () {
     if (isDismissable && onClose && open) {
       onClose();
     }
   });
 
-  const handleMouseClose = event => {
+  var handleMouseClose = function handleMouseClose(event) {
     if (event && event.target === scrimRef.current) {
       if (event.type === 'click' && isDismissable && open) {
         onClose && onClose();
@@ -44,15 +47,15 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
     return null;
   }
 
-  return /*#__PURE__*/jsx(StyledScrim, {
+  return /*#__PURE__*/jsx(StyledScrim, _objectSpread(_objectSpread({
     lockScroll: true,
     onClick: handleMouseClose,
-    ref: combinedScrimRef,
-    ...rest,
+    ref: combinedScrimRef
+  }, rest), {}, {
     children: /*#__PURE__*/jsx(ScrimContent, {
       children: children
     })
-  });
+  }));
 });
 
 export { Scrim };

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

@@ -1,16 +1,8 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    ui: {
-      background__scrim: {
-        rgba: background
-      }
-    }
-  }
-} = tokens;
-const scrim = {
-  background
+var background = tokens.colors.ui.background__scrim.rgba;
+var scrim = {
+  background: background
 };
 
 export { scrim };