@decisiv/ui-components 2.0.1-alpha.181 → 2.0.1-alpha.183

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-declare const Category: ({ borderRadius, label, items, showCheckbox, }: import("./types").Category) => JSX.Element;
+declare const Category: ({ borderRadius, label, items, showCheckbox, size, }: import("../types").Category) => JSX.Element;
 export default Category;
-//# sourceMappingURL=Category.d.ts.map
+//# 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,46 +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:", ";font-weight:", ";cursor:default;text-transform:uppercase;line-height:1.4;text-align:left;padding:", ";border-top:", " solid ", ";"], (0, _toColorString.default)(_designTokens.color.base.charcoal), (0, _rem.default)(_designTokens.typography.size.alias.paragraph2), _designTokens.typography.weight.alias.semibold, "".concat((0, _rem.default)(15), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(7), " ").concat((0, _rem.default)(10)), (0, _rem.default)(1), (0, _toColorString.default)(_designTokens.color.base.quarterMoon));
-
 var Category = function Category(_ref) {
   var borderRadius = _ref.borderRadius,
       label = _ref.label,
       items = _ref.items,
-      showCheckbox = _ref.showCheckbox;
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(StyledCategory, null, label), items.map(function (subItem) {
+      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,
-      showCheckbox: showCheckbox
+      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.js → Option/index.js}

@@ -5,35 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
-
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
-
-var _styleModifiers = require("../../utils/styleModifiers");
-
-var _Typography = require("../../components/Typography");
+var _context = require("../context");
 
-var _context = require("./context");
+var _Checkbox = _interopRequireDefault(require("../../../components/Checkbox"));
 
-var _Checkbox = _interopRequireDefault(require("../../components/Checkbox"));
+var _Avatar = _interopRequireDefault(require("../../../components/Avatar"));
 
-var _Avatar = _interopRequireDefault(require("../../components/Avatar"));
+var _Badge = _interopRequireDefault(require("../../../components/Badge"));
 
-var _Badge = _interopRequireDefault(require("../../components/Badge"));
+var _utils = require("../utils");
 
-var _Link = _interopRequireWildcard(require("../../components/Link"));
-
-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; } }
 
@@ -45,30 +31,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-function getBorderRadius(_ref) {
-  var borderRadius = _ref.borderRadius;
-  return borderRadius || '2px';
-}
-
-var enabledFGColor = _color.default.interaction.pacificOcean;
-var disabledFGColor = _color.default.opacity.charcoal40;
-var StyledLink = (0, _styledComponents.default)(_Link.default).withConfig({
-  displayName: "Option__StyledLink",
-  componentId: "sc-679ny4-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))));
-
-var Container = _styledComponents.default.li.withConfig({
-  displayName: "Option__Container",
-  componentId: "sc-679ny4-1"
-})(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;padding:", ";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)(_color.default.interaction.pacificOcean), "".concat((0, _rem.default)(5), " ").concat((0, _rem.default)(30), " ").concat((0, _rem.default)(5), " ").concat((0, _rem.default)(10)), (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean15), (0, _toColorString.default)(_color.default.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)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _focusRingWithColor.default)(_color.default.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.opacity.charcoal40));
-
-var StyleLabelWrapper = _styledComponents.default.div.withConfig({
-  displayName: "Option__StyleLabelWrapper",
-  componentId: "sc-679ny4-2"
-})(["display:flex;flex:1;flex-direction:column;"]); // This is used below to silence a React warning about
+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) {
@@ -99,12 +67,7 @@ function DecorationComponent(props) {
     default:
       return null;
   }
-}
-
-var DecorationComponentContainer = _styledComponents.default.div.withConfig({
-  displayName: "Option__DecorationComponentContainer",
-  componentId: "sc-679ny4-3"
-})(["", ";"], (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["opacity:0.3;img{opacity:0.3;}"]))); // We always render the checkbox/radio inputs so that regular form
+} // We always render the checkbox/radio inputs so that regular form
 // submission (i.e. one not handled programmatically) still works.
 
 
