@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.211

package/lib/atoms/OptionsList/index.test.js

@@ -41,6 +41,8 @@ var item0Id = '0';
 var item0Label = 'Option 0';
 var item2Id = '2';
 var item2Label = 'Option 2';
+var disabledItemLabel = 'Option 4';
+var disabledItemId = '4';
 var items = [{
   id: item0Id,
   label: item0Label,
@@ -75,8 +77,8 @@ var items = [{
 }, {
   label: 'Category 2',
   items: [{
-    id: '4',
-    label: 'Option 4',
+    id: disabledItemId,
+    label: disabledItemLabel,
     value: '4',
     disabled: true
   }, {
@@ -84,6 +86,14 @@ var items = [{
     label: 'Option 5',
     value: '5'
   }]
+}, {
+  label: 'WithDetailLabel',
+  items: [{
+    id: '6',
+    label: 'custom label here',
+    labelDetails: 'test detail label',
+    value: '6'
+  }]
 }];
 var defaultProps = {
   items: items,
@@ -91,206 +101,289 @@ var defaultProps = {
   onChange: jest.fn()
 };
 describe('OptionsList', function () {
-  it('renders items and categories sub items', function () {
-    var _render = render(_react.default.createElement(_.default, defaultProps)),
-        queryByText = _render.queryByText;
-
-    items.forEach(function (item) {
-      var label = item.label;
-      expect(queryByText(label)).toBeInTheDocument();
-
-      if ((0, _utils.isCategory)(item)) {
-        item.items.forEach(function (_ref2) {
-          var subItemLabel = _ref2.label;
-          expect(queryByText(subItemLabel)).toBeInTheDocument();
-        });
-      }
+  ['small', 'medium'].forEach(function (size) {
+    it('renders items and categories sub items', function () {
+      var _render = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        size: size
+      }))),
+          queryByText = _render.queryByText;
+
+      items.forEach(function (item) {
+        var label = item.label;
+        expect(queryByText(label)).toBeInTheDocument();
+
+        if ((0, _utils.isCategory)(item)) {
+          item.items.forEach(function (_ref2) {
+            var subItemLabel = _ref2.label;
+            expect(queryByText(subItemLabel)).toBeInTheDocument();
+          });
+        }
+      });
     });
-  });
-  it('renders custom option label', function () {
-    var renderOptionLabel = function renderOptionLabel(_ref3) {
-      var label = _ref3.label;
-      return _react.default.createElement("span", null, "".concat(label, " foo"));
-    };
-
-    var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-      renderOptionLabel: renderOptionLabel
-    }))),
-        queryByText = _render2.queryByText;
-
-    items.forEach(function (item) {
-      var label = item.label;
-
-      if ((0, _utils.isCategory)(item)) {
-        item.items.forEach(function (_ref4) {
-          var subItemLabel = _ref4.label;
-          expect(queryByText("".concat(subItemLabel, " foo"))).toBeInTheDocument();
-        });
-      } else {
-        expect(queryByText("".concat(label, " foo"))).toBeInTheDocument();
-      }
+    it('renders custom option label', function () {
+      var renderOptionLabel = function renderOptionLabel(_ref3) {
+        var label = _ref3.label;
+        return _react.default.createElement("span", null, "".concat(label, " foo"));
+      };
+
+      var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        renderOptionLabel: renderOptionLabel,
+        size: size
+      }))),
+          queryByText = _render2.queryByText;
+
+      items.forEach(function (item) {
+        var label = item.label;
+
+        if ((0, _utils.isCategory)(item)) {
+          item.items.forEach(function (_ref4) {
+            var subItemLabel = _ref4.label;
+            expect(queryByText("".concat(subItemLabel, " foo"))).toBeInTheDocument();
+          });
+        } else {
+          expect(queryByText("".concat(label, " foo"))).toBeInTheDocument();
+        }
+      });
     });
-  });
-  it('navigates through the options with arrow keys', function () {
-    var _render3 = render(_react.default.createElement(_.default, defaultProps)),
-        getByText = _render3.getByText,
-        container = _render3.container;
-
-    var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
+    it('checks that labelDetails when provided ', function () {
+      var _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        size: size
+      }))),
+          getByText = _render3.getByText;
 
-    _react2.fireEvent.keyDown(container, {
-      key: 'Tab'
+      expect(getByText('test detail label')).toBeInTheDocument();
     });
+    it('navigates through the options with arrow keys', function () {
+      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        size: size
+      }))),
+          getByText = _render4.getByText,
+          container = _render4.container;
 
