@moda/om 17.2.0 → 17.2.1

package/dist/index.esm.js

@@ -5966,6 +5966,8 @@ var SKU_COLORS = {
 
 var _excluded$s = ["className", "size", "color", "backgroundUrl", "focus", "hover", "selected", "soldOut", "onSale", "onClick", "onMouseEnter", "disabled", "title"];
 var ColorSwatch = function ColorSwatch(_ref) {
+  var _SKU_COLORS;
+
   var className = _ref.className,
       size = _ref.size,
       color = _ref.color,
@@ -5987,10 +5989,11 @@ var ColorSwatch = function ColorSwatch(_ref) {
   var handleMouseEnter = useCallback(function (_event) {
     onMouseEnter && onMouseEnter(color, title);
   }, [color, title, onMouseEnter]);
-  var backgroundColor = SKU_COLORS[color];
+  var backgroundColor = (_SKU_COLORS = SKU_COLORS[color]) !== null && _SKU_COLORS !== void 0 ? _SKU_COLORS : color;
+  var isWhite = !backgroundUrl && (!backgroundColor.startsWith('#') || backgroundColor.toLowerCase() === '#fff' || backgroundColor.toLowerCase() === '#ffffff');
 
   var styles = _objectSpread2({
-    backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : color
+    backgroundColor: backgroundColor
   }, backgroundUrl ? {
     backgroundImage: "url(".concat(backgroundUrl, ")"),
     backgroundSize: 'cover'
@@ -5998,7 +6001,7 @@ var ColorSwatch = function ColorSwatch(_ref) {
 
   return /*#__PURE__*/React__default.createElement(Clickable, _extends$1({
     className: classNames("ColorSwatch", {
-      'ColorSwatch--light': !backgroundColor || backgroundColor === '#fff',
+      'ColorSwatch--light': isWhite,
       'ColorSwatch--small': size === 'small',
       'ColorSwatch--hover': hover,
       'ColorSwatch--focus': focus,