@equinor/eds-core-react 0.35.1 → 0.36.0

package/dist/esm/components/Popover/Popover.js

@@ -1,6 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useRef, useMemo, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { typographyTemplate, bordersTemplate, outlineTemplate, mergeRefs, useToken, useIsInDialog } from '@equinor/eds-utils';
@@ -10,87 +7,95 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["children", "placement", "anchorEl", "style", "open", "onClose", "withinPortal", "trapFocus"];
-var PopoverPaper = styled(Paper).withConfig({
+const PopoverPaper = styled(Paper).withConfig({
   displayName: "Popover__PopoverPaper",
   componentId: "sc-b7p1is-0"
-})(function (_ref) {
-  var theme = _ref.theme;
-  var paper = theme.entities.paper;
+})(({
+  theme
+}) => {
+  const {
+    entities: {
+      paper
+    }
+  } = theme;
   return css(["", " background:", ";", " z-index:1400;&:focus-visible{", "}"], typographyTemplate(theme.typography), theme.background, bordersTemplate(theme.border), outlineTemplate(paper.states.focus.outline));
 });
-var ArrowWrapper = styled.div.withConfig({
+const ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
   componentId: "sc-b7p1is-1"
-})(function (_ref2) {
-  var theme = _ref2.theme;
+})(({
+  theme
+}) => {
   return css(["position:absolute;width:", ";height:", ";z-index:-1;"], theme.entities.arrow.width, theme.entities.arrow.height);
 });
-var InnerWrapper = styled.div.withConfig({
+const InnerWrapper = styled.div.withConfig({
   displayName: "Popover__InnerWrapper",
   componentId: "sc-b7p1is-2"
-})(function (_ref3) {
-  var theme = _ref3.theme;
+})(({
+  theme
+}) => {
   return css(["display:grid;grid-gap:", ";max-height:", ";width:max-content;max-width:", ";overflow:auto;"], theme.spacings.bottom, theme.maxHeight, theme.maxWidth);
 });
-var PopoverArrow = styled.svg.withConfig({
+const PopoverArrow = styled.svg.withConfig({
   displayName: "Popover__PopoverArrow",
   componentId: "sc-b7p1is-3"
-})(function (_ref4) {
-  var theme = _ref4.theme;
+})(({
+  theme
+}) => {
   return css(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], theme.entities.arrow.width, theme.entities.arrow.height, theme.background);
 });
-var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
-  var children = _ref5.children,
-    _ref5$placement = _ref5.placement,
-    placement = _ref5$placement === void 0 ? 'bottom' : _ref5$placement,
-    anchorEl = _ref5.anchorEl,
-    style = _ref5.style,
-    open = _ref5.open,
-    onClose = _ref5.onClose,
-    withinPortal = _ref5.withinPortal,
-    trapFocus = _ref5.trapFocus,
-    rest = _objectWithoutProperties(_ref5, _excluded);
-  var arrowRef = useRef(null);
-  var _useFloating = useFloating({
-      elements: {
-        reference: anchorEl
-      },
-      placement: placement,
-      open: open,
-      onOpenChange: onClose,
-      middleware: [offset(14), flip(), shift({
-        padding: 8
-      }), arrow({
-        element: arrowRef
-      })],
-      whileElementsMounted: autoUpdate
-    }),
-    x = _useFloating.x,
-    y = _useFloating.y,
-    refs = _useFloating.refs,
-    strategy = _useFloating.strategy,
-    context = _useFloating.context,
-    _useFloating$middlewa = _useFloating.middlewareData.arrow,
-    _useFloating$middlewa2 = _useFloating$middlewa === void 0 ? {} : _useFloating$middlewa,
-    arrowX = _useFloating$middlewa2.x,
-    arrowY = _useFloating$middlewa2.y,
-    finalPlacement = _useFloating.placement;
-  var popoverRef = useMemo(function () {
-    return mergeRefs(refs.setFloating, ref);
-  }, [refs.setFloating, ref]);
-  var _useInteractions = useInteractions([useDismiss(context)]),
-    getFloatingProps = _useInteractions.getFloatingProps;
-  useEffect(function () {
+const Popover = /*#__PURE__*/forwardRef(function Popover({
+  children,
+  placement = 'bottom',
+  anchorEl,
+  style,
+  open,
+  onClose,
+  withinPortal,
+  trapFocus,
+  ...rest
+}, ref) {
+  const arrowRef = useRef(null);
+  const {
+    x,
+    y,
+    refs,
+    strategy,
+    context,
+    middlewareData: {
+      arrow: {
+        x: arrowX,
+        y: arrowY
+      } = {}
+    },
+    placement: finalPlacement
+  } = useFloating({
+    elements: {
+      reference: anchorEl
+    },
+    placement,
+    open,
+    onOpenChange: onClose,
+    middleware: [offset(14), flip(), shift({
+      padding: 8
+    }), arrow({
+      element: arrowRef
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  const popoverRef = useMemo(() => mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
+  const {
+    getFloatingProps
+  } = useInteractions([useDismiss(context)]);
+  useEffect(() => {
     if (arrowRef.current) {
-      var _Object$assign;
-      var staticSide = {
+      const staticSide = {
         top: 'bottom',
         right: 'left',
         bottom: 'top',
         left: 'right'
       }[finalPlacement.split('-')[0]];
-      var arrowTransform = 'none';
+      let arrowTransform = 'none';
       switch (staticSide) {
         case 'right':
           arrowTransform = 'rotateY(180deg)';
@@ -105,38 +110,44 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
           arrowTransform = 'rotate(-90deg)';
           break;
       }
-      Object.assign(arrowRef.current.style, (_Object$assign = {
-        left: arrowX != null ? "".concat(arrowX, "px") : '',
-        top: arrowY != null ? "".concat(arrowY, "px") : '',
+      Object.assign(arrowRef.current.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
         right: '',
-        bottom: ''
-      }, _defineProperty(_Object$assign, staticSide, '-6px'), _defineProperty(_Object$assign, "transform", arrowTransform), _Object$assign));
+        bottom: '',
+        [staticSide]: '-6px',
+        transform: arrowTransform
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [arrowRef.current, arrowX, arrowY, finalPlacement]);
-  var props = _objectSpread({
-    open: open
-  }, rest);
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var token = useToken({
-    density: density
+  const props = {
+    open,
+    ...rest
+  };
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, popover);
 
   //temporary fix when inside dialog. Should be replaced by popover api when it is ready
-  var inDialog = useIsInDialog(anchorEl);
-  var popover$1 = /*#__PURE__*/jsx(ThemeProvider, {
+  const inDialog = useIsInDialog(anchorEl);
+  const popover$1 = /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(PopoverPaper, _objectSpread(_objectSpread(_objectSpread({
-      elevation: "overlay"
-    }, props), getFloatingProps({
-      ref: popoverRef,
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        position: strategy,
-        top: y || 0,
-        left: x || 0
-      })
-    })), {}, {
+    children: /*#__PURE__*/jsxs(PopoverPaper, {
+      elevation: "overlay",
+      ...props,
+      ...getFloatingProps({
+        ref: popoverRef,
+        style: {
+          ...style,
+          position: strategy,
+          top: y || 0,
+          left: x || 0
+        }
+      }),
       children: [/*#__PURE__*/jsx(ArrowWrapper, {
         ref: arrowRef,
         className: "arrow",
@@ -149,7 +160,7 @@ var Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
       }), /*#__PURE__*/jsx(InnerWrapper, {
         children: children
       })]
-    }))
+    })
   });
   return /*#__PURE__*/jsx(Fragment, {
     children: withinPortal && !inDialog ? /*#__PURE__*/jsx(FloatingPortal, {

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

@@ -1,16 +1,42 @@
 import { tokens } from '@equinor/eds-tokens';
 
-var header = tokens.typography.ui.accordion_header,
-  _tokens$colors = tokens.colors,
-  background = _tokens$colors.ui.background__default.rgba,
-  focusOutlineColor = _tokens$colors.interactive.focus.rgba,
-  _tokens$spacings$comf = tokens.spacings.comfortable,
-  spacingMedium = _tokens$spacings$comf.medium,
-  spacingSmall = _tokens$spacings$comf.small,
-  borderRadius = tokens.shape.corners.borderRadius,
-  focusOutlineWidth = tokens.interactions.focused.width;
-var popover = {
-  background: background,
+const {
+  typography: {
+    ui: {
+      accordion_header: header
+    }
+  },
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      }
+    },
+    interactive: {
+      focus: {
+        rgba: focusOutlineColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium: spacingMedium,
+      small: spacingSmall
+    }
+  },
+  shape: {
+    corners: {
+      borderRadius
+    }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
+  }
+} = tokens;
+const popover = {
+  background,
   typography: header,
   maxWidth: '560px',
   maxHeight: '80vh',

package/dist/esm/components/Popover/PopoverActions.js

@@ -1,26 +1,27 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var StyledPopoverActions = styled.div.withConfig({
+const StyledPopoverActions = styled.div.withConfig({
   displayName: "PopoverActions__StyledPopoverActions",
   componentId: "sc-1dkrhw6-0"
-})(function (_ref) {
-  var theme = _ref.theme;
+})(({
+  theme
+}) => {
   return css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
-var PopoverActions = /*#__PURE__*/forwardRef(function PopoverActions(_ref2, ref) {
-  var children = _ref2.children,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread({
-    ref: ref
-  }, rest);
-  return /*#__PURE__*/jsx(StyledPopoverActions, _objectSpread(_objectSpread({}, props), {}, {
+const PopoverActions = /*#__PURE__*/forwardRef(function PopoverActions({
+  children,
+  ...rest
+}, ref) {
+  const props = {
+    ref,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(StyledPopoverActions, {
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { PopoverActions };

package/dist/esm/components/Popover/PopoverContent.js

@@ -1,26 +1,27 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var ContentWrapper = styled.div.withConfig({
+const ContentWrapper = styled.div.withConfig({
   displayName: "PopoverContent__ContentWrapper",
   componentId: "sc-vwww9h-0"
-})(function (_ref) {
-  var theme = _ref.theme;
+})(({
+  theme
+}) => {
   return css(["padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
-var PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent(_ref2, ref) {
-  var children = _ref2.children,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref
-  });
-  return /*#__PURE__*/jsx(ContentWrapper, _objectSpread(_objectSpread({}, props), {}, {
+const PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent({
+  children,
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(ContentWrapper, {
+    ...props,
     children: children
-  }));
+  });
 });
 
 // PopoverContent.displayName = 'eds-popover-content'

package/dist/esm/components/Popover/PopoverHeader.js

@@ -1,35 +1,36 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Divider } from '../Divider/Divider.js';
 
-var _excluded = ["children"];
-var StyledPopoverHeader = styled.div.withConfig({
+const StyledPopoverHeader = styled.div.withConfig({
   displayName: "PopoverHeader__StyledPopoverHeader",
   componentId: "sc-ibcx7p-0"
-})(function (_ref) {
-  var theme = _ref.theme;
+})(({
+  theme
+}) => {
   return css(["display:flex;justify-content:space-between;align-items:center;padding:", " ", " 0 ", ";"], theme.entities.title.spacings.top, theme.spacings.right, theme.spacings.left);
 });
-var StyledDivider = styled(Divider).withConfig({
+const StyledDivider = styled(Divider).withConfig({
   displayName: "PopoverHeader__StyledDivider",
   componentId: "sc-ibcx7p-1"
 })(["margin-bottom:0;"]);
-var PopoverHeader = /*#__PURE__*/forwardRef(function PopoverHeader(_ref2, ref) {
-  var children = _ref2.children,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref
-  });
-  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+const PopoverHeader = /*#__PURE__*/forwardRef(function PopoverHeader({
+  children,
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsxs("div", {
+    ...props,
     children: [/*#__PURE__*/jsx(StyledPopoverHeader, {
       children: children
     }), /*#__PURE__*/jsx(StyledDivider, {
       variant: "small"
     })]
-  }));
+  });
 });
 
 export { PopoverHeader };

package/dist/esm/components/Popover/PopoverTitle.js

@@ -1,26 +1,27 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-var StyledPopoverTitle = styled.div.withConfig({
+const StyledPopoverTitle = styled.div.withConfig({
   displayName: "PopoverTitle__StyledPopoverTitle",
   componentId: "sc-1ben8su-0"
-})(function (_ref) {
-  var theme = _ref.theme;
+})(({
+  theme
+}) => {
   return css(["max-width:", ";margin-right:", ";overflow:hidden;"], theme.maxWidth, theme.spacings.right);
 });
-var PopoverTitle = /*#__PURE__*/forwardRef(function PopoverTitle(_ref2, ref) {
-  var children = _ref2.children,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref
-  });
-  return /*#__PURE__*/jsx(StyledPopoverTitle, _objectSpread(_objectSpread({}, props), {}, {
+const PopoverTitle = /*#__PURE__*/forwardRef(function PopoverTitle({
+  children,
+  ...rest
+}, ref) {
+  const props = {
+    ...rest,
+    ref
+  };
+  return /*#__PURE__*/jsx(StyledPopoverTitle, {
+    ...props,
     children: children
-  }));
+  });
 });
 
 export { PopoverTitle };

package/dist/esm/components/Popover/index.js

@@ -4,7 +4,7 @@ import { PopoverContent } from './PopoverContent.js';
 import { PopoverHeader } from './PopoverHeader.js';
 import { PopoverActions } from './PopoverActions.js';
 
-var Popover = Popover$1;
+const Popover = Popover$1;
 Popover.Title = PopoverTitle;
 Popover.Content = PopoverContent;
 Popover.Header = PopoverHeader;

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

@@ -1,33 +1,28 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useState, useEffect } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import * as CircularProgress_tokens from './CircularProgress.tokens.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["variant", "value", "size", "color"];
-var indeterminate = keyframes(["100%{transform:rotate(360deg);}"]);
-var Svg = styled.svg.withConfig({
+const indeterminate = keyframes(["100%{transform:rotate(360deg);}"]);
+const 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 SrOnlyOutput = styled.output.withConfig({
+})(["display:inline-block;", ";"], ({
+  $variant
+}) => $variant === 'indeterminate' ? css(["animation:", " 1.4s linear infinite;"], indeterminate) : css(["transform:rotate(-90deg);"]));
+const SrOnlyOutput = styled.output.withConfig({
   displayName: "CircularProgress__SrOnlyOutput",
   componentId: "sc-hib054-1"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-var TrackCircle = styled.circle.withConfig({
+const TrackCircle = styled.circle.withConfig({
   displayName: "CircularProgress__TrackCircle",
   componentId: "sc-hib054-2"
 })([""]);
-var ProgressCircle = styled.circle.withConfig({
+const ProgressCircle = styled.circle.withConfig({
   displayName: "CircularProgress__ProgressCircle",
   componentId: "sc-hib054-3"
 })([""]);
-var getToken = function getToken(color) {
+const getToken = color => {
   if (CircularProgress_tokens[color]) {
     return CircularProgress_tokens[color];
   }
@@ -40,32 +35,27 @@ var getToken = function getToken(color) {
     }
   };
 };
-var CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2, ref) {
-  var _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'indeterminate' : _ref2$variant,
-    _ref2$value = _ref2.value,
-    value = _ref2$value === void 0 ? null : _ref2$value,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 48 : _ref2$size,
-    _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? 'primary' : _ref2$color,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  var thickness = 4;
-  var progress = Math.round(value);
-  var trackStyle = {};
-  var props = _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref,
+const CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress({
+  variant = 'indeterminate',
+  value = null,
+  size = 48,
+  color = 'primary',
+  ...rest
+}, ref) {
+  const thickness = 4;
+  const progress = Math.round(value);
+  const trackStyle = {};
+  const props = {
+    ...rest,
+    ref,
     $variant: variant
-  });
-  var token = getToken(color);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    srProgress = _useState2[0],
-    setSrProgress = _useState2[1];
-  var circumference = 2 * Math.PI * ((48 - thickness) / 2);
+  };
+  const token = getToken(color);
+  const [srProgress, setSrProgress] = useState(0);
+  const circumference = 2 * Math.PI * ((48 - thickness) / 2);
   if (variant === 'determinate') {
     trackStyle.stroke = circumference.toFixed(3);
-    trackStyle.strokeDashoffset = "".concat(((100 - progress) / 100 * circumference).toFixed(3), "px");
+    trackStyle.strokeDashoffset = `${((100 - progress) / 100 * circumference).toFixed(3)}px`;
     props['aria-valuenow'] = progress;
     if (value !== undefined) {
       props['aria-valuenow'] = progress;
@@ -73,7 +63,7 @@ var CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2,
       props['aria-valuemax'] = 100;
     }
   }
-  useEffect(function () {
+  useEffect(() => {
     if (variant === 'indeterminate') return;
     if (progress >= 25 && progress < 50) {
       setSrProgress(25);
@@ -85,11 +75,12 @@ var CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2,
       setSrProgress(100);
     }
   }, [progress, variant]);
-  var getProgressFormatted = function getProgressFormatted() {
-    return "Loading ".concat(srProgress, "%");
+  const getProgressFormatted = () => {
+    return `Loading ${srProgress}%`;
   };
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsxs(Svg, {
+      ...props,
       viewBox: "24 24 48 48",
       role: "progressbar",
       height: size,
@@ -114,7 +105,7 @@ var CircularProgress = /*#__PURE__*/forwardRef(function CircularProgress(_ref2,
         strokeDasharray: variant === 'determinate' ? circumference : 48,
         stroke: token.entities.progress.background
       })]
-    })), variant === 'determinate' && /*#__PURE__*/jsx(SrOnlyOutput, {
+    }), variant === 'determinate' && /*#__PURE__*/jsx(SrOnlyOutput, {
       children: getProgressFormatted()
     })]
   });

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

@@ -1,12 +1,28 @@
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors = tokens.colors,
-  _tokens$colors$infogr = _tokens$colors.infographic,
-  primary13 = _tokens$colors$infogr.primary__moss_green_13.rgba,
-  primary100 = _tokens$colors$infogr.primary__moss_green_100.rgba,
-  icon_on_interactive_colors = _tokens$colors.interactive.icon_on_interactive_colors.rgba,
-  background__semitransparent = _tokens$colors.ui.background__semitransparent.rgba;
-var primary = {
+const {
+  colors: {
+    infographic: {
+      primary__moss_green_13: {
+        rgba: primary13
+      },
+      primary__moss_green_100: {
+        rgba: primary100
+      }
+    },
+    interactive: {
+      icon_on_interactive_colors: {
+        rgba: icon_on_interactive_colors
+      }
+    },
+    ui: {
+      background__semitransparent: {
+        rgba: background__semitransparent
+      }
+    }
+  }
+} = tokens;
+const primary = {
   background: primary13,
   entities: {
     progress: {
@@ -14,7 +30,7 @@ var primary = {
     }
   }
 };
-var neutral = {
+const neutral = {
   background: background__semitransparent,
   entities: {
     progress: {