-    _react2.fireEvent.focus(optionsList); // default first element active
-    // check the active item with border style
+      var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
+      _react2.fireEvent.keyDown(container, {
+        key: 'Tab'
+      });
 
-    expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n    "));
+      _react2.fireEvent.focus(optionsList); // default first element active
+      // check the active item with border style
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'ArrowDown'
-    });
 
-    expect(getByText(defaultProps.items[1].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n    "));
+      expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n        "));
+
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'ArrowDown'
+      });
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'ArrowUp'
+      expect(getByText(defaultProps.items[1].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n        "));
+
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'ArrowUp'
+      });
+
+      expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n        "));
     });
+    it('selects an item with Enter or Space key', function () {
+      var onChange = jest.fn();
 
-    expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n    "));
-  });
-  it('selects an item with Enter or Space key', function () {
-    var onChange = jest.fn();
+      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onChange: onChange,
+        size: size
+      }))),
+          getByLabelText = _render5.getByLabelText,
+          container = _render5.container;
 
-    var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-      onChange: onChange
-    }))),
-        getByLabelText = _render4.getByLabelText,
-        container = _render4.container;
+      var selectedItem = defaultProps.items[1];
+      var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
-    var selectedItem = defaultProps.items[1];
-    var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
+      _react2.fireEvent.keyDown(container, {
+        key: 'Tab'
+      });
 
-    _react2.fireEvent.keyDown(container, {
-      key: 'Tab'
-    });
+      _react2.fireEvent.focus(optionsList);
 
-    _react2.fireEvent.focus(optionsList);
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'ArrowDown'
+      });
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'ArrowDown'
-    });
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'Enter'
+      });
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'Enter'
+      expect(onChange).toHaveBeenCalledWith(selectedItem.id);
+      expect(getByLabelText(selectedItem.label)).toBeChecked();
     });
+    describe('selecting disabled element with keyboard', function () {
+      it('selects an item with Enter or Space key', function () {
+        var onChange = jest.fn();
+        var onlyDisabledItems = [{
+          id: '2',
+          label: 'Option 2',
+          value: '2',
+          disabled: true
+        }, {
+          id: disabledItemId,
+          label: disabledItemLabel,
+          value: '4',
+          disabled: true
+        }];
 
-    expect(onChange).toHaveBeenCalledWith(selectedItem.id);
-    expect(getByLabelText(selectedItem.label)).toBeChecked();
-  });
-  describe('single selection', function () {
-    it('calls onChange with id when item is clicked', function () {
-      var onChange = jest.fn();
-
-      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        onChange: onChange
-      }))),
-          getByText = _render5.getByText,
-          getByLabelText = _render5.getByLabelText;
+        var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          items: onlyDisabledItems,
+          onChange: onChange,
+          size: size
+        }))),
+            getByLabelText = _render6.getByLabelText,
+            container = _render6.container;
 
-      var item = items[0];
+        var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
-      _react2.fireEvent.click(getByText(item.label));
+        _react2.fireEvent.keyDown(container, {
+          key: 'Tab'
+        });
 
-      expect(onChange).toHaveBeenLastCalledWith(item.id);
-      var subItem = items[2].items[0];
+        _react2.fireEvent.focus(optionsList);
 
-      _react2.fireEvent.click(getByText(subItem.label));
+        _react2.fireEvent.keyDown(optionsList, {
+          key: 'ArrowDown'
+        });
 
-      expect(onChange).toHaveBeenLastCalledWith(subItem.id); // there should be an item marked as selected
+        _react2.fireEvent.keyDown(optionsList, {
+          key: 'Enter'
+        });
 
