@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/Card2.js

@@ -1,35 +1,157 @@
-import { C as CardActionsProps } from './types5.js';
-import { C as CardBodyProps } from './types6.js';
-import { C as CardHeaderProps } from './types7.js';
-import { ComponentProps } from 'react';
-import { h as StylingProps } from './styles2.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { mdiChevronDown, mdiChevronUp } from '@redsift/icons';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
 import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { p as partitionComponents } from './partitionComponents.js';
+import { i as isComponent } from './isComponent.js';
+import { C as CardHeader } from './CardHeader.js';
+import { C as CardBody } from './CardBody.js';
+import { C as CardActions } from './CardActions.js';
+import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
+import { I as IconButton } from './IconButton.js';
 
-/**
- * Component props.
- */
-interface CardProps extends ComponentProps<'div'>, StylingProps {
-    /** Default collapse status. Used for uncontrolled version. */
-    defaultCollapsed?: boolean;
-    /** Whether the component is collapsed or not. Used for controlled version. */
-    isCollapsed?: boolean;
-    /** Whether the component can be collapse or not. */
-    isCollapsible?: boolean;
-    /** Method to handle component change. */
-    onCollapse?(isCollapsed: boolean): void;
-    /** Theme. */
-    theme?: Theme;
-}
-type StyledCardProps = Omit<CardProps, 'isCollapsed'> & {
-    $isCollapsed: CardProps['isCollapsed'];
-    $theme: CardProps['theme'];
+var collapse$1 = "Collapse";
+var expand$1 = "Expand";
+var enUS = {
+	collapse: collapse$1,
+	expand: expand$1
 };
 
-declare const Card: Comp<CardProps, HTMLDivElement> & {
-    Header: Comp<CardHeaderProps, HTMLDivElement>;
-    Body: Comp<CardBodyProps, HTMLDivElement>;
-    Actions: Comp<CardActionsProps, HTMLDivElement>;
+var collapse = "Réduire";
+var expand = "Développer";
+var frFR = {
+	collapse: collapse,
+	expand: expand
 };
 
-export { CardProps as C, StyledCardProps as S, Card as a };
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+/**
+ * Component style.
+ */
+const StyledCard = styled.div`
+  ${baseStyling}
+
+  ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+  `;
+}}
+
+  display: flex;
+  flex-direction: column;
+
+  .redsift-card__header {
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .redsift-card-header__icon-button {
+    margin-top: 8px;
+    margin-left: auto;
+    margin-right: 8px;
+
+    [dir='rtl'] & {
+      margin-left: 8px;
+      margin-right: auto;
+    }
+  }
+
+  .redsift-card__content {
+    visibility: ${_ref2 => {
+  let {
+    $isCollapsed
+  } = _ref2;
+  return !$isCollapsed ? 'visible' : 'hidden';
+}};
+    overflow: ${_ref3 => {
+  let {
+    $isCollapsed
+  } = _ref3;
+  return !$isCollapsed ? 'visible' : 'hidden';
+}};
+    height: ${_ref4 => {
+  let {
+    $isCollapsed
+  } = _ref4;
+  return !$isCollapsed ? 'auto' : '0px';
+}};
+  }
+`;
+
+const _excluded = ["children", "className", "defaultCollapsed", "isCollapsed", "isCollapsible", "onCollapse", "theme"];
+const COMPONENT_NAME = 'Card';
+const CLASSNAME = 'redsift-card';
+
+/**
+ * The Card component.
+ */
+const BaseCard = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      defaultCollapsed,
+      isCollapsed: propsIsCollapsed,
+      isCollapsible,
+      onCollapse,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const format = useMessageFormatter(intlMessages);
+  const [isCollapsed, setIsCollapsed] = useState(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
+  useEffect(() => {
+    setIsCollapsed(propsIsCollapsed !== null && propsIsCollapsed !== void 0 ? propsIsCollapsed : defaultCollapsed);
+  }, [propsIsCollapsed, defaultCollapsed]);
+  const handleCollapse = useCallback(collapsed => {
+    if (onCollapse) {
+      onCollapse(collapsed);
+    }
+    if (propsIsCollapsed === undefined || propsIsCollapsed === null) {
+      setIsCollapsed(collapsed);
+    }
+  }, [onCollapse]);
+  const [[header], [body], [actions]] = partitionComponents(React__default.Children.toArray(children), [isComponent('CardHeader'), isComponent('CardBody'), isComponent('CardActions')]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledCard, _extends({}, forwardedProps, {
+    className: classNames(BaseCard.className, className),
+    ref: ref,
+    $isCollapsed: isCollapsed,
+    $theme: theme
+  }), header || isCollapsible ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${BaseCard.className}__header`
+  }, header && isComponent('CardHeader')(header) ? header : null, isCollapsible ? /*#__PURE__*/React__default.createElement(IconButton, {
+    theme: theme,
+    "aria-label": format(isCollapsed ? 'expand' : 'collapse'),
+    className: `${BaseCard.className}-header__icon-button`,
+    color: "grey",
+    icon: isCollapsed ? mdiChevronDown : mdiChevronUp,
+    onClick: () => handleCollapse(!isCollapsed)
+  }) : null) : null, body || actions ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${BaseCard.className}__content`
+  }, body && isComponent('CardBody')(body) ? body : null, actions && isComponent('CardActions')(actions) ? actions : null) : null));
+});
+BaseCard.className = CLASSNAME;
+BaseCard.displayName = COMPONENT_NAME;
+const Card = Object.assign(BaseCard, {
+  Header: CardHeader,
+  Body: CardBody,
+  Actions: CardActions
+});
+
+export { Card as C };
+//# sourceMappingURL=Card2.js.map

package/_internal/CardActions.js

@@ -1,9 +1,44 @@
-import { C as CardActionsProps } from './types5.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { j as baseContainer } from './styles4.js';
+
+/**
+ * Component style.
+ */
+const StyledCardActions = styled.div`
+  ${baseContainer}
+
+  margin-top: 8px;
+  margin-bottom: 8px;
+`;
+
+const _excluded = ["children", "className", "display", "flexDirection"];
+const COMPONENT_NAME = 'CardActions';
+const CLASSNAME = 'redsift-card-actions';
 
 /**
  * The CardActions component.
  */
-declare const CardActions: Comp<CardActionsProps, HTMLDivElement>;
+const CardActions = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      display = 'flex',
+      flexDirection = 'row'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardActions, _extends({
+    display: display,
+    flexDirection: flexDirection
+  }, forwardedProps, {
+    className: classNames(CardActions.className, className),
+    ref: ref
+  }), children);
+});
+CardActions.className = CLASSNAME;
+CardActions.displayName = COMPONENT_NAME;
 
 export { CardActions as C };
+//# sourceMappingURL=CardActions.js.map

package/_internal/CardBody.js

@@ -1,9 +1,42 @@
-import { C as CardBodyProps } from './types6.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { j as baseContainer } from './styles4.js';
+
+/**
+ * Component style.
+ */
+const StyledCardBody = styled.div`
+  ${baseContainer}
+
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  padding: 16px 0px;
+`;
+
+const _excluded = ["children", "className"];
+const COMPONENT_NAME = 'CardBody';
+const CLASSNAME = 'redsift-card-body';
 
 /**
  * The CardBody component.
  */
-declare const CardBody: Comp<CardBodyProps, HTMLDivElement>;
+const CardBody = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardBody, _extends({}, forwardedProps, {
+    className: classNames(CardBody.className, className),
+    ref: ref
+  }), children);
+});
+CardBody.className = CLASSNAME;
+CardBody.displayName = COMPONENT_NAME;
 
 export { CardBody as C };
+//# sourceMappingURL=CardBody.js.map

package/_internal/CardHeader.js

@@ -1,9 +1,83 @@
-import { C as CardHeaderProps } from './types7.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { i as baseStyling, g as baseFlexbox } from './styles4.js';
+import { S as Skeleton } from './Skeleton2.js';
+import { H as Heading } from './Heading2.js';
+import { a as Icon } from './Icon2.js';
+
+/**
+ * Component style.
+ */
+const StyledCardHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  ${baseStyling}
+  ${baseFlexbox}
+
+  .redsift-card-header__header {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    padding: 10px 0px;
+    margin: 0px;
+  }
+
+  .redsift-card-header__subheader {
+    font-family: var(--redsift-typography-body-font-family);
+    font-size: var(--redsift-typography-body-font-size);
+    font-weight: var(--redsift-typography-body-font-weight);
+    line-height: var(--redsift-typography-body-line-height);
+  }
+`;
+
+const _excluded = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader"];
+const COMPONENT_NAME = 'CardHeader';
+const CLASSNAME = 'redsift-card-header';
 
 /**
  * The CardHeader component.
  */
