@mtes-mct/monitor-ui 9.4.0 → 10.0.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [9.4.0](https://github.com/MTES-MCT/monitor-ui/compare/v9.3.0...v9.4.0) (2023-09-20)
+
+
+### Features
+
+* **icons:** add EditUnbordered icon ([743b90c](https://github.com/MTES-MCT/monitor-ui/commit/743b90ce4f03a0f08c73cf41f9595e956bc6676a))
+* **icons:** add Link andUnlink icons ([5b001a3](https://github.com/MTES-MCT/monitor-ui/commit/5b001a313539626d88f28100557ddf8fe1abf0d8))
+
 # [9.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v9.2.2...v9.3.0) (2023-09-19)
 
 

package/assets/stylesheets/rsuite-override.css

@@ -350,6 +350,10 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
   line-height: 17px;
 }
 
+.rs-radio:hover .rs-radio-inner:before {
+  border-color: var(--charcoal);
+}
+
 /* form */
 .rs-form:not(.rs-form-inline) .rs-form-group:not(:last-child) {
   margin-bottom: 32px;
@@ -700,3 +704,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
   height: 100px !important;
   background: white !important;
 }
+
+.rs-plaintext {
+  font-size: 13px !important;
+}

package/index.js

@@ -250,19 +250,16 @@ const THEME = {
         cultured: '#F7F7FA',
         white: '#FFFFFF',
         // Accentuation Colors
-        blueYonder: {
-            25: '#D4DDE7',
-            100: '#567A9E'
-        },
-        blueGray: {
-            100: '#5697D2',
-            25: '#D4E5F4'
-        },
+        blueYonder: '#567A9E',
+        blueYonder25: '#D4DDE7',
+        blueGray: '#5697D2',
+        blueGray25: '#D4E5F4',
+        maximumRed: '#E1000F',
+        maximumRed15: '#FBD9DB',
         babyBlueEyes: '#99C9FF',
         // Notification Colors
         mediumSeaGreen: '#29B361',
         goldenPoppy: '#FAC11A',
-        maximumRed: '#E1000F',
         /** CONTEXTUAL COLORS */
         // Mission status
         yellowGreen: '#8CC800',
@@ -277,10 +274,6 @@ const THEME = {
         // Beacon Malfunction
         powderBlue: '#9ED7D9',
         wheat: '#EDD6A4',
-        // goldenPoppy: '#FAC11A',
-        // maximumRed: '#E1000F',
-        // charcoal: '#3B4559',
-        // mediumSeaGreen: '#29B361',
         opal: '#A5BCC0',
         // Regulation Areas
         yaleBlue: '#295375',
@@ -2364,7 +2357,7 @@ const SecondaryDropdownItem = styled(Dropdown$1.Item) `
   :hover {
     background-color: ${p => p.theme.color.cultured};
     border: 1px solid ${p => p.theme.color.lightGray};
-    color: ${p => p.theme.color.blueYonder['100']};
+    color: ${p => p.theme.color.blueYonder};
   }
   &:not(:last-child) {
     margin-bottom: 1px;
@@ -2409,14 +2402,14 @@ const PrimaryDropdown = styled(Dropdown$1) `
     padding: ${p => (p.$hasIcon ? '4px' : '5px')} 12px ${p => (p.$hasIcon ? '5px' : '7px')};
 
     :hover {
-      background-color: ${p => p.theme.color.blueYonder['100']};
-      border: 1px solid ${p => p.theme.color.blueYonder['100']};
+      background-color: ${p => p.theme.color.blueYonder};
+      border: 1px solid ${p => p.theme.color.blueYonder};
       color: ${p => p.theme.color.white};
     }
 
     :active {
-      background-color: ${p => p.theme.color.blueGray['100']};
-      border: 1px solid ${p => p.theme.color.blueGray['100']};
+      background-color: ${p => p.theme.color.blueGray};
+      border: 1px solid ${p => p.theme.color.blueGray};
       color: ${p => p.theme.color.white};
     }
 
@@ -2456,7 +2449,7 @@ const SecondaryDropdown = styled(Dropdown$1) `
     :active {
       background-color: transparent;
       border: none;
-      color: ${p => p.theme.color.blueYonder['100']};
+      color: ${p => p.theme.color.blueYonder};
     }
 
     > svg {
@@ -33790,15 +33783,15 @@ const PrimaryButton = styled.button `
 
   :hover,
   &._hover {
-    background-color: ${p => p.theme.color.blueYonder['100']};
-    border: 1px solid ${p => p.theme.color.blueYonder['100']};
+    background-color: ${p => p.theme.color.blueYonder};
+    border: 1px solid ${p => p.theme.color.blueYonder};
     color: ${p => p.theme.color.white};
   }
 
   :active,
   &._active {
-    background-color: ${p => p.theme.color.blueGray['100']};
-    border: 1px solid ${p => p.theme.color.blueGray['100']};
+    background-color: ${p => p.theme.color.blueGray};
+    border: 1px solid ${p => p.theme.color.blueGray};
     color: ${p => p.theme.color.white};
   }
 
@@ -33816,16 +33809,16 @@ const SecondaryButton = styled.button `
 
   :hover,
   &._hover {
-    background-color: ${p => p.theme.color.blueYonder['25']};
-    border: 1px solid ${p => p.theme.color.blueYonder['100']};
-    color: ${p => p.theme.color.blueYonder['100']};
+    background-color: ${p => p.theme.color.blueYonder25};
+    border: 1px solid ${p => p.theme.color.blueYonder};
+    color: ${p => p.theme.color.blueYonder};
   }
 
   :active,
   &._active {
-    background-color: ${p => p.theme.color.blueGray['25']};
-    border: 1px solid ${p => p.theme.color.blueGray['100']};
-    color: ${p => p.theme.color.blueGray['100']};
+    background-color: ${p => p.theme.color.blueGray25};
+    border: 1px solid ${p => p.theme.color.blueGray};
+    color: ${p => p.theme.color.blueGray};
   }
 
   :disabled,
@@ -33842,16 +33835,16 @@ const TertiaryButton$1 = styled.button `
 
   :hover,
   &._hover {
-    background-color: ${p => p.theme.color.blueYonder['25']};
-    border: 1px solid ${p => p.theme.color.blueYonder['25']};
-    color: ${p => p.theme.color.blueYonder['100']};
+    background-color: ${p => p.theme.color.blueYonder25};
+    border: 1px solid ${p => p.theme.color.blueYonder25};
+    color: ${p => p.theme.color.blueYonder};
   }
 
   :active,
   &._active {
-    background-color: ${p => p.theme.color.blueGray['25']};
-    border: 1px solid ${p => p.theme.color.blueGray['100']};
-    color: ${p => p.theme.color.blueGray['100']};
+    background-color: ${p => p.theme.color.blueGray25};
+    border: 1px solid ${p => p.theme.color.blueGray};
+    color: ${p => p.theme.color.blueGray};
   }
 
   :disabled,
@@ -33938,14 +33931,14 @@ const TertiaryButton = styled.button `
   &._hover {
     background-color: transparent;
     border: ${p => (p.isCompact ? 0 : '1px solid transparent')};
-    color: ${p => p.theme.color.blueYonder['100']};
+    color: ${p => p.theme.color.blueYonder};
   }
 
   :active,
   &._active {
     background-color: transparent;
     border: ${p => (p.isCompact ? 0 : '1px solid transparent')};
-    color: ${p => p.theme.color.blueGray['100']};
+    color: ${p => p.theme.color.blueGray};
   }
 
   :disabled,
@@ -33961,7 +33954,7 @@ function Button({ Icon, isActive, title, ...originalProps }) {
 }
 const MenuButton = styled(IconButton) `
   animation: none;
-  background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : 'none')};
+  background: ${p => (p.$isActive ? p.theme.color.blueGray : 'none')};
   border: 0;
   border-bottom: solid 0.5px ${p => p.theme.color.slateGray};
   color: ${p => (p.$isActive ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -33970,7 +33963,7 @@ const MenuButton = styled(IconButton) `
 
   :hover,
   :focus {
-    background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : 'rgba(255, 255, 255, 0.125)')};
+    background: ${p => (p.$isActive ? p.theme.color.blueGray : 'rgba(255, 255, 255, 0.125)')};
     border: 0;
     border: none;
     color: ${p => p.theme.color.white};
@@ -34486,29 +34479,29 @@ const PrimaryIconButton = styled(IconButton) `
   }
 `;
 const SecondaryText = styled(PrimaryText) `
-  background-color: ${p => p.theme.color.blueYonder[100]};
+  background-color: ${p => p.theme.color.blueYonder};
   color: ${p => p.theme.color.white};
 `;
 const SecondaryIconButton = styled(PrimaryIconButton) `
-  background-color: ${p => p.theme.color.blueYonder[100]};
+  background-color: ${p => p.theme.color.blueYonder};
   color: ${p => p.theme.color.white};
 
   :hover,
   &._hover {
-    background-color: ${p => p.theme.color.blueYonder[100]};
-    color: ${p => p.theme.color.blueYonder[25]};
+    background-color: ${p => p.theme.color.blueYonder};
+    color: ${p => p.theme.color.blueYonder25};
   }
 
   :active,
   &._active {
-    background-color: ${p => p.theme.color.blueYonder[100]};
-    color: ${p => p.theme.color.blueYonder[25]};
+    background-color: ${p => p.theme.color.blueYonder};
+    color: ${p => p.theme.color.blueYonder25};
   }
 
   :disabled,
   &._disabled {
-    background-color: ${p => p.theme.color.blueYonder[100]};
-    color: ${p => p.theme.color.blueYonder[25]};
+    background-color: ${p => p.theme.color.blueYonder};
+    color: ${p => p.theme.color.blueYonder25};
   }
 `;
 
@@ -52515,7 +52508,7 @@ const Box$c = styled.div `
           width: 33px;
 
           &.rs-calendar-table-cell-in-range:before {
-            background-color: ${p => p.theme.color.blueGray[25]};
+            background-color: ${p => p.theme.color.blueGray25};
             height: 33px;
             margin-top: 0;
           }
@@ -52530,8 +52523,8 @@ const Box$c = styled.div `
             width: 33px;
           }
           &:hover .rs-calendar-table-cell-content {
-            background-color: ${p => p.theme.color.blueYonder[25]};
-            color: ${p => p.theme.color.blueYonder[100]};
+            background-color: ${p => p.theme.color.blueYonder25};
+            color: ${p => p.theme.color.blueYonder};
           }
           &[role='columnheader'] .rs-calendar-table-cell-content,
           &[role='columnheader']:hover .rs-calendar-table-cell-content {
@@ -52543,7 +52536,7 @@ const Box$c = styled.div `
             color: ${p => p.theme.color.lightGray};
           }
           &.rs-calendar-table-cell-selected > .rs-calendar-table-cell-content {
-            background-color: ${p => p.theme.color.blueGray[100]};
+            background-color: ${p => p.theme.color.blueGray};
           }
         }
       }
@@ -52556,7 +52549,7 @@ const Box$c = styled.div `
           color: ${p => p.theme.color.slateGray};
 
           &.rs-calendar-month-dropdown-year-active {
-            color: ${p => p.theme.color.blueYonder[100]};
+            color: ${p => p.theme.color.blueYonder};
           }
         }
 
@@ -52572,11 +52565,11 @@ const Box$c = styled.div `
             width: 33px;
           }
           &:hover > .rs-calendar-month-dropdown-cell-content {
-            background-color: ${p => p.theme.color.blueYonder[25]};
-            color: ${p => p.theme.color.blueYonder[100]};
+            background-color: ${p => p.theme.color.blueYonder25};
+            color: ${p => p.theme.color.blueYonder};
           }
           &.rs-calendar-month-dropdown-cell-active > .rs-calendar-month-dropdown-cell-content {
-            background-color: ${p => p.theme.color.blueGray[100]};
+            background-color: ${p => p.theme.color.blueGray};
             color: ${p => p.theme.color.white};
           }
         }
