@pedidopago/ui 1.1.0 → 1.1.4

package/dist/components/Card/index.js

@@ -15,8 +15,16 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 
 var _ButtonCard = require("./ButtonCard");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function Card(_ref) {
   var title = _ref.title,
       subtitle = _ref.subtitle,
@@ -35,25 +43,41 @@ function Card(_ref) {
       btPrimary = _ref.btPrimary,
       btSecondary = _ref.btSecondary,
       btColumn = _ref.btColumn;
-  return /*#__PURE__*/React.createElement(_styles.CardBody, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.CardBody, {
     outlined: outlined,
     hover: hover,
-    active: active
-  }, media && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_styles.Media, {
-    src: media
-  })), /*#__PURE__*/React.createElement(_styles.CardContent, {
-    padding: padding
-  }, /*#__PURE__*/React.createElement(_styles.HeaderCard, null, title && /*#__PURE__*/React.createElement(_styles.Title, {
-    color: titleColor
-  }, title), icon && (tooltip ? /*#__PURE__*/React.createElement(_Tooltip.default, tooltip, icon && /*#__PURE__*/React.createElement(_Icon.default, {
-    name: icon
-  })) : icon && /*#__PURE__*/React.createElement(_Icon.default, {
-    name: icon
-  }))), subtitle && /*#__PURE__*/React.createElement(_styles.SubtitleText, null, subtitle), supporingText && /*#__PURE__*/React.createElement(_styles.SupporingText, null, supporingText), expand ? /*#__PURE__*/React.createElement(_Expansion.Expansion, {
-    expandedHeight: expandedHeight
-  }, children) : /*#__PURE__*/React.createElement(_styles.Content, null, children), /*#__PURE__*/React.createElement(_ButtonCard.ButtonCardArea, {
-    btPrimary: btPrimary,
-    btSecondary: btSecondary,
-    btColumn: btColumn
-  })));
+    active: active,
+    children: [media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Media, {
+        src: media
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.CardContent, {
+      padding: padding,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.HeaderCard, {
+        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Title, {
+          color: titleColor,
+          children: title
+        }), icon && (tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, _objectSpread(_objectSpread({}, tooltip), {}, {
+          children: icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            name: icon
+          })
+        })) : icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          name: icon
+        }))]
+      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SubtitleText, {
+        children: subtitle
+      }), supporingText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SupporingText, {
+        children: supporingText
+      }), expand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Expansion.Expansion, {
+        expandedHeight: expandedHeight,
+        children: children
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Content, {
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonCard.ButtonCardArea, {
+        btPrimary: btPrimary,
+        btSecondary: btSecondary,
+        btColumn: btColumn
+      })]
+    })]
+  });
 }

package/dist/components/Card/styles.d.ts

@@ -1,57 +1,57 @@
-/// <reference types="react" />
-import { BodyCard } from './types';
-export declare const CardBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & BodyCard, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CardContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    padding?: string | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HeaderCard: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ChildrenBody: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    expand: boolean;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Title: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    color?: string | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Content: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SubtitleText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-export declare const SupporingText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
-export declare const Media: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const SupText: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const ButtonArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { BodyCard } from './types';
+export declare const CardBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & BodyCard, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CardContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    padding?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderCard: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ChildrenBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    expand: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    color?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SubtitleText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const SupporingText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const Media: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const SupText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const ButtonArea: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/Card/types.d.ts

