@widergy/energy-ui 3.29.0 → 3.30.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.30.1](https://github.com/widergy/energy-ui/compare/v3.30.0...v3.30.1) (2024-10-15)
+
+
+### Bug Fixes
+
+* rever inputProps ([#511](https://github.com/widergy/energy-ui/issues/511)) ([959e891](https://github.com/widergy/energy-ui/commit/959e891c600f51f91c76b00823c661752d70bc28))
+
+# [3.30.0](https://github.com/widergy/energy-ui/compare/v3.29.0...v3.30.0) (2024-10-15)
+
+
+### Features
+
+* add UTCheckbox and UTCheckList ([#509](https://github.com/widergy/energy-ui/issues/509)) ([5c7eabd](https://github.com/widergy/energy-ui/commit/5c7eabd8a9f6499affabf53ce8d98302beaaba5a))
+
 # [3.29.0](https://github.com/widergy/energy-ui/compare/v3.28.0...v3.29.0) (2024-10-15)
 
 

package/dist/components/UTAutocomplete/index.js

@@ -27,7 +27,6 @@ const UTAutocomplete = _ref => {
     ArrowIcon,
     autocompleteProps,
     classes = {},
-    dataTestId,
     disabled,
     field,
     fixedSizeListProps,
@@ -104,9 +103,6 @@ const UTAutocomplete = _ref => {
         colorTheme: "error",
         variant: "small"
       }, errorMessage) : undefined,
-      inputProps: {
-        'data-testid': dataTestId
-      },
       placeholder: placeholder,
       variant: variant
     }, textFieldProps))
@@ -116,7 +112,6 @@ UTAutocomplete.propTypes = {
   ArrowIcon: _propTypes.elementType,
   autocompleteProps: _propTypes.object,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
-  dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
   input: _formTypes.inputPropTypes.isRequired,
   field: _formTypes.fieldType,

package/dist/components/UTCheckList/index.js

@@ -4,171 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _array = require("@widergy/web-utils/lib/array");
-var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _UTCheckbox = _interopRequireDefault(require("../UTCheckbox"));
-var _classesUtils = require("../../utils/classesUtils");
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _formTypes = require("../../types/formTypes");
-var _theme = require("./theme");
-var _constants = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); }
 const UTCheckList = _ref => {
-  var _field$configuration;
   let {
-    additionalInfo,
-    allChecked,
-    CustomCheckedIcon,
-    CustomUncheckedIcon,
-    customRowLabel: CustomRowLabel,
-    customSelectAllRowLabel: CustomSelectAllRowLabel,
-    classes: themeClasses = {},
-    className,
-    classNames,
-    disabled,
-    disabledItemTooltip,
-    field,
-    getSelectAllNewValues,
-    header,
-    headerLabel,
-    input,
-    labelKey,
-    list,
-    meta,
-    shouldShowErrors,
-    titleProps,
-    useCustomIcons,
-    valueKey,
-    withCheckRow,
-    withUpperTitle
+    version = 'V0',
+    ...props
   } = _ref;
-  const shouldShowUpperTitle = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
-  const handleChange = id => {
-    const newValues = input.value.indexOf(id) === -1 ? [...input.value, id] : input.value.filter(elem => elem !== id);
-    input.onChange((0, _array.isEmpty)(newValues) ? null : newValues);
-  };
-  const handleCheckAll = () => {
-    if (getSelectAllNewValues) {
-      input.onChange(getSelectAllNewValues());
-    } else if (list.length !== input.value.length) {
-      input.onChange(list.map(item => item[valueKey]));
-    } else {
-      input.onChange(null);
-    }
-  };
-  (0, _react.useEffect)(() => {
-    if (allChecked) handleCheckAll();
-  }, []);
-  const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
-  const label = function () {
-    let key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    let item = arguments.length > 1 ? arguments[1] : undefined;
-    return key.map(keyValue => /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      variant: "xsmall",
-      className: classes.rowItem
-    }, item[keyValue]));
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(className)
-  }, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
-    className: classes.title
-  }, titleProps, {
-    withMarkdown: true
-  }), field.title), /*#__PURE__*/_react.default.createElement("div", {
-    className: header ? classes.tableHeader : classes.selectAll
-  }, header && header.map(item => /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    weight: "bold",
-    className: classes.headerItem,
-    key: item.text
-  }, item.text)), /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
-    disabled: disabled,
-    onChange: handleCheckAll,
-    value: list.length === input.value.length,
-    label: header ? headerLabel : additionalInfo && additionalInfo.header || _constants.defaultAdditionalInfoHeader,
-    classNames: {
-      root: !header && classes.selectAllRowRoot,
-      checkedIcon: classes.checkedIcon,
-      uncheckedIcon: classes.uncheckedIcon
-    },
-    customRowLabel: CustomSelectAllRowLabel,
-    useCustomIcons: useCustomIcons,
-    CustomCheckedIcon: CustomCheckedIcon,
-    CustomUncheckedIcon: CustomUncheckedIcon
-  })), /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
-    className: "".concat(_stylesModule.default.rows, " ").concat(classes.rowContainerClassName)
-  }, list.map(item => /*#__PURE__*/_react.default.createElement("div", {
-    className: "\n              ".concat(_stylesModule.default.row, "\n              ").concat(withCheckRow && classes.checkRowContainer, "\n              ").concat(!(0, _array.isEmpty)(input.value) && !!input.value.find(val => val === item[valueKey]) && classes.customRowRootChecked, " "),
-    key: item[valueKey]
-  }, withCheckRow && label([valueKey, labelKey], item), /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
-    disabled: disabled || item.disabled,
-    item: item,
-    key: item[valueKey],
-    value: input.value.indexOf(item[valueKey]) !== -1,
-    label: withCheckRow ? '' : item[labelKey],
-    onChange: () => handleChange(item[valueKey]),
-    customRowLabel: CustomRowLabel,
-    classNames: {
-      root: !withCheckRow && classes.customRowRoot,
-      checkedIcon: classes.checkedIcon,
-      uncheckedIcon: classes.uncheckedIcon,
-      label: classes.label
-    },
-    useCustomIcons: useCustomIcons,
-    CustomCheckedIcon: CustomCheckedIcon,
-    CustomUncheckedIcon: CustomUncheckedIcon,
-    tooltipContent: item.disabled && disabledItemTooltip ? disabledItemTooltip(item, list) : undefined
-  })))), additionalInfo && additionalInfo.footer && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, null, additionalInfo.footer), shouldShowErrors && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, {
-    error: true
-  }, meta && meta.error));
-};
-UTCheckList.defaultProps = {
-  list: []
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
 UTCheckList.propTypes = {
-  additionalInfo: (0, _propTypes.shape)({
-    header: _propTypes.string,
-    footer: _propTypes.string
-  }),
-  allChecked: _propTypes.bool,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  className: _propTypes.string,
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  CustomCheckedIcon: _propTypes.element,
-  customRowLabel: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element, _propTypes.string]),
-  customSelectAllRowLabel: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element, _propTypes.string]),
-  CustomUncheckedIcon: _propTypes.element,
-  disabled: _propTypes.bool,
-  disabledItemTooltip: _propTypes.func,
-  field: _formTypes.fieldType,
-  getSelectAllNewValues: _propTypes.func,
-  header: (0, _propTypes.shape)({
-    text: _propTypes.string
-  }),
-  headerLabel: _propTypes.string,
-  input: (0, _propTypes.shape)({
-    onChange: _propTypes.func,
-    value: _propTypes.any
-  }),
-  labelKey: _propTypes.string.isRequired,
-  list: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
-    label: _propTypes.string,
-    checked: _propTypes.bool
-  })),
-  meta: _formTypes.metaPropTypes,
-  shouldShowErrors: _propTypes.bool,
-  titleProps: _propTypes.object,
-  useCustomIcons: _propTypes.bool,
-  valueKey: _propTypes.string.isRequired,
-  withCheckRow: _propTypes.bool,
-  withUpperTitle: _propTypes.bool
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTCheckList);
+var _default = exports.default = UTCheckList;