-      expect(getByLabelText(subItem.label)).toBeChecked();
+        expect(onChange).not.toHaveBeenCalledWith(disabledItemId);
+        expect(onChange).not.toHaveBeenCalled();
+        expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+      });
     });
-    describe('controlled', function () {
-      it('prefers value over internal', function () {
-        var selected = items[1];
+    describe('single selection', function () {
+      it('calls onChange with id when item is clicked', function () {
+        var onChange = jest.fn();
 
-        var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-          selected: selected.id
+        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          onChange: onChange,
+          size: size
         }))),
-            getByText = _render6.getByText,
-            getByLabelText = _render6.getByLabelText;
+            getByText = _render7.getByText,
+            getByLabelText = _render7.getByLabelText;
 
         var item = items[0];
 
         _react2.fireEvent.click(getByText(item.label));
 
-        expect(getByLabelText(item.label)).not.toBeChecked();
-        expect(getByLabelText(selected.label)).toBeChecked();
+        expect(onChange).toHaveBeenLastCalledWith(item.id);
+        var subItem = items[2].items[0];
+
+        _react2.fireEvent.click(getByText(subItem.label));
+
+        expect(onChange).toHaveBeenLastCalledWith(subItem.id); // there should be an item marked as selected
+
+        expect(getByLabelText(subItem.label)).toBeChecked();
       });
-    });
-  });
-  describe('multi selection', function () {
-    it('calls onChange with array of selected ids when item is clicked', function () {
-      var onChange = jest.fn();
+      describe('disabled element', function () {
+        it('does not calls onChange when item is clicked', function () {
+          var onChange = jest.fn();
 
-      var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        onChange: onChange,
-        multiple: true
-      }))),
-          getByText = _render7.getByText,
-          getByLabelText = _render7.getByLabelText;
+          var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+            onChange: onChange,
+            size: size
+          }))),
+              getByText = _render8.getByText,
+              getByLabelText = _render8.getByLabelText;
 
-      var item = items[0];
+          _react2.fireEvent.click(getByText(disabledItemLabel));
 
-      _react2.fireEvent.click(getByText(item.label));
+          expect(onChange).not.toHaveBeenLastCalledWith(disabledItemId);
+          expect(onChange).not.toHaveBeenCalled(); // the item shouldn't be marked as selected
 
-      expect(onChange).toHaveBeenLastCalledWith([item.id]);
-      var subItem = items[2].items[0];
+          expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+        });
+      });
+      describe('controlled', function () {
+        it('prefers value over internal', function () {
+          var selected = items[1];
 
-      _react2.fireEvent.click(getByText(subItem.label));
+          var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+            selected: selected.id,
+            size: size
+          }))),
+              getByText = _render9.getByText,
+              getByLabelText = _render9.getByLabelText;
 
-      expect(onChange).toHaveBeenLastCalledWith([item.id, subItem.id]);
-      expect(getByLabelText(subItem.label)).toBeChecked();
-      expect(getByLabelText(item.label)).toBeChecked(); // second click unselects
+          var item = items[0];
 
-      _react2.fireEvent.click(getByText(item.label));
+          _react2.fireEvent.click(getByText(item.label));
 
-      expect(onChange).toHaveBeenLastCalledWith([subItem.id]);
+          expect(getByLabelText(item.label)).not.toBeChecked();
+          expect(getByLabelText(selected.label)).toBeChecked();
+        });
+      });
     });
