@moda/om 20.1.0 → 20.3.0

package/dist/index.cjs.js

@@ -355,6 +355,7 @@ function requireColors() {
       "dark-fuchsia": "rgb(180, 60, 160)",
       "teal": "rgb(0, 111, 98)",
       "ivory": "rgb(242, 233, 219)",
+      "chatelle": "rgb(213, 194, 216)",
       "klein-blue": "rgb(38, 48, 120)",
       "persian-blue": "rgb(30, 34, 170)",
       "brick": "rgb(147, 58, 32)",
@@ -378,7 +379,8 @@ function requireColors() {
       "fuchsia": "rgb(196, 76, 176)",
       "dark-fuchsia": "rgb(180, 60, 160)",
       "teal": "rgb(0, 111, 98)",
-      "ivory": "rgb(242, 233, 219)"
+      "ivory": "rgb(242, 233, 219)",
+      "chatelle": "rgb(213, 194, 216)"
     },
     "global": {
       "klein-blue": "rgb(38, 48, 120)",
@@ -10594,14 +10596,18 @@ var SelectOption = function SelectOption(_ref) {
   var active = _ref.active,
     selected = _ref.selected,
     option = _ref.option,
+    _ref$option = _ref.option,
+    disabled = _ref$option.disabled,
+    colorSwatch = _ref$option.colorSwatch,
+    label = _ref$option.label,
     onClick = _ref.onClick,
     className = _ref.className,
     dataTestId = _ref.dataTestId;
   var ref = React.useRef(null);
   var handleClick = React.useCallback(function (event) {
     event.preventDefault();
-    if (!option.disabled) onClick(option);
-  }, [onClick, option]);
+    if (!disabled) onClick(option);
+  }, [disabled, onClick, option]);
   React.useEffect(function () {
     if (active && ref.current) {
       e(ref.current, {
@@ -10615,14 +10621,19 @@ var SelectOption = function SelectOption(_ref) {
     className: classNames('SelectOption', className, {
       'SelectOption--active': active,
       'SelectOption--selected': selected,
-      'SelectOption--disabled': option.disabled
+      'SelectOption--disabled': disabled
     }),
     onClick: handleClick,
-    "data-test-id": dataTestId ? "".concat(dataTestId, "--").concat(option.label.replace(' ', '-')) : undefined,
-    "aria-label": option.label,
+    "data-test-id": dataTestId ? "".concat(dataTestId, "--").concat(label.replace(' ', '-')) : undefined,
+    "aria-label": label,
     "aria-selected": selected,
     role: "option"
-  }, option.label);
+  }, colorSwatch && /*#__PURE__*/React.createElement("div", {
+    className: "SelectOption__color-swatch",
+    style: {
+      backgroundColor: distExports$4.colors.all[colorSwatch]
+    }
+  }), label);
 };
 
 var _excluded$k = ["idRef", "searchable", "autoFocus", "options", "selectedOption", "onSelect", "onFocus", "className", "dataTestId"];
@@ -10695,7 +10706,7 @@ var SelectOptions = function SelectOptions(_ref) {
       active: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value) === option.value,
       selected: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value,
       onClick: onSelect
-    }, option.label);
+    });
   })), options.length === 0 && /*#__PURE__*/React.createElement(Text, {
     className: "SelectOptions__none",
     color: "cement"
@@ -10907,12 +10918,12 @@ var Select = function Select(_ref) {
     idRef: idRef,
     label: label || (selected === undefined ? placeholder : undefined),
     hasValue: focused != null || selected != null
-  }), (_ref2 = focused !== null && focused !== void 0 ? focused : selected) === null || _ref2 === void 0 ? void 0 : _ref2.label, colorSwatch && /*#__PURE__*/React.createElement("div", {
+  }), colorSwatch && /*#__PURE__*/React.createElement("div", {
     className: "Select__selected-color",
     style: {
       backgroundColor: distExports$4.colors.all[colorSwatch]
     }
-  }), /*#__PURE__*/React.createElement("span", {
+  }), (_ref2 = focused !== null && focused !== void 0 ? focused : selected) === null || _ref2 === void 0 ? void 0 : _ref2.label, /*#__PURE__*/React.createElement("span", {
     className: classNames('Select__icon', {
       'Select__icon--shifted': shiftIconLeftwards
     })