package/dist/components/UTCheckList/versions/V0/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _array = require("@widergy/web-utils/lib/array");
+var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));
+var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _UTCheckbox = _interopRequireDefault(require("../../../UTCheckbox"));
+var _classesUtils = require("../../../../utils/classesUtils");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _formTypes = require("../../../../types/formTypes");
+var _theme = require("./theme");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+const UTCheckList = _ref => {
+  var _field$configuration;
+  let {
+    additionalInfo,
+    allChecked,
+    CustomCheckedIcon,
+    CustomUncheckedIcon,
+    customRowLabel: CustomRowLabel,
+    customSelectAllRowLabel: CustomSelectAllRowLabel,
+    classes: themeClasses = {},
+    className,
+    classNames,
+    disabled,
+    disabledItemTooltip,
+    field,
+    getSelectAllNewValues,
+    header,
+    headerLabel,
+    input,
+    labelKey,
+    list,
+    meta,
+    shouldShowErrors,
+    titleProps,
+    useCustomIcons,
+    valueKey,
+    withCheckRow,
+    withUpperTitle
+  } = _ref;
+  const shouldShowUpperTitle = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
+  const handleChange = id => {
+    const newValues = input.value.indexOf(id) === -1 ? [...input.value, id] : input.value.filter(elem => elem !== id);
+    input.onChange((0, _array.isEmpty)(newValues) ? null : newValues);
+  };
+  const handleCheckAll = () => {
+    if (getSelectAllNewValues) {
+      input.onChange(getSelectAllNewValues());
+    } else if (list.length !== input.value.length) {
+      input.onChange(list.map(item => item[valueKey]));
+    } else {
+      input.onChange(null);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (allChecked) handleCheckAll();
+  }, []);
+  const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
+  const label = function () {
+    let key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let item = arguments.length > 1 ? arguments[1] : undefined;
+    return key.map(keyValue => /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      variant: "xsmall",
+      className: classes.rowItem
+    }, item[keyValue]));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(className)
+  }, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: classes.title
+  }, titleProps, {
+    withMarkdown: true
+  }), field.title), /*#__PURE__*/_react.default.createElement("div", {
+    className: header ? classes.tableHeader : classes.selectAll
+  }, header && header.map(item => /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    weight: "bold",
+    className: classes.headerItem,
+    key: item.text
+  }, item.text)), /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
+    disabled: disabled,
+    onChange: handleCheckAll,
+    value: list.length === input.value.length,
+    label: header ? headerLabel : additionalInfo && additionalInfo.header || _constants.defaultAdditionalInfoHeader,
+    classNames: {
+      root: !header && classes.selectAllRowRoot,
+      checkedIcon: classes.checkedIcon,
+      uncheckedIcon: classes.uncheckedIcon
+    },
+    customRowLabel: CustomSelectAllRowLabel,
+    useCustomIcons: useCustomIcons,
+    CustomCheckedIcon: CustomCheckedIcon,
+    CustomUncheckedIcon: CustomUncheckedIcon
+  })), /*#__PURE__*/_react.default.createElement(_FormGroup.default, {
+    className: "".concat(_stylesModule.default.rows, " ").concat(classes.rowContainerClassName)
+  }, list.map(item => /*#__PURE__*/_react.default.createElement("div", {
+    className: "\n              ".concat(_stylesModule.default.row, "\n              ").concat(withCheckRow && classes.checkRowContainer, "\n              ").concat(!(0, _array.isEmpty)(input.value) && !!input.value.find(val => val === item[valueKey]) && classes.customRowRootChecked, " "),
+    key: item[valueKey]
+  }, withCheckRow && label([valueKey, labelKey], item), /*#__PURE__*/_react.default.createElement(_UTCheckbox.default, {
+    disabled: disabled || item.disabled,
+    item: item,
+    key: item[valueKey],
+    value: input.value.indexOf(item[valueKey]) !== -1,
+    label: withCheckRow ? '' : item[labelKey],
+    onChange: () => handleChange(item[valueKey]),
+    customRowLabel: CustomRowLabel,
+    classNames: {
+      root: !withCheckRow && classes.customRowRoot,
+      checkedIcon: classes.checkedIcon,
+      uncheckedIcon: classes.uncheckedIcon,
+      label: classes.label
+    },
+    useCustomIcons: useCustomIcons,
+    CustomCheckedIcon: CustomCheckedIcon,
+    CustomUncheckedIcon: CustomUncheckedIcon,
+    tooltipContent: item.disabled && disabledItemTooltip ? disabledItemTooltip(item, list) : undefined
+  })))), additionalInfo && additionalInfo.footer && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, null, additionalInfo.footer), shouldShowErrors && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, {
+    error: true
+  }, meta && meta.error));
+};
+UTCheckList.defaultProps = {
+  list: []
+};
+UTCheckList.propTypes = {
+  additionalInfo: (0, _propTypes.shape)({
+    header: _propTypes.string,
+    footer: _propTypes.string
+  }),
+  allChecked: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  className: _propTypes.string,
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  CustomCheckedIcon: _propTypes.element,
+  customRowLabel: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element, _propTypes.string]),
+  customSelectAllRowLabel: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element, _propTypes.string]),
+  CustomUncheckedIcon: _propTypes.element,
+  disabled: _propTypes.bool,
+  disabledItemTooltip: _propTypes.func,
+  field: _formTypes.fieldType,
+  getSelectAllNewValues: _propTypes.func,
+  header: (0, _propTypes.shape)({
+    text: _propTypes.string
+  }),
+  headerLabel: _propTypes.string,
+  input: (0, _propTypes.shape)({
+    onChange: _propTypes.func,
+    value: _propTypes.any
+  }),
+  labelKey: _propTypes.string.isRequired,
+  list: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+    label: _propTypes.string,
+    checked: _propTypes.bool
+  })),
+  meta: _formTypes.metaPropTypes,
+  shouldShowErrors: _propTypes.bool,
+  titleProps: _propTypes.object,
+  useCustomIcons: _propTypes.bool,
+  valueKey: _propTypes.string.isRequired,
+  withCheckRow: _propTypes.bool,
+  withUpperTitle: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTCheckList);