-    it('adds a footer with buttons when actions are provided', function () {
-      var onClick = jest.fn();
-      var actions = [{
-        id: '1',
-        text: 'apply',
-        onClick: onClick
-      }, {
-        id: '2',
-        text: 'cancel',
-        kind: 'secondary',
-        onClick: onClick
-      }, {
-        id: '3',
-        text: 'clear',
-        kind: 'secondary',
-        variant: 'ghost',
-        paddingLeft: 4,
-        onClick: onClick
-      }];
-
-      var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        actions: actions,
-        multiple: true
-      }))),
-          baseElement = _render8.baseElement,
-          getByText = _render8.getByText;
+    describe('multi selection', function () {
+      it('calls onChange with array of selected ids when item is clicked', function () {
+        var onChange = jest.fn();
+
+        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          onChange: onChange,
+          multiple: true,
+          size: size
+        }))),
+            getByText = _render10.getByText,
+            getByLabelText = _render10.getByLabelText;
+
+        var item = items[0];
+
+        _react2.fireEvent.click(getByText(item.label));
+
+        expect(onChange).toHaveBeenLastCalledWith([item.id]);
+        var subItem = items[2].items[0];
 
-      actions.forEach(function (_ref5) {
-        var label = _ref5.text;
-        return expect(getByText(label)).toBeTruthy();
+        _react2.fireEvent.click(getByText(subItem.label));
+
+        expect(onChange).toHaveBeenLastCalledWith([item.id, subItem.id]);
+        expect(getByLabelText(subItem.label)).toBeChecked();
+        expect(getByLabelText(item.label)).toBeChecked(); // second click unselects
+
+        _react2.fireEvent.click(getByText(item.label));
+
+        expect(onChange).toHaveBeenLastCalledWith([subItem.id]);
+      });
+      it('adds a footer with buttons when actions are provided', function () {
+        var onClick = jest.fn();
+        var actions = [{
+          id: '1',
+          text: 'apply',
+          onClick: onClick
+        }, {
+          id: '2',
+          text: 'cancel',
+          kind: 'secondary',
+          onClick: onClick
+        }, {
+          id: '3',
+          text: 'clear',
+          kind: 'secondary',
+          variant: 'ghost',
+          paddingLeft: 4,
+          onClick: onClick
+        }];
+
+        var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          actions: actions,
+          multiple: true,
+          size: size
+        }))),
+            baseElement = _render11.baseElement,
+            getByText = _render11.getByText;
+
+        actions.forEach(function (_ref5) {
+          var label = _ref5.text;
+          return expect(getByText(label)).toBeTruthy();
+        });
+        expect(baseElement).toMatchSnapshot();
       });
-      expect(baseElement).toMatchSnapshot();
     });
   });
 });

package/lib/atoms/OptionsList/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAoExD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AA6ExD,eAAe,MAAM,CAAC"}

package/lib/atoms/OptionsList/schema.js

@@ -26,6 +26,7 @@ schema.makePropTypes = function () {
       disabled: _reactDesc.PropTypes.bool,
       id: _reactDesc.PropTypes.string,
       label: _reactDesc.PropTypes.string.description('The label text for an option in the dropdown list.'),
+      labelDetails: _reactDesc.PropTypes.string.description('The secondary sub-text for an option in the dropdown list.'),
       value: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.number, _reactDesc.PropTypes.string]).description('The value for an option in the dropdown list.')
     })).description('The array of item data that will be rendered').isRequired,
     minWidth: _reactDesc.PropTypes.string.description('A CSS min-width value to apply'),
@@ -36,9 +37,11 @@ schema.makePropTypes = function () {
     onChange: _reactDesc.PropTypes.func.description('Change event handler, called with the selected id or array of the selected item IDs.'),
     selected: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string)]).description('Used when component is controlled. Defines the item(s) selected in the options list.'),
     renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value.'),
+    pointerEvents: _reactDesc.PropTypes.string.description('Defines the value of pointer-events of the options.').defaultValue('none'),
     selectable: _reactDesc.PropTypes.bool.description('Enables selection in the options list.').defaultValue(true),
     role: _reactDesc.PropTypes.string.description('The role assigned to the list.').defaultValue('listbox'),
-    itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option')
+    itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option'),
+    size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the OptionList').defaultValue('small')
   };
 };
 

package/lib/atoms/OptionsList/types.d.ts

@@ -5,9 +5,11 @@ import { AvatarProps } from '../../components/Avatar';
 import { BadgeProps } from '../../components/Badge';
 import { DimensionsProps } from '../../modifiers/dimensions';
 import { ButtonProps } from '../../components/Button';
