@decisiv/ui-components 2.0.1-alpha.20 → 2.0.1-alpha.201

package/lib/atoms/InputField/index.js

@@ -29,7 +29,7 @@ var _Containers = require("./Containers");
 
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
 
-var _RequiredIcon = _interopRequireDefault(require("./RequiredIcon"));
+var _RequiredIcon = _interopRequireDefault(require("../RequiredIcon"));
 
 var _HelpMessage = _interopRequireDefault(require("./HelpMessage"));
 
@@ -62,8 +62,11 @@ function InputField(props, targetRef) {
       _props$cursor = props.cursor,
       cursor = _props$cursor === void 0 ? 'text' : _props$cursor,
       disabled = props.disabled,
+      _props$hideLabel = props.hideLabel,
+      hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
       helpMessage = props.helpMessage,
       IconComponent = props.icon,
+      secondaryElement = props.secondaryElement,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
       label = props.label,
@@ -82,7 +85,12 @@ function InputField(props, targetRef) {
       style = props.style,
       value = props.value,
       warningMessage = props.warningMessage,
-      rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "helpMessage", "icon", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage"]);
+      withWarningIntent = props.withWarningIntent,
+      _props$isTextArea = props.isTextArea,
+      isTextArea = _props$isTextArea === void 0 ? false : _props$isTextArea,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? false : _props$multiple,
+      rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "hideLabel", "helpMessage", "icon", "secondaryElement", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage", "withWarningIntent", "isTextArea", "multiple"]);
 
   var fallbackTargetRef = (0, _react.useRef)(null);
   var finalTargetRef = targetRef || fallbackTargetRef;
@@ -132,8 +140,9 @@ function InputField(props, targetRef) {
   };
 
   var onChangeHandler = function onChangeHandler(event) {
-    if (event && event.target.value) {
-      setContentLength(event.target.value.length);
+    if (event && event.target) {
+      var targetValue = event.target.value;
+      setContentLength(targetValue ? targetValue.length : 0);
     }
 
     if (onChange) {
@@ -150,18 +159,25 @@ function InputField(props, targetRef) {
     style: style
   }, _react.default.createElement(_Containers.InputContainer, {
     cursor: cursor,
+    hiddenLabel: hideLabel,
     disabled: disabled,
-    hasWarning: !!warningMessage,
+    hasWarning: !!warningMessage || withWarningIntent,
     isFocused: isFocused,
     readOnly: readOnly,
     ref: inputContainerRef,
     onClick: onInputContainerClickHandler,
-    onKeyDown: onKeyDown
-  }, IconComponent && _react.default.createElement(_Containers.IconContainer, null, _react.default.createElement(IconComponent, null)), _react.default.createElement(_Containers.InputInnerContainer, {
-    hasIcon: !!IconComponent
+    onKeyDown: onKeyDown,
+    isTextArea: isTextArea,
+    multiple: multiple
+  }, IconComponent && _react.default.createElement(_Containers.IconContainer, {
+    hiddenLabel: hideLabel
+  }, _react.default.createElement(IconComponent, null)), _react.default.createElement(_Containers.InputInnerContainer, {
+    hasIcon: !!IconComponent,
+    hiddenLabel: hideLabel
   }, _react.default.createElement(_InputLabel.default, {
     disabled: disabled,
     htmlFor: targetId,
+    hidden: hideLabel,
     id: labelId,
     readOnly: readOnly,
     onClick: function onClick(event) {
@@ -185,7 +201,9 @@ function InputField(props, targetRef) {
     ref: finalTargetRef,
     required: required,
     value: value
-  })))), warningMessage && _react.default.createElement(_Message.default, {
+  }))), secondaryElement && _react.default.createElement(_Containers.IconContainer, {
+    rightPlacement: true
+  }, secondaryElement)), warningMessage && _react.default.createElement(_Message.default, {
     intent: "warning"
   }, warningMessage), _react.default.createElement(_HelpMessage.default, {
     contentLength: contentLength,

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

@@ -0,0 +1,91 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react2 = require("@testing-library/react");
+
+var _ = _interopRequireDefault(require("."));
+
+var _providers = require("../../providers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+describe('InputField', function () {
+  var wrapper = function wrapper(_ref) {
+    var children = _ref.children;
+    return _react.default.createElement(_providers.ConfigProvider, null, children);
+  };
+
+  var render = function render(ui, options) {
+    return (0, _react2.render)(ui, _objectSpread({}, options, {
+      wrapper: wrapper
+    }));
+  };
+
+  var Dummy = _styledComponents.default.textarea.attrs({
+    'data-testid': 'test-textarea'
+  }).withConfig({
+    displayName: "indextest__Dummy",
+    componentId: "i3buhi-0"
+  })([""]);
+
+  var textFinder = function textFinder(text) {
+    return function (content, node) {
+      var hasText = function hasText(n) {
+        return n.textContent === text;
+      };
+
+      var nodeHasText = hasText(node);
+      var childrenDontHaveText = Array.from(node.children).every(function (child) {
+        return !hasText(child);
+      });
+      return nodeHasText && childrenDontHaveText;
+    };
+  };
+
+  describe('character counter', function () {
+    it('updates as text is entered', function () {
+      var label = 'label';
+      var initialValue = 'Initial text';
+
+      var _render = render(_react.default.createElement(_.default, {
+        label: label,
+        value: initialValue,
+        showCharacterCount: true,
+        maxLength: 100
+      }, function (p) {
+        return _react.default.createElement(Dummy, p);
+      })),
+          getByText = _render.getByText,
+          getByTestId = _render.getByTestId;
+
+      expect(getByText(textFinder("You have ".concat(100 - initialValue.length, " characters left (100 max).")))).toBeTruthy();
+      var textarea = getByTestId('test-textarea');
+      var newValue = "".concat(initialValue, " with some additional text");
+
+      _react2.fireEvent.change(textarea, {
+        target: {
+          value: newValue
+        }
+      });
+
+      expect(getByText(textFinder("You have ".concat(100 - newValue.length, " characters left (100 max).")))).toBeTruthy();
+
+      _react2.fireEvent.change(textarea, {
+        target: {
+          value: ''
+        }
+      });
+
+      expect(getByText(textFinder("You have 100 characters left (100 max)."))).toBeTruthy();
+    });
+  });
+});

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAiElD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAsElD,eAAe,MAAM,CAAC"}

package/lib/atoms/InputField/schema.js

@@ -16,12 +16,13 @@ schema.makePropTypes = function () {
   return {
     disabled: _reactDesc.PropTypes.bool.description('Sets the input state to disabled if true.'),
     helpMessage: _reactDesc.PropTypes.string.description("A short message to help clarify the input's purpose to the user."),
+    hideLabel: _reactDesc.PropTypes.bool.description("Visually hides the label, but leaves it available for screen readers. Use this only if you are sure the input doesn't need a visual label").defaultValue('false'),
     icon: _reactDesc.PropTypes.element.description('An icon to be rendered on the left side of the input.'),
     id: _reactDesc.PropTypes.string.description('A unique ID for the input.'),
     inputContainerRef: _reactDesc.PropTypes.oneOfType([// Either a function
-    _reactDesc.PropTypes.func, // Or the instance of a DOM native element (see the note about SSR)
+    _reactDesc.PropTypes.func, // Or the instance of a DOM native element (current will be an instance of HTMLDivElement)
     _reactDesc.PropTypes.shape({
-      current: _reactDesc.PropTypes.instanceOf(HTMLDivElement)
+      current: _reactDesc.PropTypes.any
     })]).description('A reference to the container component for the input field.'),
     label: _reactDesc.PropTypes.string.description('A label for the input field.').isRequired,
     labelId: _reactDesc.PropTypes.string.description("A unique ID for the input's label. This will be used in some ARIA attributes as well."),

package/lib/atoms/OptionsList/Category/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const Category: ({ borderRadius, label, items, showCheckbox, size, }: import("../types").Category) => JSX.Element;
+export default Category;
+//# sourceMappingURL=index.d.ts.map

package/lib/atoms/OptionsList/Category/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/index.tsx"],"names":[],"mappings":";AAOA,QAAA,MAAM,QAAQ,mGA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/atoms/OptionsList/{Category.js → Category/index.js}

@@ -5,44 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+var _Option = _interopRequireDefault(require("../Option"));
 
-var _designTokens = require("@decisiv/design-tokens");
+var _utils = require("../utils");
 
-var _Option = _interopRequireDefault(require("./Option"));
+var _styles = require("./styles");
 
-var _utils = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var StyledCategory = _styledComponents.default.li.attrs({
-  role: 'option',
-  'aria-disabled': true
-}).withConfig({
-  displayName: "Category__StyledCategory",
-  componentId: "sc-1kvf2r-0"
-})(["color:", ";font-size:", ";cursor:default;line-height:1.4;text-align:left;padding:", ";"], (0, _toColorString.default)(_designTokens.color.base.alaskanHusky), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2), "".concat((0, _rem.default)(8), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(7), " ").concat((0, _rem.default)(10)));
-
 var Category = function Category(_ref) {
   var borderRadius = _ref.borderRadius,
       label = _ref.label,
-      items = _ref.items;
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(StyledCategory, null, label), items.map(function (subItem) {
+      items = _ref.items,
+      showCheckbox = _ref.showCheckbox,
+      size = _ref.size;
+  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_styles.StyledCategory, {
+    size: size
+  }, label), items.map(function (subItem) {
     var id = (0, _utils.getId)(subItem);
     return _react.default.createElement(_Option.default, _extends({}, subItem, {
       key: id,
       id: id,
-      borderRadius: borderRadius
+      borderRadius: borderRadius,
+      showCheckbox: showCheckbox,
+      size: size
     }));
   }));
 };

package/lib/atoms/OptionsList/Category/styles.d.ts

@@ -0,0 +1,6 @@
+import { StyledCategoryProps } from '../types';
+export declare const StyledCategory: import("styled-components").StyledComponent<"li", any, {
+    role: "option";
+    'aria-disabled': true;
+} & StyledCategoryProps, "role" | "aria-disabled">;
+//# sourceMappingURL=styles.d.ts.map

package/lib/atoms/OptionsList/Category/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAmB/C,eAAO,MAAM,cAAc;;;kDAa1B,CAAC"}

package/lib/atoms/OptionsList/Category/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledCategory = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+/* eslint-disable import/prefer-default-export */
+var withCategorySizeModifiers = function withCategorySizeModifiers(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size;
+  if (size === 'medium') return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.paragraph), "".concat((0, _rem.default)(15), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(10), " ").concat((0, _rem.default)(10)));
+  return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.paragraph2), "".concat((0, _rem.default)(15), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(7), " ").concat((0, _rem.default)(10)));
+};
+
+var StyledCategory = _styledComponents.default.li.attrs({
+  role: 'option',
+  'aria-disabled': true
+}).withConfig({
+  displayName: "styles__StyledCategory",
+  componentId: "sc-17ahmuu-0"
+})(["color:", ";cursor:default;text-transform:uppercase;line-height:1.4;text-align:left;border-top:", " solid ", ";font-weight:", ";", ""], (0, _toColorString.default)(_designTokens.color.base.charcoal), (0, _rem.default)(1), (0, _toColorString.default)(_designTokens.color.base.quarterMoon), _designTokens.typography.weight.alias.semibold, withCategorySizeModifiers);
+
+exports.StyledCategory = StyledCategory;

package/lib/atoms/OptionsList/{Option.d.ts → Option/index.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
-import { OptionProps } from './types';
+import { OptionProps } from '../types';
 declare function Option(props: OptionProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Option>;
 export default _default;
-//# sourceMappingURL=Option.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/atoms/OptionsList/Option/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,WAAW,EAKZ,MAAM,UAAU,CAAC;AA4DlB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAwH/C;;AAED,wBAAkC"}

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

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _context = require("../context");
+
+var _Checkbox = _interopRequireDefault(require("../../../components/Checkbox"));
+
+var _Avatar = _interopRequireDefault(require("../../../components/Avatar"));
+
+var _Badge = _interopRequireDefault(require("../../../components/Badge"));
+
+var _utils = require("../utils");
+
+var _styles = require("./styles");
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var sizeMapping = {
+  small: 'small',
+  medium: undefined
+}; // This is used below to silence a React warning about
+// having a controlled input without a change handler.
+
+var noop = process.env.NODE_ENV === 'production' ? undefined : function () {};
+
+function isDecoration(decoration) {
+  var type = (0, _get.default)(decoration, 'type');
+  return type !== undefined;
+}
+
+function DecorationComponent(props) {
+  var disabled = props.disabled,
+      rest = _objectWithoutProperties(props, ["disabled"]);
+
+  switch (props.type) {
+    case 'Avatar':
+      return _react.default.createElement(_Avatar.default, rest);
+
+    case 'Badge':
+      return _react.default.createElement(_Badge.default, _extends({}, rest, {
+        variant: "square",
+        color: disabled ? 'licoriceMousse' : props.color
+      }));
+
+    case 'Icon':
+      {
+        var Icon = props.icon;
+        return _react.default.createElement(Icon, null);
+      }
+
+    default:
+      return null;
+  }
+} // We always render the checkbox/radio inputs so that regular form
+// submission (i.e. one not handled programmatically) still works.
+
+
+function Option(props) {
+  var id = props.id,
+      label = props.label,
+      decoration = props.decoration,
+      disabled = props.disabled,
+      borderRadius = props.borderRadius,
+      labelDetails = props.labelDetails,
+      _props$showCheckbox = props.showCheckbox,
+      showCheckbox = _props$showCheckbox === void 0 ? true : _props$showCheckbox,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size;
+  var decorationType = (0, _get.default)(decoration, 'type');
+
+  var _useOptionsList = (0, _context.useOptionsList)(),
+      toggleItemSelection = _useOptionsList.toggleItemSelection,
+      selectedIds = _useOptionsList.selectedIds,
+      name = _useOptionsList.name,
+      multiple = _useOptionsList.multiple,
+      renderOptionLabel = _useOptionsList.renderOptionLabel,
+      activeId = _useOptionsList.activeId,
+      setInputMethod = _useOptionsList.setInputMethod,
+      updateActiveId = _useOptionsList.updateActiveId,
+      inputMethod = _useOptionsList.inputMethod,
+      selectable = _useOptionsList.selectable,
+      itemRole = _useOptionsList.itemRole;
+
+  var checked = selectedIds.includes(id);
+  var commonProps = {
+    name: name,
+    checked: checked,
+    onChange: noop,
+    tabIndex: -1
+  };
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    setInputMethod('mouse');
+    updateActiveId(disabled ? '' : id);
+  }, [setInputMethod, updateActiveId, disabled, id]);
+  var handleClick = (0, _react.useCallback)(function () {
+    if (!disabled) toggleItemSelection(id);
+  }, [toggleItemSelection, id, disabled]);
+  var LabelWrapper = (0, _react.useMemo)(function () {
+    return function (_ref) {
+      var children = _ref.children;
+      return selectable ? _react.default.createElement("label", {
+        className: "label"
+      }, children) : _react.default.createElement("div", {
+        className: "label"
+      }, children);
+    };
+  }, [selectable]);
+  return _react.default.createElement(_styles.Container, {
+    "aria-disabled": !!disabled,
+    "aria-selected": checked,
+    borderRadius: borderRadius,
+    "data-id": id,
+    key: id,
+    onClick: handleClick,
+    multiple: !!multiple,
+    isActive: activeId === id,
+    tabIndex: -1,
+    onMouseEnter: handleMouseEnter,
+    inputMethod: inputMethod,
+    role: itemRole,
+    size: size
+  }, (0, _utils.isLink)(props) ? _react.default.createElement(_styles.StyledLink, {
+    tabIndex: -1,
+    to: props.linkTo,
+    text: label,
+    icon: isDecoration(decoration) && decoration.type === 'Icon' ? decoration.icon : undefined,
+    disabled: !!disabled
+  }) : _react.default.createElement(LabelWrapper, null, selectable && (multiple && !!showCheckbox ? _react.default.createElement(_Checkbox.default, _extends({}, commonProps, {
+    disabled: !!disabled,
+    size: sizeMapping[size],
+    value: props.value
+  })) : _react.default.createElement("input", _extends({}, commonProps, {
+    type: "radio",
+    hidden: true,
+    value: props.value
+  }))), isDecoration(decoration) && _react.default.createElement(_styles.DecorationComponentContainer, {
+    disabled: !!disabled && decorationType !== 'Icon'
+  }, _react.default.createElement(DecorationComponent, decoration)), renderOptionLabel ? renderOptionLabel({
+    id: id,
+    label: label,
+    labelDetails: labelDetails,
+    value: props.value,
+    disabled: disabled,
+    meta: props.meta
+  }) : _react.default.createElement(_styles.StyleLabelWrapper, null, _react.default.createElement(_styles.StyledLabel, null, label), labelDetails && _react.default.createElement(_styles.StyledLabelDetails, {
+    id: "optionLabelDetails",
+    size: sizeMapping[size]
+  }, labelDetails))));
+}
+
+var _default = _react.default.memo(Option);
+
+exports.default = _default;

package/lib/atoms/OptionsList/Option/styles.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { StyledLinkProps, ContainerProps } from '../types';
+export declare const StyledLink: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLAnchorElement, import("../../../components/Link").LinkProps>, any, StyledLinkProps, never>;
+export declare const Container: import("styled-components").StyledComponent<"li", any, ContainerProps, never>;
+export declare const StyleLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DecorationComponentContainer: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"p", any, import("../../../components/Typography").PProps & {
+    as: string;
+    color: "inherit";
+}, "color" | "as">;
+export declare const StyledLabelDetails: import("styled-components").StyledComponent<"p", any, import("../../../components/Typography").PProps & {
+    as: string;
+    shade: number;
+}, "as" | "shade">;
+//# sourceMappingURL=styles.d.ts.map

package/lib/atoms/OptionsList/Option/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/styles.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK3D,eAAO,MAAM,UAAU,mLAgBtB,CAAC;AAuBF,eAAO,MAAM,SAAS,+EA6GrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,oEAI7B,CAAC;AAEF,eAAO,MAAM,4BAA4B;;SAUxC,CAAC;AAEF,eAAO,MAAM,WAAW;;;kBAEvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;kBAG3B,CAAC"}

package/lib/atoms/OptionsList/Option/styles.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledLabelDetails = exports.StyledLabel = exports.DecorationComponentContainer = exports.StyleLabelWrapper = exports.Container = exports.StyledLink = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _Link = _interopRequireWildcard(require("../../../components/Link"));
+
+var _Typography = require("../../../components/Typography");
+
+var _styleModifiers = require("../../../utils/styleModifiers");
+
+var _focusRingWithColor = _interopRequireDefault(require("../../../utils/focusRingWithColor"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+var enabledFGColor = _designTokens.color.interaction.pacificOcean;
+var disabledFGColor = _designTokens.color.opacity.charcoal40;
+var StyledLink = (0, _styledComponents.default)(_Link.default).withConfig({
+  displayName: "styles__StyledLink",
+  componentId: "sc-1vr9h8x-0"
+})(["&&,&&:hover:not(:active),&&:focus:not(:active){text-decoration:none;", ";", ";}"], (0, _Link.linkColorStyles)(enabledFGColor, enabledFGColor, enabledFGColor), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["", ";cursor:not-allowed;"], (0, _Link.linkColorStyles)(disabledFGColor, disabledFGColor, disabledFGColor))));
+exports.StyledLink = StyledLink;
+
+var withSizeModifiers = function withSizeModifiers(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size;
+  if (size === 'medium') return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.header4), "".concat((0, _rem.default)(10), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(10), " ").concat((0, _rem.default)(10)));
+  return (0, _styledComponents.css)(["font-size:", ";padding:", ";"], (0, _rem.default)(_designTokens.typography.size.alias.paragraph), "".concat((0, _rem.default)(5), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(5), " ").concat((0, _rem.default)(10)));
+};
+
+function getBorderRadius(_ref) {
+  var borderRadius = _ref.borderRadius;
+  return borderRadius || '2px';
+}
+
+var Container = _styledComponents.default.li.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1vr9h8x-1"
+})(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:none;width:100%;white-space:nowrap;", " > *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), withSizeModifiers, (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean15), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean))), (0, _styleModifiers.when)([['isActive'], ['inputMethod', 'keyboard']], (0, _styledComponents.css)(["background:none;> .label,> ", "{border-color:", ";", "}&[aria-selected='true'] > .label,&[aria-selected='true'] > ", "{color:", ";", "}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _focusRingWithColor.default)(_designTokens.color.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.opacity.charcoal40));
+
+exports.Container = Container;
+
+var StyleLabelWrapper = _styledComponents.default.div.withConfig({
+  displayName: "styles__StyleLabelWrapper",
+  componentId: "sc-1vr9h8x-2"
+})(["display:flex;flex:1;flex-direction:column;"]);
+
+exports.StyleLabelWrapper = StyleLabelWrapper;
+
+var DecorationComponentContainer = _styledComponents.default.div.withConfig({
+  displayName: "styles__DecorationComponentContainer",
+  componentId: "sc-1vr9h8x-3"
+})(["", ";"], (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["opacity:0.3;img{opacity:0.3;}"])));
+
+exports.DecorationComponentContainer = DecorationComponentContainer;
+var StyledLabel = (0, _styledComponents.default)(_Typography.P).attrs({
+  as: 'span',
+  color: 'inherit'
+}).withConfig({
+  displayName: "styles__StyledLabel",
+  componentId: "sc-1vr9h8x-4"
+})(["font-size:inherit;"]);
+exports.StyledLabel = StyledLabel;
+var StyledLabelDetails = (0, _styledComponents.default)(_Typography.P).attrs({
+  as: 'span',
+  shade: 1
+}).withConfig({
+  displayName: "styles__StyledLabelDetails",
+  componentId: "sc-1vr9h8x-5"
+})([""]);
+exports.StyledLabelDetails = StyledLabelDetails;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AAgSF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAiC5D,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AA+SF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}