-declare const CardHeader: Comp<CardHeaderProps, HTMLDivElement>;
+const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      header,
+      headingProps,
+      icon,
+      iconProps,
+      isLoading,
+      subheader
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends({}, forwardedProps, {
+    className: classNames(CardHeader.className, className),
+    ref: ref
+  }), subheader ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "body",
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${CardHeader.className}__subheader`
+  }, subheader)) : null, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: (headingProps === null || headingProps === void 0 ? void 0 : headingProps.variant) || 'h2',
+    isLoaded: !isLoading,
+    marginTop: "10px",
+    marginBottom: "10px"
+  }, /*#__PURE__*/React__default.createElement(Heading, _extends({
+    as: "h2",
+    color: "black",
+    className: `${CardHeader.className}__header`,
+    variant: "h2"
+  }, headingProps), icon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: icon,
+    "aria-hidden": "true",
+    size: "large"
+  }, iconProps)) : null, header)) : null, children);
+});
+CardHeader.className = CLASSNAME;
+CardHeader.displayName = COMPONENT_NAME;
 
 export { CardHeader as C };
+//# sourceMappingURL=CardHeader.js.map

package/_internal/Checkbox2.js

@@ -1,68 +1,244 @@
-import { ComponentProps, MutableRefObject, ChangeEvent } from 'react';
-import { C as CheckboxGroupState } from './types8.js';
-import { h as StylingProps } from './styles2.js';
-import { T as Theme } from './colors.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline } from '@redsift/icons';
+import { C as CheckboxGroupContext } from './context3.js';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { u as useFocusRing } from './useFocusRing.js';
+import { u as useTheme } from './useTheme.js';
+import { a as Icon } from './Icon2.js';
 
 /**
- * Component props.
+ * Component style.
  */
-interface CheckboxProps extends Omit<ComponentProps<'label'>, 'onChange'>, StylingProps {
-    /** Whether the component can be autofocused. */
-    autoFocus?: boolean;
-    /**
-     * Default select status.
-     * Used for uncontrolled version.
-     */
-    defaultSelected?: boolean;
-    /** Custom props to pass to the input element. */
-    inputProps?: ComponentProps<'input'>;
-    /** Custom ref object to pass to the input element. */
-    inputRef?: MutableRefObject<HTMLInputElement>;
-    /** Whether the component should use the product colors or shades of grey. */
-    isColored?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the checkbox status is indeterminate or not. */
-    isIndeterminate?: boolean;
-    /** Whether the component is invalid or not. */
-    isInvalid?: boolean;
-    /** Whether the component is read only or not. */
-    isReadOnly?: boolean;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-    /**
-     * Whether the component is selected or not.
-     * Used for controlled version.
-     */
-    isSelected?: boolean;
-    /** Name to pass to the input element. */
-    name?: HTMLInputElement['name'];
-    /** Method to handle component change. */
-    onChange?(isChecked: boolean, value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>, state?: CheckboxGroupState): void;
-    /** Theme. */
-    theme?: Theme;
-    /**
-     * Value to pass to the input element.
-     * Required within a group.
-     */
-    value?: HTMLInputElement['value'];
-}
-type StyledCheckboxProps = Omit<CheckboxProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isSelected' | 'isRequired'> & {
-    $isColored: CheckboxProps['isColored'];
-    $isDisabled: CheckboxProps['isDisabled'];
-    $isInvalid: CheckboxProps['isInvalid'];
-    $isFocusVisible: boolean;
-    $isRequired: CheckboxProps['isRequired'];
-    $isSelected: CheckboxProps['isSelected'];
-    $theme: CheckboxProps['theme'];
-};
+const StyledCheckbox = styled.label`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  ${baseStyling}
+
+  align-items: flex-start;
+  background: none;
+  border: none;
+  display: inline-flex;
+
+  input {
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  span.label {
+    ${_ref => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
+}}
+
+    font-family: var(--redsift-typography-body-font-family);
+    font-size: var(--redsift-typography-body-font-size);
+    font-weight: var(--redsift-typography-body-font-weight);
+    line-height: var(--redsift-typography-body-line-height);
+    padding-left: 4px;
+    padding-right: 16px;
+    padding-top: 2px;
+
+    [dir='rtl'] & {
+      padding-left: 16px;
+      padding-right: 4px;
+    }
+  }
+
+  .redsift-icon {
+    box-sizing: content-box;
+    padding: 2px;
+    width: 24px;
+
+    ${_ref2 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $isFocusVisible,
+    $theme
+  } = _ref2;
+  return css`
+      ${$isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-fill-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid);
+          ` : css`
+            color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored)`};
+          `}
+
+      ${$isFocusVisible && !$isDisabled ? css`
+            background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};
+          ` : ''}
+    `;
+}}
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref3;
+  return !$isDisabled ? css`
+            .redsift-icon {
+              ${$isInvalid ? css`
+                    background-color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid-hover);
+                  ` : css`
+                    background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};
+                  `}
+              border-radius: 4px;
+            }
+          ` : '';
+}}
+  }
+`;
+
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
+const COMPONENT_NAME = 'Checkbox';
+const CLASSNAME = 'redsift-checkbox';
 
 /**
  * The Checkbox component.
  * Works both inside a CheckboxGroup or as standalone.
  * Can be used as controlled or uncontrolled.
  */
-declare const Checkbox: Comp<CheckboxProps, HTMLLabelElement>;
+const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
+  const groupState = useContext(CheckboxGroupContext);
+  let {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoFocus,
+      children,
+      className,
+      defaultSelected,
+      inputProps,
+      inputRef,
+      isColored = true,
+      isDisabled,
+      isIndeterminate,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isSelected: propsIsSelected,
+      name,
+      onChange,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    autoFocus
+  });
+  isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
+  isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
+  const [isSelected, setSelected] = useState(Boolean((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value)));
+  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;
+  useEffect(() => {
+    setSelected(Boolean(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected));
+  }, [propsIsSelected, defaultSelected]);
+  useEffect(() => {
+    if (groupState) {
+      setSelected(groupState.value.includes(value));
+    }
+  }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
+  warnIfNoAccessibleLabelFound(props, [children], 'Checkbox');
+  if (groupState) {
+    if (propsIsSelected != null) {
+      console.warn('isSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+    }
+    if (defaultSelected != null) {
+      console.warn('defaultSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+    }
+    if (props.value == null) {
+      console.warn('A <Checkbox> element within a <CheckboxGroup> requires a `value` property unless the <Checkbox> is controlled.');
+    }
+  }
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (groupState) {
+      if (!groupState.value.includes(value)) {
+        groupState.addValue(value);
+      } else {
+        groupState.removeValue(value);
+      }
+    }
+    if (isControlled) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(!propsIsSelected, value, name, event, groupState);
+    } else {
+      setSelected(!isSelected);
+      onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected, value, name, event, groupState);
+    }
+  }, [onChange, groupState, isSelected, propsIsSelected]);
+  return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({}, forwardedProps, {
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
+    $isRequired: isRequired,
+    $isSelected: isSelected || isControlled && propsIsSelected,
+    $theme: theme,
+    className: classNames(Checkbox.className, className),
+    ref: ref
+  }), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiCheckboxMarked
+  }) : isIndeterminate ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiMinusBox
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiCheckboxBlankOutline
+  }), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: "label"
+  }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends({}, inputProps, focusProps, {
+    "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : isIndeterminate ? 'mixed' : 'false',
+    "aria-disabled": isDisabled,
+    "aria-invalid": isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": isReadOnly,
+    "aria-required": isRequired,
+    autoFocus: autoFocus,
+    checked: isSelected || isControlled && propsIsSelected ? true : false,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    ref: inputRef,
+    type: "checkbox",
+    value: value
+  })));
+});
+Checkbox.className = CLASSNAME;
+Checkbox.displayName = COMPONENT_NAME;
 
-export { CheckboxProps as C, StyledCheckboxProps as S, Checkbox as a };
+export { Checkbox as C };
+//# sourceMappingURL=Checkbox2.js.map