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

package/dist/esm/components/Accordion/Accordion.js

@@ -2,8 +2,8 @@ import { forwardRef, Children, cloneElement } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { accordion } from './Accordion.tokens.js';
 import { useId, useToken } from '@equinor/eds-utils';
-import { useEds } from '../EdsProvider/eds.context.js';
 import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
   let {

package/dist/esm/components/Accordion/AccordionHeader.js

@@ -136,7 +136,7 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5,
     size: 24,
     chevronPosition: chevronPosition,
     color: disabled ? chevronToken.states.disabled.background : chevronToken.background
-  }, "".concat(id, "-icon"));
+  }, `${id}-icon`);
 
   const headerChildren = Children.map(children, child => {
     if (typeof child === 'string') {

package/dist/esm/components/Accordion/AccordionItem.js

@@ -19,8 +19,8 @@ const AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref)
   };
 
   const Children$1 = Children.map(children, (child, childIndex) => {
-    const headerId = "".concat(accordionId, "-header-").concat(index + 1);
-    const panelId = "".concat(accordionId, "-panel-").concat(index + 1);
+    const headerId = `${accordionId}-header-${index + 1}`;
+    const panelId = `${accordionId}-panel-${index + 1}`;
     return childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
       isExpanded: expanded,
       toggleExpanded,

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -3,16 +3,16 @@ import { useMultipleSelection, useCombobox } from 'downshift';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { Button } from '../Button/index.js';
 import { List } from '../List/index.js';
-import { useEds } from '../EdsProvider/eds.context.js';
-import { Label } from '../Label/Label.js';
 import { Icon } from '../Icon/index.js';
-import { Input } from '../Input/Input.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
 import { bordersTemplate, useToken } from '@equinor/eds-utils';
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react-dom-interactions';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Input } from '../Input/Input.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Label } from '../Label/Label.js';
 
 const Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",
@@ -332,7 +332,7 @@ function AutocompleteInner(props, ref) {
   }
 
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : "".concat(selectedItems.length, "/").concat(options.length - disabledItems.length, " selected");
+    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${options.length - disabledItems.length} selected`;
     comboBoxProps = { ...comboBoxProps,
       selectedItem: null,
       stateReducer: (state, actionAndChanges) => {
@@ -429,10 +429,10 @@ function AutocompleteInner(props, ref) {
           availableHeight,
           elements
         } = _ref10;
-        const anchorWidth = "".concat(rects.reference.width, "px");
+        const anchorWidth = `${rects.reference.width}px`;
         Object.assign(elements.floating.style, {
-          width: "".concat(autoWidth ? anchorWidth : 'auto'),
-          maxHeight: "".concat(availableHeight, "px")
+          width: `${autoWidth ? anchorWidth : 'auto'}`,
+          maxHeight: `${availableHeight}px`
         });
       },
 
@@ -463,8 +463,9 @@ function AutocompleteInner(props, ref) {
       ref: floating,
       style: {
         position: strategy,
-        top: y !== null && y !== void 0 ? y : 0,
-        left: x !== null && x !== void 0 ? x : 0
+        top: y || 0,
+        left: x || 0,
+        zIndex: 1400
       }
     }),
     children: /*#__PURE__*/jsx(StyledList, { ...getMenuProps({

package/dist/esm/components/Autocomplete/Option.js

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { List } from '../List/index.js';
-import { Checkbox } from '../Checkbox/Checkbox.js';
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../Checkbox/Checkbox.js';
 
 const StyledListItem = styled(List.Item).withConfig({
   displayName: "Option__StyledListItem",

package/dist/esm/components/Banner/Banner.js

@@ -1,12 +1,12 @@
 import { forwardRef, Children, isValidElement } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, useToken } from '@equinor/eds-utils';
-import { Paper } from '../Paper/Paper.js';
 import { enabled } from './Banner.tokens.js';
-import { Divider } from '../Divider/Divider.js';
 import { BannerIcon } from './BannerIcon.js';
-import { useEds } from '../EdsProvider/eds.context.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
+import { useEds } from '../EdsProvider/eds.context.js';
+import { Paper } from '../Paper/Paper.js';
 
 const Content = styled.div.withConfig({
   displayName: "Banner__Content",

package/dist/esm/components/Banner/BannerMessage.js

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { Typography } from '../Typography/Typography.js';
 import { jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
 
 const StyledBannerMessage = styled(Typography).withConfig({
   displayName: "BannerMessage__StyledBannerMessage",

package/dist/esm/components/Breadcrumbs/Breadcrumb.js

@@ -1,9 +1,9 @@
 import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { Typography } from '../Typography/Typography.js';
-import { Tooltip } from '../Tooltip/Tooltip.js';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
 import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { Typography } from '../Typography/Typography.js';
 
 const {
   states,

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -1,9 +1,9 @@
 import { forwardRef, useState, Children, Fragment } from 'react';
 import styled from 'styled-components';
 import { breadcrumbs } from './Breadcrumbs.tokens.js';
-import { Typography } from '../Typography/Typography.js';
 import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
 
 const {
   spacings,
@@ -87,7 +87,7 @@ const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
         children: "/"
       })
     })]
-  }, "breadcrumb-".concat(index)));
+  }, `breadcrumb-${index}`));
   return /*#__PURE__*/jsx("nav", { ...props,
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsx(OrderedList, {

package/dist/esm/components/Button/Button.js

@@ -3,8 +3,8 @@ import styled, { css, ThemeProvider } from 'styled-components';
 import { token } from './tokens/index.js';
 import { spacingsTemplate, bordersTemplate, typographyTemplate, outlineTemplate, useToken } from '@equinor/eds-utils';
 import { InnerFullWidth } from './InnerFullWidth.js';
-import { useEds } from '../EdsProvider/eds.context.js';
 import { jsx } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 const getVariant = (tokenSet, variant) => {
   switch (variant) {

package/dist/esm/components/Button/ToggleButton/ToggleButton.js

@@ -0,0 +1,55 @@
+import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { Button } from '../Button.js';
+import { jsx } from 'react/jsx-runtime';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
+
+const ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
+  let {
+    children,
+    multiple,
+    selectedIndexes,
+    onChange,
+    ...props
+  } = _ref;
+  const [pickedIndexes, setPickedIndexes] = useState(selectedIndexes || []);
+  useEffect(() => {
+    if (Array.isArray(selectedIndexes)) {
+      setPickedIndexes(selectedIndexes);
+    }
+  }, [selectedIndexes]);
+  const updatedChildren = Children.map(children, (child, index) => {
+    const isSelected = pickedIndexes.includes(index);
+    const childElement = child;
+
+    if ( /*#__PURE__*/isValidElement(child) && child.type === Button) {
+      const buttonProps = {
+        'aria-pressed': isSelected ? true : undefined,
+        variant: isSelected ? 'contained' : 'outlined',
+        onClick: e => {
+          var _childElement$props, _childElement$props$o;
+
+          (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 ? void 0 : _childElement$props$o.call(_childElement$props, e);
+          let updatedSelection = [index];
+
+          if (multiple) {
+            updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(i => i !== index) : [...pickedIndexes, index];
+          }
+
+          setPickedIndexes(updatedSelection);
+
+          if (onChange) {
+            onChange(updatedSelection);
+          }
+        }
+      };
+      return /*#__PURE__*/cloneElement(child, buttonProps);
+    }
+  });
+  return /*#__PURE__*/jsx(ButtonGroup, {
+    ref: ref,
+    ...props,
+    children: updatedChildren
+  });
+});
+
+export { ToggleButton };

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

@@ -1,8 +1,11 @@
 import { Button as Button$1 } from './Button.js';
 import { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
+import { ToggleButton } from './ToggleButton/ToggleButton.js';
 
 const Button = Button$1;
 Button.Group = ButtonGroup;
+Button.Toggle = ToggleButton;
 Button.Group.displayName = 'Button.Group';
+Button.Toggle.displayName = 'Button.Toggle';
 
 export { Button };

package/dist/esm/components/Button/tokens/button.js

@@ -47,29 +47,29 @@ const {
 } = tokens;
 const button = {
   background: 'transparent',
-  height: "var(--eds_button__height, ".concat(buttonHeight, ")"),
+  height: `var(--eds_button__height, ${buttonHeight})`,
   typography: { ...buttonTypography,
     textAlign: 'center',
-    fontSize: "var(--eds_button__font_size, ".concat(buttonTypography.fontSize, ")")
+    fontSize: `var(--eds_button__font_size, ${buttonTypography.fontSize})`
   },
   border: {
     type: 'border',
-    width: "var(--eds_button__border_width, 1px)",
+    width: `var(--eds_button__border_width, 1px)`,
     color: 'transparent',
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`,
     style: 'solid'
   },
   spacings: {
     top: 'var(--eds_button__padding_y, 0)',
     bottom: 'var(--eds_button__padding_y, 0)',
-    left: "var(--eds_button__padding_x, ".concat(medium, ")"),
-    right: "var(--eds_button__padding_x, ".concat(medium, ")")
+    left: `var(--eds_button__padding_x, ${medium})`,
+    right: `var(--eds_button__padding_x, ${medium})`
   },
   clickbound: {
     height: clicboundHeight,
     width: '100%',
     offset: {
-      top: "".concat((parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1, "px"),
+      top: `${(parseInt(clicboundHeight) - parseInt(buttonHeight)) / 2 + 1}px`,
       left: '0'
     }
   },
@@ -85,7 +85,7 @@ const button = {
         type: 'border',
         width: '1px',
         color: 'transparent',
-        radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")"),
+        radius: `var(--eds_button__radius, ${buttonBorderRadius})`,
         style: 'solid'
       }
     },