@@ -116,7 +79,9 @@ function Option(props) {
       borderRadius = props.borderRadius,
       labelDetails = props.labelDetails,
       _props$showCheckbox = props.showCheckbox,
-      showCheckbox = _props$showCheckbox === void 0 ? true : _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)(),
@@ -147,8 +112,8 @@ function Option(props) {
     if (!disabled) toggleItemSelection(id);
   }, [toggleItemSelection, id, disabled]);
   var LabelWrapper = (0, _react.useMemo)(function () {
-    return function (_ref2) {
-      var children = _ref2.children;
+    return function (_ref) {
+      var children = _ref.children;
       return selectable ? _react.default.createElement("label", {
         className: "label"
       }, children) : _react.default.createElement("div", {
@@ -156,7 +121,7 @@ function Option(props) {
       }, children);
     };
   }, [selectable]);
-  return _react.default.createElement(Container, {
+  return _react.default.createElement(_styles.Container, {
     "aria-disabled": !!disabled,
     "aria-selected": checked,
     borderRadius: borderRadius,
@@ -168,8 +133,9 @@ function Option(props) {
     tabIndex: -1,
     onMouseEnter: handleMouseEnter,
     inputMethod: inputMethod,
-    role: itemRole
-  }, (0, _utils.isLink)(props) ? _react.default.createElement(StyledLink, {
+    role: itemRole,
+    size: size
+  }, (0, _utils.isLink)(props) ? _react.default.createElement(_styles.StyledLink, {
     tabIndex: -1,
     to: props.linkTo,
     text: label,
@@ -177,13 +143,13 @@ function Option(props) {
     disabled: !!disabled
   }) : _react.default.createElement(LabelWrapper, null, selectable && (multiple && !!showCheckbox ? _react.default.createElement(_Checkbox.default, _extends({}, commonProps, {
     disabled: !!disabled,
-    size: "small",
+    size: sizeMapping[size],
     value: props.value
   })) : _react.default.createElement("input", _extends({}, commonProps, {
     type: "radio",
     hidden: true,
     value: props.value
-  }))), isDecoration(decoration) && _react.default.createElement(DecorationComponentContainer, {
+  }))), isDecoration(decoration) && _react.default.createElement(_styles.DecorationComponentContainer, {
     disabled: !!disabled && decorationType !== 'Icon'
   }, _react.default.createElement(DecorationComponent, decoration)), renderOptionLabel ? renderOptionLabel({
     id: id,
@@ -192,14 +158,9 @@ function Option(props) {
     value: props.value,
     disabled: disabled,
     meta: props.meta
-  }) : _react.default.createElement(StyleLabelWrapper, null, _react.default.createElement(_Typography.P, {
-    as: "span",
-    color: "inherit"
-  }, label), labelDetails && _react.default.createElement(_Typography.P, {
-    as: "span",
-    shade: 1,
-    size: "small",
-    id: "optionLabelDetails"
+  }) : _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))));
 }
 

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;AA4SF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAkC5D,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"}

package/lib/atoms/OptionsList/index.js

@@ -86,13 +86,13 @@ var Container = _styledComponents.default.ul.withConfig({
   componentId: "sc-107p8d5-0"
 })(["list-style:none;margin:0;width:100%;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
   var minWidth = _ref.minWidth;
-  return minWidth ? "\n          min-width: ".concat(minWidth, ";\n        ") : '';
+  return minWidth ? "\nmin-width: ".concat(minWidth, ";\n") : '';
 }, function (_ref2) {
   var maxWidth = _ref2.maxWidth;
-  return maxWidth ? "\n          max-width: ".concat(maxWidth, ";\n        ") : '';
+  return maxWidth ? "\nmax-width: ".concat(maxWidth, ";\n") : '';
 }, function (_ref3) {
   var maxHeight = _ref3.maxHeight;
-  return maxHeight ? "\n          max-height: ".concat(maxHeight, ";\n        ") : '';
+  return maxHeight ? "\nmax-height: ".concat(maxHeight, ";\n") : '';
 });
 
 exports.Container = Container;
@@ -113,6 +113,8 @@ function OptionsList(props, forwardedRef) {
       showCheckbox = props.showCheckbox,
       tabIndex = props.tabIndex,
       selectable = props.selectable,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
       defaultSelected = props.defaultSelected,
       itemRole = props.itemRole,
       role = props.role,
@@ -299,14 +301,16 @@ function OptionsList(props, forwardedRef) {
       return _react.default.createElement(_Category.default, _extends({}, item, {
         key: id,
         borderRadius: borderRadius,
-        showCheckbox: showCheckbox
+        showCheckbox: showCheckbox,
+        size: size
       }));
     }
 
     return _react.default.createElement(_Option.default, _extends({}, item, {
       key: id,
       borderRadius: borderRadius,
-      showCheckbox: showCheckbox
+      showCheckbox: showCheckbox,
+      size: size
     }));
   }))), actions && _react.default.createElement(Row, null, _react.default.createElement(_Footer.default, {
     actions: actions
@@ -332,7 +336,8 @@ OptionsListWithContainerRef.defaultProps = {
   itemRole: 'option',
   tabIndex: 0,
   selectable: true,
-  showCheckbox: true
+  showCheckbox: true,
+  size: 'small'
 };
 var _default = OptionsListWithContainerRef;
 exports.default = _default;