@@ -52800,9 +52793,9 @@ const Box$b = styled.div `
   align-items: center;
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p => p.$hasError || p.$isFocused
-    ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`
+    ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray}`
     : 'none'};
-  color: ${p => (p.$isFocused ? p.theme.color.blueGray[100] : p.theme.color.slateGray)};
+  color: ${p => (p.$isFocused ? p.theme.color.blueGray : p.theme.color.slateGray)};
   display: inline-flex;
   font-size: inherit;
   justify-content: space-between;
@@ -52812,12 +52805,8 @@ const Box$b = styled.div `
   :hover {
     box-shadow: ${p => `inset 0px 0px 0px 1px ${
 // eslint-disable-next-line no-nested-ternary
-p.$isDisabled
-    ? p.theme.color.cultured
-    : p.$isFocused
-        ? p.theme.color.blueGray[100]
-        : p.theme.color.blueYonder[100]}`};
-    color: ${p => (p.$isFocused ? p.theme.color.blueGray[100] : p.theme.color.blueYonder[100])};
+p.$isDisabled ? p.theme.color.cultured : p.$isFocused ? p.theme.color.blueGray : p.theme.color.blueYonder}`};
+    color: ${p => (p.$isFocused ? p.theme.color.blueGray : p.theme.color.blueYonder)};
   }
 
   > div:nth-child(2) {
@@ -52902,14 +52891,14 @@ const Box$a = styled.div `
   }
 `;
 const Option = styled.div `
