@orfium/ictinus 4.6.1 → 4.9.0

package/dist/components/List/List.style.js

@@ -1,10 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.wrapperStyle = void 0;
+exports.listStyle = exports.wrapperStyle = void 0;
 
 var _react = require("@emotion/react");
 
+var _utils = require("../../theme/utils");
+
 var wrapperStyle = function wrapperStyle(_ref) {
   var width = _ref.width,
       isSearchable = _ref.isSearchable;
@@ -13,9 +15,25 @@ var wrapperStyle = function wrapperStyle(_ref) {
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)("border:", isSearchable ? 'initial' : "1px solid " + theme.utils.getColor('lightGrey', 100), ";border-radius:", isSearchable ? 'initial' : theme.spacing.xsm, ";width:", width + "px" || '100%', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:wrapperStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdC5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTNkMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTGlzdC9MaXN0LnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5cbmV4cG9ydCBjb25zdCB3cmFwcGVyU3R5bGUgPSAoe1xuICB3aWR0aCxcbiAgaXNTZWFyY2hhYmxlLFxufToge1xuICB3aWR0aDogbnVtYmVyIHwgdW5kZWZpbmVkO1xuICBpc1NlYXJjaGFibGU/OiBib29sZWFuO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBib3JkZXI6ICR7aXNTZWFyY2hhYmxlID8gJ2luaXRpYWwnIDogYDFweCBzb2xpZCAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAxMDApfWB9O1xuICBib3JkZXItcmFkaXVzOiAke2lzU2VhcmNoYWJsZSA/ICdpbml0aWFsJyA6IHRoZW1lLnNwYWNpbmcueHNtfTtcbiAgd2lkdGg6ICR7YCR7d2lkdGh9cHhgIHx8ICcxMDAlJ307XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:wrapperStyle;")
+      (0, _react.css)("border:", isSearchable ? 'initial' : "1px solid " + theme.utils.getColor('lightGrey', 100), ";border-radius:", isSearchable ? 'initial' : theme.spacing.xsm, ";width:", width + "px" || '100%', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:wrapperStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdC5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVNkMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTGlzdC9MaXN0LnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmV4cG9ydCBjb25zdCB3cmFwcGVyU3R5bGUgPSAoe1xuICB3aWR0aCxcbiAgaXNTZWFyY2hhYmxlLFxufToge1xuICB3aWR0aDogbnVtYmVyIHwgdW5kZWZpbmVkO1xuICBpc1NlYXJjaGFibGU/OiBib29sZWFuO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBib3JkZXI6ICR7aXNTZWFyY2hhYmxlID8gJ2luaXRpYWwnIDogYDFweCBzb2xpZCAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAxMDApfWB9O1xuICBib3JkZXItcmFkaXVzOiAke2lzU2VhcmNoYWJsZSA/ICdpbml0aWFsJyA6IHRoZW1lLnNwYWNpbmcueHNtfTtcbiAgd2lkdGg6ICR7YCR7d2lkdGh9cHhgIHx8ICcxMDAlJ307XG5gO1xuXG5leHBvcnQgY29uc3QgbGlzdFN0eWxlID0gKHtcbiAgd2lkdGgsXG4gIGhlaWdodCxcbiAgaXNTZWFyY2hhYmxlLFxufToge1xuICB3aWR0aD86IG51bWJlcjtcbiAgaGVpZ2h0PzogbnVtYmVyO1xuICBpc1NlYXJjaGFibGU/OiBib29sZWFuO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBwYWRkaW5nLWxlZnQ6IDA7XG4gIG1hcmdpbi10b3A6IDA7XG4gIG1hcmdpbi1ib3R0b206IDA7XG4gIGJvcmRlci1yYWRpdXM6ICR7aXNTZWFyY2hhYmxlID8gJ2luaXRpYWwnIDogdGhlbWUuc3BhY2luZy54c219O1xuICB3aWR0aDogJHt3aWR0aCA/IHJlbSh3aWR0aCkgOiAnMTAwJSd9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0ID8gcmVtKGhlaWdodCkgOiAnMTAwJSd9O1xuICBvdmVyZmxvdzogYXV0bztcbiAgb3ZlcmZsb3cteDogaGlkZGVuO1xuYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:wrapperStyle;")
+    );
+  };
+};
+
+exports.wrapperStyle = wrapperStyle;
+
+var listStyle = function listStyle(_ref2) {
+  var width = _ref2.width,
+      height = _ref2.height,
+      isSearchable = _ref2.isSearchable;
+  return function (theme) {
+    return (
+      /*#__PURE__*/
+
+      /*#__PURE__*/
+      (0, _react.css)("padding-left:0;margin-top:0;margin-bottom:0;border-radius:", isSearchable ? 'initial' : theme.spacing.xsm, ";width:", width ? (0, _utils.rem)(width) : '100%', ";height:", height ? (0, _utils.rem)(height) : '100%', ";overflow:auto;overflow-x:hidden;" + (process.env.NODE_ENV === "production" ? "" : ";label:listStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdC5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QjZDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdC5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAndGhlbWUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5leHBvcnQgY29uc3Qgd3JhcHBlclN0eWxlID0gKHtcbiAgd2lkdGgsXG4gIGlzU2VhcmNoYWJsZSxcbn06IHtcbiAgd2lkdGg6IG51bWJlciB8IHVuZGVmaW5lZDtcbiAgaXNTZWFyY2hhYmxlPzogYm9vbGVhbjtcbn0pID0+ICh0aGVtZTogVGhlbWUpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgYm9yZGVyOiAke2lzU2VhcmNoYWJsZSA/ICdpbml0aWFsJyA6IGAxcHggc29saWQgJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMTAwKX1gfTtcbiAgYm9yZGVyLXJhZGl1czogJHtpc1NlYXJjaGFibGUgPyAnaW5pdGlhbCcgOiB0aGVtZS5zcGFjaW5nLnhzbX07XG4gIHdpZHRoOiAke2Ake3dpZHRofXB4YCB8fCAnMTAwJSd9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGxpc3RTdHlsZSA9ICh7XG4gIHdpZHRoLFxuICBoZWlnaHQsXG4gIGlzU2VhcmNoYWJsZSxcbn06IHtcbiAgd2lkdGg/OiBudW1iZXI7XG4gIGhlaWdodD86IG51bWJlcjtcbiAgaXNTZWFyY2hhYmxlPzogYm9vbGVhbjtcbn0pID0+ICh0aGVtZTogVGhlbWUpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgcGFkZGluZy1sZWZ0OiAwO1xuICBtYXJnaW4tdG9wOiAwO1xuICBtYXJnaW4tYm90dG9tOiAwO1xuICBib3JkZXItcmFkaXVzOiAke2lzU2VhcmNoYWJsZSA/ICdpbml0aWFsJyA6IHRoZW1lLnNwYWNpbmcueHNtfTtcbiAgd2lkdGg6ICR7d2lkdGggPyByZW0od2lkdGgpIDogJzEwMCUnfTtcbiAgaGVpZ2h0OiAke2hlaWdodCA/IHJlbShoZWlnaHQpIDogJzEwMCUnfTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gIG92ZXJmbG93LXg6IGhpZGRlbjtcbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:listStyle;")
     );
   };
 };
 
-exports.wrapperStyle = wrapperStyle;
+exports.listStyle = listStyle;

package/dist/components/List/ListItem/ListItem.d.ts

@@ -7,7 +7,7 @@ declare const ListItem: React.ForwardRefExoticComponent<{
     /** Content of the ListItem */
     content: ListItemType;
     /** Index, for test-id calculation */
-    index: number;
+    index: number | string;
     /** Selected state */
     selected?: boolean | undefined;
     /** Whether the text of the ListItem is highlighted or not. eg: Filter - Default Value */
@@ -18,5 +18,7 @@ declare const ListItem: React.ForwardRefExoticComponent<{
     searchTerm?: string | undefined;
     /** Option Click handler for SelectOption[] data case */
     handleOptionClick?: SelectHandlerType | undefined;
+    /** Determines the left padding */
+    isGroupItem?: boolean | undefined;
 } & TestProps & React.RefAttributes<HTMLDivElement>>;
 export default ListItem;

package/dist/components/List/ListItem/ListItem.js

@@ -5,7 +5,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactHighlightWords = _interopRequireDefault(require("react-highlight-words"));
+var _utils = require("../utils");
 
 var _ListItem = require("./ListItem.style");
 
@@ -25,7 +25,8 @@ var ListItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       handleOptionClick = _ref.handleOptionClick,
       searchTerm = _ref.searchTerm,
-      dataTestId = _ref.dataTestId;
+      dataTestId = _ref.dataTestId,
+      isGroupItem = _ref.isGroupItem;
 
   var handleListItemSelect = function handleListItemSelect() {
     if (content && handleOptionClick) {
@@ -33,41 +34,13 @@ var ListItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     }
   };
 
-  var renderContent = function renderContent(content) {
-    /**
-     * Check if list item is not react element because it can be
-     * and also checks if its object with property 'value'
-     * @TODO Typescript 4.4 will solve this in one constant
-     * **/
-    if (searchTerm && content && ! /*#__PURE__*/_react["default"].isValidElement(content) && typeof content === 'object' && !Array.isArray(content) && 'label' in content && content != null && content.label) {
-      return (0, _react2.jsx)(_reactHighlightWords["default"], {
-        highlightClassName: "search-text",
-        highlightTag: 'strong',
-        searchWords: [searchTerm],
-        autoEscape: true,
-        textToHighlight: content.label
-      });
-    }
-    /**
-     * Check if list item is not react element because it can be
-     * and also checks if its object with property 'value'
-     * @TODO Typescript 4.4 will solve this in one constant
-     * **/
-
-
-    if (content && ! /*#__PURE__*/_react["default"].isValidElement(content) && typeof content === 'object' && !Array.isArray(content) && 'label' in content && content != null && content.label) {
-      return content.label;
-    }
-
-    return content;
-  };
-
   return (0, _react2.jsx)("div", {
     css: (0, _ListItem.listItemStyle)({
       size: size,
       selected: selected,
       highlighted: highlighted,
-      disabled: disabled
+      disabled: disabled,
+      isGroupItem: isGroupItem
     }),
     ref: selected ? ref : null,
     onClick: handleListItemSelect,
@@ -79,7 +52,7 @@ var ListItem = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     css: (0, _ListItem.contentStyle)()
   },
   /** @TODO latest version typescript 4.4 is solving this as a constant */
-  renderContent(content)));
+  (0, _utils.renderContent)(content, searchTerm)));
 });
 
 ListItem.displayName = 'ListItem';

