@janiscommerce/ui-web 0.20.0 → 0.22.0

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.22.0] - 2024-09-25
+
+### Changed
+
+- minor version of react and react dom in peer dependencies
+
+## [0.21.0] - 2024-09-24
+
+### Added
+
+- export palette colors
+
+### Changed
+
+- viewPalette to palette name
+
 ## [0.20.0] - 2024-08-27
 
 ### Added

package/dist/index.umd.js

@@ -547,7 +547,7 @@
     };
   };
 
-  var viewsPalette = {
+  var palette = {
     black: '#2F2F2F',
     blackHover: '#585858',
     blackPressed: '#16232D',
@@ -576,7 +576,6 @@
     lightGrey: '#E8EAF6',
     lightGreyHover: '#F4F5FB',
     lightGreyPressed: '#D0D3E3',
-    lightGreySelected: '#E4ECFA',
     lightTurquoise: '#BBE9D6',
     magenta: '#ED14A4',
     orange: '#FF8D10',
@@ -613,7 +612,7 @@
    */
 
   var getColor = function getColor(color) {
-    return viewsPalette[color] || color;
+    return palette[color] || color;
   };
 
   var timingFunctions$1 = {
@@ -657,7 +656,7 @@
       return width;
     }, function (_ref4) {
       var backgroundColor = _ref4.backgroundColor;
-      return backgroundColor || viewsPalette.lightGrey;
+      return backgroundColor || palette.lightGrey;
     })
   };
 
@@ -727,7 +726,7 @@
       return styled$g.css(["transition:", ";", ";"], transition, transitionProperty);
     },
     scrollbar: function scrollbar(thumbColor, shadowColor) {
-      return styled$g.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || viewsPalette.white, thumbColor);
+      return styled$g.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || palette.white, thumbColor);
     }
   };
 
@@ -744,7 +743,7 @@
     }, function (_ref3) {
       var rounded = _ref3.rounded;
       return rounded ? '50%' : '3px';
-    }, viewsPalette.white, function (_ref4) {
+    }, palette.white, function (_ref4) {
       var color = _ref4.color;
       return color;
     }, mixins.flexCenter)
@@ -866,7 +865,7 @@
     size: 'small',
     url: '',
     rounded: true,
-    mainColor: viewsPalette.grey
+    mainColor: palette.grey
   };
 
   var _templateObject$4;
@@ -876,7 +875,7 @@
       componentId: "sc-jf3e5i-0"
     })(["fill:", ";", " ", ";"], function (props) {
       return getColor(props.color);
-    }, mediaBreaks.onlyPrint(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n\t\t\tfill: ", ";\n\t\t"])), viewsPalette.darkGrey), function (props) {
+    }, mediaBreaks.onlyPrint(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n\t\t\tfill: ", ";\n\t\t"])), palette.darkGrey), function (props) {
       return props.styles;
     }),
     Path: styled__default["default"].path.withConfig({
@@ -894,7 +893,7 @@
     Item: styled__default["default"].div.withConfig({
       displayName: "styles__Item",
       componentId: "sc-jf3e5i-3"
-    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), viewsPalette.blue, styles.Svg, viewsPalette.blue),
+    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), palette.blue, styles.Svg, palette.blue),
     SearchInput: styled__default["default"].input.withConfig({
       displayName: "styles__SearchInput",
       componentId: "sc-jf3e5i-4"
@@ -2285,7 +2284,7 @@
       return !props.onlyIcon ? '0 12px' : '0';
     }, function (props) {
       return props.clickable ? 'pointer' : 'default';
-    }, viewsPalette.black, function (props) {
+    }, palette.black, function (props) {
       return !props.onlyIcon ? '32px' : '36px';
     }, function (props) {
       return props.onlyIcon && '36px';
@@ -2298,10 +2297,10 @@
     }, function (props) {
       switch (props.variant) {
         case 'outlined':
-          return styled$g.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? viewsPalette.blue : '#EAEBED', props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.lightGreyHover, props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.blue);
+          return styled$g.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? palette.blue : '#EAEBED', props.selected ? palette.blue : palette.black, palette.lightGreyHover, props.selected ? palette.blue : palette.black, palette.blue, palette.blue, palette.blue);
 
         case 'contained':
-          return styled$g.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? viewsPalette.blue : viewsPalette.lightGreyHover, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.darkGrey, props.selected ? viewsPalette.blueHover : viewsPalette.lightGrey, props.selected ? viewsPalette.white : viewsPalette.black, viewsPalette.blue, viewsPalette.white, viewsPalette.white, viewsPalette.grey, viewsPalette.grey);
+          return styled$g.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? palette.blue : palette.lightGreyHover, props.selected ? palette.white : palette.black, props.selected ? palette.white : palette.black, props.selected ? palette.white : palette.darkGrey, props.selected ? palette.blueHover : palette.lightGrey, props.selected ? palette.white : palette.black, palette.blue, palette.white, palette.white, palette.grey, palette.grey);
 
         case 'status':
           return styled$g.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor(props.color || 'grey'), getColor(props.sizeColor || 'white'));