@@ -114,7 +114,7 @@ const button = {
   },
   modes: {
     compact: {
-      height: "var(--eds_button__height_compact, ".concat(compactButtonHeight, ")"),
+      height: `var(--eds_button__height_compact, ${compactButtonHeight})`,
       spacings: {
         top: 'var(--eds_button__padding_y_compact, 0)',
         bottom: 'var(--eds_button__padding_y_compact, 0)'
@@ -123,7 +123,7 @@ const button = {
         height: compactClickboundHeight,
         width: '100%',
         offset: {
-          top: "".concat((parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1, "px"),
+          top: `${(parseInt(compactClickboundHeight) - parseInt(compactButtonHeight)) / 2 + 1}px`,
           left: '0'
         }
       }

package/dist/esm/components/Button/tokens/contained.js

@@ -46,7 +46,7 @@ const primary = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
   },
   states: {
     hover: {

package/dist/esm/components/Button/tokens/contained_icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './contained.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   clickbounds: {
@@ -24,7 +24,7 @@ const contained_icon = {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt('40px')) / 2, "px")
+      left: `${(parseInt(clicboundHeight) - parseInt('40px')) / 2}px`
     }
   },
   states: {
@@ -43,7 +43,7 @@ const contained_icon = {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }

package/dist/esm/components/Button/tokens/ghost.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { button } from './button.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {

package/dist/esm/components/Button/tokens/icon.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { button } from './button.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {
@@ -61,7 +61,7 @@ const primary = mergeDeepRight(button, {
     width: clicboundHeight,
     offset: {
       top: '0',
-      left: "".concat((parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2, "px")
+      left: `${(parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2}px`
     }
   },
   states: {
@@ -80,7 +80,7 @@ const primary = mergeDeepRight(button, {
     },
     focus: {
       outline: {
-        offset: "-".concat(parseInt(focusOutlineWidth), "px")
+        offset: `-${parseInt(focusOutlineWidth)}px`
       }
     }
   },
@@ -92,7 +92,7 @@ const primary = mergeDeepRight(button, {
         width: compactClickboundHeight,
         offset: {
           top: '0',
-          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
+          left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px`
         }
       }
     }

package/dist/esm/components/Button/tokens/outlined.js

@@ -1,6 +1,6 @@
 import { tokens } from '@equinor/eds-tokens';
-import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 import { button } from './button.js';
+import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.28.0/node_modules/ramda/es/mergeDeepRight.js';
 
 const {
   colors: {
@@ -49,7 +49,7 @@ const primary = mergeDeepRight(button, {
     style: 'solid',
     width: '1px',
     color: primaryColor,
-    radius: "var(--eds_button__radius, ".concat(buttonBorderRadius, ")")
+    radius: `var(--eds_button__radius, ${buttonBorderRadius})`
   },
   states: {
     hover: {

package/dist/esm/components/Card/Card.js

@@ -1,9 +1,9 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { Paper } from '../Paper/Paper.js';
 import * as Card_tokens from './Card.tokens.js';
 import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
+import { Paper } from '../Paper/Paper.js';
 
 const {
   primary

package/dist/esm/components/Card/CardActions.js

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { Typography } from '../Typography/Typography.js';
 import { primary } from './Card.tokens.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
 
 const {
   spacings

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

@@ -3,8 +3,8 @@ import styled, { ThemeProvider } from 'styled-components';
 import { checkbox_indeterminate, checkbox as checkbox$1, checkbox_outline } from '@equinor/eds-icons';
 import { checkbox } from './Checkbox.tokens.js';
 import { outlineTemplate, spacingsTemplate, useToken } from '@equinor/eds-utils';
-import { useEds } from '../EdsProvider/eds.context.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEds } from '../EdsProvider/eds.context.js';
 
 /* eslint camelcase: "off" */
 const StyledPath = styled.path.attrs(_ref => {
@@ -119,7 +119,7 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref
       }), indeterminate ? /*#__PURE__*/jsx(Svg, {
         width: iconSize,
         height: iconSize,
-        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+        viewBox: `0 0 ${iconSize} ${iconSize}`,
         fill: fill,
         "aria-hidden": true,
         children: /*#__PURE__*/jsx(StyledPath, {
@@ -129,7 +129,7 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref
       }) : /*#__PURE__*/jsxs(Svg, {
         width: iconSize,
         height: iconSize,
-        viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+        viewBox: `0 0 ${iconSize} ${iconSize}`,
         fill: fill,
         "aria-hidden": true,
         children: [/*#__PURE__*/jsx(StyledPath, {

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

@@ -1,12 +1,12 @@
-import { forwardRef } from 'react';
-import { createPortal } from 'react-dom';
+import { forwardRef, useMemo } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
-import { Paper } from '../Paper/Paper.js';
-import { Scrim } from '../Scrim/Scrim.js';
+import { typographyTemplate, bordersTemplate, useToken, mergeRefs } from '@equinor/eds-utils';
 import { dialog } from './Dialog.tokens.js';
+import { useFloating, FloatingPortal, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import { jsx } from 'react/jsx-runtime';
+import { Scrim } from '../Scrim/Scrim.js';
+import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
 
 const StyledDialog = styled(Paper).attrs({
   tabIndex: 0,
@@ -31,39 +31,46 @@ const Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref2, ref) {
     isDismissable = false,
     ...props
   } = _ref2;
-  const rest = { ...props,
-    open,
-    ref
-  };
   const {
     density
   } = useEds();
   const token = useToken({
     density
   }, dialog);
+  const {
+    floating,
+    context
+  } = useFloating();
 
   const handleDismiss = () => {
     onClose && onClose();
   };
 
-  if (!open) {
-    return null;
-  }
-
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ThemeProvider, {
+  const dialogRef = useMemo(() => mergeRefs(floating, ref), [floating, ref]);
+  const rest = { ...props,
+    open
+  };
+  return /*#__PURE__*/jsx(FloatingPortal, {
+    id: "eds-dialog-container",
+    children: /*#__PURE__*/jsx(ThemeProvider, {
       theme: token,
-      children: /*#__PURE__*/jsx(Scrim, {
+      children: open && /*#__PURE__*/jsx(Scrim, {
         open: true,
         isDismissable: isDismissable,
         onClose: handleDismiss,
-        children: /*#__PURE__*/jsx(StyledDialog, {
-          elevation: "above_scrim",
-          ...rest,
-          children: children
+        children: /*#__PURE__*/jsx(FloatingFocusManager, {
+          context: context,
+          modal: true,
+          returnFocus: true,
+          children: /*#__PURE__*/jsx(StyledDialog, {
+            elevation: "above_scrim",
+            ...rest,
+            ref: dialogRef,
+            children: children
+          })
         })
       })
-    }), document.body)
+    })
   });
 }); // Dialog.displayName = 'EdsDialog'
 

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

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Divider } from '../Divider/Divider.js';
 import { typographyTemplate } from '@equinor/eds-utils';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
 
 const StyledDialogContent = styled.div.withConfig({
   displayName: "DialogContent__StyledDialogContent",

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Divider } from '../Divider/Divider.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Divider } from '../Divider/Divider.js';
 
 const StyledDialogHeader = styled.div.withConfig({
   displayName: "DialogHeader__StyledDialogHeader",

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

@@ -1,28 +1,36 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import * as Divider_tokens from './Divider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
 const {
-  divider,
-  baseDivider
+  divider
 } = Divider_tokens;
 const StyledDivider = styled.hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
-})(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
-const Divider = /*#__PURE__*/forwardRef(function Divider(_ref, ref) {
+})(_ref => {
+  let {
+    backgroundColor,
+    marginTop,
+    marginBottom,
+    dividerHeight
+  } = _ref;
+  return css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], backgroundColor, marginTop, marginBottom, dividerHeight, dividerHeight);
+});
+const Divider = /*#__PURE__*/forwardRef(function Divider(_ref2, ref) {
   let {
     color = 'medium',
     variant = 'medium',
+    size = '1',
     ...rest
-  } = _ref;
+  } = _ref2;
   const colorValue = color === 'medium' ? 'mediumColor' : color;
   const props = {
     backgroundColor: divider[colorValue].background,
     marginTop: Divider_tokens[variant].spacings.top,
     marginBottom: Divider_tokens[variant].spacings.bottom,
-    dividerHeight: baseDivider.height,
+    dividerHeight: parseInt(size),
     ...rest
   };
   return /*#__PURE__*/jsx(StyledDivider, { ...props,

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

@@ -21,17 +21,6 @@ const {
     }
   }
 } = tokens$1;
-const dividerHeight = 1;
-
-const reduceByValue = subtractValue => valueWithUnit => {
-  const valueAndUnit = valueWithUnit.split(/(\d+)/).filter(val => val.length > 0);
-  return "".concat(parseInt(valueAndUnit[0]) - subtractValue) + valueAndUnit[1];
-};
-
-const reduceValueByDividerHeight = reduceByValue(dividerHeight);
-const baseDivider = {
-  height: "".concat(dividerHeight, "px")
-};
 const divider = {
   lighter: {
     background: lighter
@@ -43,17 +32,17 @@ const divider = {
     background: mediumColor
   }
 };
-const small = { ...baseDivider,
+const small = {
   spacings: {
     top: spacingSmall,
-    bottom: reduceValueByDividerHeight(spacingSmall)
+    bottom: spacingSmall
   }
 };
-const medium = { ...baseDivider,
+const medium = {
   spacings: {
     top: spacingMedium,
-    bottom: reduceValueByDividerHeight(spacingMedium)
+    bottom: spacingMedium
   }
 };
 
-export { baseDivider, divider, medium, small };
+export { divider, medium, small };