package/dist/components/List/ListItem/ListItem.style.d.ts

@@ -1,10 +1,11 @@
 import { SerializedStyles } from '@emotion/react';
 import { Theme } from 'theme';
 import { ListRowSize } from '../types';
-export declare const listItemStyle: ({ size, selected, highlighted, disabled, }: {
+export declare const listItemStyle: ({ size, selected, highlighted, disabled, isGroupItem, }: {
     size: ListRowSize;
     selected: boolean;
     highlighted: boolean;
     disabled: boolean;
+    isGroupItem?: boolean | undefined;
 }) => (theme: Theme) => SerializedStyles;
 export declare const contentStyle: () => SerializedStyles;

package/dist/components/List/ListItem/ListItem.style.js

@@ -13,13 +13,14 @@ var listItemStyle = function listItemStyle(_ref2) {
   var size = _ref2.size,
       selected = _ref2.selected,
       highlighted = _ref2.highlighted,
-      disabled = _ref2.disabled;
+      disabled = _ref2.disabled,
+      isGroupItem = _ref2.isGroupItem;
   return function (theme) {
     return (
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)("height:", size === 'normal' ? (0, _utils.rem)(56) : (0, _utils.rem)(46), ";font-size:", theme.typography.fontSizes[size === 'normal' ? '16' : '14'], ";background-color:", selected ? theme.utils.getColor('blue', 50) : theme.palette.white, ";display:flex;align-items:center;padding:0px ", theme.spacing.md, ";font-weight:", selected && theme.typography.weights.medium, ";", highlighted && 'font-weight: 500;', " &:hover{background-color:", theme.utils.getColor('lightGrey', 50), ";}", disabled && "\n        opacity: 0.5;\n        cursor: not-allowed;\n    ", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:listItemStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdEl0ZW0vTGlzdEl0ZW0uc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0I2QyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MaXN0L0xpc3RJdGVtL0xpc3RJdGVtLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmltcG9ydCB7IExpc3RSb3dTaXplIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgbGlzdEl0ZW1TdHlsZSA9ICh7XG4gIHNpemUsXG4gIHNlbGVjdGVkLFxuICBoaWdobGlnaHRlZCxcbiAgZGlzYWJsZWQsXG59OiB7XG4gIHNpemU6IExpc3RSb3dTaXplO1xuICBzZWxlY3RlZDogYm9vbGVhbjtcbiAgaGlnaGxpZ2h0ZWQ6IGJvb2xlYW47XG4gIGRpc2FibGVkOiBib29sZWFuO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBoZWlnaHQ6ICR7c2l6ZSA9PT0gJ25vcm1hbCcgPyByZW0oNTYpIDogcmVtKDQ2KX07XG4gIGZvbnQtc2l6ZTogJHt0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplc1tzaXplID09PSAnbm9ybWFsJyA/ICcxNicgOiAnMTQnXX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7c2VsZWN0ZWQgPyB0aGVtZS51dGlscy5nZXRDb2xvcignYmx1ZScsIDUwKSA6IHRoZW1lLnBhbGV0dGUud2hpdGV9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAwcHggJHt0aGVtZS5zcGFjaW5nLm1kfTtcbiAgZm9udC13ZWlnaHQ6ICR7c2VsZWN0ZWQgJiYgdGhlbWUudHlwb2dyYXBoeS53ZWlnaHRzLm1lZGl1bX07XG5cbiAgJHtoaWdobGlnaHRlZCAmJiAnZm9udC13ZWlnaHQ6IDUwMDsnfVxuXG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDUwKX07XG4gIH1cblxuICAke2Rpc2FibGVkICYmXG4gICAgYFxuICAgICAgICBvcGFjaXR5OiAwLjU7XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgYH1cbmA7XG5cbmV4cG9ydCBjb25zdCBjb250ZW50U3R5bGUgPSAoKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:listItemStyle;")
+      (0, _react.css)("height:", size === 'normal' ? (0, _utils.rem)(56) : (0, _utils.rem)(46), ";font-size:", theme.typography.fontSizes[size === 'normal' ? '16' : '14'], ";background-color:", selected ? theme.utils.getColor('blue', 50) : theme.palette.white, ";display:flex;align-items:center;padding:0px ", theme.spacing.md, " 0px ", isGroupItem ? theme.spacing.xl : theme.spacing.md, ";font-weight:", selected && theme.typography.weights.medium, ";", highlighted && 'font-weight: 500;', " &:hover{background-color:", theme.utils.getColor('lightGrey', 50), ";}", disabled && "\n        opacity: 0.5;\n        cursor: not-allowed;\n    ", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:listItemStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdEl0ZW0vTGlzdEl0ZW0uc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0I2QyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MaXN0L0xpc3RJdGVtL0xpc3RJdGVtLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmltcG9ydCB7IExpc3RSb3dTaXplIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgbGlzdEl0ZW1TdHlsZSA9ICh7XG4gIHNpemUsXG4gIHNlbGVjdGVkLFxuICBoaWdobGlnaHRlZCxcbiAgZGlzYWJsZWQsXG4gIGlzR3JvdXBJdGVtLFxufToge1xuICBzaXplOiBMaXN0Um93U2l6ZTtcbiAgc2VsZWN0ZWQ6IGJvb2xlYW47XG4gIGhpZ2hsaWdodGVkOiBib29sZWFuO1xuICBkaXNhYmxlZDogYm9vbGVhbjtcbiAgaXNHcm91cEl0ZW0/OiBib29sZWFuO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBoZWlnaHQ6ICR7c2l6ZSA9PT0gJ25vcm1hbCcgPyByZW0oNTYpIDogcmVtKDQ2KX07XG4gIGZvbnQtc2l6ZTogJHt0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplc1tzaXplID09PSAnbm9ybWFsJyA/ICcxNicgOiAnMTQnXX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7c2VsZWN0ZWQgPyB0aGVtZS51dGlscy5nZXRDb2xvcignYmx1ZScsIDUwKSA6IHRoZW1lLnBhbGV0dGUud2hpdGV9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAwcHggJHt0aGVtZS5zcGFjaW5nLm1kfSAwcHggJHtpc0dyb3VwSXRlbSA/IHRoZW1lLnNwYWNpbmcueGwgOiB0aGVtZS5zcGFjaW5nLm1kfTtcbiAgZm9udC13ZWlnaHQ6ICR7c2VsZWN0ZWQgJiYgdGhlbWUudHlwb2dyYXBoeS53ZWlnaHRzLm1lZGl1bX07XG5cbiAgJHtoaWdobGlnaHRlZCAmJiAnZm9udC13ZWlnaHQ6IDUwMDsnfVxuXG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDUwKX07XG4gIH1cblxuICAke2Rpc2FibGVkICYmXG4gICAgYFxuICAgICAgICBvcGFjaXR5OiAwLjU7XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgYH1cbmA7XG5cbmV4cG9ydCBjb25zdCBjb250ZW50U3R5bGUgPSAoKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:listItemStyle;")
     );
   };
 };
@@ -32,7 +33,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "4irdtt-contentStyle",
   styles: "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;label:contentStyle;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdEl0ZW0vTGlzdEl0ZW0uc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0N1RCIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MaXN0L0xpc3RJdGVtL0xpc3RJdGVtLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmltcG9ydCB7IExpc3RSb3dTaXplIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgbGlzdEl0ZW1TdHlsZSA9ICh7XG4gIHNpemUsXG4gIHNlbGVjdGVkLFxuICBoaWdobGlnaHRlZCxcbiAgZGlzYWJsZWQsXG59OiB7XG4gIHNpemU6IExpc3RSb3dTaXplO1xuICBzZWxlY3RlZDogYm9vbGVhbjtcbiAgaGlnaGxpZ2h0ZWQ6IGJvb2xlYW47XG4gIGRpc2FibGVkOiBib29sZWFuO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBoZWlnaHQ6ICR7c2l6ZSA9PT0gJ25vcm1hbCcgPyByZW0oNTYpIDogcmVtKDQ2KX07XG4gIGZvbnQtc2l6ZTogJHt0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplc1tzaXplID09PSAnbm9ybWFsJyA/ICcxNicgOiAnMTQnXX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7c2VsZWN0ZWQgPyB0aGVtZS51dGlscy5nZXRDb2xvcignYmx1ZScsIDUwKSA6IHRoZW1lLnBhbGV0dGUud2hpdGV9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAwcHggJHt0aGVtZS5zcGFjaW5nLm1kfTtcbiAgZm9udC13ZWlnaHQ6ICR7c2VsZWN0ZWQgJiYgdGhlbWUudHlwb2dyYXBoeS53ZWlnaHRzLm1lZGl1bX07XG5cbiAgJHtoaWdobGlnaHRlZCAmJiAnZm9udC13ZWlnaHQ6IDUwMDsnfVxuXG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDUwKX07XG4gIH1cblxuICAke2Rpc2FibGVkICYmXG4gICAgYFxuICAgICAgICBvcGFjaXR5OiAwLjU7XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgYH1cbmA7XG5cbmV4cG9ydCBjb25zdCBjb250ZW50U3R5bGUgPSAoKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdEl0ZW0vTGlzdEl0ZW0uc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0N1RCIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MaXN0L0xpc3RJdGVtL0xpc3RJdGVtLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmltcG9ydCB7IExpc3RSb3dTaXplIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgbGlzdEl0ZW1TdHlsZSA9ICh7XG4gIHNpemUsXG4gIHNlbGVjdGVkLFxuICBoaWdobGlnaHRlZCxcbiAgZGlzYWJsZWQsXG4gIGlzR3JvdXBJdGVtLFxufToge1xuICBzaXplOiBMaXN0Um93U2l6ZTtcbiAgc2VsZWN0ZWQ6IGJvb2xlYW47XG4gIGhpZ2hsaWdodGVkOiBib29sZWFuO1xuICBkaXNhYmxlZDogYm9vbGVhbjtcbiAgaXNHcm91cEl0ZW0/OiBib29sZWFuO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBoZWlnaHQ6ICR7c2l6ZSA9PT0gJ25vcm1hbCcgPyByZW0oNTYpIDogcmVtKDQ2KX07XG4gIGZvbnQtc2l6ZTogJHt0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplc1tzaXplID09PSAnbm9ybWFsJyA/ICcxNicgOiAnMTQnXX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7c2VsZWN0ZWQgPyB0aGVtZS51dGlscy5nZXRDb2xvcignYmx1ZScsIDUwKSA6IHRoZW1lLnBhbGV0dGUud2hpdGV9O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAwcHggJHt0aGVtZS5zcGFjaW5nLm1kfSAwcHggJHtpc0dyb3VwSXRlbSA/IHRoZW1lLnNwYWNpbmcueGwgOiB0aGVtZS5zcGFjaW5nLm1kfTtcbiAgZm9udC13ZWlnaHQ6ICR7c2VsZWN0ZWQgJiYgdGhlbWUudHlwb2dyYXBoeS53ZWlnaHRzLm1lZGl1bX07XG5cbiAgJHtoaWdobGlnaHRlZCAmJiAnZm9udC13ZWlnaHQ6IDUwMDsnfVxuXG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDUwKX07XG4gIH1cblxuICAke2Rpc2FibGVkICYmXG4gICAgYFxuICAgICAgICBvcGFjaXR5OiAwLjU7XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgYH1cbmA7XG5cbmV4cG9ydCBjb25zdCBjb250ZW50U3R5bGUgPSAoKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 

package/dist/components/List/ListItemGroup/ListGroupTitle/ListGroupTitle.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TestProps } from 'utils/types';
+import { ListItemType, ListRowSize } from 'components/List/types';
+declare const ListGroupTitle: React.ForwardRefExoticComponent<{
+    /** Size of the ListGroupTitle (translates to height) */
+    size: ListRowSize;
+    /** Content of the ListItem */
+    content: ListItemType;
+    /** Index, for test-id calculation */
+    index: number;
+    /** Search Term to be highlighted in list items */
+    searchTerm?: string | undefined;
+} & TestProps & React.RefAttributes<HTMLDivElement>>;
+export default ListGroupTitle;

package/dist/components/List/ListItemGroup/ListGroupTitle/ListGroupTitle.js

@@ -0,0 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ListGroupTitle = require("./ListGroupTitle.style");
+
+var _utils = require("../../utils");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ListGroupTitle = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var size = _ref.size,
+      content = _ref.content,
+      index = _ref.index,
+      searchTerm = _ref.searchTerm,
+      dataTestId = _ref.dataTestId;
+  return (0, _react2.jsx)("div", {
+    css: (0, _ListGroupTitle.listGroupTitleStyle)({
+      size: size,
+      disabled: content.isDisabled
+    }),
+    ref: ref,
+    "data-testid": dataTestId != null ? dataTestId : 'ictinus_list' + ('_group_title_' + index)
+  }, (0, _react2.jsx)("div", {
+    css: (0, _ListGroupTitle.contentStyle)()
+  }, (0, _utils.renderContent)(content, searchTerm)));
+});
+
+ListGroupTitle.displayName = 'ListGroupTitle';
+var _default = ListGroupTitle;
+exports["default"] = _default;

