@mtes-mct/monitor-ui 9.3.0 → 10.0.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [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)
+
+
+### Bug Fixes
+
+* **button:** update settings for large button ([62eca52](https://github.com/MTES-MCT/monitor-ui/commit/62eca522e98320f5974f654ee97f7be28d6097c6))
+
+
+### Features
+
+* **icons:** add icons ([87e6577](https://github.com/MTES-MCT/monitor-ui/commit/87e657787b200f8605385f8e7b2fd61db45dcc6c))
+* **theme:** add custom zones colors ([957b7a3](https://github.com/MTES-MCT/monitor-ui/commit/957b7a3a315ca003012788c760a9172f5fbea797))
+
 ## [9.2.2](https://github.com/MTES-MCT/monitor-ui/compare/v9.2.1...v9.2.2) (2023-09-08)
 
 

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};
@@ -34110,6 +34103,10 @@ function EditBis({ color, size, ...nativeProps }) {
     return (jsx(IconBox, { "$color": color, "$size": size, children: jsx("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: jsxs("g", { transform: "translate(-80)", children: [jsx("path", { d: "M86,11.5V14h2.5l7.372-7.372-2.5-2.5ZM97.805,4.7a.664.664,0,0,0,0-.94l-1.56-1.56a.664.664,0,0,0-.94,0l-1.219,1.22,2.5,2.5Z", fill: "currentColor" }), jsx("path", { d: "M95,9v7H84V5h7V3H82V18H97V9Z", fill: "currentColor" }), jsx("rect", { fill: "none", height: "20", transform: "translate(80)", width: "20" })] }) }) }));
 }
 
+function EditUnbordered({ color, size, ...nativeProps }) {
+    return (jsx(IconBox, { "$color": color, "$size": size, children: jsxs("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: [jsx("rect", { fill: "none", height: "20", width: "20" }), jsx("g", { children: jsx("path", { d: "M10.713,5.983,14.02,9.288,6.3,17H3V13.7l7.716-7.718Zm1.1-1.1,1.653-1.653a.779.779,0,0,1,1.1,0l2.2,2.2a.779.779,0,0,1,0,1.1L15.121,8.185Z", fill: "currentColor" }) })] }) }));
+}
+
 function Expand({ color, size, ...nativeProps }) {
     return (jsx(IconBox, { "$color": color, "$size": size, children: jsx("svg", { height: "20.076", viewBox: "0 0 20.068 20.076", width: "20.068", ...nativeProps, children: jsx("path", { d: "M12114.779,15768.074v-1.512h5.719l-6.488-6.49,1.061-1.061,6.5,6.482v-5.713h1.5v8.293Zm-10.271-17.5v5.719H12103v-8.3h8.293v1.512h-5.719l6.488,6.49-1.068,1.066Z", fill: "currentColor", transform: "translate(-12103.002 -15747.998)" }) }) }));
 }
@@ -34170,6 +34167,10 @@ function Landmark({ color, size, ...nativeProps }) {
     return (jsx(IconBox, { "$color": color, "$size": size, children: jsxs("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: [jsx("defs", { children: jsx("clipPath", { children: jsx("rect", { fill: "none", height: "20", width: "20" }) }) }), jsxs("g", { clipPath: "url(#clip-path)", children: [jsx("path", { d: "M10,1A6,6,0,0,0,4,7a6.108,6.108,0,0,0,.091,1.01c.007.038.011.078.018.116a5.968,5.968,0,0,0,.252.908c.016.045.032.091.05.135a6.061,6.061,0,0,0,.4.836l.06.1a5.934,5.934,0,0,0,.56.781c0,.007.011.012.016.018a6.01,6.01,0,0,0,2.518,1.737l.009,0a6,6,0,0,0,4.05,0l.009,0A6.01,6.01,0,0,0,14.552,10.9c.005-.006.011-.011.016-.018a5.934,5.934,0,0,0,.56-.781l.06-.1a6.061,6.061,0,0,0,.4-.836c.018-.044.034-.09.05-.135a5.968,5.968,0,0,0,.252-.908c.007-.038.011-.078.018-.116A6.108,6.108,0,0,0,16,7a6,6,0,0,0-6-6", fill: "currentColor" }), jsx("path", { d: "M10,14.084A7.4,7.4,0,0,1,8.941,14v3.942L10,19l1.059-1.058V14A7.4,7.4,0,0,1,10,14.084", fill: "currentColor" })] })] }) }));
 }
 
+function Link$1({ color, size, ...nativeProps }) {
+    return (jsx(IconBox, { "$color": color, "$size": size, children: jsxs("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: [jsx("path", { d: "M0,0H20V20H0Z", fill: "none" }), jsxs("g", { children: [jsxs("g", { children: [jsx("path", { d: "M5,7H9V5H5A5,5,0,0,0,5,15H9V13H5A3,3,0,0,1,5,7Z", fill: "currentColor" }), jsx("path", { d: "M15,13H11v2h4A5,5,0,0,0,15,5H11V7h4a3,3,0,0,1,0,6Z", fill: "currentColor" }), jsx("rect", { fill: "currentColor", height: "2", transform: "translate(6 9)", width: "8" })] }), jsx("rect", { fill: "none", height: "20", width: "20" })] })] }) }));
+}
+
 function List({ color, size, ...nativeProps }) {
     return (jsx(IconBox, { "$color": color, "$size": size, children: jsx("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: jsxs("g", { transform: "translate(160 -41)", children: [jsxs("g", { children: [jsxs("g", { fill: "none", stroke: "currentColor", strokeMiterlimit: "10", strokeWidth: "2", transform: "translate(-142 45) rotate(90)", children: [jsx("rect", { height: "12", stroke: "none", width: "2" }), jsx("rect", { fill: "none", height: "10", x: "1", y: "1" })] }), jsxs("g", { fill: "none", stroke: "currentColor", strokeMiterlimit: "10", strokeWidth: "2", transform: "translate(-142 50) rotate(90)", children: [jsx("rect", { height: "12", stroke: "none", width: "2" }), jsx("rect", { fill: "none", height: "10", x: "1", y: "1" })] }), jsxs("g", { fill: "none", stroke: "currentColor", strokeMiterlimit: "10", strokeWidth: "2", transform: "translate(-142 55) rotate(90)", children: [jsx("rect", { height: "12", stroke: "none", width: "2" }), jsx("rect", { fill: "none", height: "10", x: "1", y: "1" })] }), jsxs("g", { fill: "none", stroke: "currentColor", strokeMiterlimit: "10", strokeWidth: "2", transform: "translate(-158 44.5)", children: [jsx("circle", { cx: "1.5", cy: "1.5", r: "1.5", stroke: "none" }), jsx("circle", { cx: "1.5", cy: "1.5", fill: "none", r: "0.5" })] }), jsxs("g", { fill: "none", stroke: "currentColor", strokeMiterlimit: "10", strokeWidth: "2", transform: "translate(-158 49.5)", children: [jsx("circle", { cx: "1.5", cy: "1.5", r: "1.5", stroke: "none" }), jsx("circle", { cx: "1.5", cy: "1.5", fill: "none", r: "0.5" })] }), jsxs("g", { fill: "none", stroke: "currentColor", strokeMiterlimit: "10", strokeWidth: "2", transform: "translate(-158 54.5)", children: [jsx("circle", { cx: "1.5", cy: "1.5", r: "1.5", stroke: "none" }), jsx("circle", { cx: "1.5", cy: "1.5", fill: "none", r: "0.5" })] })] }), jsx("rect", { fill: "none", height: "20", transform: "translate(-160 41)", width: "20" })] }) }) }));
 }
@@ -34322,6 +34323,10 @@ function Target({ color, size, ...nativeProps }) {
     return (jsx(IconBox, { "$color": color, "$size": size, children: jsxs("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: [jsxs("g", { fill: "none", strokeMiterlimit: "10", children: [jsx("path", { d: "M20,9H17.931A7.994,7.994,0,0,0,11,2.069V0H9V2.069A7.994,7.994,0,0,0,2.069,9H0v2H2.069A7.994,7.994,0,0,0,9,17.931V20h2V17.931A7.994,7.994,0,0,0,17.931,11H20Zm-9,6.91V14H9v1.91A6.008,6.008,0,0,1,4.09,11H6V9H4.09A6.008,6.008,0,0,1,9,4.09V6h2V4.09A6.008,6.008,0,0,1,15.91,9H14v2h1.91A6.008,6.008,0,0,1,11,15.91Z", stroke: "none" }), jsx("path", { d: "M 9 0 L 11 0 L 11 2.069000244140625 C 14.61700057983398 2.520999908447266 17.47900009155273 5.383000373840332 17.93099975585938 9 L 20 9 L 20 11 L 17.93099975585938 11 C 17.47900009155273 14.61700057983398 14.61700057983398 17.47900009155273 11 17.93099975585938 L 11 20 L 9 20 L 9 17.93099975585938 C 5.383000373840332 17.47900009155273 2.520999908447266 14.61700057983398 2.069000244140625 11 L 0 11 L 0 9 L 2.069000244140625 9 C 2.520999908447266 5.383000373840332 5.383000373840332 2.520999908447266 9 2.069000244140625 L 9 0 Z M 11 6 L 9 6 L 9 4.090000152587891 C 6.493000030517578 4.513999938964844 4.513999938964844 6.493000030517578 4.090000152587891 9 L 6 9 L 6 11 L 4.090000152587891 11 C 4.513999938964844 13.50699996948242 6.493000030517578 15.48600006103516 9 15.90999984741211 L 9 14 L 11 14 L 11 15.90999984741211 C 13.50699996948242 15.48600006103516 15.48600006103516 13.50699996948242 15.90999984741211 11 L 14 11 L 14 9 L 15.90999984741211 9 C 15.48600006103516 6.493000030517578 13.50699996948242 4.513999938964844 11 4.090000152587891 L 11 6 Z", fill: "currentColor", stroke: "none" })] }), jsxs("g", { fill: "none", stroke: "currentColor", strokeMiterlimit: "10", strokeWidth: "2", transform: "translate(8.5 8.5)", children: [jsx("circle", { cx: "1.5", cy: "1.5", r: "1.5", stroke: "none" }), jsx("circle", { cx: "1.5", cy: "1.5", fill: "none", r: "0.5" })] }), jsx("path", { d: "M0,0H20V20H0Z", fill: "none" })] }) }));
 }
 
+function Unlink({ color, size, ...nativeProps }) {
+    return (jsx(IconBox, { "$color": color, "$size": size, children: jsxs("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: [jsx("rect", { fill: "none", height: "20", width: "20" }), jsxs("g", { children: [jsx("rect", { fill: "currentColor", height: "22", transform: "translate(17.071 1.515) rotate(45)", width: "2" }), jsx("g", { children: jsx("path", { d: "M3.22,14.659l1.67-1.67A3,3,0,0,1,5,7H9V5H5a4.992,4.992,0,0,0-1.78,9.659Z", fill: "currentColor" }) }), jsxs("g", { children: [jsx("path", { d: "M8.879,9H6v2h.879Z", fill: "currentColor" }), jsx("path", { d: "M10.414,11l2-2H9.586l-2,2Z", fill: "currentColor" }), jsx("path", { d: "M11.121,11H14V9h-.879Z", fill: "currentColor" })] }), jsx("g", { children: jsx("path", { d: "M16.78,5.341l-1.67,1.67A3,3,0,0,1,15,13H11v2h4a4.992,4.992,0,0,0,1.78-9.659Z", fill: "currentColor" }) })] })] }) }));
+}
+
 function Unlock({ color, size, ...nativeProps }) {
     return (jsx(IconBox, { "$color": color, "$size": size, children: jsxs("svg", { height: "20", viewBox: "0 0 20 20", width: "20", ...nativeProps, children: [jsx("path", { d: "M0,0H20V20H0Z", fill: "none" }), jsxs("g", { children: [jsx("path", { d: "M0,0H20V20H0Z", fill: "none" }), jsxs("g", { children: [jsx("circle", { cx: "1.5", cy: "1.5", fill: "currentColor", r: "1.5", transform: "translate(8.5 11.5)" }), jsx("path", { d: "M14.471,7V5.456a4.471,4.471,0,0,0-8.942,0H7.765a2.235,2.235,0,1,1,4.47,0V7H3V19H17V7ZM15,17H5V9H15Z", fill: "currentColor" })] })] })] }) }));
 }
@@ -34362,6 +34367,7 @@ var index = /*#__PURE__*/Object.freeze({
 	Duplicate: Duplicate,
 	Edit: Edit,
 	EditBis: EditBis,
+	EditUnbordered: EditUnbordered,
 	Expand: Expand,
 	Favorite: Favorite,
 	FilledArrow: FilledArrow,
@@ -34377,6 +34383,7 @@ var index = /*#__PURE__*/Object.freeze({
 	Info: Info,
 	Infringement: Infringement,
 	Landmark: Landmark,
+	Link: Link$1,
 	List: List,
 	MapLayers: MapLayers,
 	MeasureAngle: MeasureAngle,
@@ -34415,6 +34422,7 @@ var index = /*#__PURE__*/Object.freeze({
 	Summary: Summary,
 	Tag: Tag$1,
 	Target: Target,
+	Unlink: Unlink,
 	Unlock: Unlock,
 	Vessel: Vessel,
 	ViewOnMap: ViewOnMap,
@@ -34471,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};
   }
 `;
 
@@ -52500,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;
           }
@@ -52515,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 {
@@ -52528,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};
           }
         }
       }
@@ -52541,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};
           }
         }
 
@@ -52557,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};
           }
         }
@@ -52785,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;
@@ -52797,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) {
@@ -52887,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 {
@@ -53000,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')};
@@ -53012,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 `
@@ -53328,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;
             }
@@ -53343,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 {
@@ -53356,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};
             }
           }
         }
@@ -53369,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};
             }
           }
 
@@ -53385,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};
             }
           }
@@ -57101,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;
@@ -57109,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 {
@@ -57210,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]);
@@ -57222,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};
@@ -57262,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 }) {
@@ -57381,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;
   }
 `;
@@ -67144,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 {
@@ -67234,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;
   }
 `;
@@ -67285,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;
   }
 `;
@@ -70671,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 {