@@ -2317,7 +2316,7 @@
       return props.backgroundColor && "background-color: ".concat(getColor(props.backgroundColor), ";");
     }, function (props) {
       return props.textColor && "color: ".concat(getColor(props.textColor), ";");
-    }, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), viewsPalette.darkGrey)),
+    }, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), palette.darkGrey)),
     iconPathStyles: styled$g.css(["", ";"], mixins.transition('fill')),
     DeleteButton: styled__default["default"].button.withConfig({
       displayName: "styles__DeleteButton",
@@ -2397,13 +2396,13 @@
     })(["pointer-events:none;", " background:", ";", " & div{display:flex;& div,img,span{&:not(:first-child){margin-left:-4px;}}span:first-of-type{margin-left:0px;}}"], function (_ref) {
       var showFull = _ref.showFull,
           backgroundColor = _ref.backgroundColor;
-      return showFull ? styled$g.css(["height:45px;padding-left:9px;padding-right:9px;max-width:inherit;&:hover,&:active{background:", ";}"], backgroundColor || viewsPalette.white) : styled$g.css(["height:33px;padding-left:5px;padding-right:5px;cursor:pointer;"]);
+      return showFull ? styled$g.css(["height:45px;padding-left:9px;padding-right:9px;max-width:inherit;&:hover,&:active{background:", ";}"], backgroundColor || palette.white) : styled$g.css(["height:33px;padding-left:5px;padding-right:5px;cursor:pointer;"]);
     }, function (_ref2) {
       var backgroundColor = _ref2.backgroundColor;
-      return backgroundColor || viewsPalette.white;
+      return backgroundColor || palette.white;
     }, function (_ref3) {
       var inactive = _ref3.inactive;
-      return inactive && "\n           &:hover {\n               background: ".concat(viewsPalette.white, ";\n           }\n           &:active {\n               border-color: #EAEBED;\n           }\n    ");
+      return inactive && "\n           &:hover {\n               background: ".concat(palette.white, ";\n           }\n           &:active {\n               border-color: #EAEBED;\n           }\n    ");
     })
   };
 
@@ -2454,7 +2453,7 @@
   };
 
   AvatarGroup.defaultProps = {
-    badgeColor: viewsPalette.blue,
+    badgeColor: palette.blue,
     users: [],
     usersToDisplay: 5,
     showFull: false
@@ -2487,22 +2486,22 @@
   PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.shape({})]);
 
   var validColors = ['black', 'blue', 'darkGrey', 'fizzGreen', 'green', 'grey', 'lightBlue', 'lightGrey', 'orange', 'red', 'statusRed', 'white', 'yellow'];