package/dist/components/List/ListItemGroup/ListGroupTitle/ListGroupTitle.style.d.ts

@@ -0,0 +1,8 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from 'theme';
+import { ListRowSize } from '../../types';
+export declare const listGroupTitleStyle: ({ size, disabled, }: {
+    size: ListRowSize;
+    disabled?: boolean | undefined;
+}) => (theme: Theme) => SerializedStyles;
+export declare const contentStyle: () => SerializedStyles;

package/dist/components/List/ListItemGroup/ListGroupTitle/ListGroupTitle.style.js

@@ -0,0 +1,41 @@
+"use strict";
+
+exports.__esModule = true;
+exports.contentStyle = exports.listGroupTitleStyle = void 0;
+
+var _react = require("@emotion/react");
+
+var _utils = require("../../../../theme/utils");
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var listGroupTitleStyle = function listGroupTitleStyle(_ref2) {
+  var size = _ref2.size,
+      disabled = _ref2.disabled;
+  return function (theme) {
+    return (
+      /*#__PURE__*/
+
+      /*#__PURE__*/
+      (0, _react.css)("height:", size === 'normal' ? (0, _utils.rem)(56) : (0, _utils.rem)(46), ";font-size:", theme.typography.fontSizes[size === 'normal' ? '13' : '11'], ";background-color:", theme.palette.white, ";color:", theme.utils.getColor('lightGrey', 650), ";display:flex;align-items:center;padding:0px ", theme.spacing.md, ";font-weight:", theme.typography.weights.bold, ";", disabled && "\n        opacity: 0.5;\n        cursor: not-allowed;\n    ", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:listGroupTitleStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdEl0ZW1Hcm91cC9MaXN0R3JvdXBUaXRsZS9MaXN0R3JvdXBUaXRsZS5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZNkMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTGlzdC9MaXN0SXRlbUdyb3VwL0xpc3RHcm91cFRpdGxlL0xpc3RHcm91cFRpdGxlLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmltcG9ydCB7IExpc3RSb3dTaXplIH0gZnJvbSAnLi4vLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgbGlzdEdyb3VwVGl0bGVTdHlsZSA9ICh7XG4gIHNpemUsXG4gIGRpc2FibGVkLFxufToge1xuICBzaXplOiBMaXN0Um93U2l6ZTtcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBoZWlnaHQ6ICR7c2l6ZSA9PT0gJ25vcm1hbCcgPyByZW0oNTYpIDogcmVtKDQ2KX07XG4gIGZvbnQtc2l6ZTogJHt0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplc1tzaXplID09PSAnbm9ybWFsJyA/ICcxMycgOiAnMTEnXX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUucGFsZXR0ZS53aGl0ZX07XG4gIGNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCA2NTApfTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogMHB4ICR7dGhlbWUuc3BhY2luZy5tZH07XG4gIGZvbnQtd2VpZ2h0OiAke3RoZW1lLnR5cG9ncmFwaHkud2VpZ2h0cy5ib2xkfTtcblxuICAke2Rpc2FibGVkICYmXG4gICAgYFxuICAgICAgICBvcGFjaXR5OiAwLjU7XG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgYH1cbmA7XG5cbmV4cG9ydCBjb25zdCBjb250ZW50U3R5bGUgPSAoKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:listGroupTitleStyle;")
+    );
+  };
+};
+
+exports.listGroupTitleStyle = listGroupTitleStyle;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "l8l8b8",
+  styles: "white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
+} : {
+  name: "4irdtt-contentStyle",
+  styles: "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;label:contentStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdEl0ZW1Hcm91cC9MaXN0R3JvdXBUaXRsZS9MaXN0R3JvdXBUaXRsZS5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QnVEIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdEl0ZW1Hcm91cC9MaXN0R3JvdXBUaXRsZS9MaXN0R3JvdXBUaXRsZS5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAndGhlbWUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5pbXBvcnQgeyBMaXN0Um93U2l6ZSB9IGZyb20gJy4uLy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IGxpc3RHcm91cFRpdGxlU3R5bGUgPSAoe1xuICBzaXplLFxuICBkaXNhYmxlZCxcbn06IHtcbiAgc2l6ZTogTGlzdFJvd1NpemU7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbn0pID0+ICh0aGVtZTogVGhlbWUpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgaGVpZ2h0OiAke3NpemUgPT09ICdub3JtYWwnID8gcmVtKDU2KSA6IHJlbSg0Nil9O1xuICBmb250LXNpemU6ICR7dGhlbWUudHlwb2dyYXBoeS5mb250U2l6ZXNbc2l6ZSA9PT0gJ25vcm1hbCcgPyAnMTMnIDogJzExJ119O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnBhbGV0dGUud2hpdGV9O1xuICBjb2xvcjogJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgNjUwKX07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHBhZGRpbmc6IDBweCAke3RoZW1lLnNwYWNpbmcubWR9O1xuICBmb250LXdlaWdodDogJHt0aGVtZS50eXBvZ3JhcGh5LndlaWdodHMuYm9sZH07XG5cbiAgJHtkaXNhYmxlZCAmJlxuICAgIGBcbiAgICAgICAgb3BhY2l0eTogMC41O1xuICAgICAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICAgIGB9XG5gO1xuXG5leHBvcnQgY29uc3QgY29udGVudFN0eWxlID0gKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var contentStyle = function contentStyle() {
+  return _ref;
+};
+
+exports.contentStyle = contentStyle;