+import { LinkProps } from '../../components/Link';
 export declare type OptionAvatarProps = Omit<AvatarProps, 'ref' | 'size'>;
 export declare type OptionBadgeProps = Omit<BadgeProps, 'size' | 'variant'>;
 export declare type InputMethod = 'mouse' | 'keyboard' | undefined;
+export declare type Size = 'small' | 'medium' | undefined;
 export declare type Selection = string | string[];
 export declare type OptionsListDimensions = Pick<DimensionsProps, 'minWidth' | 'maxHeight' | 'maxWidth'>;
 interface AvatarDecoration extends OptionAvatarProps {
@@ -37,6 +39,8 @@ export interface Category {
     id?: string;
     items: Option[];
     label: string;
+    showCheckbox?: boolean;
+    size?: Size;
 }
 export declare type CategoryProps = Category;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
@@ -46,6 +50,10 @@ interface BaseOption {
     disabled?: boolean;
     id: string;
     label: string;
+    labelDetails?: string;
+    showCheckbox?: boolean;
+    meta?: Record<any, unknown>;
+    size?: Size;
 }
 export interface ItemOption extends BaseOption {
     value?: string;
@@ -69,12 +77,29 @@ export interface OptionsListProps extends OptionsListDimensions {
     defaultActiveId?: string;
     onChangeActiveItem?: (activeId: string) => void;
     onKeyDown?: (event: KeyboardEvent) => void;
+    showCheckbox?: boolean;
     tabIndex?: number;
     selectable?: boolean;
+    size?: Size;
     defaultSelected?: Selection;
     role?: string;
     itemRole?: string;
+    pointerEvents?: string;
 }
 export declare type OptionsListContainerRef = HTMLUListElement;
+export interface StyledCategoryProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    size: Size;
+}
+export interface ContainerProps {
+    borderRadius?: BorderRadiusProperty<string>;
+    isActive: boolean;
+    multiple: boolean;
+    inputMethod: InputMethod;
+    size: Size;
+    pointerEvents?: string;
+}
+export interface StyledLinkProps extends LinkProps {
+    disabled: boolean;
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/atoms/OptionsList/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}

package/lib/atoms/OptionsList/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/atoms/RequiredIcon.d.ts

@@ -0,0 +1,9 @@
+import { RefForwardingComponent, RefAttributes } from 'react';
+interface Props {
+    marginLeft?: string;
+    marginTop?: string;
+}
+declare type RequiredIconType = RefForwardingComponent<HTMLDivElement, RefAttributes<HTMLDivElement> & Props>;
+declare const RequiredIcon: RequiredIconType;
+export default RequiredIcon;
+//# sourceMappingURL=RequiredIcon.d.ts.map

package/lib/atoms/RequiredIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequiredIcon.d.ts","sourceRoot":"","sources":["../../src/atoms/RequiredIcon.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,sBAAsB,EAGtB,aAAa,EACd,MAAM,OAAO,CAAC;AAOf,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,aAAK,gBAAgB,GAAG,sBAAsB,CAC5C,cAAc,EACd,aAAa,CAAC,cAAc,CAAC,GAAG,KAAK,CACtC,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,gBASnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/atoms/{InputField/RequiredIcon.js → RequiredIcon.js}

@@ -21,10 +21,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var RequiredIconContainer = _styledComponents.default.span.withConfig({
+var RequiredIconContainer = _styledComponents.default.div.withConfig({
   displayName: "RequiredIcon__RequiredIconContainer",
-  componentId: "d5jm3s-0"
-})(["margin-left:5px;"]);
+  componentId: "sc-18pnvm5-0"
+})(["display:inline;margin-left:", ";margin-top:", ";"], function (props) {
+  return props.marginLeft || '3px';
+}, function (props) {
+  return props.marginTop || '0px';
+});
 
 var RequiredIcon = (0, _react.forwardRef)(function (props, ref) {
   return _react.default.createElement(RequiredIconContainer, _extends({}, props, {

package/lib/components/Accordion/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Accordion/useAccordion/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});