-  background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : 'transparent')};
+  background-color: ${p => (p.isSelected ? p.theme.color.blueGray : 'transparent')};
   color: ${p => (p.isSelected ? p.theme.color.white : p.theme.color.gunMetal)};
   cursor: pointer;
   line-height: 1;
   padding: 5px 0 7px 6.5px;
 
   :hover {
-    background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : p.theme.color.blueYonder[25])};
+    background-color: ${p => (p.isSelected ? p.theme.color.blueGray : p.theme.color.blueYonder25)};
   }
 
   > span {
@@ -53015,9 +53004,9 @@ const TimeInput = forwardRef(TimeInputWithRef);
 const Box$9 = styled.div `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p => p.$hasError || p.$isFocused
-    ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`
+    ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray}`
     : 'none'};
-  color: ${p => (p.$isFocused ? p.theme.color.blueGray[100] : p.theme.color.slateGray)};
+  color: ${p => (p.$isFocused ? p.theme.color.blueGray : p.theme.color.slateGray)};
   display: inline-block;
   font-size: inherit;
   padding: ${p => (p.$isCompact ? '4.5px 8px 7px' : '3px 8px 5px')};
@@ -53027,12 +53016,8 @@ const Box$9 = styled.div `
   :hover {
     box-shadow: ${p => `inset 0px 0px 0px 1px ${
 // eslint-disable-next-line no-nested-ternary
-p.$isDisabled
-    ? p.theme.color.cultured
-    : p.$isFocused
-        ? p.theme.color.blueGray[100]
-        : p.theme.color.blueYonder[100]}`};
-    color: ${p => (p.$isFocused ? p.theme.color.blueGray[100] : p.theme.color.blueYonder[100])};
+p.$isDisabled ? p.theme.color.cultured : p.$isFocused ? p.theme.color.blueGray : p.theme.color.blueYonder}`};
+    color: ${p => (p.$isFocused ? p.theme.color.blueGray : p.theme.color.blueYonder)};
   }
 `;
 const InputGroup = styled.div `
@@ -53343,7 +53328,7 @@ const Box$7 = styled.div `
             width: 33px;
 
             &.rs-calendar-table-cell-in-range:before {
-              background-color: ${p => p.theme.color.blueGray[25]};
+              background-color: ${p => p.theme.color.blueGray25};
               height: 33px;
               margin-top: 0;
             }