@@ -1,42 +1,42 @@
-import React from 'react';
-import { ThemeProps } from 'src';
-import { IButtonProps } from '../Button/types';
-import { IconName } from '../Icon/types';
-import { IInputProps, positionType } from '../Tooltip/types';
-import { CSSObject } from '@emotion/react';
-export declare type toolTipCard = {
-    label: string;
-    position: positionType;
-    backgroundColor: string;
-};
-export interface BodyCard {
-    outlined?: boolean;
-    theme?: ThemeProps;
-    hover?: CSSObject;
-    active?: CSSObject;
-}
-export interface Buttons {
-    btPrimary?: IButtonProps;
-    btSecondary?: IButtonProps;
-    btColumn?: boolean;
-}
-export interface cardI {
-    title?: string;
-    subtitle?: string;
-    media?: string;
-    supporingText?: string;
-    tooltip?: IInputProps;
-    icon?: IconName;
-    outlined?: boolean;
-    expand?: boolean;
-    expandedHeight?: string;
-    titleColor?: string;
-    hover?: CSSObject;
-    active?: CSSObject;
-    padding?: string;
-    children?: React.ReactChild;
-    btPrimary?: IButtonProps;
-    btSecondary?: IButtonProps;
-    btColumn?: boolean;
-}
+import React from 'react';
+import { ThemeProps } from 'src';
+import { IButtonProps } from '../Button/types';
+import { IconName } from '../Icon/types';
+import { IInputProps, positionType } from '../Tooltip/types';
+import { CSSObject } from '@emotion/react';
+export declare type toolTipCard = {
+    label: string;
+    position: positionType;
+    backgroundColor: string;
+};
+export interface BodyCard {
+    outlined?: boolean;
+    theme?: ThemeProps;
+    hover?: CSSObject;
+    active?: CSSObject;
+}
+export interface Buttons {
+    btPrimary?: IButtonProps;
+    btSecondary?: IButtonProps;
+    btColumn?: boolean;
+}
+export interface cardI {
+    title?: string;
+    subtitle?: string;
+    media?: string;
+    supporingText?: string;
+    tooltip?: IInputProps;
+    icon?: IconName;
+    outlined?: boolean;
+    expand?: boolean;
+    expandedHeight?: string;
+    titleColor?: string;
+    hover?: CSSObject;
+    active?: CSSObject;
+    padding?: string;
+    children?: React.ReactChild;
+    btPrimary?: IButtonProps;
+    btSecondary?: IButtonProps;
+    btColumn?: boolean;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/CheckboxInput/checkbox-input.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=checkbox-input.test.d.ts.map

package/dist/components/CheckboxInput/checkbox-input.test.js

@@ -8,8 +8,16 @@ var _react = require("@testing-library/react");
 
 var _ = _interopRequireDefault(require("."));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var mockPropCheckboxChildren = [{
   label: 'Children-1',
   value: 'children-1',
@@ -25,7 +33,7 @@ var mockPropCheckboxChildren = [{
 }];
 
 var makeSut = function makeSut(props) {
-  var sut = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props));
+  var sut = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props)));
   var checkbox = sut.container.querySelector('input');
   var label = sut.container.querySelector('label');
   return {

package/dist/components/CheckboxInput/components/MultipleCheckbox.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IMultipleCheckboxProps } from '../types';
-declare const MultipleCheckbox: FC<IMultipleCheckboxProps>;
-export default MultipleCheckbox;
+import { FC } from 'react';
+import { IMultipleCheckboxProps } from '../types';
+declare const MultipleCheckbox: FC<IMultipleCheckboxProps>;
+export default MultipleCheckbox;
 //# sourceMappingURL=MultipleCheckbox.d.ts.map

package/dist/components/CheckboxInput/components/MultipleCheckbox.js

@@ -11,12 +11,12 @@ var _Icon = _interopRequireDefault(require("../../Icon"));
 
 var _styles = require("../styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["id", "label", "color", "checkboxChildren", "isDisabled", "onChangeValue"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -161,13 +161,13 @@ var MultipleCheckbox = function MultipleCheckbox(_ref) {
     if (!parentChecked) {
       return null;
     } else if (hasDeselectedChildren) {
-      return /*#__PURE__*/React.createElement(_Icon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: "minus",
         color: "neutral.white",
         size: 20
       });
     } else {
-      return /*#__PURE__*/React.createElement(_Icon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: "check",
         color: "neutral.white",
         size: 20
@@ -175,45 +175,60 @@ var MultipleCheckbox = function MultipleCheckbox(_ref) {
     }
   }
 
-  return /*#__PURE__*/React.createElement(_styles.MultipleWrapper, null, /*#__PURE__*/React.createElement(_styles.Wrapper, null, /*#__PURE__*/React.createElement(_styles.CheckBoxWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_styles.Checkbox, _extends({
-    id: id,
-    type: "checkbox",
-    color: color,
-    checked: parentChecked,
-    onChange: handleParentChange,
-    disabled: isDisabled
-  }, rest)), handleRenderParentIcon())), label && /*#__PURE__*/React.createElement(_styles.Label, {
-    htmlFor: id,
-    isDisabled: isDisabled
-  }, label)), /*#__PURE__*/React.createElement(_styles.ChildrensWrapper, {
-    role: "list"
-  }, childrenData.map(function (_ref2) {
-    var label = _ref2.label,
-        id = _ref2.id,
-        value = _ref2.value,
-        hasSelected = _ref2.hasSelected;
-    return /*#__PURE__*/React.createElement(_styles.Wrapper, {
-      key: value,
-      role: "listitem"
-    }, /*#__PURE__*/React.createElement(_styles.CheckBoxWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_styles.Checkbox, {
-      type: "checkbox",
-      disabled: isDisabled,
-      id: id,
-      color: color,
-      checked: hasSelected,
-      onChange: function onChange(event) {
-        return handleChildrenChange(event, id);
-      }
-    }), hasSelected ? /*#__PURE__*/React.createElement(_Icon.default, {
-      size: 20,
-      name: "check",
-      color: "neutral.white"
-    }) : '')), label && /*#__PURE__*/React.createElement(_styles.Label, {
-      htmlFor: id,
-      isDisabled: isDisabled,
-      color: color
-    }, label));
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.MultipleWrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Wrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CheckBoxWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Checkbox, _objectSpread({
+            id: id,
+            type: "checkbox",
+            color: color,
+            checked: parentChecked,
+            onChange: handleParentChange,
+            disabled: isDisabled
+          }, rest)), handleRenderParentIcon()]
+        })
+      }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Label, {
+        htmlFor: id,
+        isDisabled: isDisabled,
+        children: label
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ChildrensWrapper, {
+      role: "list",
+      children: childrenData.map(function (_ref2) {
+        var label = _ref2.label,
+            id = _ref2.id,
+            value = _ref2.value,
+            hasSelected = _ref2.hasSelected;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Wrapper, {
+          role: "listitem",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.CheckBoxWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Checkbox, {
+                type: "checkbox",
+                disabled: isDisabled,
+                id: id,
+                color: color,
+                checked: hasSelected,
+                onChange: function onChange(event) {
+                  return handleChildrenChange(event, id);
+                }
+              }), hasSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                size: 20,
+                name: "check",
+                color: "neutral.white"
+              }) : '']
+            })
+          }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Label, {
+            htmlFor: id,
+            isDisabled: isDisabled,
+            color: color,
+            children: label
+          })]
+        }, value);
+      })
+    })]
+  });
 };
 
 var _default = MultipleCheckbox;