package/dist/components/UTCheckList/{theme.js → versions/V0/theme.js}

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
-var _classesUtils = require("../../utils/classesUtils");
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
+var _classesUtils = require("../../../../utils/classesUtils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveMuiTheme = theme => (0, _styles.createTheme)({
   typography: {

package/dist/components/UTCheckList/versions/V1/README.MD

@@ -0,0 +1,134 @@
+# UTCheckList
+
+## Description
+
+`UTCheckList` is a customizable component that renders a list of checkboxes, allowing users to select multiple options from a provided list. It supports features like select all, indeterminate state, error display, and dynamic options. The "Select All" checkbox only affects options that are not disabled. Additionally, it allows for grouping options by category, with ungrouped options appearing first.
+
+## Props
+
+| Name              | Type             | Default | Description                                                                                                                                       |
+| ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classNames        | objectOf(string) |         | Custom class names to apply to different elements of the checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`).                |
+| error             | string           |         | Error message to display.                                                                                                                         |
+| horizontalSpacing | string           | large   | Spacing between the checkbox and the title horizontally.                                                                                          |
+| isSimple          | bool             | false   | Simplifies the selection process to only allow single checkbox selection.                                                                         |
+| onChange          | func.isRequired  |         | Function to call when the selection changes.                                                                                                      |
+| options           | arrayOf(shape)   |         | Array of options to be displayed as checkboxes. Each option is an object with `label`, `value`, `disabled`, `checked`, and optionally `category`. |
+| required          | bool             | false   | Indicates if the checklist is required.                                                                                                           |
+| reversed          | bool             | false   | If true, reverses the order of title and checkbox.                                                                                                |
+| selectAllLabel    | string           |         | Label for the "Select All" checkbox.                                                                                                              |
+| showSelectAll     | bool             | true    | Determines whether to show the "Select All" checkbox.                                                                                             |
+| title             | string           |         | Title for the checklist.                                                                                                                          |
+| value             | arrayOf(string)  | []      | Array of selected values.                                                                                                                         |
+| variant           | string           |         | Variant style for the checklist.                                                                                                                  |
+| verticalSpacing   | string           | large   | Spacing between the checkbox items vertically.                                                                                                    |
+
+### Option Object
+
+The `options` prop is an array of objects, each representing an option:
+
+| Name     | Type   | Description                                                                                                               |
+| -------- | ------ | ------------------------------------------------------------------------------------------------------------------------- |
+| category | string | (Optional) Category under which the option will be grouped. If not provided, the option will appear ungrouped at the top. |
+| checked  | bool   | Indicates if the option is checked.                                                                                       |
+| disabled | bool   | Indicates if the option is disabled.                                                                                      |
+| label    | string | Label to display for the option.                                                                                          |
+| value    | string | Value of the option.                                                                                                      |
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React from 'react';
+import UTCheckList from './UTCheckList';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3', disabled: true, checked: true }
+];
+
+const Example = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  return (
+    <UTCheckList
+      error="Please select at least one option"
+      title="Select Options"
+      onChange={setSelectedOptions}
+      options={options}
+      required
+      selectAllLabel="Select All"
+      value={selectedOptions}
+    />
+  );
+};
+
+export default Example;
+```
+
+### Categorized Example
+
+```jsx
+import React from 'react';
+import UTCheckList from './UTCheckList';
+
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2', category: 'Group A' },
+  { label: 'Option 3', value: '3', category: 'Group B', disabled: true },
+  { label: 'Option 4', value: '4', category: 'Group A' }
+];
+
+const Example = () => {
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  return (
+    <UTCheckList
+      error="Please select at least one option"
+      title="Categorized CheckList"
+      onChange={setSelectedOptions}
+      options={options}
+      selectAllLabel="Select All"
+      value={selectedOptions}
+    />
+  );
+};
+
+export default Example;
+```
+
+### Custom Styles Example
+
+```jsx
+import React from 'react';
+import UTCheckList from './UTCheckList';
+
+const customStyles = {
+  root: { padding: 10 },
+  checkboxesContainer: { backgroundColor: 'lightgrey' },
+  header: { color: 'blue' }
+};
+
+const Example = () => {
+  const options = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' }
+  ];
+
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+
+  return (
+    <UTCheckList
+      title="Custom Styled CheckList"
+      onChange={setSelectedOptions}
+      options={options}
+      style={customStyles}
+      value={selectedOptions}
+    />
+  );
+};
+
+export default Example;
+```

package/dist/components/UTCheckList/versions/V1/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPACING = void 0;
+const SPACING = exports.SPACING = {
+  SMALL: 'small',
+  LARGE: 'large'
+};