-  var white = viewsPalette.white,
-      grey = viewsPalette.grey,
-      lightGreyHover = viewsPalette.lightGreyHover,
-      lightGrey = viewsPalette.lightGrey,
-      blue = viewsPalette.blue,
-      blueHover = viewsPalette.blueHover,
-      bluePressed = viewsPalette.bluePressed;
+  var white = palette.white,
+      grey = palette.grey,
+      lightGreyHover = palette.lightGreyHover,
+      lightGrey = palette.lightGrey,
+      blue = palette.blue,
+      blueHover = palette.blueHover,
+      bluePressed = palette.bluePressed;
 
   var isValidColor = function isValidColor(color) {
     return validColors.includes(color);
   };
   var getHoverColor = function getHoverColor(color) {
-    return isValidColor(color) ? viewsPalette["".concat(color, "Hover")] : blueHover;
+    return isValidColor(color) ? palette["".concat(color, "Hover")] : blueHover;
   };
   var getPressedColor = function getPressedColor(color) {
-    return isValidColor(color) ? viewsPalette["".concat(color, "Pressed")] : bluePressed;
+    return isValidColor(color) ? palette["".concat(color, "Pressed")] : bluePressed;
   };
 
   var commonStyles = function commonStyles(iconColor, fontColor, color) {
@@ -2549,10 +2548,10 @@
     }, function (_ref5) {
       var disabled = _ref5.disabled;
       return disabled ? 'default' : 'pointer';
-    }, mixins.transition('background-color', '250ms'), timingFunctions$1.standard, viewsPalette.transparentWhite, function (_ref6) {
+    }, mixins.transition('background-color', '250ms'), timingFunctions$1.standard, palette.transparentWhite, function (_ref6) {
       var hasText = _ref6.hasText;
       return hasText && '8px';
-    }, viewsPalette.white, mixins.transition('fill', '250ms'), getButtonStyles, function (_ref7) {
+    }, palette.white, mixins.transition('fill', '250ms'), getButtonStyles, function (_ref7) {
       var iconColor = _ref7.iconColor;
       return getColor(iconColor);
     }, function (_ref8) {
@@ -2682,7 +2681,7 @@
       componentId: "sc-zbd85t-1"
     })(["display:block;width:16px;height:16px;background-color:", ";border:1px solid ", ";border-radius:50%;"], function (props) {
       return props.color;
-    }, viewsPalette.grey),
+    }, palette.grey),
     Label: styled__default["default"].span.withConfig({
       displayName: "styles__Label",
       componentId: "sc-zbd85t-2"
@@ -2712,28 +2711,28 @@
 
     switch (true) {
       case disabled && checked:
-        return viewsPalette.blueDisabled;
+        return palette.blueDisabled;
 
       case disabled:
-        return viewsPalette.grey;
+        return palette.grey;
 
       case checked:
-        return viewsPalette.blue;
+        return palette.blue;
 
       default:
-        return viewsPalette.darkGrey;
+        return palette.darkGrey;
     }
   };
   var Ball = styled__default["default"].div.withConfig({
     displayName: "styles__Ball",
     componentId: "sc-rtzdt3-0"
-  })(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], viewsPalette.white, timingFunctions$1.standard, function (props) {
+  })(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], palette.white, timingFunctions$1.standard, function (props) {
     return props.checked && "\n\t\t\tleft: 100%;\n\t\t\tmargin-left: -20px;\n\t\t";
   });
   var iconCheckStyles = styled$g.css(["position:absolute;fill:", ";", ""], function (props) {
     return statusColor(props);
   }, onlyPrint(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n\t\tfill: ", " !important;\n\t"])), function (props) {
-    return props.checked ? viewsPalette.black : viewsPalette.darkGrey;
+    return props.checked ? palette.black : palette.darkGrey;
   }));
   var styled$7 = {
     OuterContainer: styled__default["default"].div.withConfig({
@@ -2741,10 +2740,10 @@
       componentId: "sc-rtzdt3-1"
     })(["display:flex;width:44px;align-items:center;pointer-events:", ";align-self:center;position:relative;", " &:active ", "{box-shadow:0px 0px 0px 10px ", ";", " svg{fill:", ";}}"], function (props) {
       return props.disabled ? 'none' : 'auto';
-    }, onlyDesktop(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t&:hover ", " {\n\t\t\t\tbox-shadow: 0px 0px 0px 10px ", ";\n\t\t\t}\n\t\t"])), Ball, viewsPalette.lightGreyHover), Ball, viewsPalette.lightGrey,
+    }, onlyDesktop(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t&:hover ", " {\n\t\t\t\tbox-shadow: 0px 0px 0px 10px ", ";\n\t\t\t}\n\t\t"])), Ball, palette.lightGreyHover), Ball, palette.lightGrey,
     /* sc-selector */
     iconCheckStyles, function (props) {
-      return props.checked ? viewsPalette.blue : viewsPalette.darkGrey;
+      return props.checked ? palette.blue : palette.darkGrey;
     }),
     Input: styled__default["default"].input.withConfig({
       displayName: "styles__Input",
@@ -2756,7 +2755,7 @@
       componentId: "sc-rtzdt3-3"
     })(["width:44px;height:24px;background-color:", ";border-radius:50px;position:relative;", ""], function (props) {
       return statusColor(props);
-    }, onlyPrint(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), viewsPalette.darkGrey)),
+    }, onlyPrint(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), palette.darkGrey)),
     iconCheckStyles: iconCheckStyles
   };
 