@@ -53358,8 +53343,8 @@ const Box$7 = styled.div `
               width: 33px;
             }
             &:hover .rs-calendar-table-cell-content {
-              background-color: ${p => p.theme.color.blueYonder[25]};
-              color: ${p => p.theme.color.blueYonder[100]};
+              background-color: ${p => p.theme.color.blueYonder25};
+              color: ${p => p.theme.color.blueYonder};
             }
             &[role='columnheader'] .rs-calendar-table-cell-content,
             &[role='columnheader']:hover .rs-calendar-table-cell-content {
@@ -53371,7 +53356,7 @@ const Box$7 = styled.div `
               color: ${p => p.theme.color.lightGray};
             }
             &.rs-calendar-table-cell-selected > .rs-calendar-table-cell-content {
-              background-color: ${p => p.theme.color.blueGray[100]};
+              background-color: ${p => p.theme.color.blueGray};
             }
           }
         }
@@ -53384,7 +53369,7 @@ const Box$7 = styled.div `
             color: ${p => p.theme.color.slateGray};
 
             &.rs-calendar-month-dropdown-year-active {
-              color: ${p => p.theme.color.blueYonder[100]};
+              color: ${p => p.theme.color.blueYonder};
             }
           }
 
@@ -53400,11 +53385,11 @@ const Box$7 = styled.div `
               width: 33px;
             }
             &:hover > .rs-calendar-month-dropdown-cell-content {
-              background-color: ${p => p.theme.color.blueYonder[25]};
-              color: ${p => p.theme.color.blueYonder[100]};
+              background-color: ${p => p.theme.color.blueYonder25};
+              color: ${p => p.theme.color.blueYonder};
             }
             &.rs-calendar-month-dropdown-cell-active > .rs-calendar-month-dropdown-cell-content {
-              background-color: ${p => p.theme.color.blueGray[100]};
+              background-color: ${p => p.theme.color.blueGray};
               color: ${p => p.theme.color.white};
             }
           }