package/dist/components/List/ListItemGroup/ListGroupTitle/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ListGroupTitle';

package/dist/components/List/ListItemGroup/ListGroupTitle/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _ListGroupTitle = _interopRequireDefault(require("./ListGroupTitle"));
+
+exports["default"] = _ListGroupTitle["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/components/List/ListItemGroup/ListItemGroup.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TestProps } from 'utils/types';
+import { ListItemType, ListRowSize, SelectHandlerType } from '../types';
+declare const ListItemGroup: React.ForwardRefExoticComponent<{
+    /** Size of the ListItem (translates to height) */
+    size: ListRowSize;
+    /** Content of the ListItemGroup */
+    content: ListItemType;
+    /** groupIndex, for test-id calculation */
+    groupIndex: number;
+    /** Selected Item */
+    selectedItem?: ListItemType;
+    /** Search Term to be highlighted in list items */
+    searchTerm?: string | undefined;
+    /** Option Click handler for SelectOption[] data case */
+    handleOptionClick?: SelectHandlerType | undefined;
+} & TestProps & React.RefAttributes<HTMLDivElement>>;
+export default ListItemGroup;

package/dist/components/List/ListItemGroup/ListItemGroup.js

@@ -0,0 +1,64 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../../utils/helpers");
+
+var _List = require("../List.style");
+
+var _ListItem = _interopRequireDefault(require("../ListItem"));
+
+var _utils = require("../utils");
+
+var _ListGroupTitle = _interopRequireDefault(require("./ListGroupTitle"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ListItemGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var _options;
+
+  var size = _ref.size,
+      content = _ref.content,
+      groupIndex = _ref.groupIndex,
+      selectedItem = _ref.selectedItem,
+      searchTerm = _ref.searchTerm,
+      handleOptionClick = _ref.handleOptionClick,
+      dataTestId = _ref.dataTestId;
+  return (0, _react2.jsx)("li", null, (0, _react2.jsx)(_ListGroupTitle["default"], {
+    content: content,
+    size: size,
+    index: groupIndex,
+    ref: ref,
+    searchTerm: searchTerm,
+    dataTestId: dataTestId
+  }), (0, _react2.jsx)("ul", {
+    css: (0, _List.listStyle)({})
+  }, (_options = content.options) == null ? void 0 : _options.map(function (option, index) {
+    return (0, _react2.jsx)("li", {
+      key: (0, _helpers.generateUniqueID)('list_item' + groupIndex + index)
+    }, (0, _react2.jsx)(_ListItem["default"], {
+      content: option,
+      size: size,
+      index: '' + groupIndex + index,
+      ref: ref,
+      searchTerm: searchTerm,
+      disabled: option == null ? void 0 : option.isDisabled,
+      dataTestId: dataTestId,
+      handleOptionClick: handleOptionClick,
+      selected: (0, _utils.isSelected)({
+        item: option,
+        selectedItem: selectedItem
+      }),
+      isGroupItem: true
+    }));
+  })));
+});
+
+ListItemGroup.displayName = 'ListItemGroup';
+var _default = ListItemGroup;
+exports["default"] = _default;

package/dist/components/List/ListItemGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ListItemGroup';

package/dist/components/List/ListItemGroup/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _ListItemGroup = _interopRequireDefault(require("./ListItemGroup"));
+
+exports["default"] = _ListItemGroup["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/components/List/NormalList/NormalList.d.ts

@@ -17,6 +17,7 @@ declare const NormalList: React.ForwardRefExoticComponent<{
     searchTerm?: string | undefined;
     /** Option Click handler for SelectOption[] data case */
     handleOptionClick?: SelectHandlerType | undefined;
+    /** Defines if this is a searchable list or not **/
     isSearchable?: boolean | undefined;
 } & TestProps & React.RefAttributes<HTMLDivElement>>;
 export default NormalList;

package/dist/components/List/NormalList/NormalList.js

@@ -9,11 +9,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _helpers = require("../../../utils/helpers");
 
+var _List = require("../List.style");
+
 var _ListItem = _interopRequireDefault(require("../ListItem"));
 
-var _utils = require("../utils");
+var _ListItemGroup = _interopRequireDefault(require("../ListItemGroup"));
 
-var _NormalList = require("./NormalList.style");
+var _utils = require("../utils");
 
 var _react2 = require("@emotion/react");
 
@@ -30,42 +32,41 @@ var NormalList = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       searchTerm = _ref.searchTerm,
       handleOptionClick = _ref.handleOptionClick,
       dataTestId = _ref.dataTestId;
+  var newItems = defaultOption ? [defaultOption].concat(items) : items;
   return (0, _react2.jsx)("div", {
     "data-testid": dataTestId ? dataTestId + "_list" : 'ictinus_list'
   }, (0, _react2.jsx)("ul", {
-    css: (0, _NormalList.listStyle)({
+    css: (0, _List.listStyle)({
       width: width,
       height: height,
       isSearchable: isSearchable
     })
-  }, defaultOption && (0, _react2.jsx)("li", {
-    key: (0, _helpers.generateUniqueID)('list_item')
-  }, (0, _react2.jsx)(_ListItem["default"], {
-    content: defaultOption,
-    size: rowSize,
-    index: 0,
-    ref: ref,
-    highlighted: true,
-    dataTestId: dataTestId != null ? dataTestId : 'ictinus_list' + '_default_option',
-    handleOptionClick: handleOptionClick,
-    disabled: defaultOption == null ? void 0 : defaultOption.isDisabled,
-    selected: (0, _lodash.isUndefined)(selectedItem) || (0, _utils.isSelected)({
-      item: defaultOption,
+  }, newItems.map(function (item, index) {
+    return item != null && item.options ? (0, _react2.jsx)(_ListItemGroup["default"], {
+      content: item,
+      size: rowSize,
+      groupIndex: index,
+      ref: ref,
+      searchTerm: searchTerm,
+      dataTestId: dataTestId,
+      handleOptionClick: handleOptionClick,
       selectedItem: selectedItem
-    })
-  })), items.map(function (item, index) {
-    return (0, _react2.jsx)("li", {
+    }) : (0, _react2.jsx)("li", {
       key: (0, _helpers.generateUniqueID)('list_item' + index)
     }, (0, _react2.jsx)(_ListItem["default"], {
       content: item,
       size: rowSize,
       index: index,
       ref: ref,
+      highlighted: Boolean(defaultOption && index === 0),
       searchTerm: searchTerm,
       disabled: item == null ? void 0 : item.isDisabled,
-      dataTestId: dataTestId,
+      dataTestId: defaultOption && index === 0 ? dataTestId != null ? dataTestId : 'ictinus_list' + '_default_option' : dataTestId,
       handleOptionClick: handleOptionClick,
-      selected: (0, _utils.isSelected)({
+      selected: defaultOption && index === 0 ? (0, _lodash.isUndefined)(selectedItem) || (0, _utils.isSelected)({
+        item: defaultOption,
+        selectedItem: selectedItem
+      }) : (0, _utils.isSelected)({
         item: item,
         selectedItem: selectedItem
       })

package/dist/components/List/NormalList/NormalList.style.d.ts

@@ -1,7 +0,0 @@
-import { SerializedStyles } from '@emotion/react';
-import { Theme } from 'theme';
-export declare const listStyle: ({ width, height, isSearchable, }: {
-    width?: number | undefined;
-    height?: number | undefined;
-    isSearchable?: boolean | undefined;
-}) => (theme: Theme) => SerializedStyles;

package/dist/components/List/NormalList/NormalList.style.js

@@ -1,24 +1 @@
-"use strict";
-
-exports.__esModule = true;
-exports.listStyle = void 0;
-
-var _react = require("@emotion/react");
-
-var _utils = require("../../../theme/utils");
-
-var listStyle = function listStyle(_ref) {
-  var width = _ref.width,
-      height = _ref.height,
-      isSearchable = _ref.isSearchable;
-  return function (theme) {
-    return (
-      /*#__PURE__*/
-
-      /*#__PURE__*/
-      (0, _react.css)("padding-left:0;margin-top:0;margin-bottom:0;border-radius:", isSearchable ? 'initial' : theme.spacing.xsm, ";width:", width ? (0, _utils.rem)(width) : '100%', ";height:", height ? (0, _utils.rem)(height) : '100%', ";overflow:auto;overflow-x:hidden;" + (process.env.NODE_ENV === "production" ? "" : ";label:listStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTm9ybWFsTGlzdC9Ob3JtYWxMaXN0LnN0eWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVk2QyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9MaXN0L05vcm1hbExpc3QvTm9ybWFsTGlzdC5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAndGhlbWUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgbGlzdFN0eWxlID0gKHtcbiAgd2lkdGgsXG4gIGhlaWdodCxcbiAgaXNTZWFyY2hhYmxlLFxufToge1xuICB3aWR0aD86IG51bWJlcjtcbiAgaGVpZ2h0PzogbnVtYmVyO1xuICBpc1NlYXJjaGFibGU/OiBib29sZWFuO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBwYWRkaW5nLWxlZnQ6IDA7XG4gIG1hcmdpbi10b3A6IDA7XG4gIG1hcmdpbi1ib3R0b206IDA7XG4gIGJvcmRlci1yYWRpdXM6ICR7aXNTZWFyY2hhYmxlID8gJ2luaXRpYWwnIDogdGhlbWUuc3BhY2luZy54c219O1xuICB3aWR0aDogJHt3aWR0aCA/IHJlbSh3aWR0aCkgOiAnMTAwJSd9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0ID8gcmVtKGhlaWdodCkgOiAnMTAwJSd9O1xuICBvdmVyZmxvdzogYXV0bztcbiAgb3ZlcmZsb3cteDogaGlkZGVuO1xuYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:listStyle;")
-    );
-  };
-};
-
-exports.listStyle = listStyle;
+"use strict";