@@ -2845,19 +2844,19 @@
 
     switch (true) {
       case disabled:
-        return viewsPalette.grey;
+        return palette.grey;
 
       case error:
-        return viewsPalette.statusRed;
+        return palette.statusRed;
 
       case isFocused:
-        return viewsPalette.blue;
+        return palette.blue;
 
       case isFloating:
-        return viewsPalette.darkGrey;
+        return palette.darkGrey;
 
       default:
-        return viewsPalette.darkGreyPressed;
+        return palette.darkGreyPressed;
     }
   };
 
@@ -2868,16 +2867,16 @@
 
     switch (true) {
       case disabled:
-        return viewsPalette.grey;
+        return palette.grey;
 
       case error:
-        return viewsPalette.statusRed;
+        return palette.statusRed;
 
       case isFocused:
-        return viewsPalette.blue;
+        return palette.blue;
 
       default:
-        return viewsPalette.black;
+        return palette.black;
     }
   };
 
@@ -2908,26 +2907,26 @@
       componentId: "sc-1fhkfhs-2"
     })(["@keyframes onAutoFill{}", " height:34px;border:none;font-size:", ";font-weight:400;color:", ";transition:color 0.2s ", ";cursor:pointer;width:100%;border-bottom:1px solid ", ";border-radius:0;", " ", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}&:-webkit-autofill{animation-name:onAutoFill;}::-webkit-inner-spin-button{appearance:none;}", ""], function (props) {
       return !props.noMinWidth && 'min-width: 100px;';
-    }, fontSize$1, viewsPalette.black, timingFunctions.standard, viewsPalette.grey, function (_ref3) {
+    }, fontSize$1, palette.black, timingFunctions.standard, palette.grey, function (_ref3) {
       var error = _ref3.error;
-      return error && "border-bottom-color: ".concat(viewsPalette.statusRed, ";");
+      return error && "border-bottom-color: ".concat(palette.statusRed, ";");
     }, function (_ref4) {
       var hasIcon = _ref4.hasIcon;
       return hasIcon && "padding-left: 32px;";
     }, mixins.placeholder(styled$g.css(["font-weight:400;color:", ";"], function (_ref5) {
       var error = _ref5.error;
-      return error ? viewsPalette.statusRed : viewsPalette.darkGreyPressed;
+      return error ? palette.statusRed : palette.darkGreyPressed;
     })), function (props) {
       return hoverAndFocusColor(props);
     }, function (props) {
       return hoverAndFocusColor(props);
     }, function (props) {
       return hoverAndFocusColor(props);
-    }, viewsPalette.white, viewsPalette.grey, viewsPalette.grey, mediaBreaks.onlyPrint(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n\t\t\tborder-bottom: none;\n\t\t"])))),
+    }, palette.white, palette.grey, palette.grey, mediaBreaks.onlyPrint(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n\t\t\tborder-bottom: none;\n\t\t"])))),
     ErrorMessage: styled__default["default"].span.withConfig({
       displayName: "styles__ErrorMessage",
       componentId: "sc-1fhkfhs-3"
-    })(["color:", ";font-size:12px;line-height:14px;transform:translateY(-6px);word-break:break-word;"], viewsPalette.statusRed),
+    })(["color:", ";font-size:12px;line-height:14px;transform:translateY(-6px);word-break:break-word;"], palette.statusRed),
     InputIcon: styled__default["default"](Icon).withConfig({
       displayName: "styles__InputIcon",
       componentId: "sc-1fhkfhs-4"
@@ -3105,19 +3104,19 @@
 
     switch (true) {
       case disabled:
-        return viewsPalette.grey;
+        return palette.grey;
 
       case error:
-        return viewsPalette.statusRed;
+        return palette.statusRed;
 
       case isFocused:
-        return viewsPalette.blue;
+        return palette.blue;
 
       case isFloating:
-        return viewsPalette.darkGrey;
+        return palette.darkGrey;
 
       default:
-        return viewsPalette.darkGreyPressed;
+        return palette.darkGreyPressed;
     }
   };
 
@@ -3131,12 +3130,12 @@
     Textarea: styled__default["default"].textarea.withConfig({
       displayName: "styles__Textarea",
       componentId: "sc-wtau65-1"
-    })(["border:none;border-bottom:1px solid ", ";border-radius:0;height:23px;max-height:350px;padding:0 9px 4px 0;resize:none;font-size:", ";font-weight:400;color:", ";", ";width:", ";", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}", " ", ""], viewsPalette.grey, fontSize, viewsPalette.black, mixins.transition('color,border-color', '0.2s'), function (props) {
+    })(["border:none;border-bottom:1px solid ", ";border-radius:0;height:23px;max-height:350px;padding:0 9px 4px 0;resize:none;font-size:", ";font-weight:400;color:", ";", ";width:", ";", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}", " ", ""], palette.grey, fontSize, palette.black, mixins.transition('color,border-color', '0.2s'), function (props) {
       return props.fullWidth ? '100%' : 'auto';
     }, mixins.placeholder(styled$g.css(["opacity:1;color:", ";"], function (props) {
       return placeholderColor(props);
-    })), mixins.scrollbar(viewsPalette.grey, viewsPalette.base), viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.white, viewsPalette.grey, viewsPalette.grey, function (props) {
-      return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(viewsPalette.statusRed, "\n\t\t\t}\n\t\t");
+    })), mixins.scrollbar(palette.grey, palette.base), palette.black, palette.blue, palette.blue, palette.white, palette.grey, palette.grey, function (props) {
+      return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(palette.statusRed, "\n\t\t\t}\n\t\t");
     }, mediaBreaks.onlyPrint(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\tmin-height: initial;\n\t\t\theight: auto !important;\n\t\t\tborder-bottom: none;\n\t\t"])))),
     FloatingLabel: styled__default["default"].div.withConfig({
       displayName: "styles__FloatingLabel",
@@ -3152,7 +3151,7 @@
     ErrorMessage: styled__default["default"].span.withConfig({
       displayName: "styles__ErrorMessage",
       componentId: "sc-wtau65-3"
-    })(["color:", ";font-size:12px;line-height:14px;display:block;word-break:break-word;"], viewsPalette.statusRed)
+    })(["color:", ";font-size:12px;line-height:14px;display:block;word-break:break-word;"], palette.statusRed)
   };
 
   var _excluded$2 = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