@@ -57116,7 +57101,7 @@ const Box$5 = styled.div `
         return p.theme.color.maximumRed;
     }
     if (p.$isActive) {
-        return p.theme.color.blueGray[100];
+        return p.theme.color.blueGray;
     }
     return p.theme.color.gainsboro;
 }} !important;
@@ -57124,12 +57109,12 @@ const Box$5 = styled.div `
     width: 100%;
 
     :hover {
-      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder)} !important;
     }
 
     :active,
     :focus {
-      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray)} !important;
     }
 
     > .rs-picker-toggle {
@@ -57225,7 +57210,7 @@ const Box$5 = styled.div `
   }
 `;
 
-function MultiRadio({ className, disabled = false, error, isErrorMessageHidden = false, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, style, value }) {
+function MultiRadio({ className, disabled = false, error, isErrorMessageHidden = false, isInline = false, isLabelHidden = false, isLight = false, isReadOnly = false, isUndefinedWhenDisabled = false, label, name, onChange, options, style, value }) {
     const controlledClassName = useMemo(() => classnames('Field-MultiRadio', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -57237,8 +57222,8 @@ function MultiRadio({ className, disabled = false, error, isErrorMessageHidden =
         const nextCheckedOptionValue = isChecked ? nextOptionValue : undefined;
         onChange(nextCheckedOptionValue);
     }, [onChange]);
-    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
-    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, style: style, children: [jsx(Box$4, { "$hasError": hasError, "$isInline": isInline, children: options.map(option => (jsx(Radio, { checked: equals$2(option.value, value), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled && !isReadOnly, onChange);
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, style: style, children: [jsx(Box$4, { "$hasError": hasError, "$isInline": isInline, "$isReadOnly": isReadOnly, children: options.map(option => (jsx(Radio, { checked: equals$2(option.value, value), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), readOnly: isReadOnly, children: option.label }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const Box$4 = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -57277,6 +57262,33 @@ const Box$4 = styled.div `
         margin-left: 12px;
       }
     `}
+
+    ${p => p.$isReadOnly &&
+    css `
+      .rs-radio {
+        .rs-radio-checker {
+          label {
+            cursor: not-allowed;
+            .rs-radio-wrapper [type='radio'] {
+              cursor: not-allowed;
+            }
+          }
+        }
+      }
+      .rs-radio:not(.rs-radio-checked):hover .rs-radio-inner:before {
+        border-color: ${p.theme.color.lightGray};
+      }
+      .rs-radio:not(.rs-radio-checked) .rs-radio-inner:before {
+        background-color: ${p.theme.color.white};
+      }
+      .rs-radio:not(.rs-radio-checked) {
+        .rs-radio-checker {
+          label {
+            color: ${p.theme.color.slateGray};
+          }
+        }
+      }
+    `}
 `;
 
 function MultiZoneEditor({ addButtonLabel, className, defaultValue = [], disabled = false, error, initialZone, isAddButtonDisabled = false, isLabelHidden = false, isLight = false, label, labelPropName, onAdd, onCenter, onChange, onDelete, onEdit, style }) {
@@ -57396,12 +57408,12 @@ const StyledInput$2 = styled(Input) `
   width: 100%;
 
   :hover {
-    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder)} !important;
   }
 
   :active,
   :focus {
-    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray)} !important;
     outline: 0;
   }
 `;
@@ -67159,12 +67171,12 @@ const Box = styled.div `
       padding: 4px 40px 6px 8px;
 
       :hover {
-        border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+        border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder)} !important;
       }
 
       :active,
       :focus {
-        border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+        border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray)} !important;
       }
 
       > .rs-stack {
@@ -67249,12 +67261,12 @@ const StyledInput$1 = styled(Input) `
   }
 
   :hover {
-    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder)} !important;
   }
 
   :active,
   :focus {
-    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray)} !important;
     outline: 0;
   }
 `;
@@ -67300,12 +67312,12 @@ const StyledInput = styled(Input) `
   }
 
   :hover {
-    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder)} !important;
   }
 
   :active,
   :focus {
-    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray)} !important;
     outline: 0;
   }
 `;
@@ -70686,7 +70698,7 @@ const Th$2 = styled.th `
 const BodyTr$1 = styled.tr `
   :hover {
     > td {
-      background-color: ${p => p.theme.color.blueYonder[25]};
+      background-color: ${p => p.theme.color.blueYonder25};
     }
   }
   td:first-child {