@decisiv/ui-components 2.0.1-alpha.97 → 2.0.1

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const Category: ({ borderRadius, label, items, indexOffset, showCheckbox, isDragEnabled, 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":";AAUA,QAAA,MAAM,QAAQ,+HA4Eb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBeautifulDnd = require("react-beautiful-dnd");
+
+var _ConfigProvider = require("../../../providers/ConfigProvider");
+
+var _Option = _interopRequireDefault(require("../Option"));
+
+var _utils = require("../utils");
+
+var _styles = require("./styles");
+
+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 Category = function Category(_ref) {
+  var borderRadius = _ref.borderRadius,
+      label = _ref.label,
+      items = _ref.items,
+      _ref$indexOffset = _ref.indexOffset,
+      indexOffset = _ref$indexOffset === void 0 ? 0 : _ref$indexOffset,
+      showCheckbox = _ref.showCheckbox,
+      isDragEnabled = _ref.isDragEnabled,
+      size = _ref.size;
+
+  var _useConfig = (0, _ConfigProvider.useConfig)(),
+      createPortal = _useConfig.createPortal; // Render a draggable item, using a portal if it's being dragged
+  // to avoid issues with parent containers having transform: *.
+  // See; https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md
+
+
+  var renderDraggable = function renderDraggable(item, index) {
+    var id = (0, _utils.getId)(item);
+    return _react.default.createElement(_reactBeautifulDnd.Draggable, {
+      key: id,
+      draggableId: id,
+      index: index,
+      isDragDisabled: !isDragEnabled
+    }, function (provided, snapshot) {
+      var draggableElement = _react.default.createElement(_Option.default, _extends({}, item, {
+        id: id,
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox,
+        size: size,
+        providerRef: provided.innerRef,
+        isDragEnabled: isDragEnabled,
+        draggableProps: provided.draggableProps,
+        dragHandleProps: provided.dragHandleProps
+      }));
+
+      if (snapshot.isDragging) {
+        return createPortal(draggableElement);
+      }
+
+      return draggableElement;
+    });
+  };
+
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_reactBeautifulDnd.Draggable, {
+    key: "category-".concat(label),
+    draggableId: "category-".concat(label),
+    index: indexOffset,
+    isDragDisabled: true
+  }, function (provided) {
+    return _react.default.createElement(_styles.StyledCategory, _extends({
+      size: size,
+      ref: provided.innerRef
+    }, provided.draggableProps, provided.dragHandleProps, {
+      role: "option"
+    }), label);
+  }), items.map(function (subItem, index) {
+    return renderDraggable(subItem, indexOffset + index + 1);
+  }));
+};
+
+var _default = Category;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+import { StyledCategoryProps } from '../types';
+export declare const StyledCategory: import("styled-components").StyledComponent<"li", any, {
+    'aria-disabled': true;
+} & StyledCategoryProps, "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;;yCAY1B,CAAC"}

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

@@ -0,0 +1,35 @@
+"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({
+  '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;AA6DlB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkI/C;;AAED,wBAAkC"}

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

@@ -0,0 +1,182 @@
+"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");
+
+var _Grip = _interopRequireDefault(require("../../../components/Table/Grip"));
+
+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,
+      providerRef = props.providerRef,
+      draggableProps = props.draggableProps,
+      dragHandleProps = props.dragHandleProps,
+      isDragEnabled = props.isDragEnabled;
+  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,
+      _useOptionsList$point = _useOptionsList.pointerEvents,
+      pointerEvents = _useOptionsList$point === void 0 ? 'none' : _useOptionsList$point;
+
+  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, _extends({
+    "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,
+    pointerEvents: pointerEvents,
+    ref: providerRef
+  }, draggableProps, dragHandleProps), (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, isDragEnabled && _react.default.createElement(_Grip.default, {
+    marginRight: "10px",
+    selected: checked
+  }), 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,+EA8GrB,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,86 @@
+"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;list-style:none;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:", ";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), function (_ref2) {
+  var pointerEvents = _ref2.pointerEvents;
+  return pointerEvents;
+}, 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/context.d.ts

@@ -12,6 +12,7 @@ export interface CtxValue {
     setInputMethod: (newInputMethod: InputMethod) => void;
     selectable?: boolean;
     itemRole?: string;
+    pointerEvents?: OptionsListProps['pointerEvents'];
 }
 declare const OptionsListContextProvider: import("react").ProviderExoticComponent<import("react").ProviderProps<CtxValue>>;
 declare const useOptionsList: () => CtxValue;

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAYxD,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,cAAc,EAAE,WAAW,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAGD,QAAA,MAAM,0BAA0B,kFAA8B,CAAC;AAE/D,QAAA,MAAM,cAAc,gBACY,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAYxD,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,cAAc,EAAE,WAAW,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;CACnD;AAGD,QAAA,MAAM,0BAA0B,kFAA8B,CAAC;AAE/D,QAAA,MAAM,cAAc,gBACY,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,CAAC"}

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

@@ -1,49 +1,6 @@
 import React from 'react';
 import { OptionsListProps } from './types';
-export declare const Container: import("styled-components").StyledComponent<"ul", any, Pick<Partial<{
-    height?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    maxHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    maxWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    minHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    minWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    width?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-}>, "maxHeight" | "maxWidth" | "minWidth">, never>;
+export { Container } from './styles';
 declare const OptionsListWithContainerRef: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLUListElement>>;
 export default OptionsListWithContainerRef;
 //# sourceMappingURL=index.d.ts.map

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;AAqBf,OAAO,EAEL,gBAAgB,EAQjB,MAAM,SAAS,CAAC;AAoBjB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA+iBrC,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}