@@ -3370,7 +3369,7 @@
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
       name: errorImage,
       size: (width || height) * 0.35 || 20,
-      color: viewsPalette.lightGreyPressed
+      color: palette.lightGreyPressed
     })) : /*#__PURE__*/React__default["default"].createElement(styled$4.Image, {
       src: url,
       alt: altText || url,
@@ -3384,7 +3383,7 @@
   };
 
   Image.defaultProps = {
-    background: viewsPalette.lightGreyHover
+    background: palette.lightGreyHover
   };
 
   var __defProp = Object.defineProperty;
@@ -4175,7 +4174,7 @@
     ClickableWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__ClickableWrapper",
       componentId: "sc-lreg3c-0"
-    })(["display:flex;align-items:center;border:none;cursor:pointer;&:before{content:'';z-index:1;display:inline-block;border:1px solid ", ";background-color:", ";border-radius:48%;width:14px;height:14px;margin:7px 4px;position:absolute;margin-bottom:", "px;}"], viewsPalette.grey, function (props) {
+    })(["display:flex;align-items:center;border:none;cursor:pointer;&:before{content:'';z-index:1;display:inline-block;border:1px solid ", ";background-color:", ";border-radius:48%;width:14px;height:14px;margin:7px 4px;position:absolute;margin-bottom:", "px;}"], palette.grey, function (props) {
       return getColor(props.color);
     }, function (props) {
       return props.error ? '25' : '7';
@@ -4938,6 +4937,7 @@
   exports.Skeleton = Skeleton;
   exports.Switch = Switch;
   exports.Textarea = Textarea;
+  exports.palette = palette;
 
   Object.defineProperty(exports, '__esModule', { value: true });