@equinor/eds-core-react 0.35.1 → 0.36.0

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

@@ -1,5 +1,3 @@
-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';
@@ -7,33 +5,32 @@ import { mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
 import { FloatingOverlay } from '@floating-ui/react';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "onClose", "open", "isDismissable"];
-var background = scrim.background;
-var StyledScrim = styled(FloatingOverlay).withConfig({
+const {
+  background
+} = scrim;
+const StyledScrim = styled(FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
 })(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background);
-var ScrimContent = styled.div.withConfig({
+const ScrimContent = styled.div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
 })(["width:auto;height:auto;"]);
-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 () {
+const Scrim = /*#__PURE__*/forwardRef(function Scrim({
+  children,
+  onClose,
+  open,
+  isDismissable = false,
+  ...rest
+}, ref) {
+  const scrimRef = useRef(null);
+  const combinedScrimRef = useMemo(() => mergeRefs(scrimRef, ref), [scrimRef, ref]);
+  useGlobalKeyPress('Escape', () => {
     if (isDismissable && onClose && open) {
       onClose();
     }
   });
-  var handleMouseClose = function handleMouseClose(event) {
+  const handleMouseClose = event => {
     if (event && event.target === scrimRef.current) {
       if (event.type === 'mousedown' && isDismissable && open) {
         onClose && onClose();
@@ -43,15 +40,15 @@ var Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
   if (!open) {
     return null;
   }
-  return /*#__PURE__*/jsx(StyledScrim, _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsx(StyledScrim, {
     lockScroll: true,
     onMouseDown: handleMouseClose,
-    ref: combinedScrimRef
-  }, rest), {}, {
+    ref: combinedScrimRef,
+    ...rest,
     children: /*#__PURE__*/jsx(ScrimContent, {
       children: children
     })
-  }));
+  });
 });
 
 export { Scrim };

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

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

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

@@ -1,6 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { search, close } from '@equinor/eds-icons';
@@ -11,52 +8,47 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { Input } from '../Input/Input.js';
 
-var _excluded = ["onChange", "style", "className"];
-var SearchInput = styled(Input).withConfig({
+const SearchInput = styled(Input).withConfig({
   displayName: "Search__SearchInput",
   componentId: "sc-v8l23u-0"
 })(["input{&[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;}}"]);
-var InsideButton = styled(Button).withConfig({
+const InsideButton = styled(Button).withConfig({
   displayName: "Search__InsideButton",
   componentId: "sc-v8l23u-1"
 })(["height:24px;width:24px;"]);
-var Search = /*#__PURE__*/forwardRef(function Search(_ref, ref) {
-  var _onChange = _ref.onChange,
-    style = _ref.style,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var inputRef = useRef(null);
-  var _useState = useState(Boolean(rest.defaultValue)),
-    _useState2 = _slicedToArray(_useState, 2),
-    showClear = _useState2[0],
-    setShowClear = _useState2[1];
-  useEffect(function () {
+const Search = /*#__PURE__*/forwardRef(function Search({
+  onChange,
+  style,
+  className,
+  ...rest
+}, ref) {
+  const inputRef = useRef(null);
+  const [showClear, setShowClear] = useState(Boolean(rest.defaultValue));
+  useEffect(() => {
     if (rest.disabled) {
       setShowClear(false);
     } else if (rest.value) {
       setShowClear(Boolean(rest.value));
     }
   }, [rest.value, rest.disabled]);
-  var clearInputValue = function clearInputValue() {
-    var input = inputRef.current;
-    var clearedValue = '';
+  const clearInputValue = () => {
+    const input = inputRef.current;
+    const clearedValue = '';
     setReactInputValue(input, clearedValue);
   };
-  var handleOnChange = function handleOnChange(e) {
+  const handleOnChange = e => {
     setShowClear(Boolean(e.currentTarget.value));
   };
-  var combinedRef = useMemo(function () {
-    return mergeRefs(inputRef, ref);
-  }, [inputRef, ref]);
+  const combinedRef = useMemo(() => mergeRefs(inputRef, ref), [inputRef, ref]);
   return /*#__PURE__*/jsx(InputWrapper, {
     role: "search",
     style: style,
     className: className,
-    children: /*#__PURE__*/jsx(SearchInput, _objectSpread({
-      onChange: function onChange(e) {
+    children: /*#__PURE__*/jsx(SearchInput, {
+      onChange: e => {
         handleOnChange(e);
-        if (_onChange) {
-          _onChange(e);
+        if (onChange) {
+          onChange(e);
         }
       },
       ref: combinedRef,
@@ -72,7 +64,7 @@ var Search = /*#__PURE__*/forwardRef(function Search(_ref, ref) {
           "aria-label": 'clear search',
           title: "clear",
           variant: "ghost_icon",
-          onClick: function onClick(e) {
+          onClick: e => {
             e.stopPropagation();
             clearInputValue();
           },
@@ -81,8 +73,9 @@ var Search = /*#__PURE__*/forwardRef(function Search(_ref, ref) {
             size: 16
           })
         })
-      })
-    }, rest))
+      }),
+      ...rest
+    })
   });
 });
 

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

@@ -1,5 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { nativeselect } from './NativeSelect.tokens.js';
@@ -8,61 +6,64 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 
-var _excluded = ["label", "children", "className", "style", "selectRef", "id", "meta", "disabled", "multiple"];
-var Container = styled.div.withConfig({
+const Container = styled.div.withConfig({
   displayName: "NativeSelect__Container",
   componentId: "sc-82vb16-0"
 })(["min-width:100px;width:100%;"]);
-var StyledSelect = styled.select.withConfig({
+const StyledSelect = styled.select.withConfig({
   displayName: "NativeSelect__StyledSelect",
   componentId: "sc-82vb16-1"
-})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), function (_ref) {
-  var theme = _ref.theme;
-  return css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings));
-}, nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
-var NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
-  var label = _ref2.label,
-    children = _ref2.children,
-    className = _ref2.className,
-    style = _ref2.style,
-    selectRef = _ref2.selectRef,
-    id = _ref2.id,
-    meta = _ref2.meta,
-    _ref2$disabled = _ref2.disabled,
-    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-    _ref2$multiple = _ref2.multiple,
-    multiple = _ref2$multiple === void 0 ? false : _ref2$multiple,
-    other = _objectWithoutProperties(_ref2, _excluded);
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var token = useToken({
-    density: density
+})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, typographyTemplate(nativeselect.typography), ({
+  theme
+}) => css(["height:", ";", ""], theme.minHeight, spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
+const NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect({
+  label,
+  children,
+  className,
+  style,
+  selectRef,
+  id,
+  meta,
+  disabled = false,
+  multiple = false,
+  ...other
+}, ref) {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, nativeselect);
-  var containerProps = {
-    ref: ref,
-    className: className,
-    style: style
+  const containerProps = {
+    ref,
+    className,
+    style
   };
-  var selectProps = _objectSpread({
+  const selectProps = {
     ref: selectRef,
-    id: id,
-    disabled: disabled,
-    multiple: multiple
-  }, other);
-  var labelProps = {
+    id,
+    disabled,
+    multiple,
+    ...other
+  };
+  const labelProps = {
     htmlFor: id,
-    label: label,
-    meta: meta,
-    disabled: disabled
+    label,
+    meta,
+    disabled
   };
-  var showLabel = label || meta;
+  const showLabel = label || meta;
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
-      children: [showLabel && /*#__PURE__*/jsx(Label, _objectSpread({}, labelProps)), /*#__PURE__*/jsx(StyledSelect, _objectSpread(_objectSpread({}, selectProps), {}, {
+    children: /*#__PURE__*/jsxs(Container, {
+      ...containerProps,
+      children: [showLabel && /*#__PURE__*/jsx(Label, {
+        ...labelProps
+      }), /*#__PURE__*/jsx(StyledSelect, {
+        ...selectProps,
         children: children
-      }))]
-    }))
+      })]
+    })
   });
 });
 

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

@@ -1,17 +1,22 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { tokens } from '@equinor/eds-tokens';
 
-var colors = tokens.colors,
-  _tokens$spacings$comf = tokens.spacings.comfortable,
-  small = _tokens$spacings$comf.small,
-  x_small = _tokens$spacings$comf.x_small,
-  typography = tokens.typography,
-  shape = tokens.shape;
-var nativeselect = {
+const {
+  colors,
+  spacings: {
+    comfortable: {
+      small,
+      x_small
+    }
+  },
+  typography,
+  shape
+} = tokens;
+const nativeselect = {
   background: colors.ui.background__light.rgba,
-  typography: _objectSpread(_objectSpread({}, typography.input.text), {}, {
+  typography: {
+    ...typography.input.text,
     color: colors.text.static_icons__default.rgba
-  }),
+  },
   entities: {
     input: {
       spacings: {

package/dist/esm/components/SideBar/SideBar.context.js

@@ -1,49 +1,43 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useContext, createContext, useState, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var initalState = {
+const initalState = {
   isOpen: false,
   onToggle: null
 };
-var SideBarContext = /*#__PURE__*/createContext(initalState);
-var SideBarProvider = function SideBarProvider(_ref) {
-  var children = _ref.children;
-  var _useState = useState(initalState),
-    _useState2 = _slicedToArray(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  var isOpen = state.isOpen,
-    onToggle = state.onToggle;
-  var setIsOpen = useCallback(function (open) {
-    setState(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        isOpen: open
-      });
-    });
-    onToggle === null || onToggle === void 0 || onToggle(open);
+const SideBarContext = /*#__PURE__*/createContext(initalState);
+const SideBarProvider = ({
+  children
+}) => {
+  const [state, setState] = useState(initalState);
+  const {
+    isOpen,
+    onToggle
+  } = state;
+  const setIsOpen = useCallback(open => {
+    setState(prevState => ({
+      ...prevState,
+      isOpen: open
+    }));
+    onToggle?.(open);
   }, [onToggle]);
-  var setOnToggle = function setOnToggle(onToggle) {
-    setState(function (prevState) {
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        onToggle: onToggle
-      });
-    });
+  const setOnToggle = onToggle => {
+    setState(prevState => ({
+      ...prevState,
+      onToggle
+    }));
   };
-  var value = {
-    setIsOpen: setIsOpen,
-    setOnToggle: setOnToggle,
-    onToggle: onToggle,
-    isOpen: isOpen
+  const value = {
+    setIsOpen,
+    setOnToggle,
+    onToggle,
+    isOpen
   };
   return /*#__PURE__*/jsx(SideBarContext.Provider, {
     value: value,
     children: children
   });
 };
-var useSideBar = function useSideBar() {
-  return useContext(SideBarContext);
-};
+const useSideBar = () => useContext(SideBarContext);
 
 export { SideBarProvider, useSideBar };

package/dist/esm/components/SideBar/SideBar.js

@@ -1,5 +1,3 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { sidebar } from './SideBar.tokens.js';
@@ -8,64 +6,68 @@ import { SideBarProvider, useSideBar } from './SideBar.context.js';
 import { jsx } from 'react/jsx-runtime';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-var _excluded = ["onToggle", "open", "children"],
-  _excluded2 = ["onToggle", "open", "children"];
-var SideBarContainer = /*#__PURE__*/forwardRef(function SideBarContainer(_ref, ref) {
-  var onToggleCallback = _ref.onToggle,
-    _ref$open = _ref.open,
-    open = _ref$open === void 0 ? false : _ref$open,
-    children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useSideBar = useSideBar(),
-    isOpen = _useSideBar.isOpen,
-    setIsOpen = _useSideBar.setIsOpen,
-    onToggle = _useSideBar.onToggle,
-    setOnToggle = _useSideBar.setOnToggle;
-  useEffect(function () {
+const SideBarContainer = /*#__PURE__*/forwardRef(function SideBarContainer({
+  onToggle: onToggleCallback,
+  open = false,
+  children,
+  ...rest
+}, ref) {
+  const {
+    isOpen,
+    setIsOpen,
+    onToggle,
+    setOnToggle
+  } = useSideBar();
+  useEffect(() => {
     if (onToggle === null && onToggleCallback) {
       setOnToggle(onToggleCallback);
     }
   }, [onToggle, onToggleCallback, setOnToggle]);
-  useEffect(function () {
+  useEffect(() => {
     setIsOpen(open);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
-  return /*#__PURE__*/jsx(GridContainer, _objectSpread(_objectSpread({}, rest), {}, {
+  return /*#__PURE__*/jsx(GridContainer, {
+    ...rest,
     open: isOpen,
     ref: ref,
     children: children
-  }));
+  });
 });
-var GridContainer = styled.div.withConfig({
+const GridContainer = styled.div.withConfig({
   displayName: "SideBar__GridContainer",
   componentId: "sc-a84pkc-0"
-})(function (_ref2) {
-  var theme = _ref2.theme,
-    open = _ref2.open;
+})(({
+  theme,
+  open
+}) => {
   return css(["box-sizing:content-box;", " display:grid;grid-template-rows:1fr auto;height:100%;grid-template-areas:'content' 'footer';background-color:", ";overflow:auto;width:", ";min-width:", ";", ""], bordersTemplate(theme.border), theme.background, open ? theme.maxWidth : theme.minWidth, open ? theme.maxWidth : theme.minWidth, !open && css(["scrollbar-width:none;&::-webkit-scrollbar{display:none;}"]));
 });
-var SideBar = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var onToggle = _ref3.onToggle,
-    _ref3$open = _ref3.open,
-    open = _ref3$open === void 0 ? false : _ref3$open,
-    children = _ref3.children,
-    rest = _objectWithoutProperties(_ref3, _excluded2);
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var token = useToken({
-    density: density
+const SideBar = /*#__PURE__*/forwardRef(({
+  onToggle,
+  open = false,
+  children,
+  ...rest
+}, ref) => {
+  const {
+    density
+  } = useEds();
+  const token = useToken({
+    density
   }, sidebar);
-  var props = _objectSpread({
-    onToggle: onToggle,
-    open: open,
-    children: children
-  }, rest);
+  const props = {
+    onToggle,
+    open,
+    children,
+    ...rest
+  };
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsx(SideBarProvider, {
-      children: /*#__PURE__*/jsx(SideBarContainer, _objectSpread(_objectSpread({}, props), {}, {
+      children: /*#__PURE__*/jsx(SideBarContainer, {
+        ...props,
         ref: ref
-      }))
+      })
     })
   });
 });

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

@@ -1,25 +1,54 @@
 import { tokens } from '@equinor/eds-tokens';
 
-var _tokens$colors = tokens.colors,
-  _tokens$colors$ui = _tokens$colors.ui,
-  background__light = _tokens$colors$ui.background__light.rgba,
-  background__medium = _tokens$colors$ui.background__medium.rgba,
-  background = _tokens$colors$ui.background__default.rgba,
-  _tokens$colors$intera = _tokens$colors.interactive,
-  focusColor = _tokens$colors$intera.focus.rgba,
-  primary__resting = _tokens$colors$intera.primary__resting.rgba,
-  menuActive = _tokens$colors$intera.primary__selected_highlight.rgba,
-  menuDisabledBackground = _tokens$colors$intera.disabled__fill.rgba,
-  menuDisabledText = _tokens$colors$intera.disabled__text.rgba,
-  _tokens$colors$text = _tokens$colors.text,
-  expandTextColor = _tokens$colors$text.static_icons__default.rgba,
-  primaryWhite = _tokens$colors$text.static_icons__primary_white.rgba,
-  _tokens$spacings$comf = tokens.spacings.comfortable,
-  medium = _tokens$spacings$comf.medium,
-  large = _tokens$spacings$comf.large,
-  small = _tokens$spacings$comf.small;
-var sidebar = {
-  background: background,
+const {
+  colors: {
+    ui: {
+      background__light: {
+        rgba: background__light
+      },
+      background__medium: {
+        rgba: background__medium
+      },
+      background__default: {
+        rgba: background
+      }
+    },
+    interactive: {
+      focus: {
+        rgba: focusColor
+      },
+      primary__resting: {
+        rgba: primary__resting
+      },
+      primary__selected_highlight: {
+        rgba: menuActive
+      },
+      disabled__fill: {
+        rgba: menuDisabledBackground
+      },
+      disabled__text: {
+        rgba: menuDisabledText
+      }
+    },
+    text: {
+      static_icons__default: {
+        rgba: expandTextColor
+      },
+      static_icons__primary_white: {
+        rgba: primaryWhite
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium,
+      large,
+      small
+    }
+  }
+} = tokens;
+const sidebar = {
+  background,
   minWidth: '72px',
   maxWidth: '256px',
   spacings: {