@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTCheckbox/UTCheckbox.stories.js

@@ -0,0 +1,231 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { useArgs } from '@storybook/preview-api';
+import { joinArgTypes } from 'stories/utils';
+import UTCheckbox from '.';
+export default {
+  title: 'Energy-UI/UTCheckbox',
+  component: UTCheckbox,
+  args: {
+    version: 'V1',
+    title: 'Checkbox Label'
+  },
+  argTypes: {
+    version: {
+      control: 'inline-radio',
+      options: ['V0', 'V1'],
+      description: 'Versión del componente a utilizar.',
+      table: {
+        defaultValue: {
+          summary: 'V1'
+        },
+        type: {
+          summary: joinArgTypes(['V0', 'V1'])
+        }
+      }
+    },
+    value: {
+      control: 'boolean',
+      description: 'Estado del checkbox (marcado/no marcado).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Determina si el checkbox está deshabilitado.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    label: {
+      control: 'text',
+      description: 'Texto de la etiqueta.',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+      description: 'Color del componente (Material-UI).',
+      table: {
+        defaultValue: {
+          summary: 'primary'
+        },
+        type: {
+          summary: joinArgTypes(['primary', 'secondary'])
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V0'
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Label para el checkbox.',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'button'],
+      description: 'Variante de estilo.',
+      table: {
+        defaultValue: {
+          summary: 'default'
+        },
+        type: {
+          summary: joinArgTypes(['default', 'button'])
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Indica si el campo es obligatorio.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    indeterminate: {
+      control: 'boolean',
+      description: 'Determina si el checkbox está en estado indeterminado.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    withUpperTitle: {
+      control: 'boolean',
+      description: 'Determina si se debe mostrar el título superior.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    reversed: {
+      control: 'boolean',
+      description: 'Invierte el orden del checkbox y la etiqueta.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    },
+    icon: {
+      control: 'text',
+      description: 'Icono accesorio.',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      },
+      if: {
+        arg: 'version',
+        eq: 'V1'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Componente de checkbox que soporta dos versiones (V0 y V1) con diferentes estilos y funcionalidades.'
+      }
+    }
+  }
+};
+const Template = args => {
+  const [{
+    value
+  }, updateArgs] = useArgs();
+  const handleChange = newValue => {
+    updateArgs({
+      value: newValue
+    });
+    if (args.onChange) args.onChange(newValue);
+  };
+  return /*#__PURE__*/React.createElement(UTCheckbox, _extends({}, args, {
+    value: value,
+    onChange: handleChange
+  }));
+};
+export const Playground = {
+  render: Template,
+  name: 'Playground'
+};
+export const VersionV0 = {
+  args: {
+    version: 'V0',
+    label: 'Versión V0'
+  },
+  render: Template,
+  name: 'Versión V0'
+};
+export const VersionV1 = {
+  args: {
+    version: 'V1',
+    title: 'Versión V1'
+  },
+  render: Template,
+  name: 'Versión V1'
+};

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

@@ -1 +1,19 @@
-import React from"react";import{string}from"prop-types";import V0 from"./versions/V0";import V1 from"./versions/V1";const UTCheckbox=_ref=>{let{version:version="V0",...props}=_ref;const Component={V0:V0,V1:V1}[version];return React.createElement(Component,props)};UTCheckbox.propTypes={version:string};export default UTCheckbox;
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTCheckbox = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTCheckbox.propTypes = {
+  version: string
+};
+export default UTCheckbox;

package/dist/esm/components/UTCheckbox/versions/V0/constants.js

@@ -1 +1,5 @@
-export const tippyProps={appendTo:()=>document.body,interactive:!1,maxWidth:"none"};
+export const tippyProps = {
+  appendTo: () => document.body,
+  interactive: false,
+  maxWidth: 'none'
+};

package/dist/esm/components/UTCheckbox/versions/V0/index.js

@@ -1 +1,133 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React,{Fragment,useEffect}from"react";import{func,string,bool,number,shape,oneOfType,element,object,node,objectOf}from"prop-types";import Checkbox from"@material-ui/core/Checkbox";import FormControlLabel from"@material-ui/core/FormControlLabel";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{useMutableState}from"@widergy/energy-hooks";import{inputPropTypes,metaPropTypes}from"../../../../types/formTypes";import{mergeClasses}from"../../../../utils/classesUtils";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import WithTheme from"../../../WithTheme";var Checked=function(props){return React.createElement("svg",props,React.createElement("path",{d:"M10 14Zm0 3-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"}))};Checked.defaultProps={xmlns:"http://www.w3.org/2000/svg",viewBox:"5 6.58 14 10.42"};import{retrieveStyle,retrieveMuiTheme}from"./theme";import{tippyProps}from"./constants";import styles from"./styles.module.scss";const UTCheckbox=_ref=>{let{classes:themeClasses={},classNames:classNames,color:color="primary",checkboxDataTestId:checkboxDataTestId,CustomCheckedIcon:CustomCheckedIcon=Checked,customRowLabel:CustomRowLabel,CustomUncheckedIcon:CustomUncheckedIcon=_ref2=>{let{className:className}=_ref2;return React.createElement("div",{className:className})},disabled:disabled,disableRipple:disableRipple,input:input,item:item,label:label,labelDataTestId:labelDataTestId,labelProps:labelProps={},meta:meta,onChange:onChange,showError:showError,tooltipContent:tooltipContent,useCustomIcons:useCustomIcons,value:value}=_ref;const[checkedRef,setChecked]=useMutableState(value);useEffect(()=>{setChecked(value||(null==input?void 0:input.value))},[null==input?void 0:input.value,value]);const classes=mergeClasses(themeClasses,classNames);return React.createElement(Fragment,null,React.createElement(FormControlLabel,{disabled:disabled,control:React.createElement(UTTooltip,{content:tooltipContent,stringContentClassName:styles.disableSelectionTooltip,tippyProps:tippyProps},React.createElement("span",null,React.createElement(Checkbox,{classes:{colorPrimary:classes.checkboxColorPrimary,colorSecondary:classes.checkboxColorSecondary},checkedIcon:useCustomIcons&&React.createElement(CustomCheckedIcon,{className:classes.checkedIcon}),inputProps:{"data-testid":checkboxDataTestId},icon:useCustomIcons&&React.createElement(CustomUncheckedIcon,{className:classes.uncheckedIcon}),checked:checkedRef.current||!1,onChange:event=>{onChange&&onChange(value),null!=input&&input.onChange&&input.onChange(event.target.checked)},value:(null==input?void 0:input.value)||value,color:color,disableRipple:disableRipple,disabled:disabled}))),label:CustomRowLabel?React.createElement(CustomRowLabel,{item:item}):React.createElement(UTLabel,_extends({className:classes.label,dataTestId:labelDataTestId,variant:"small",withMarkdown:!0},labelProps),label),classes:classes&&{root:classes.root,label:classes.label}}),showError&&shouldShowErrors(meta)&&React.createElement(UTLabel,{colorTheme:"error",variant:"small"},meta.error))};UTCheckbox.propTypes={classes:shape({checkboxColorPrimary:string,checkboxColorSecondary:string}),classNames:objectOf(string),color:string,checkboxDataTestId:string,CustomCheckedIcon:node,customRowLabel:oneOfType([func,element,string]),CustomUncheckedIcon:node,disabled:bool,disableRipple:bool,input:inputPropTypes,item:oneOfType([string,object]),label:oneOfType([number,string]),labelDataTestId:string,labelProps:object,meta:metaPropTypes,onChange:func,showError:bool,tooltipContent:element,useCustomIcons:bool,value:oneOfType([bool,string])};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTCheckbox);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { Fragment, useEffect } from 'react';
+import { func, string, bool, number, shape, oneOfType, element, object, node, objectOf } from 'prop-types';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import { useMutableState } from '@widergy/energy-hooks';
+import { inputPropTypes, metaPropTypes } from '../../../../types/formTypes';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import UTLabel from '../../../UTLabel';
+import UTTooltip from '../../../UTTooltip';
+import WithTheme from '../../../WithTheme';
+var Checked = function Checked(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M10 14Zm0 3-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"
+  }));
+};
+Checked.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "5 6.58 14 10.42"
+};
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+import { tippyProps } from './constants';
+import styles from './styles.module.scss';
+const UTCheckbox = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    color = 'primary',
+    checkboxDataTestId,
+    CustomCheckedIcon = Checked,
+    customRowLabel: CustomRowLabel,
+    CustomUncheckedIcon = _ref2 => {
+      let {
+        className
+      } = _ref2;
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
+      });
+    },
+    disabled,
+    disableRipple,
+    input,
+    item,
+    label,
+    labelDataTestId,
+    labelProps = {},
+    meta,
+    onChange,
+    showError,
+    tooltipContent,
+    useCustomIcons,
+    value
+  } = _ref;
+  const [checkedRef, setChecked] = useMutableState(value);
+  const handleChange = event => {
+    if (onChange) onChange(value);
+    if (input !== null && input !== void 0 && input.onChange) input.onChange(event.target.checked);
+  };
+  useEffect(() => {
+    setChecked(value || (input === null || input === void 0 ? void 0 : input.value));
+  }, [input === null || input === void 0 ? void 0 : input.value, value]);
+  const classes = mergeClasses(themeClasses, classNames);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(FormControlLabel, {
+    disabled: disabled,
+    control: /*#__PURE__*/React.createElement(UTTooltip, {
+      content: tooltipContent,
+      stringContentClassName: styles.disableSelectionTooltip,
+      tippyProps: tippyProps
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, {
+      classes: {
+        colorPrimary: classes.checkboxColorPrimary,
+        colorSecondary: classes.checkboxColorSecondary
+      },
+      checkedIcon: useCustomIcons && /*#__PURE__*/React.createElement(CustomCheckedIcon, {
+        className: classes.checkedIcon
+      }),
+      inputProps: {
+        'data-testid': checkboxDataTestId
+      },
+      icon: useCustomIcons && /*#__PURE__*/React.createElement(CustomUncheckedIcon, {
+        className: classes.uncheckedIcon
+      }),
+      checked: checkedRef.current || false,
+      onChange: handleChange,
+      value: (input === null || input === void 0 ? void 0 : input.value) || value,
+      color: color,
+      disableRipple: disableRipple,
+      disabled: disabled
+    }))),
+    label: CustomRowLabel ? /*#__PURE__*/React.createElement(CustomRowLabel, {
+      item: item
+    }) : /*#__PURE__*/React.createElement(UTLabel, _extends({
+      className: classes.label,
+      dataTestId: labelDataTestId,
+      variant: "small",
+      withMarkdown: true
+    }, labelProps), label),
+    classes: classes && {
+      root: classes.root,
+      label: classes.label
+    }
+  }), showError && shouldShowErrors(meta) && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "error",
+    variant: "small"
+  }, meta.error));
+};
+UTCheckbox.propTypes = {
+  classes: shape({
+    checkboxColorPrimary: string,
+    checkboxColorSecondary: string
+  }),
+  classNames: objectOf(string),
+  color: string,
+  checkboxDataTestId: string,
+  CustomCheckedIcon: node,
+  customRowLabel: oneOfType([func, element, string]),
+  CustomUncheckedIcon: node,
+  disabled: bool,
+  disableRipple: bool,
+  input: inputPropTypes,
+  item: oneOfType([string, object]),
+  label: oneOfType([number, string]),
+  labelDataTestId: string,
+  labelProps: object,
+  meta: metaPropTypes,
+  onChange: func,
+  showError: bool,
+  tooltipContent: element,
+  useCustomIcons: bool,
+  value: oneOfType([bool, string])
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTCheckbox);