package/dist/components/CheckboxInput/index.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { ICheckboxInputProps } from './types';
-declare const CheckboxInput: FC<ICheckboxInputProps>;
-export default CheckboxInput;
+import { FC } from 'react';
+import { ICheckboxInputProps } from './types';
+declare const CheckboxInput: FC<ICheckboxInputProps>;
+export default CheckboxInput;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/CheckboxInput/index.js

@@ -13,11 +13,17 @@ var _MultipleCheckbox = _interopRequireDefault(require("./components/MultipleChe
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["label", "id", "isDisabled", "isInderteminate", "defaultIsChecked", "isMultiple", "color", "checkboxChildren", "onChangeValue"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -60,7 +66,7 @@ var CheckboxInput = function CheckboxInput(_ref) {
   }
 
   if (isMultiple && checkboxChildren) {
-    return /*#__PURE__*/React.createElement(_MultipleCheckbox.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultipleCheckbox.default, {
       checkboxChildren: checkboxChildren,
       id: id,
       color: color,
@@ -73,22 +79,27 @@ var CheckboxInput = function CheckboxInput(_ref) {
   (0, _react.useEffect)(function () {
     setChecked(defaultIsChecked || false);
   }, [defaultIsChecked]);
-  return /*#__PURE__*/React.createElement(_styles.Wrapper, null, /*#__PURE__*/React.createElement(_styles.CheckboxWrapper, null, /*#__PURE__*/React.createElement(_styles.Checkbox, _extends({
-    type: "checkbox",
-    id: id,
-    color: color,
-    checked: checked,
-    onChange: handleChange,
-    disabled: isDisabled
-  }, rest)), checked && /*#__PURE__*/React.createElement(_Icon.default, {
-    name: isInderteminate ? 'minus' : 'check',
-    size: 16,
-    color: "#fff"
-  })), label && /*#__PURE__*/React.createElement(_styles.Label, {
-    isDisabled: isDisabled,
-    htmlFor: id,
-    color: color
-  }, label));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.CheckboxWrapper, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Checkbox, _objectSpread({
+        type: "checkbox",
+        id: id,
+        color: color,
+        checked: checked,
+        onChange: handleChange,
+        disabled: isDisabled
+      }, rest)), checked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: isInderteminate ? 'minus' : 'check',
+        size: 16,
+        color: "#fff"
+      })]
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Label, {
+      isDisabled: isDisabled,
+      htmlFor: id,
+      color: color,
+      children: label
+    })]
+  });
 };
 
 var _default = CheckboxInput;

package/dist/components/CheckboxInput/styles.d.ts

@@ -1,32 +1,32 @@
-/// <reference types="react" />
-import { Theme } from '@emotion/react';
-import { IStyledCheckboxInput } from './types';
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CheckboxWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Checkbox: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledCheckboxInput, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const Label: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyledCheckboxInput, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-export declare const ChildrensWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CheckBoxWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MultipleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { Theme } from '@emotion/react';
+import { IStyledCheckboxInput } from './types';
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CheckboxWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Checkbox: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledCheckboxInput, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyledCheckboxInput, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const ChildrensWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CheckBoxWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MultipleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map