@equinor/eds-core-react 0.20.4 → 0.21.0

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

@@ -47,6 +47,11 @@ const {
     focused: {
       width: focusOutlineWidth
     }
+  },
+  typography: {
+    input: {
+      text
+    }
   }
 } = tokens;
 const accordion = {
@@ -104,6 +109,8 @@ const accordion = {
         left: mediumSpacing,
         right: mediumSpacing,
         top: mediumSpacing
+      },
+      typography: { ...text
       }
     },
     icon: {

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

@@ -100,6 +100,8 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5,
     children,
     toggleExpanded,
     disabled,
+    className,
+    style,
     ...props
   } = _ref5;
 
@@ -171,6 +173,8 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5,
     disabled: disabled,
     parentIndex: parentIndex,
     as: headerLevel,
+    className: className,
+    style: style,
     children: [/*#__PURE__*/jsx(StyledAccordionHeaderButton, {
       isExpanded: isExpanded,
       disabled: disabled,

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

@@ -30,12 +30,14 @@ const AccordionHeaderActions = /*#__PURE__*/forwardRef(function AccordionHeaderA
   let {
     isExpanded,
     disabled,
-    children
+    children,
+    ...rest
   } = _ref2;
   return /*#__PURE__*/jsx(StyledAccordionHeaderActions, {
     ref: ref,
     isExpanded: isExpanded,
     disabled: disabled,
+    ...rest,
     children: children
   });
 });

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

@@ -24,12 +24,14 @@ const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTit
   let {
     isExpanded,
     disabled,
-    children
+    children,
+    ...rest
   } = _ref2;
   return /*#__PURE__*/jsx(StyledAccordionHeaderTitle, {
     ref: ref,
     isExpanded: isExpanded,
     disabled: disabled,
+    ...rest,
     children: children
   });
 }); // AccordionHeaderTitle.displayName = 'AccordionHeaderTitle'

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

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { bordersTemplate, spacingsTemplate } from '@equinor/eds-utils';
+import { bordersTemplate, spacingsTemplate, typographyTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledAccordionPanel = styled.div.attrs(_ref => {
@@ -25,7 +25,7 @@ const StyledAccordionPanel = styled.div.attrs(_ref => {
     },
     border
   } = theme;
-  return css(["", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(border), spacingsTemplate(panel.spacings), header.background);
+  return css(["", " ", " ", " background:", ";min-height:96px;box-sizing:border-box;"], bordersTemplate(border), spacingsTemplate(panel.spacings), typographyTemplate(panel.typography), header.background);
 });
 const AccordionPanel = /*#__PURE__*/forwardRef(function AccordionPanel(_ref3, ref) {
   let {

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

@@ -1,8 +1,7 @@
-import { forwardRef, useRef, useState, useEffect, useMemo, useCallback } from 'react';
-import { createPortal } from 'react-dom';
+import { forwardRef, useRef, useState, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { Button } from '../Button/Button.js';
+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';
@@ -10,8 +9,9 @@ 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, useIsMounted, useToken, usePopper } from '@equinor/eds-utils';
+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';
 
 const Container = styled.div.withConfig({
@@ -38,7 +38,7 @@ const StyledList = styled(List).withConfig({
   let {
     theme
   } = _ref2;
-  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;position:absolute;right:0;left:0;z-index:1400;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
+  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
 });
 const StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -130,8 +130,10 @@ function AutocompleteInner(props, ref) {
     label,
     meta,
     className,
+    style,
     disabled = false,
     readOnly = false,
+    hideClearButton = false,
     onOptionsChange,
     selectedOptions,
     multiple,
@@ -144,10 +146,7 @@ function AutocompleteInner(props, ref) {
     optionLabel,
     ...other
   } = props;
-  const anchorRef = useRef();
-  const [anchorEl, setAnchorEl] = useState();
-  const [containerEl, setContainerEl] = useState();
-  const isMounted = useIsMounted();
+  const anchorRef = useRef(null);
   const isControlled = Boolean(selectedOptions);
   const [inputOptions, setInputOptions] = useState(options);
   useEffect(() => {
@@ -400,40 +399,10 @@ function AutocompleteInner(props, ref) {
     reset: resetCombobox
   } = useCombobox(comboBoxProps);
   useEffect(() => {
-    if (anchorRef.current && isOpen) {
-      setAnchorEl(anchorRef.current);
-    } else {
-      setAnchorEl(null);
-    }
-
     if (isControlled) {
       setSelectedItems(selectedOptions);
     }
-
-    return () => {
-      setAnchorEl(null);
-      setContainerEl(null);
-    };
-  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]); //"Turn on" popper on load to position menu correctly and then turn it off
-
-  useEffect(() => {
-    if (anchorRef.current) {
-      setAnchorEl(anchorRef.current);
-      setTimeout(() => {
-        setAnchorEl(null);
-      }, 1);
-    }
-  }, []);
-  const {
-    styles,
-    attributes
-  } = usePopper({
-    anchorEl,
-    popperEl: containerEl,
-    placement: 'bottom-start',
-    offset: 4,
-    autoWidth
-  });
+  }, [isControlled, selectedOptions, setSelectedItems]);
 
   const openSelect = () => {
     if (!isOpen && !(disabled || readOnly)) {
@@ -441,38 +410,85 @@ function AutocompleteInner(props, ref) {
     }
   };
 
+  const {
+    x,
+    y,
+    refs,
+    update,
+    reference,
+    floating,
+    strategy
+  } = useFloating({
+    placement: 'bottom-start',
+    middleware: [offset(4), flip(), shift({
+      padding: 8
+    }), size({
+      apply(_ref10) {
+        let {
+          rects,
+          availableHeight,
+          elements
+        } = _ref10;
+        const anchorWidth = "".concat(rects.reference.width, "px");
+        Object.assign(elements.floating.style, {
+          width: "".concat(autoWidth ? anchorWidth : 'auto'),
+          maxHeight: "".concat(availableHeight, "px")
+        });
+      },
+
+      padding: 10
+    })]
+  });
+  const {
+    getFloatingProps
+  } = useInteractions([]);
+  useLayoutEffect(() => {
+    reference(anchorRef.current);
+  }, [anchorRef, reference]);
+  useLayoutEffect(() => {
+    if (refs.reference.current && refs.floating.current && isOpen) {
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }
+  }, [refs.reference, refs.floating, update, isOpen]);
+
   const clear = () => {
     resetCombobox();
     resetSelection();
   };
 
-  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly;
+  const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
   const selectedItemsLabels = useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
 
-  const optionsList = /*#__PURE__*/jsx(StyledList, { ...getMenuProps({
-      ref: setContainerEl,
-      style: styles.popper,
-      'aria-multiselectable': multiple ? 'true' : null,
-      ...attributes.popper
-    }, {
-      suppressRefError: true
+  const optionsList = /*#__PURE__*/jsx("div", { ...getFloatingProps({
+      ref: floating,
+      style: {
+        position: strategy,
+        top: y !== null && y !== void 0 ? y : 0,
+        left: x !== null && x !== void 0 ? x : 0
+      }
     }),
-    children: !isOpen ? null : availableItems.map((item, index) => {
-      const label = getLabel(item);
-      const isDisabled = optionDisabled(item);
-      const isSelected = selectedItemsLabels.includes(label);
-      return /*#__PURE__*/jsx(AutocompleteOption, {
-        value: label,
-        multiple: multiple,
-        highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
-        isSelected: isSelected,
-        isDisabled: isDisabled,
-        ...getItemProps({
-          item,
-          index,
-          disabled
-        })
-      }, label);
+    children: /*#__PURE__*/jsx(StyledList, { ...getMenuProps({
+        'aria-multiselectable': multiple ? 'true' : null
+      }, {
+        suppressRefError: true
+      }),
+      children: !isOpen ? null : availableItems.map((item, index) => {
+        const label = getLabel(item);
+        const isDisabled = optionDisabled(item);
+        const isSelected = selectedItemsLabels.includes(label);
+        return /*#__PURE__*/jsx(AutocompleteOption, {
+          value: label,
+          multiple: multiple,
+          highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
+          isSelected: isSelected,
+          isDisabled: isDisabled,
+          ...getItemProps({
+            item,
+            index,
+            disabled
+          })
+        }, label);
+      })
     })
   });
 
@@ -480,6 +496,7 @@ function AutocompleteInner(props, ref) {
     theme: token,
     children: /*#__PURE__*/jsxs(Container, {
       className: className,
+      style: style,
       ref: ref,
       children: [/*#__PURE__*/jsx(Label, { ...getLabelProps(),
         label: label,
@@ -490,7 +507,7 @@ function AutocompleteInner(props, ref) {
           getDropdownProps({
             preventKeyAction: multiple ? isOpen : undefined,
             disabled,
-            ref: anchorRef
+            ref: refs.reference
           })),
           placeholder: placeholderText,
           readOnly: readOnly,
@@ -521,7 +538,10 @@ function AutocompleteInner(props, ref) {
             data: isOpen ? arrow_drop_up : arrow_drop_down
           })
         })]
-      }), disablePortal ? optionsList : !isMounted ? null : /*#__PURE__*/createPortal(optionsList, document.body)]
+      }), disablePortal ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
+        id: "eds-autocomplete-container",
+        children: optionsList
+      })]
     })
   });
 }

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

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { Typography } from '../Typography/Typography.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
@@ -25,6 +25,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
     children,
     maxWidth,
     href,
+    as,
     ...other
   } = _ref2;
   const props = { ...other,
@@ -34,10 +35,11 @@ const Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
   };
   const showTooltip = maxWidth > 0;
   const isHrefDefined = href !== undefined;
+  const forwardedAs = useMemo(() => as ? as : isHrefDefined ? 'a' : 'span', [as, isHrefDefined]);
 
   const crumb = /*#__PURE__*/jsx(StyledTypography, {
     link: isHrefDefined,
-    forwardedAs: isHrefDefined ? null : 'span',
+    forwardedAs: forwardedAs,
     variant: "body_short",
     ...props,
     children: children

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

@@ -17,6 +17,9 @@ const getVariant = (tokenSet, variant) => {
     case 'outlined':
       return tokenSet.outlined;
 
+    case 'contained_icon':
+      return tokenSet.contained_icon;
+
     case 'contained':
     default:
       return tokenSet.contained;
@@ -59,7 +62,7 @@ const ButtonBase = styled.button.withConfig({
     hover,
     disabled
   } = states;
-  return css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
+  return css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset = clickbound.offset) === null || _clickbound$offset === void 0 ? void 0 : _clickbound$offset.top, clickbound === null || clickbound === void 0 ? void 0 : (_clickbound$offset2 = clickbound.offset) === null || _clickbound$offset2 === void 0 ? void 0 : _clickbound$offset2.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_hover$typography = hover.typography) === null || _hover$typography === void 0 ? void 0 : _hover$typography.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
 const Button = /*#__PURE__*/forwardRef(function Button(_ref2, ref) {
   let {

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

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { group } from './ButtonGroup.tokens.js';
+import { jsx } from 'react/jsx-runtime';
+
+const {
+  border
+} = group;
+const radius = border.type === 'border' && border.radius;
+const ButtonGroupBase = styled.div.withConfig({
+  displayName: "ButtonGroup__ButtonGroupBase",
+  componentId: "sc-1fn8jon-0"
+})(["display:inline-flex;> *{border-radius:0;@media (hover:hover) and (pointer:fine){&:hover{border-radius:0;}}}", ""], _ref => {
+  let {
+    vertical
+  } = _ref;
+  return vertical ? css(["flex-direction:column;> :first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> :last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-bottom:none;}"], radius, radius, radius, radius) : css(["> :first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}> :last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-right:none;}"], radius, radius, radius, radius);
+});
+const ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup(_ref2, ref) {
+  let {
+    children,
+    vertical,
+    ...rest
+  } = _ref2;
+  const props = {
+    ref,
+    vertical,
+    ...rest
+  };
+  return /*#__PURE__*/jsx(ButtonGroupBase, {
+    role: "group",
+    ...props,
+    children: children
+  });
+});
+
+export { ButtonGroup };

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

@@ -0,0 +1,17 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  shape: {
+    corners: {
+      borderRadius
+    }
+  }
+} = tokens;
+const group = {
+  border: {
+    type: 'border',
+    radius: borderRadius
+  }
+};
+
+export { group };

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

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

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

@@ -0,0 +1,56 @@
+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';
+
+const {
+  clickbounds: {
+    default__base: clicboundHeight,
+    compact__standard: compactClickboundHeight
+  },
+  shape
+} = tokens;
+const contained_icon = {
+  height: shape.icon_button.minHeight,
+  width: shape.icon_button.minWidth,
+  border: {
+    width: '0px',
+    radius: '50%'
+  },
+  spacings: {
+    left: '0',
+    right: '0'
+  },
+  clickbound: {
+    width: clicboundHeight,
+    offset: {
+      top: '0',
+      left: "".concat((parseInt(clicboundHeight) - parseInt('40px')) / 2, "px")
+    }
+  },
+  states: {
+    hover: {
+      border: {
+        width: '0px',
+        radius: '50%'
+      }
+    }
+  },
+  modes: {
+    compact: {
+      height: shape._modes.compact.icon_button.minHeight,
+      width: shape._modes.compact.icon_button.minWidth,
+      clickbound: {
+        width: compactClickboundHeight,
+        offset: {
+          top: '0',
+          left: "".concat((parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2, "px")
+        }
+      }
+    }
+  }
+};
+const primary = mergeDeepRight(primary$1, contained_icon);
+const secondary = mergeDeepRight(secondary$1, contained_icon);
+const danger = mergeDeepRight(danger$1, contained_icon);
+
+export { danger, primary, secondary };

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

@@ -2,25 +2,29 @@ import { primary, secondary, danger } from './contained.js';
 import { primary as primary$1, secondary as secondary$1, danger as danger$1 } from './outlined.js';
 import { primary as primary$2, secondary as secondary$2, danger as danger$2 } from './ghost.js';
 import { primary as primary$3, secondary as secondary$3, danger as danger$3 } from './icon.js';
+import { primary as primary$4, secondary as secondary$4, danger as danger$4 } from './contained_icon.js';
 
 const token = {
   primary: {
     contained: primary,
     outlined: primary$1,
     ghost: primary$2,
-    ghost_icon: primary$3
+    ghost_icon: primary$3,
+    contained_icon: primary$4
   },
   secondary: {
     contained: secondary,
     outlined: secondary$1,
     ghost: secondary$2,
-    ghost_icon: secondary$3
+    ghost_icon: secondary$3,
+    contained_icon: secondary$4
   },
   danger: {
     contained: danger,
     outlined: danger$1,
     ghost: danger$2,
-    ghost_icon: danger$3
+    ghost_icon: danger$3,
+    contained_icon: danger$4
   }
 };
 

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

@@ -11,38 +11,29 @@ const {
 const StyledCard = styled(Paper).withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;cursor:", ";", ";"], _ref => {
+})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;", ";"], _ref => {
   let {
     background
   } = _ref;
   return background;
-}, _ref2 => {
-  let {
-    cursor
-  } = _ref2;
-  return cursor;
 }, bordersTemplate(primary.border));
-const Card = /*#__PURE__*/forwardRef(function Card(_ref3, ref) {
+const Card = /*#__PURE__*/forwardRef(function Card(_ref2, ref) {
   let {
     children,
     variant = 'default',
     elevation = 'none',
-    onClick,
     ...rest
-  } = _ref3;
-  const cursor = onClick ? 'pointer' : 'default';
+  } = _ref2;
   const cardVariant = variant === 'default' ? 'primary' : variant;
   const token = Card_tokens[cardVariant];
   const props = {
     ref,
     background: token.background,
-    cursor,
     ...rest
   };
   return /*#__PURE__*/jsx(StyledCard, {
     elevation: elevation,
     ...props,
-    onClick: onClick,
     children: children
   });
 });

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

@@ -25,11 +25,13 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
     disabled = false,
     indeterminate,
     className,
+    style,
     ...rest
   } = _ref2;
   return label ? /*#__PURE__*/jsxs(StyledLabel, {
     disabled: disabled,
     className: className,
+    style: style,
     children: [/*#__PURE__*/jsx(CheckboxInput, { ...rest,
       disabled: disabled,
       ref: ref,
@@ -38,6 +40,8 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(_ref2, ref) {
       children: label
     })]
   }) : /*#__PURE__*/jsx(CheckboxInput, { ...rest,
+    className: className,
+    style: style,
     disabled: disabled,
     ref: ref,
     indeterminate: indeterminate

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

@@ -87,6 +87,8 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref
   let {
     disabled = false,
     indeterminate,
+    style,
+    className,
     ...rest
   } = _ref10;
   const {
@@ -98,7 +100,9 @@ const CheckboxInput = /*#__PURE__*/forwardRef(function CheckboxInput(_ref10, ref
   const iconSize = 24;
   const fill = disabled ? checkbox.states.disabled.background : checkbox.background;
   const inputWrapperProps = {
-    disabled
+    disabled,
+    style,
+    className
   };
   const inputProps = {
     ref,