package/dist/esm/components/UTCheckbox/versions/V0/theme.js

@@ -1 +1,78 @@
-import{getIn}from"seamless-immutable";import{createTheme}from"@material-ui/core/styles";import Colors from"../../../../scss/variables/colors.module.scss";export const retrieveStyle=_ref=>{let{theme:theme}=_ref;return{checkedIcon:{width:getIn(theme,["UTCheckbox","icon","checked","width"]),height:getIn(theme,["UTCheckbox","icon","checked","height"]),margin:getIn(theme,["UTCheckbox","icon","checked","margin"]),padding:getIn(theme,["UTCheckbox","icon","checked","padding"]),borderRadius:getIn(theme,["UTCheckbox","icon","checked","borderRadius"]),backgroundColor:getIn(theme,["UTCheckbox","icon","checked","backgroundColor"]),fill:getIn(theme,["UTCheckbox","icon","checked","fill"]),border:getIn(theme,["UTCheckbox","icon","checked","border"])},uncheckedIcon:{width:getIn(theme,["UTCheckbox","icon","unchecked","width"]),height:getIn(theme,["UTCheckbox","icon","unchecked","height"]),margin:getIn(theme,["UTCheckbox","icon","unchecked","margin"]),padding:getIn(theme,["UTCheckbox","icon","unchecked","padding"]),borderRadius:getIn(theme,["UTCheckbox","icon","unchecked","borderRadius"]),backgroundColor:getIn(theme,["UTCheckbox","icon","unchecked","backgroundColor"]),fill:getIn(theme,["UTCheckbox","icon","unchecked","fill"]),border:getIn(theme,["UTCheckbox","icon","unchecked","border"])}}};export const retrieveMuiTheme=theme=>createTheme({typography:{fontFamily:getIn(theme,["Fonts","fontFamily"])},overrides:{MuiFormControlLabel:{label:{fontSize:getIn(theme,["UTCheckbox","label","fontSize"],14),color:getIn(theme,["UTCheckbox","label","color"],Colors.primary),"& span":{fontSize:getIn(theme,["UTCheckbox","label","fontSize"],14),color:getIn(theme,["UTCheckbox","label","color"],Colors.primary),"& a":{color:getIn(theme,["UTCheckbox","linkLabel","color"],Colors.primary)}}}},MuiFormHelperText:{root:{fontSize:getIn(theme,["UTCheckbox","helperText","fontSize"],14),color:getIn(theme,["UTCheckbox","helperText","color"],Colors.primary),"&$error":{color:theme.Palette.error["05"]}}},MuiCheckbox:{root:{color:getIn(theme,["UTCheckbox","checkbox","color"],Colors.gray)},colorPrimary:{color:getIn(theme,["UTCheckbox","checkbox","color"],Colors.gray),"&$checked":{color:getIn(theme,["UTCheckbox","checkbox","checkedColor"],Colors.inputPrimary)},"&$disabled":{color:getIn(theme,["UTCheckbox","checkbox","disabledColor"],Colors.gray),opacity:.5},"&$checked$disabled":{color:getIn(theme,["UTCheckbox","checkbox","checkedColor"],Colors.inputPrimary),opacity:.5}}}}});
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    checkedIcon: {
+      width: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'width']),
+      height: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'height']),
+      margin: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'margin']),
+      padding: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'padding']),
+      borderRadius: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'borderRadius']),
+      backgroundColor: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'backgroundColor']),
+      fill: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'fill']),
+      border: getIn(theme, ['UTCheckbox', 'icon', 'checked', 'border'])
+    },
+    uncheckedIcon: {
+      width: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'width']),
+      height: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'height']),
+      margin: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'margin']),
+      padding: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'padding']),
+      borderRadius: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'borderRadius']),
+      backgroundColor: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'backgroundColor']),
+      fill: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'fill']),
+      border: getIn(theme, ['UTCheckbox', 'icon', 'unchecked', 'border'])
+    }
+  };
+};
+export const retrieveMuiTheme = theme => createTheme({
+  typography: {
+    fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    MuiFormControlLabel: {
+      label: {
+        fontSize: getIn(theme, ['UTCheckbox', 'label', 'fontSize'], 14),
+        color: getIn(theme, ['UTCheckbox', 'label', 'color'], Colors.primary),
+        '& span': {
+          fontSize: getIn(theme, ['UTCheckbox', 'label', 'fontSize'], 14),
+          color: getIn(theme, ['UTCheckbox', 'label', 'color'], Colors.primary),
+          '& a': {
+            color: getIn(theme, ['UTCheckbox', 'linkLabel', 'color'], Colors.primary)
+          }
+        }
+      }
+    },
+    MuiFormHelperText: {
+      root: {
+        fontSize: getIn(theme, ['UTCheckbox', 'helperText', 'fontSize'], 14),
+        color: getIn(theme, ['UTCheckbox', 'helperText', 'color'], Colors.primary),
+        '&$error': {
+          color: theme.Palette.error['05']
+        }
+      }
+    },
+    MuiCheckbox: {
+      root: {
+        color: getIn(theme, ['UTCheckbox', 'checkbox', 'color'], Colors.gray)
+      },
+      colorPrimary: {
+        color: getIn(theme, ['UTCheckbox', 'checkbox', 'color'], Colors.gray),
+        '&$checked': {
+          color: getIn(theme, ['UTCheckbox', 'checkbox', 'checkedColor'], Colors.inputPrimary)
+        },
+        '&$disabled': {
+          color: getIn(theme, ['UTCheckbox', 'checkbox', 'disabledColor'], Colors.gray),
+          opacity: 0.5
+        },
+        '&$checked$disabled': {
+          color: getIn(theme, ['UTCheckbox', 'checkbox', 'checkedColor'], Colors.inputPrimary),
+          opacity: 0.5
+        }
+      }
+    }
+  }
+});

