@ntbjs/react-components 2.0.0-rc.26 → 2.0.0-rc.27

package/build/{Button-2e26f5da.js → Button-179a2fe4.js}

@@ -1,19 +1,12 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
-var React = require('react');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-var styled = require('styled-components');
-var Popover = require('./Popover-c4be47ea.js');
-var ContextMenu = require('./ContextMenu-82f9d728.js');
-var expandMore = require('./expand-more-d74e2bd2.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)`
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import styled, { css } from 'styled-components';
+import { P as Popover } from './Popover-20050b91.js';
+import ContextMenu from './widgets/ContextMenu/ContextMenu.js';
+import { S as SvgExpandMore } from './expand-more-c5523c46.js';
+
+const Button$1 = styled.button.attrs(applyDefaultTheme)`
   position: relative;
   border-radius: 3px;
   font-family: inherit;
@@ -34,7 +27,7 @@ const Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefau
   ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white'))}
 
   && {
-    ${props => props.secondary && styled.css`
+    ${props => props.secondary && css`
         background: ${props => props.theme.getColor('gray-200')};
         border-color: ${props => props.theme.getColor('gray-200')};
 
@@ -49,7 +42,7 @@ const Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefau
   }
 
   && {
-    ${props => props.outlined && styled.css`
+    ${props => props.outlined && css`
         background: transparent;
         transition: none;
 
@@ -69,7 +62,7 @@ const Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefau
   }
 
   && {
-    ${props => props.outlined && props.secondary && styled.css`
+    ${props => props.outlined && props.secondary && css`
         ${props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'))}
 
         ${props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))}
@@ -86,7 +79,7 @@ const Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefau
   }
 
   && {
-    ${props => props.outlined && props.secondary && props.dropdownItems && styled.css`
+    ${props => props.outlined && props.secondary && props.dropdownItems && css`
         &:hover,
         &.dropdown-is-active {
           ${props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))}
@@ -94,30 +87,30 @@ const Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefau
       `};
   }
 
-  ${props => props.block && styled.css`
+  ${props => props.block && css`
       width: 100%;
     `};
 
-  ${props => props.disabled && styled.css`
+  ${props => props.disabled && css`
       opacity: 0.5;
       cursor: not-allowed;
       pointer-events: none;
     `};
 
-  ${props => props.size === 'x-small' && styled.css`
+  ${props => props.size === 'x-small' && css`
       padding: 1px 16px;
       height: 24px;
     `};
 
-  ${props => props.size === 'small' && styled.css`
+  ${props => props.size === 'small' && css`
       padding: 6px 16px;
     `};
 
-  ${props => props.size === 'large' && styled.css`
+  ${props => props.size === 'large' && css`
       padding: 16px 16px;
     `};
 
-  ${props => props.singleAction && styled.css`
+  ${props => props.singleAction && css`
       display: flex;
       align-items: center;
       gap: ${props.singleActionGap}px;
@@ -125,12 +118,12 @@ const Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefau
       transition: all 250ms, opacity 200ms;
     `};
 
-  ${props => props.width && styled.css`
+  ${props => props.width && css`
       min-width: ${props.width}px;
       justify-content: center;
     `};
 `;
-const ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ButtonContent = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -144,23 +137,23 @@ const ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDef
     max-height: 16px;
     margin-right: 8px;
 
-    ${props => props.size === 'small' && styled.css`
+    ${props => props.size === 'small' && css`
         max-width: 13px;
         max-height: 13px;
       `};
 
-    ${props => props.size === 'x-small' && styled.css`
+    ${props => props.size === 'x-small' && css`
         max-width: 11px;
         max-height: 11px;
       `};
   }
 
-  ${props => props.$loading && styled.css`
+  ${props => props.$loading && css`
       transform: scale(0.95);
       opacity: 0;
     `}
 
-  ${props => props.singleAction && styled.css`
+  ${props => props.singleAction && css`
       svg {
         width: 100% !important;
         height: 100% !important;
@@ -168,7 +161,7 @@ const ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDef
       }
     `};
 `;
-const LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const LoadingIndicator = styled.div.attrs(applyDefaultTheme)`
   position: absolute;
   height: 100%;
   width: 100%;
@@ -180,62 +173,62 @@ const LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.apply
   transition: opacity 200ms;
   box-sizing: border-box;
 
-  ${props => props.$loading && styled.css`
+  ${props => props.$loading && css`
       opacity: 1;
     `}
 `;
-const LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)`
+const LoadingIndicatorSvg = styled.svg.attrs(applyDefaultTheme)`
   height: 100%;
   color: inherit;
   transform: rotate(-88deg);
 `;
-const LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)`
+const LoadingIndicatorSvgCircle = styled.circle.attrs(applyDefaultTheme)`
   transition: stroke-dashoffset 300ms linear;
   stroke-dasharray: 113;
 `;
-const ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+const ButtonWrapper = styled.span.attrs(applyDefaultTheme)`
   white-space: nowrap;
   display: flex;
-  ${props => props.block && styled.css`
+  ${props => props.block && css`
       width: 100%;
     `}
 `;
-const MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MainButtonWrapper = styled.div.attrs(applyDefaultTheme)`
   border-radius: 3px;
-  ${props => props.block && styled.css`
+  ${props => props.block && css`
       width: 100%;
       display: flex;
     `}
 
   ${props => {
-  return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css`
+  return (props.activeDropdown || props.dropdownItems) && !props.outlined && css`
         background: ${props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500')};
       `;
 }};
 `;
-const MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MainButtonContainer = styled.div.attrs(applyDefaultTheme)`
   display: inline-block;
 
-  ${props => props.block && styled.css`
+  ${props => props.block && css`
       flex: 1;
       width: 100%;
     `}
 
   button {
-    ${props => (props.activeDropdown || props.dropdownItems) && styled.css`
+    ${props => (props.activeDropdown || props.dropdownItems) && css`
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
       `};
 
-    ${props => (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css`
+    ${props => (props.activeDropdown || props.dropdownItems) && props.outlined && css`
         border-right: none;
       `};
   }
 `;
-const MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MainButtonContainerSingle = styled.div.attrs(applyDefaultTheme)`
   display: inline-block;
   width: 100%;
-  ${props => props.singleAction && styled.css`
+  ${props => props.singleAction && css`
       display: flex;
       align-items: center;
       border-radius: 3px !important;
@@ -243,13 +236,13 @@ const MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTh
     `};
 
   button {
-    ${props => (props.activeDropdown || props.dropdownItems) && styled.css`
+    ${props => (props.activeDropdown || props.dropdownItems) && css`
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
       `};
   }
 `;
-const DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const DropdownButtonContainer = styled.div.attrs(applyDefaultTheme)`
   display: inline-block;
 
   button {
@@ -268,7 +261,7 @@ const DropdownButtonContainer = styled__default["default"].div.attrs(defaultThem
   }
 `;
 
-const Button = React__default["default"].forwardRef(function Button({
+const Button = React__default.forwardRef(function Button({
   onClickEffect,
   singleAction = false,
   activeDropdown = false,
@@ -287,10 +280,10 @@ const Button = React__default["default"].forwardRef(function Button({
   border = 2,
   ...props
 }, forwardedRef) {
-  const [loadingState, setLoadingState] = React.useState(loading || false);
-  const [loadingStep, setLoadingStep] = React.useState(113);
-  const loadingInterval = React.useRef(0);
-  const [dropdownIsActive, setDropdownIsActive] = React.useState(false);
+  const [loadingState, setLoadingState] = useState(loading || false);
+  const [loadingStep, setLoadingStep] = useState(113);
+  const loadingInterval = useRef(0);
+  const [dropdownIsActive, setDropdownIsActive] = useState(false);
   const enableLoading = () => {
     loadingInterval.current = setInterval(() => {
       setLoadingStep(currentLoadingStep => {
@@ -311,7 +304,7 @@ const Button = React__default["default"].forwardRef(function Button({
       setLoadingStep(113);
     }, 500);
   };
-  React.useEffect(() => {
+  useEffect(() => {
     if (loading) {
       enableLoading();
     } else {
@@ -325,18 +318,18 @@ const Button = React__default["default"].forwardRef(function Button({
   const handleDropdownClose = () => {
     setDropdownIsActive(false);
   };
-  return React__default["default"].createElement(ButtonWrapper, null, !singleAction ? React__default["default"].createElement(MainButtonWrapper, {
+  return React__default.createElement(ButtonWrapper, null, !singleAction ? React__default.createElement(MainButtonWrapper, {
     activeDropdown: activeDropdown,
     dropdownItems: dropdownItems,
     outlined: outlined,
     secondary: secondary,
     block: block
-  }, React__default["default"].createElement(MainButtonContainer, {
+  }, React__default.createElement(MainButtonContainer, {
     dropdownItems: dropdownItems,
     secondary: secondary,
     outlined: outlined,
     block: block
-  }, React__default["default"].createElement(Button$1, _rollupPluginBabelHelpers._extends({
+  }, React__default.createElement(Button$1, _extends({
     ref: forwardedRef,
     onClick: onClickEffect,
     border: border,
@@ -350,17 +343,17 @@ const Button = React__default["default"].forwardRef(function Button({
     className: className,
     "aria-busy": disabled,
     width: width
-  }, props), React__default["default"].createElement(ButtonContent, {
+  }, props), React__default.createElement(ButtonContent, {
     $loading: loadingState,
     size: size
-  }, icon, children), React__default["default"].createElement(LoadingIndicator, {
+  }, icon, children), React__default.createElement(LoadingIndicator, {
     $loading: loadingState,
     style: {
       opacity: loadingState ? 1 : 0
     }
-  }, React__default["default"].createElement(LoadingIndicatorSvg, {
+  }, React__default.createElement(LoadingIndicatorSvg, {
     viewBox: "22 22 44 44"
-  }, React__default["default"].createElement(LoadingIndicatorSvgCircle, {
+  }, React__default.createElement(LoadingIndicatorSvgCircle, {
     cx: "44",
     cy: "44",
     r: "18",
@@ -370,17 +363,17 @@ const Button = React__default["default"].forwardRef(function Button({
     style: {
       strokeDashoffset: `${loadingStep}px`
     }
-  }))))), (activeDropdown || dropdownItems) && React__default["default"].createElement(DropdownButtonContainer, {
+  }))))), (activeDropdown || dropdownItems) && React__default.createElement(DropdownButtonContainer, {
     dropdownItems: dropdownItems,
     secondary: secondary,
     outlined: outlined
-  }, React__default["default"].createElement(Popover.Popover, {
-    content: React__default["default"].createElement(ContextMenu.ContextMenu, null, dropdownItems),
+  }, React__default.createElement(Popover, {
+    content: React__default.createElement(ContextMenu, null, dropdownItems),
     placement: 'bottom-end',
     arrow: false,
     contextMenu: true,
     onHide: handleDropdownClose
-  }, React__default["default"].createElement(Button$1, {
+  }, React__default.createElement(Button$1, {
     ref: forwardedRef,
     singleAction: singleAction,
     singleActionGap: singleActionGap,
@@ -394,20 +387,20 @@ const Button = React__default["default"].forwardRef(function Button({
     onClick: handleDropdownButtonClick,
     className: dropdownIsActive ? 'dropdown-is-active' : '',
     width: width
-  }, React__default["default"].createElement(expandMore.SvgExpandMore, null))))) : React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(MainButtonContainerSingle, {
+  }, React__default.createElement(SvgExpandMore, null))))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(MainButtonContainerSingle, {
     dropdownItems: dropdownItems,
     secondary: secondary,
     outlined: outlined,
     className: className
-  }, React__default["default"].createElement(DropdownButtonContainer, {
+  }, React__default.createElement(DropdownButtonContainer, {
     singleAction: singleAction
-  }, React__default["default"].createElement(Popover.Popover, {
-    content: React__default["default"].createElement(ContextMenu.ContextMenu, null, dropdownItems),
+  }, React__default.createElement(Popover, {
+    content: React__default.createElement(ContextMenu, null, dropdownItems),
     placement: 'bottom-end',
     arrow: false,
     contextMenu: true,
     onHide: handleDropdownClose
-  }, React__default["default"].createElement(Button$1, {
+  }, React__default.createElement(Button$1, {
     ref: forwardedRef,
     singleAction: singleAction,
     singleActionGap: singleActionGap,
@@ -421,29 +414,29 @@ const Button = React__default["default"].forwardRef(function Button({
     onClick: handleDropdownButtonClick,
     className: dropdownIsActive ? 'dropdown-is-active' : '',
     width: width
-  }, React__default["default"].createElement(ButtonContent, {
+  }, React__default.createElement(ButtonContent, {
     $loading: loadingState,
     size: size,
     singleAction: singleAction
-  }, icon, children), React__default["default"].createElement(expandMore.SvgExpandMore, null)))))));
+  }, icon, children), React__default.createElement(SvgExpandMore, null)))))));
 });
 Button.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClickEffect: defaultTheme.PropTypes.func,
-  singleAction: defaultTheme.PropTypes.bool,
-  activeDropdown: defaultTheme.PropTypes.bool,
-  dropdownItems: defaultTheme.PropTypes.node,
-  secondary: defaultTheme.PropTypes.bool,
-  outlined: defaultTheme.PropTypes.bool,
-  border: defaultTheme.PropTypes.number,
-  block: defaultTheme.PropTypes.bool,
-  icon: defaultTheme.PropTypes.element,
-  size: defaultTheme.PropTypes.oneOf(['x-small', 'small', 'normal', 'large']),
-  disabled: defaultTheme.PropTypes.bool,
-  loading: defaultTheme.PropTypes.bool,
-  className: defaultTheme.PropTypes.string,
-  children: defaultTheme.PropTypes.any.isRequired,
-  singleActionGap: defaultTheme.PropTypes.number,
-  width: defaultTheme.PropTypes.number
+  onClickEffect: PropTypes.func,
+  singleAction: PropTypes.bool,
+  activeDropdown: PropTypes.bool,
+  dropdownItems: PropTypes.node,
+  secondary: PropTypes.bool,
+  outlined: PropTypes.bool,
+  border: PropTypes.number,
+  block: PropTypes.bool,
+  icon: PropTypes.element,
+  size: PropTypes.oneOf(['x-small', 'small', 'normal', 'large']),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.any.isRequired,
+  singleActionGap: PropTypes.number,
+  width: PropTypes.number
 } : {};
 
-exports.Button = Button;
+export { Button as B };

package/build/{Checkbox-0b8faf49.js → Checkbox-4a5fd716.js}

@@ -1,22 +1,15 @@
-'use strict';
-
-var React = require('react');
-var nanoid = require('nanoid');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-var lodash = require('lodash');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+import React__default, { useState, useMemo } from 'react';
+import { nanoid } from 'nanoid';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import { isBoolean, isEmpty } from 'lodash';
+import styled, { css } from 'styled-components';
 
 const checkboxSize = '18px';
-const Checkbox$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Checkbox$1 = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   flex-direction: column;
 `;
-const CheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const CheckIcon = styled.div.attrs(applyDefaultTheme)`
   opacity: 0;
   transform: scale(0.1);
   transition: all 200ms;
@@ -31,7 +24,7 @@ const CheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefault
     display: block;
   }
 `;
-const IndeterminateCheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const IndeterminateCheckIcon = styled.div.attrs(applyDefaultTheme)`
   opacity: 0;
   transform: scale(0.1);
   transition: all 200ms;
@@ -42,7 +35,7 @@ const IndeterminateCheckIcon = styled__default["default"].div.attrs(defaultTheme
   background: ${props => props.theme.getColor('gray-100')};
   width: 10px;
 `;
-const CheckboxLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)`
+const CheckboxLabel = styled.label.attrs(applyDefaultTheme)`
   display: inline-flex;
   position: relative;
   cursor: pointer;
@@ -69,7 +62,7 @@ const CheckboxLabel = styled__default["default"].label.attrs(defaultTheme.applyD
     width: ${checkboxSize};
     height: ${checkboxSize};
     box-sizing: border-box;
-    ${props => props.muted && styled.css`
+    ${props => props.muted && css`
         opacity: 0.75;
       `}
   }
@@ -95,19 +88,19 @@ const CheckboxLabel = styled__default["default"].label.attrs(defaultTheme.applyD
     }
   }
 
-  ${props => props.readOnly && styled.css`
+  ${props => props.readOnly && css`
       opacity: 0.5;
       cursor: default;
       pointer-events: none;
       user-select: text;
     `}
 
-  ${props => props.disabled && styled.css`
+  ${props => props.disabled && css`
       opacity: 0.5;
       cursor: not-allowed;
     `}
 `;
-const CheckboxVisualLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const CheckboxVisualLabel = styled.div.attrs(applyDefaultTheme)`
   padding-left: 10px;
   font-weight: 400;
   font-size: 0.875rem;
@@ -115,20 +108,20 @@ const CheckboxVisualLabel = styled__default["default"].div.attrs(defaultTheme.ap
 
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
 `;
-const Description = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)`
+const Description = styled.p.attrs(applyDefaultTheme)`
   margin: 0.375rem 0 0 0;
   font-size: 0.75rem;
   line-height: 1.333;
 
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
 
-  ${props => props.error && styled.css`
+  ${props => props.error && css`
       content: 'error';
       ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
     `}
 `;
 
-const Checkbox = React__default["default"].forwardRef(function Checkbox({
+const Checkbox = React__default.forwardRef(function Checkbox({
   checked,
   defaultChecked,
   disabled,
@@ -145,33 +138,33 @@ const Checkbox = React__default["default"].forwardRef(function Checkbox({
   className,
   style
 }, forwardedRef) {
-  const [uniqueId] = React.useState(nanoid.nanoid());
-  const hasError = React.useMemo(() => {
-    if (lodash.isBoolean(error)) {
+  const [uniqueId] = useState(nanoid());
+  const hasError = useMemo(() => {
+    if (isBoolean(error)) {
       return error;
     }
-    return !lodash.isEmpty(error);
+    return !isEmpty(error);
   }, [error]);
-  const descriptionText = React.useMemo(() => {
-    if (!lodash.isEmpty(error)) {
+  const descriptionText = useMemo(() => {
+    if (!isEmpty(error)) {
       return error;
     }
-    if (!lodash.isEmpty(description)) {
+    if (!isEmpty(description)) {
       return description;
     }
     return null;
   }, [description, error]);
-  return React__default["default"].createElement(Checkbox$1, {
+  return React__default.createElement(Checkbox$1, {
     className: className,
     disabled: disabled,
     readOnly: readOnly,
     style: style
-  }, React__default["default"].createElement(CheckboxLabel, {
+  }, React__default.createElement(CheckboxLabel, {
     disabled: disabled,
     muted: muted,
     readOnly: readOnly,
     htmlFor: uniqueId
-  }, React__default["default"].createElement("input", {
+  }, React__default.createElement("input", {
     ref: forwardedRef,
     id: uniqueId,
     checked: checked,
@@ -184,32 +177,32 @@ const Checkbox = React__default["default"].forwardRef(function Checkbox({
     onChange: onChange,
     onBlur: onBlur,
     "data-indeterminate": indeterminate
-  }), React__default["default"].createElement(IndeterminateCheckIcon, null), React__default["default"].createElement(CheckIcon, null, React__default["default"].createElement("svg", {
+  }), React__default.createElement(IndeterminateCheckIcon, null), React__default.createElement(CheckIcon, null, React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 10.9 8.45"
-  }, React__default["default"].createElement("path", {
+  }, React__default.createElement("path", {
     d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
     fill: "currentColor"
-  }))), (typeof label === 'string' && label.length > 0 || typeof label === 'object') && React__default["default"].createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default["default"].createElement(Description, {
+  }))), (typeof label === 'string' && label.length > 0 || typeof label === 'object') && React__default.createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default.createElement(Description, {
     error: hasError
   }, descriptionText));
 });
 Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
-  checked: defaultTheme.PropTypes.bool,
-  defaultChecked: defaultTheme.PropTypes.bool,
-  label: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]),
-  disabled: defaultTheme.PropTypes.bool,
-  readOnly: defaultTheme.PropTypes.bool,
-  name: defaultTheme.PropTypes.string,
-  value: defaultTheme.PropTypes.string,
-  description: defaultTheme.PropTypes.string,
-  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
-  indeterminate: defaultTheme.PropTypes.bool,
-  muted: defaultTheme.PropTypes.bool,
-  onChange: defaultTheme.PropTypes.func,
-  onBlur: defaultTheme.PropTypes.func,
-  className: defaultTheme.PropTypes.string,
-  style: defaultTheme.PropTypes.object
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  description: PropTypes.string,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  indeterminate: PropTypes.bool,
+  muted: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object
 } : {};
 Checkbox.defaultProps = {
   disabled: false,
@@ -217,4 +210,4 @@ Checkbox.defaultProps = {
   indeterminate: false
 };
 
-exports.Checkbox = Checkbox;
+export { Checkbox as C };