package/dist/esm/components/UTCheckbox/versions/V1/README.md

@@ -0,0 +1,41 @@
+# UTCheckbox
+
+## Description
+
+`UTCheckbox` is a customizable checkbox component. It supports various states such as checked, indeterminate, and disabled. Additionally, it includes the option to display a title and supports markdown for advanced formatting.
+
+## Props
+
+| Name               | Type             | Default   | Description                                                                           |
+| ------------------ | ---------------- | --------- | ------------------------------------------------------------------------------------- |
+| actions            | object           |           | Actions to render within `UTFieldLabel`.                                              |
+| checkboxDataTestId | string           |           | Box `data-testid`.                                                                    |
+| classNames         | objectOf(string) |           | Additional class names to apply for further styling.                                  |
+| CustomComponent    | elementType      |           | Custom component to render data next to the checkbox                                  |
+| dataTestId         | string           |           | Whole component `data-testid`.                                                        |
+| disabled           | bool             | false     | Disables the checkbox, making it unclickable.                                         |
+| indeterminate      | bool             | false     | Indicates if the checkbox is in an indeterminate state.                               |
+| isSimple           | bool             | false     | **Deprecated**: Please avoid using this property in future implementations.           |
+| onChange           | func             |           | Function to call when the checkbox state changes.                                     |
+| required           | bool             | false     | Indicates if the checkbox is required.                                                |
+| spacing            | string           | 'medium'  | Defines the spacing between the checkbox and the label. Can be 'small' or 'medium'.   |
+| title              | string           |           | Title to display next to the checkbox. Supports markdown when `withMarkdown` is true. |
+| value              | bool             | false     | Indicates if the checkbox is checked.                                                 |
+| variant            | string           | 'default' | Defines the visual variant of the checkbox.                                           |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTCheckbox from './UTCheckbox';
+
+const Example = () => {
+  const [checked, setChecked] = React.useState(false);
+
+  return <UTCheckbox value={checked} title="Check me" onChange={() => setChecked(!checked)} />;
+};
+
+export default Example;
+```

package/dist/esm/components/UTCheckbox/versions/V1/constants.js

@@ -1 +1,7 @@
-export const CHECKED_ICON="IconCheck";export const INDETERMINATE_ICON="IconMinus";export const SPACING={SMALL:"small",MEDIUM:"medium"};export const BUTTON_VARIANT="button";
+export const CHECKED_ICON = 'IconCheck';
+export const INDETERMINATE_ICON = 'IconMinus';
+export const SPACING = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+export const BUTTON_VARIANT = 'button';

package/dist/esm/components/UTCheckbox/versions/V1/index.js

@@ -1 +1,117 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React,{Fragment,useMemo}from"react";import{arrayOf,bool,elementType,func,objectOf,string}from"prop-types";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{mergeClasses}from"../../../../utils/classesUtils";import UTFieldLabel from"../../../UTFieldLabel";import UTIcon from"../../../UTIcon";import WithTheme from"../../../WithTheme";import UTTouchableWithoutFeedback from"../../../UTTouchableWithoutFeedback";import{buttonTypes}from"../../../../types/buttonTypes";import{metaPropTypes}from"../../../../types/formTypes";import{formatErrorToValidation}from"../../../UTValidation/utils";import UTValidation from"../../../UTValidation";import{BUTTON_VARIANT,CHECKED_ICON,INDETERMINATE_ICON}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const UTCheckbox=_ref=>{let{actions:actions,checkboxDataTestId:checkboxDataTestId,classes:theme,classNames:classNames,CustomComponent:CustomComponent,dataTestId:dataTestId,disabled:disabled,indeterminate:indeterminate,isSimple:isSimple=!1,meta:meta,onChange:onChange=()=>{},required:required,icon:icon,title:title,value:value=!1,variant:variant="default",withUpperTitle:withUpperTitle}=_ref;const classes=useMemo(()=>mergeClasses(theme,classNames),[classNames,theme]),iconName=useMemo(()=>indeterminate?INDETERMINATE_ICON:!0===value?CHECKED_ICON:"",[indeterminate,value]),shouldHighlightLabel=!0===value&&variant===BUTTON_VARIANT,touchableProps={onMouseDown:()=>{!disabled&&onChange&&onChange(!value)},disabled:disabled},RootComponent=variant===BUTTON_VARIANT?UTTouchableWithoutFeedback:"div",BoxContainerComponent=variant===BUTTON_VARIANT?"div":UTTouchableWithoutFeedback,rootComponentProps=variant===BUTTON_VARIANT?touchableProps:{},boxContainerProps=variant===BUTTON_VARIANT?{}:touchableProps,error=meta&&shouldShowErrors(meta)&&meta.error||"",validationData=formatErrorToValidation(error);return React.createElement(Fragment,null,withUpperTitle&&React.createElement(UTFieldLabel,{actions:actions,required:required},title),React.createElement(RootComponent,_extends({className:classes.container},variant===BUTTON_VARIANT?{dataTestId:dataTestId}:{"data-testid":dataTestId},rootComponentProps),React.createElement("div",{className:classes.content},React.createElement(BoxContainerComponent,_extends({className:classes.boxContainer},variant===BUTTON_VARIANT?{"data-testid":checkboxDataTestId}:{dataTestId:checkboxDataTestId},boxContainerProps),isSimple?React.createElement(UTIcon,{name:"IconCheck",shade:"04",colorTheme:"accent",className:value?void 0:styles.hidden}):React.createElement("div",{className:classes.box},React.createElement("div",{className:classes.iconContainer},React.createElement(UTIcon,{colorTheme:"light",name:iconName,size:16})))),CustomComponent||React.createElement(UTFieldLabel,{className:classes.title,highlighted:shouldHighlightLabel,icon:icon,required:required},title)),error&&React.createElement(UTValidation,{className:classes.validation,validationData:validationData})))};UTCheckbox.propTypes={actions:arrayOf(buttonTypes),checkboxDataTestId:string,classes:objectOf(string),classNames:objectOf(string),CustomComponent:elementType,dataTestId:string,disabled:bool,indeterminate:bool,isSimple:bool,meta:metaPropTypes.isRequired,onChange:func,required:bool,icon:string,reversed:bool,spacing:string,title:string,value:bool,variant:string,withUpperTitle:bool};export default WithTheme(retrieveStyle)(UTCheckbox);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { Fragment, useMemo } from 'react';
+import { arrayOf, bool, elementType, func, objectOf, string } from 'prop-types';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTIcon from '../../../UTIcon';
+import WithTheme from '../../../WithTheme';
+import UTTouchableWithoutFeedback from '../../../UTTouchableWithoutFeedback';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { metaPropTypes } from '../../../../types/formTypes';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import UTValidation from '../../../UTValidation';
+import { BUTTON_VARIANT, CHECKED_ICON, INDETERMINATE_ICON } from './constants';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+const UTCheckbox = _ref => {
+  let {
+    actions,
+    checkboxDataTestId,
+    classes: theme,
+    classNames,
+    CustomComponent,
+    dataTestId,
+    disabled,
+    indeterminate,
+    isSimple = false,
+    meta,
+    onChange = () => {},
+    required,
+    icon,
+    title,
+    value = false,
+    variant = 'default',
+    withUpperTitle
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(theme, classNames), [classNames, theme]);
+  const iconName = useMemo(() => indeterminate ? INDETERMINATE_ICON : value === true ? CHECKED_ICON : '', [indeterminate, value]);
+  const handlePress = () => {
+    if (!disabled && onChange) onChange(!value);
+  };
+  const shouldHighlightLabel = value === true && variant === BUTTON_VARIANT;
+  const touchableProps = {
+    onMouseDown: handlePress,
+    disabled
+  };
+  const RootComponent = variant === BUTTON_VARIANT ? UTTouchableWithoutFeedback : 'div';
+  const BoxContainerComponent = variant === BUTTON_VARIANT ? 'div' : UTTouchableWithoutFeedback;
+  const rootComponentProps = variant === BUTTON_VARIANT ? touchableProps : {};
+  const boxContainerProps = variant === BUTTON_VARIANT ? {} : touchableProps;
+  const error = meta && shouldShowErrors(meta) && meta.error || '';
+  const validationData = formatErrorToValidation(error);
+  return /*#__PURE__*/React.createElement(Fragment, null, withUpperTitle && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: actions,
+    required: required
+  }, title), /*#__PURE__*/React.createElement(RootComponent, _extends({
+    className: classes.container
+  }, variant === BUTTON_VARIANT ? {
+    dataTestId
+  } : {
+    'data-testid': dataTestId
+  }, rootComponentProps), /*#__PURE__*/React.createElement("div", {
+    className: classes.content
+  }, /*#__PURE__*/React.createElement(BoxContainerComponent, _extends({
+    className: classes.boxContainer
+  }, variant === BUTTON_VARIANT ? {
+    'data-testid': checkboxDataTestId
+  } : {
+    dataTestId: checkboxDataTestId
+  }, boxContainerProps), isSimple ? /*#__PURE__*/React.createElement(UTIcon, {
+    name: "IconCheck",
+    shade: "04",
+    colorTheme: "accent",
+    className: value ? undefined : styles.hidden
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: classes.box
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.iconContainer
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "light",
+    name: iconName,
+    size: 16
+  })))), CustomComponent || /*#__PURE__*/React.createElement(UTFieldLabel, {
+    className: classes.title,
+    highlighted: shouldHighlightLabel,
+    icon: icon,
+    required: required
+  }, title)), error && /*#__PURE__*/React.createElement(UTValidation, {
+    className: classes.validation,
+    validationData: validationData
+  })));
+};
+UTCheckbox.propTypes = {
+  actions: arrayOf(buttonTypes),
+  checkboxDataTestId: string,
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  CustomComponent: elementType,
+  dataTestId: string,
+  disabled: bool,
+  indeterminate: bool,
+  /**
+   * @deprecated The "isSimple" prop is deprecated and will be removed in a future release. Please do not use it.
+   */
+  isSimple: bool,
+  meta: metaPropTypes.isRequired,
+  onChange: func,
+  required: bool,
+  icon: string,
+  reversed: bool,
+  spacing: string,
+  title: string,
+  value: bool,
+  variant: string,
+  withUpperTitle: bool
+};
+export default WithTheme(retrieveStyle)(UTCheckbox);