@linzjs/lui 21.0.0 → 21.1.0

package/dist/index.js

@@ -213,8 +213,8 @@ iconMap['ic_auth_and_instruct'] = (React__default["default"].createElement("svg"
 iconMap['ic_balance_parcel'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M23 15h-2v2h2v-2Zm0-4h-2v2h2v-2Zm0 8h-2v2c1 0 2-1 2-2ZM15 3h-2v2h2V3Zm8 4h-2v2h2V7Zm-2-4v2h2c0-1-1-2-2-2ZM3 21h8v-6H1v4c0 1.1.9 2 2 2ZM3 7H1v2h2V7Zm12 12h-2v2h2v-2Zm4-16h-2v2h2V3Zm0 16h-2v2h2v-2ZM3 3C2 3 1 4 1 5h2V3Zm0 8H1v2h2v-2Zm8-8H9v2h2V3ZM7 3H5v2h2V3Z" })));
 iconMap['ic_basemap_off'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default["default"].createElement("path", { d: "M4.174 3.16a.98.98 0 1 0-1.387 1.387l1.501 1.5A1 1 0 0 0 4 6.75V19a1 1 0 0 0 1.371.928l4.035-1.614 4.903 1.635a1 1 0 0 0 .687-.02l2.266-.907 2.193 2.193a.98.98 0 0 0 1.387-1.387L4.174 3.16Zm11.55 14.323L14.68 16.44l.174 1.391.87-.348ZM14.36 16.12 6 7.76v9.763l3.004-1.201c.038-.016.076-.028.115-.039L9.5 14l.395 2.37 4.257 1.418.208-1.668Z" }),
-    React__default["default"].createElement("path", { d: "M18 6.477v7.765l2 2V5a1 1 0 0 0-1.371-.928l-4.035 1.613L9.69 4.051a1 1 0 0 0-.687.02l-.84.336 1.866 1.865 4.075 1.359L14.5 10l.38-2.283c.04-.01.078-.023.116-.039L18 6.477Z" })));
+    React__default["default"].createElement("path", { d: "M4.174 3.16a.98.98 0 1 0-1.387 1.387l1.501 1.5A1 1 0 0 0 4 6.75V19a1 1 0 0 0 1.371.928l4.035-1.614 4.903 1.635a1 1 0 0 0 .687-.02l2.266-.907 2.193 2.193a.98.98 0 0 0 1.387-1.387L4.174 3.16Zm11.55 14.323L14.68 16.44l.174 1.391.87-.348ZM14.36 16.12 6 7.76v9.763l3.004-1.201a.973.973 0 0 1 .115-.039L9.5 14l.395 2.37 4.257 1.418.208-1.668Z" }),
+    React__default["default"].createElement("path", { d: "M18 6.477v7.765l2 2V5a1 1 0 0 0-1.371-.928l-4.035 1.613L9.69 4.051a1 1 0 0 0-.687.02l-.84.336 1.866 1.865 4.075 1.359L14.5 10l.38-2.283a.79.79 0 0 0 .116-.039L18 6.477Z" })));
 iconMap['ic_blackwhite_greyscale'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("g", { clipPath: "url(#a)" },
         React__default["default"].createElement("path", { d: "M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10Zm1-17.93c3.94.49 7 3.85 7 7.93s-3.05 7.44-7 7.93V4.07Z" })),
@@ -272,15 +272,14 @@ iconMap['ic_data_display_threshold'] = (React__default["default"].createElement(
     React__default["default"].createElement("path", { d: "M12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm6 1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-2 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm4-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" }),
     React__default["default"].createElement("path", { d: "M21 4a1 1 0 0 0-1.371-.928l-4.66 1.863-5.653-1.884a1 1 0 0 0-.687.02l-5 2A1 1 0 0 0 3 6v14a1 1 0 0 0 1.371.928l4.66-1.864 1.153.385a1 1 0 0 0 .632-1.898l-1.473-.49L9 15l-.343 2.06-.028.012L5 18.523V6.677l3.7-1.48L9 7l.307-1.843 5.35 1.783L15 9l.344-2.06.027-.012L19 5.477V10a1 1 0 1 0 2 0V4Z" }),
     React__default["default"].createElement("path", { d: "m21.1 21.5-3.2-3.2c-.35.2-.725.367-1.125.5s-.825.2-1.275.2c-1.25 0-2.313-.438-3.188-1.313C11.438 16.813 11 15.75 11 14.5c0-1.25.438-2.313 1.313-3.188C13.187 10.438 14.25 10 15.5 10c1.25 0 2.313.438 3.188 1.313C19.563 12.187 20 13.25 20 14.5c0 .45-.067.875-.2 1.275-.133.4-.3.775-.5 1.125l3.2 3.2-1.4 1.4ZM15.5 17c.7 0 1.292-.242 1.775-.725.483-.483.725-1.075.725-1.775s-.242-1.292-.725-1.775C16.792 12.242 16.2 12 15.5 12s-1.292.242-1.775.725C13.242 13.208 13 13.8 13 14.5s.242 1.292.725 1.775c.483.483 1.075.725 1.775.725Z" })));
-iconMap['ic_data_display_threshold_high_urban'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default["default"].createElement("path", { d: "m7 6.5 2 2V8h3v2h-2v2h2v2h-2v2h2v2h-2v2h4v-9h5V2H7v4.5ZM14 4h3v2h-3V4Zm3 4h-3v2h3V8ZM9 4h3v2H9V4Z" }),
-    React__default["default"].createElement("path", { d: "m6 7 3 3v12H3V10l3-3Zm-1 3v2h2v-2H5Zm2 4v2H5v-2h2Zm0 4v2H5v-2h2ZM21 12h-6v10h6V12Zm-2 2h-2v2h2v-2Zm-2 4h2v2h-2v-2Z" })));
-iconMap['ic_data_display_threshold_low_large_rural'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default["default"].createElement("path", { d: "M8 12h.5c1.38 0 2.5-1.194 2.5-2.667 0-1.097-.62-2.039-1.508-2.448a2.88 2.88 0 0 0 .008-.218C9.5 5.194 8.38 4 7 4S4.5 5.194 4.5 6.667c0 .073.003.146.008.218C3.621 7.295 3 8.236 3 9.333 3 10.806 4.12 12 5.5 12H6v2.528A16.297 16.297 0 0 0 2 14v2c2.597 0 6.397.89 9.002 3.413v-2.598A14.205 14.205 0 0 0 8 15.182V12ZM6.083 7.81l-.08-1.039A1.385 1.385 0 0 1 6 6.667C6 5.93 6.537 5.5 7 5.5c.463 0 1 .43 1 1.167 0 .035-.001.07-.004.104l-.079 1.04.946.436c.338.156.637.554.637 1.086 0 .737-.537 1.167-1 1.167h-3c-.463 0-1-.43-1-1.167 0-.532.299-.93.637-1.086l.946-.437Z" }),
-    React__default["default"].createElement("path", { d: "M12 15v6h10v-6l1-1-2-2V9h-2v1l-2-2-6 6 1 1Zm2 4h2v-3h2v3h2v-5l-3-3-3 3v5Z" })));
-iconMap['ic_data_display_threshold_medium_rural'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default["default"].createElement("path", { d: "M2 15v6h10v-6l1-1-6-6-2 2V9H3v3l-2 2 1 1Zm2-1v5h2v-3h2v3h2v-5l-3-3-3 3Z" }),
-    React__default["default"].createElement("path", { d: "M15 16v-2h1v-3h2v3h2V9l-3-3-3 3v4l-2-2v-1l-1-1 6-6 2 2V4h2v3l2 2-1 1v6h-7Z" })));
+iconMap['ic_data_display_threshold_high_urban'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24" },
+    React__default["default"].createElement("path", { d: "M7 2v4.5l2 2V8h3v2h-2v2h2v2h-2v2h2v2h-2v2h4v-9h5V2H7zm5 4H9V4h3v2zm5 4h-3V8h3v2zm0-4h-3V4h3v2z" }),
+    React__default["default"].createElement("path", { d: "m6 7 3 3v12H3V10l3-3zm-1 3v2h2v-2H5zm2 4v2H5v-2h2zm0 4v2H5v-2h2zm14-6h-6v10h6V12zm-2 2h-2v2h2v-2zm-2 4h2v2h-2v-2z" })));
+iconMap['ic_data_display_threshold_low_large_rural'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24" },
+    ' ',
+    React__default["default"].createElement("path", { d: "M8 12h.5c1.4 0 2.5-1.2 2.5-2.7 0-1.1-.6-2-1.5-2.4v-.2C9.5 5.2 8.4 4 7 4S4.5 5.2 4.5 6.7v.2C3.6 7.3 3 8.2 3 9.3 3 10.8 4.1 12 5.5 12H6v2.5c-1.3-.3-2.6-.5-4-.5v2c2.6 0 6.4.9 9 3.4v-2.6c-.9-.7-1.9-1.2-3-1.6V12zM6.1 7.8l-.1-1v-.1c0-.7.5-1.2 1-1.2s1 .4 1 1.2v.1l-.1 1 .9.4c.3.2.6.6.6 1.1 0 .7-.5 1.2-1 1.2h-3c-.5 0-1-.4-1-1.2 0-.5.3-.9.6-1.1l1.1-.4zM21 12V9h-2v1l-2-2-6 6 1 1v6h10v-6l1-1-2-2zm-1 7h-2v-3h-2v3h-2v-5l3-3 3 3v5z" })));
+iconMap['ic_data_display_threshold_medium_rural'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24" },
+    React__default["default"].createElement("path", { d: "M5 10V9H3v3l-2 2 1 1v6h10v-6l1-1-6-6-2 2zm5 9H8v-3H6v3H4v-5l3-3 3 3v5zM21 7V4h-2v1l-2-2-6 6 1 1v1l2 2V9l3-3 3 3v5h-2v-3h-2v3h-1v2h7v-6l1-1z" })));
 iconMap['ic_dealings'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M20 5h-3V2c0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1v16c0 .6.4 1 1 1h3v3c0 .6.4 1 1 1h12c.6 0 1-.4 1-1V6c0-.6-.4-1-1-1ZM7 5v12H5V3h10v2H7Zm12 16H9V7h10v14Zm-1-11h-8v2h8v-2Zm-8 3h8v2h-8v-2Zm8 3h-8v2h8v-2Z" })));
 iconMap['ic_delete_forever'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
@@ -401,7 +400,7 @@ iconMap['ic_lists_folder'] = (React__default["default"].createElement("svg", { v
 iconMap['ic_locate'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4Zm8.94 3A8.994 8.994 0 0 0 13 3.06V2c0-.55-.45-1-1-1s-1 .45-1 1v1.06A8.994 8.994 0 0 0 3.06 11H2c-.55 0-1 .45-1 1s.45 1 1 1h1.06A8.994 8.994 0 0 0 11 20.94V22c0 .55.45 1 1 1s1-.45 1-1v-1.06A8.994 8.994 0 0 0 20.94 13H22c.55 0 1-.45 1-1s-.45-1-1-1h-1.06ZM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7Z" })));
 iconMap['ic_located_in_spatial'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default["default"].createElement("path", { d: "m10.32 14.736-2.057-2.064A.912.912 0 0 1 8 12c0-.272.088-.496.263-.672a.89.89 0 0 1 .658-.264c.263 0 .49.088.681.264l1.387 1.344 3.396-3.408A.89.89 0 0 1 15.043 9a.93.93 0 0 1 .682.288.91.91 0 0 1 .274.696.993.993 0 0 1-.298.696l-4.042 4.056a.905.905 0 0 1-.67.264.905.905 0 0 1-.67-.264Z" }),
+    React__default["default"].createElement("path", { d: "m10.32 14.736-2.057-2.064A.912.912 0 0 1 8 12c0-.272.088-.496.263-.672a.89.89 0 0 1 .658-.264.97.97 0 0 1 .681.264l1.387 1.344 3.396-3.408A.89.89 0 0 1 15.043 9a.93.93 0 0 1 .682.288.91.91 0 0 1 .274.696.993.993 0 0 1-.298.696l-4.042 4.056a.905.905 0 0 1-.67.264.905.905 0 0 1-.67-.264Z" }),
     React__default["default"].createElement("path", { d: "M20.94 11A8.994 8.994 0 0 0 13 3.06V2c0-.55-.45-1-1-1s-1 .45-1 1v1.06A8.994 8.994 0 0 0 3.06 11H2c-.55 0-1 .45-1 1s.45 1 1 1h1.06A8.994 8.994 0 0 0 11 20.94V22c0 .55.45 1 1 1s1-.45 1-1v-1.06A8.994 8.994 0 0 0 20.94 13H22c.55 0 1-.45 1-1s-.45-1-1-1h-1.06ZM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7Z" })));
 iconMap['ic_lock'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default["default"].createElement("path", { d: "M14 7.5h-1v-2c0-2.76-2.24-5-5-5s-5 2.24-5 5v2H2c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-10c0-1.1-.9-2-2-2Zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2Zm3.1-9H4.9v-2c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2Z" })));
@@ -435,7 +434,7 @@ iconMap['ic_misclose_error'] = (React__default["default"].createElement("svg", {
 iconMap['ic_more_vert'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default["default"].createElement("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })));
 iconMap['ic_multi_factor_authentication_mfa'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default["default"].createElement("path", { d: "M17 21a.968.968 0 0 1-.712-.288A.968.968 0 0 1 16 20v-7.95c0-.283.096-.52.288-.713A.968.968 0 0 1 17 11.05h4c.283 0 .52.096.712.287.192.192.288.43.288.713V20c0 .283-.096.52-.288.712A.968.968 0 0 1 21 21h-4Zm0-2h4v-5.95h-4V19Zm-8 2a.967.967 0 0 1-.713-.288A.968.968 0 0 1 8 20c0-.283.096-.52.287-.712A.967.967 0 0 1 9 19h1v-2H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 15V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h14c.55 0 1.02.196 1.413.587C19.803 3.98 20 4.45 20 5v3.05c0 .283-.096.52-.288.712A.968.968 0 0 1 19 9.05a.968.968 0 0 1-.712-.288A.967.967 0 0 1 18 8.05V5H4v10h9c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.712A.968.968 0 0 1 13 17h-1v2h1c.283 0 .52.096.713.288.191.191.287.429.287.712s-.096.52-.287.712A.968.968 0 0 1 13 21H9Z" }),
+    React__default["default"].createElement("path", { d: "M17 21a.968.968 0 0 1-.712-.288A.968.968 0 0 1 16 20v-7.95a.97.97 0 0 1 .288-.713.968.968 0 0 1 .712-.287h4a.97.97 0 0 1 .712.287c.192.192.288.43.288.713V20c0 .283-.096.52-.288.712A.968.968 0 0 1 21 21h-4Zm0-2h4v-5.95h-4V19Zm-8 2a.967.967 0 0 1-.713-.288A.968.968 0 0 1 8 20a.97.97 0 0 1 .287-.712A.967.967 0 0 1 9 19h1v-2H4c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 15V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v3.05c0 .283-.096.52-.288.712A.968.968 0 0 1 19 9.05a.968.968 0 0 1-.712-.288A.967.967 0 0 1 18 8.05V5H4v10h9c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.712A.968.968 0 0 1 13 17h-1v2h1a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712A.968.968 0 0 1 13 21H9Z" }),
     React__default["default"].createElement("path", { d: "M9 14a.967.967 0 0 1-.713-.287A.968.968 0 0 1 8 13v-3c0-.283.096-.52.287-.713A.968.968 0 0 1 9 9V8c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 11 6c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412v1c.283 0 .52.096.713.287.191.192.287.43.287.713v3c0 .283-.096.52-.287.713A.968.968 0 0 1 13 14H9Zm1-6v1h2V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 11 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 10 8Z" })));
 iconMap['ic_navigate_before'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default["default"].createElement("path", { d: "M15.703 7.406 11.109 12l4.594 4.594L14.297 18l-6-6 6-6z" })));
@@ -472,6 +471,13 @@ iconMap['ic_parcels_new'] = (React__default["default"].createElement("svg", { vi
     React__default["default"].createElement("path", { d: "M3 3v8h8V3H3Zm6 6H5V5h4v4Zm-6 4v8h8v-8H3Zm6 6H5v-4h4v4Zm4-16v8h8V3h-8Zm6 6h-4V5h4v4Zm-6 4v8h8v-8h-8Zm6 6h-4v-4h4v4Z" })));
 iconMap['ic_pdf'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M13.367 16.082c.125.27.188.617.188 1.04 0 .622-.145 1.09-.434 1.405-.286.315-.725.473-1.316.473h-.52v-3.719h.645c.354 0 .65.065.89.196.242.13.425.332.547.605ZM21 8v12c0 1.1-.9 2-2 2H4.99C3.89 22 3 21.1 3 20l.01-16c0-1.1.89-2 1.99-2h10l6 6ZM9.496 16.07c0-.554-.17-.99-.508-1.304-.338-.318-.876-.477-1.613-.477H5.551V20h1.21v-2.031h.52c.417 0 .767-.051 1.051-.153.284-.104.51-.244.68-.421.172-.178.295-.38.37-.606.076-.23.114-.469.114-.719Zm5.316 1.02c0-.612-.12-1.125-.363-1.54a2.311 2.311 0 0 0-1.023-.94c-.44-.214-.96-.32-1.559-.32h-1.793V20h1.617c.657 0 1.218-.108 1.684-.324a2.334 2.334 0 0 0 1.066-.973c.248-.432.371-.97.371-1.613Zm3.958-2.8h-3.274V20h1.191v-2.258h1.938v-.988h-1.938V15.28h2.082v-.992ZM19 9h-5V4H5v8h14V9ZM7.312 15.281h-.55v1.696h.398c.227 0 .423-.03.59-.09a.786.786 0 0 0 .387-.282.827.827 0 0 0 .136-.492c0-.281-.078-.49-.234-.625-.156-.138-.398-.207-.726-.207Z" })));
+iconMap['ic_pdf_doc'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24" },
+    React__default["default"].createElement("path", { d: "M13.3,7.2V1.8h-8c-0.5,0-1,0.4-1,1v18.4c0,0.5,0.4,1,1,1h13.4c0.5,0,1-0.4,1-1v-13h-5.4C13.7,8.2,13.3,7.8,13.3,7.2z\n\t\t M16.8,15.3c0.5,0.5,0.4,1.7-0.8,1.7c-0.7,0-1.7-0.3-2.5-0.8c-1,0.2-2.1,0.6-3.1,0.9c-1,1.7-1.7,2.5-2.4,2.5\n\t\tc-0.2,0-0.6-0.1-0.9-0.4c-0.8-0.9,1.1-2.2,2.2-2.7c0,0,0,0,0,0c0.5-0.8,1.2-2.3,1.6-3.4c-0.3-1.3-0.5-2.3-0.3-3.1\n\t\tc0.2-0.8,1.7-0.9,1.9,0.3c0.2,0.7-0.1,1.8-0.2,2.6c0.4,1,0.9,1.7,1.7,2.1C14.7,14.9,16.3,14.8,16.8,15.3z" }),
+    React__default["default"].createElement("path", { d: "M11.5,10.1c-0.1,0-0.1,1.2,0.1,1.9C11.8,11.6,11.9,10.1,11.5,10.1z" }),
+    React__default["default"].createElement("path", { d: "M11.5,13.9L11.5,13.9c-0.3,0.8-0.7,1.7-1.1,2.5c0.7-0.3,1.6-0.7,2.5-0.9C12.4,15.1,11.9,14.6,11.5,13.9z" }),
+    React__default["default"].createElement("path", { d: "M7.8,18.8c0,0,0.5-0.2,1.4-1.6C8.9,17.5,8,18.2,7.8,18.8z" }),
+    React__default["default"].createElement("path", { d: "M19.4,6l-3.9-3.9c-0.2-0.2-0.4-0.3-0.7-0.3h-0.2v5.1h5.1V6.7C19.6,6.4,19.5,6.2,19.4,6z" }),
+    React__default["default"].createElement("path", { d: "M16.4,16.1c0.2-0.1-0.1-0.5-1.7-0.4C16.2,16.4,16.4,16.1,16.4,16.1z" })));
 iconMap['ic_pen_and_paper_sign'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M9 4v1.38c-.83-.33-1.72-.5-2.61-.5-1.79 0-3.58.68-4.95 2.05l3.33 3.33h1.11v1.11c.86.86 1.98 1.31 3.11 1.36V15H6v3c0 1.1.9 2 2 2h10c1.66 0 3-1.34 3-3V4H9Zm-1.11 6.41V8.26H5.61L4.57 7.22a5.07 5.07 0 0 1 1.82-.34c1.34 0 2.59.52 3.54 1.46l1.41 1.41-.2.2a2.7 2.7 0 0 1-1.92.8c-.47 0-.93-.12-1.33-.34ZM19 17c0 .55-.45 1-1 1s-1-.45-1-1v-2h-6v-2.59c.57-.23 1.1-.57 1.56-1.03l.2-.2L15.59 14H17v-1.41l-6-5.97V6h8v11Z" })));
 iconMap['ic_people_outline'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
@@ -506,7 +512,7 @@ iconMap['ic_publish'] = (React__default["default"].createElement("svg", { xmlns:
 iconMap['ic_push_pin_remove'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M18.073 13.997c.516-.037.927-.472.927-.997v-.13c0-.47-.34-.85-.8-.98A2.997 2.997 0 0 1 16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v1.573l2 1.672V4h4v5c0 .771.149 1.394.332 1.868l3.741 3.13ZM13 14.935l7.71 6.43 1.27-1.518L2.02 3.153.727 4.699l6.898 5.754A3.004 3.004 0 0 1 5.8 11.89c-.46.13-.8.51-.8.98V13c0 .55.45 1 1 1h5v7c0 .55.45 1 1 1s1-.45 1-1v-6.065Z" })));
 iconMap['ic_read_only'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default["default"].createElement("path", { d: "m14.07 13.68 3.74-3.74-3.75-3.75-3.63 3.63.627.665L14.06 7.5 16.5 10l-3.037 3.037.607.643ZM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29-.26 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41Z" }),
+    React__default["default"].createElement("path", { d: "m14.07 13.68 3.74-3.74-3.75-3.75-3.63 3.63.627.665L14.06 7.5 16.5 10l-3.037 3.037.607.643Zm6.64-8.05-2.34-2.34c-.2-.2-.45-.29-.71-.29-.26 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41Z" }),
     React__default["default"].createElement("path", { d: "M16.96 3.29c.19-.19.44-.29.7-.29.26 0 .51.09.71.29l2.34 2.34c.39.39.39 1.02 0 1.41l-1.83 1.83-3.75-3.75m1.83-1.83-1.83 1.83m1.83-1.83-1.83 1.83m-1.06 8.56 3.74-3.74-3.75-3.75-3.63 3.63m3.64 3.86-.607-.643m.607.643 6.43 6.82-.5.5L3.5 3.5 4 3l6.43 6.82m3.64 3.86L6.75 21H3v-3.75l7.43-7.43m0 0 .627.665m0 0L14.06 7.5 16.5 10l-3.037 3.037m-2.406-2.552 2.406 2.552m-2.406-2.552L4 17.5V20h2.5l6.963-6.963", stroke: "#000" })));
 iconMap['ic_refresh'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M17.65 6.35a7.95 7.95 0 0 0-6.48-2.31c-3.67.37-6.69 3.35-7.1 7.02C3.52 15.91 7.27 20 12 20a7.98 7.98 0 0 0 7.21-4.56c.32-.67-.16-1.44-.9-1.44-.37 0-.72.2-.88.53a5.994 5.994 0 0 1-6.8 3.31c-2.22-.49-4.01-2.3-4.48-4.52A6.002 6.002 0 0 1 12 6c1.66 0 3.14.69 4.22 1.78l-1.51 1.51c-.63.63-.19 1.71.7 1.71H19c.55 0 1-.45 1-1V6.41c0-.89-1.08-1.34-1.71-.71l-.64.65Z" })));
@@ -565,7 +571,7 @@ iconMap['ic_subdirectory_arrow_right'] = (React__default["default"].createElemen
 iconMap['ic_submit'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M2.01 21 23 12 2.01 3 2 10l15 2-15 2 .01 7Z" })));
 iconMap['ic_summary_open'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default["default"].createElement("path", { d: "m20.425 18 2.95 2.95-1.425 1.4L19 19.4v2.25h-2V16h5.65v2h-2.225ZM15 16H8v2h7v-2ZM16 12H8v2h8v-2Z" }),
+    React__default["default"].createElement("path", { d: "m20.425 18 2.95 2.95-1.425 1.4L19 19.4v2.25h-2V16h5.65v2h-2.225ZM15 16H8v2h7v-2Zm1-4H8v2h8v-2Z" }),
     React__default["default"].createElement("path", { d: "M15 22v-2H6V4h7v5h5v5h2V8l-6-6H6C4.4 2 4 3.333 4 4v16c0 1.6 1.333 2 2 2h9Z" })));
 iconMap['ic_survey'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M20 5H8V1.1H4c-1.7 0-3 1.3-3 3v14C1 19.8 2.3 21 4 21h16c1.7 0 3-1.3 3-3V8c0-1.7-1.3-3-3-3Zm1 3v3.3h-6.2V7H20c.6 0 1 .4 1 1Zm-7.8-1v4.3H8V7h5.2Zm-8 12H5c-1.1 0-2-.9-2-2s.9-2 2-2h.2v4Zm1.5 0v-4H8v-2.3h5.2V19H6.7ZM4 3.1h2V13H5c-.7 0-1.4.2-2 .6V4.1c0-.5.4-1 1-1ZM20 19h-5.2v-6.3H21V18c0 .6-.4 1-1 1Z" })));
@@ -25515,8 +25521,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);\n  position: absolute;\n  background-color: #ffffff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #2a292c;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #6b6966;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
-styleInject(css_248z$d);
+var css_248z$g = ".LuiFloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindow-window {\n  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1490196078), 0px 6px 10px 0px rgba(0, 0, 0, 0.2509803922);\n  position: absolute;\n  background-color: #ffffff;\n  top: 10%;\n  left: 5%;\n  display: flex;\n  flex-direction: column;\n  border-radius: 9px;\n}\n\n.FloatingWindow-container {\n  display: flex;\n  height: calc(100% - 50px);\n  width: 100%;\n  overflow: auto;\n}\n\n.FloatingWindow-header-element {\n  flex: 0;\n}\n\n.FloatingWindow-header {\n  height: 48px;\n  line-height: 48px;\n  color: #2a292c;\n  padding: 0 8px;\n  display: flex;\n  overflow: hidden;\n  justify-content: space-between;\n  border-bottom: 2px #eaeaea solid;\n  font-size: 1em;\n  font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n  font-size: 1em;\n  font-weight: 600;\n  overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n  display: flex;\n  align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n  margin-right: 4px;\n  margin-left: 8px;\n  margin-top: -6px;\n  font-size: x-large;\n  opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  border-radius: 50%;\n  background-color: transparent;\n  color: #6b6966;\n  display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n  fill: #6b6966;\n}\n\n.floating-window-icon {\n  display: inline-block;\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n  fill: #6b6966;\n}";
+styleInject(css_248z$g);
 
 /**
  * Overwrite the common buttons for floating window to
@@ -26869,7 +26875,7 @@ var PropTypes = propTypes.exports;
 
 var numeric = function (value, unit) { return Number(value.slice(0, -1 * unit.length)); };
 
-var parseValue = function (value) {
+var parseValue$1 = function (value) {
     if (value.endsWith('px'))
         { return { value: value, type: 'px', numeric: numeric(value, 'px') } }
     if (value.endsWith('fr'))
@@ -26880,7 +26886,7 @@ var parseValue = function (value) {
     return null
 };
 
-var parse$3 = function (rule) { return rule.split(' ').map(parseValue); };
+var parse$3 = function (rule) { return rule.split(' ').map(parseValue$1); };
 
 var getSizeAtTrack = function (index, tracks, gap, end) {
     if ( gap === void 0 ) { gap = 0; }
@@ -27792,8 +27798,8 @@ ReactSplitGrid.defaultProps = {
     onDrag: undefined,
 };
 
-var css_248z$c = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px; /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #eaeaea;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #eaeaea;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
-styleInject(css_248z$c);
+var css_248z$f = ".LuiResizableLayout-leftPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n  display: flex;\n  flex-direction: column;\n  /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n  the search result div scroll (instead of the whole page) */\n  overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n  overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n  display: flex;\n  /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n  visibility: hidden;\n  opacity: 0;\n  position: fixed;\n  top: 50%;\n  z-index: 500;\n  margin-left: -30px; /*half total control width, minus half the gutter width*/\n  transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n  background-color: #eaeaea;\n  width: 32px;\n  height: 80px;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n  border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n  border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n  height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n  background-color: #73c8e1;\n  cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n  visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n  visibility: visible;\n  opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n  display: grid;\n  height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n  grid-row: 1/-1;\n  cursor: col-resize;\n  width: 16px;\n  z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n  width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n  grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n  visibility: visible;\n  opacity: 1;\n  transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n  width: 4px;\n  height: 100%;\n  background-color: #eaeaea;\n  pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n  background-color: #73c8e1;\n}";
+styleInject(css_248z$f);
 
 var GutterComponent = function (props) {
     var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
@@ -27820,6 +27826,9 @@ exports.SplitPanelState = void 0;
     SplitPanelState[SplitPanelState["CLOSED_LEFT"] = 1] = "CLOSED_LEFT";
     SplitPanelState[SplitPanelState["CLOSED_RIGHT"] = 2] = "CLOSED_RIGHT";
 })(exports.SplitPanelState || (exports.SplitPanelState = {}));
+/**
+ * @deprecated replaced by Splitter
+ */
 var LuiResizableLayout = function (props) {
     var givenLeftRef = props.givenLeftRef, givenRightRef = props.givenRightRef, givenGridTemplateColumns = props.givenGridTemplateColumns, givenColumnMinSizes = props.givenColumnMinSizes, givenColumnSnapOffset = props.givenColumnSnapOffset, callbackOnClickLeftArrowButton = props.callbackOnClickLeftArrowButton, callbackOnClickRightArrowButton = props.callbackOnClickRightArrowButton, callbackOnDraging = props.callbackOnDraging;
     var _a = React.useState(givenGridTemplateColumns ? givenGridTemplateColumns : '1fr 4px 1fr'), gridTemplateColumns = _a[0], setGridTemplateColumns = _a[1];
@@ -28089,8 +28098,8 @@ var LuiTabsPanelSwitch = function (props) {
         } }, props.children));
 };
 
-var css_248z$b = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiError {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  color: #2a292c;\n}\n.LuiError-errorIcon {\n  vertical-align: middle;\n  display: inline-block;\n}\n.LuiError-errorText {\n  margin-left: 0.5rem;\n}";
-styleInject(css_248z$b);
+var css_248z$e = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiError {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  color: #2a292c;\n}\n.LuiError-errorIcon {\n  vertical-align: middle;\n  display: inline-block;\n}\n.LuiError-errorText {\n  margin-left: 0.5rem;\n}";
+styleInject(css_248z$e);
 
 var LuiError = function (_a) {
     var error = _a.error, className = _a.className;
@@ -28447,8 +28456,8 @@ var LuiDateInput = React__default["default"].forwardRef(function (_a, ref) {
     return React__default["default"].createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
 });
 
-var css_248z$a = ".LuiTextInput.money input {\n  background-image: url(\"data:image/svg+xml;utf8,   <svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'>   <text x='4' y='31' font-size='15' font-family='Open Sans, system-ui, sans-seri' text-anchor='middle'>$</text>  </svg>\");\n  background-position: 10px center;\n  background-repeat: no-repeat;\n  padding-left: 22px;\n  line-height: unset;\n}";
-styleInject(css_248z$a);
+var css_248z$d = ".LuiTextInput.money input {\n  background-image: url(\"data:image/svg+xml;utf8,   <svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'>   <text x='4' y='31' font-size='15' font-family='Open Sans, system-ui, sans-seri' text-anchor='middle'>$</text>  </svg>\");\n  background-position: 10px center;\n  background-repeat: no-repeat;\n  padding-left: 22px;\n  line-height: unset;\n}";
+styleInject(css_248z$d);
 
 var MoneyParser = /** @class */ (function () {
     function MoneyParser(init, options) {
@@ -32843,7 +32852,7 @@ var css$1 = function css(_ref) {
   };
 };
 
-var Control = function Control(props) {
+var Control$1 = function Control(props) {
   var children = props.children,
       cx = props.cx,
       getStyles = props.getStyles,
@@ -33229,7 +33238,7 @@ var SingleValue = function SingleValue(props) {
 
 var components = {
   ClearIndicator: ClearIndicator,
-  Control: Control,
+  Control: Control$1,
   DropdownIndicator: DropdownIndicator,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
@@ -39614,8 +39623,8 @@ function isChromatic() {
         (window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
 }
 
-var css_248z$9 = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  dew: #DAD7D6;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  memesia: #1F69C3;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  engine: #cc0000;\n  carrot: #EA6A2E;\n  kendall: #F5CCCC;\n  elizabeth: #FBDED0;\n  andrea: #3A7CDF;\n  celestial: #D7E5F9;\n  golf: #0AA345;\n  error: #cc0000;\n  error-bg: #F5CCCC;\n  error-focus: #5a0000;\n  warning: #EA6A2E;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3A7CDF;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #1F69C3;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
-styleInject(css_248z$9);
+var css_248z$c = ":export {\n  charcoal: #2a292c;\n  fuscous: #6b6966;\n  gray: #989189;\n  silver: #beb9b4;\n  lily: #eaeaea;\n  dew: #DAD7D6;\n  hint: #f9f9f9;\n  snow: #ffffff;\n  white: #ffffff;\n  teal: #00425d;\n  sea: #007198;\n  electric: #0096cc;\n  spray: #73c8e1;\n  polar: #e2f3f7;\n  memesia: #1F69C3;\n  sherpa: #004b50;\n  surfie: #017a76;\n  persian: #00a599;\n  downy: #73cdc8;\n  iceberg: #dcf5f0;\n  sacramento: #004e32;\n  salem: #08814d;\n  pigment: #0aa245;\n  granny: #9bd79b;\n  panache: #e9fae7;\n  brand-primary: #004b50;\n  brand-secondary: #017a76;\n  engine: #cc0000;\n  carrot: #EA6A2E;\n  kendall: #F5CCCC;\n  elizabeth: #FBDED0;\n  andrea: #3A7CDF;\n  celestial: #D7E5F9;\n  golf: #0AA345;\n  error: #cc0000;\n  error-bg: #F5CCCC;\n  error-focus: #5a0000;\n  warning: #EA6A2E;\n  warning-bg: #fbdfd2;\n  warning-focus: #b33a01;\n  success: #0aa245;\n  success-bg: #e9fae7;\n  info: #3A7CDF;\n  info-bg: #d8e5f9;\n  visited: #00425d;\n  green-hover: #107c3a;\n  green-active: #094a22;\n  green-btn: #0aa245;\n  txt-link: #1F69C3;\n  primary-hover-btn: #005678;\n  selection: #c7e9f3;\n  heading-color: #017a76;\n  heading-color--secondary: #2a292c;\n  base-type-color: #2a292c;\n  input-text: #2a292c;\n  input-placeholder: #6b6966;\n  input-placeholder-when-disabled: #989189;\n  base-icon-color: #007198;\n  disabled-color: #989189;\n  disabled-color-dark: #6b6966;\n  linz-color-primary: #023d48;\n  linz-color-primary-hover: #01818a;\n  linz-color-tertiary: #e1e44a;\n  linz-color-tertiary-hover: #cdcf59;\n  color-test-pink: #f09;\n  linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n  linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
+styleInject(css_248z$c);
 
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
 
@@ -39736,13 +39745,13 @@ function LuiComboSelectActual(givenProps, ref) {
     // box-shadow: "-8px 0px 0 0 #cc0000";
     // border-radius: "4px";
     var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
-    var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$9['sea'], primary75: css_248z$9['electric'], primary50: css_248z$9['spray'], primary25: css_248z$9['polar'], neutral90: css_248z$9['charcoal'], neutral80: css_248z$9['charcoal'], neutral70: css_248z$9['charcoal'], neutral60: css_248z$9['fuscous'], neutral50: css_248z$9['fuscous'], neutral40: css_248z$9['gray'], neutral30: css_248z$9['gray'], neutral20: css_248z$9['silver'], neutral10: css_248z$9['lily'], neutral5: css_248z$9['hint'], danger: css_248z$9['error'], dangerLight: css_248z$9['error-bg'] }) })); }, styles: {
+    var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$c['sea'], primary75: css_248z$c['electric'], primary50: css_248z$c['spray'], primary25: css_248z$c['polar'], neutral90: css_248z$c['charcoal'], neutral80: css_248z$c['charcoal'], neutral70: css_248z$c['charcoal'], neutral60: css_248z$c['fuscous'], neutral50: css_248z$c['fuscous'], neutral40: css_248z$c['gray'], neutral30: css_248z$c['gray'], neutral20: css_248z$c['silver'], neutral10: css_248z$c['lily'], neutral5: css_248z$c['hint'], danger: css_248z$c['error'], dangerLight: css_248z$c['error-bg'] }) })); }, styles: {
             control: function (provided, state) { return (__assign(__assign({}, provided), { 
                 /* matches style of .LuiTextInput-input */
                 boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
                     borderColor: '#053d52'
                 } })); },
-            dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$9['fuscous'] })); },
+            dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$c['fuscous'] })); },
             indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
             input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
                     height: '38px !important'
@@ -39750,10 +39759,10 @@ function LuiComboSelectActual(givenProps, ref) {
             singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
             placeholder: function (provided) { return (__assign(__assign({}, provided), { 
                 /* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
-                fontWeight: 'normal', fontStyle: 'italic', color: css_248z$9['input-placeholder'] })); },
+                fontWeight: 'normal', fontStyle: 'italic', color: css_248z$c['input-placeholder'] })); },
             option: function (provided, _a) {
                 var isSelected = _a.isSelected;
-                return (__assign(__assign({}, provided), { color: css_248z$9['input-text'], backgroundColor: isSelected ? css_248z$9['selection'] : css_248z$9['white'] }));
+                return (__assign(__assign({}, provided), { color: css_248z$c['input-text'], backgroundColor: isSelected ? css_248z$c['selection'] : css_248z$c['white'] }));
             }
         } });
     return (React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
@@ -42133,8 +42142,8 @@ var LuiModalHeader = function (props) {
                 React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
 };
 
-var css_248z$8 = "@keyframes react-loading-skeleton {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.react-loading-skeleton {\n  --base-color: #ebebeb;\n  --highlight-color: #f5f5f5;\n  --animation-duration: 1.5s;\n  --animation-direction: normal;\n  --pseudo-element-display: block; /* Enable animation */\n\n  background-color: var(--base-color);\n\n  width: 100%;\n  border-radius: 0.25rem;\n  display: inline-flex;\n  line-height: 1;\n\n  position: relative;\n  user-select: none;\n  overflow: hidden;\n  z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n  content: ' ';\n  display: var(--pseudo-element-display);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-repeat: no-repeat;\n  background-image: linear-gradient(\n    90deg,\n    var(--base-color),\n    var(--highlight-color),\n    var(--base-color)\n  );\n  transform: translateX(-100%);\n\n  animation-name: react-loading-skeleton;\n  animation-direction: var(--animation-direction);\n  animation-duration: var(--animation-duration);\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n  .react-loading-skeleton {\n    --pseudo-element-display: none; /* Disable animation */\n  }\n}\n";
-styleInject(css_248z$8);
+var css_248z$b = "@keyframes react-loading-skeleton {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.react-loading-skeleton {\n  --base-color: #ebebeb;\n  --highlight-color: #f5f5f5;\n  --animation-duration: 1.5s;\n  --animation-direction: normal;\n  --pseudo-element-display: block; /* Enable animation */\n\n  background-color: var(--base-color);\n\n  width: 100%;\n  border-radius: 0.25rem;\n  display: inline-flex;\n  line-height: 1;\n\n  position: relative;\n  user-select: none;\n  overflow: hidden;\n  z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n  content: ' ';\n  display: var(--pseudo-element-display);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-repeat: no-repeat;\n  background-image: linear-gradient(\n    90deg,\n    var(--base-color),\n    var(--highlight-color),\n    var(--base-color)\n  );\n  transform: translateX(-100%);\n\n  animation-name: react-loading-skeleton;\n  animation-direction: var(--animation-direction);\n  animation-duration: var(--animation-duration);\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n  .react-loading-skeleton {\n    --pseudo-element-display: none; /* Disable animation */\n  }\n}\n";
+styleInject(css_248z$b);
 
 /**
  * @internal
@@ -46785,8 +46794,8 @@ var LuiSidePanelProvider = function (_a) {
         React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
 };
 
-var css_248z$7 = ".lui-switch-checkbox {\n  height: 0;\n  width: 0;\n  visibility: hidden;\n}\n\n.lui-switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  width: 40px;\n  height: 20px;\n  background: grey;\n  border-radius: 40px;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 16px;\n  border-radius: 18px;\n  transition: 0.2s;\n  background: #fff;\n  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n  left: calc(100% - 2px);\n  transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n  width: 20px;\n}";
-styleInject(css_248z$7);
+var css_248z$a = ".lui-switch-checkbox {\n  height: 0;\n  width: 0;\n  visibility: hidden;\n}\n\n.lui-switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  width: 40px;\n  height: 20px;\n  background: grey;\n  border-radius: 40px;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 16px;\n  border-radius: 18px;\n  transition: 0.2s;\n  background: #fff;\n  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n  left: calc(100% - 2px);\n  transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n  width: 20px;\n}";
+styleInject(css_248z$a);
 
 var LuiSwitchButton = function (props) {
     var generatedId = useGenerateOrDefaultId();
@@ -54417,8 +54426,8 @@ var LuiAccordicardStatic = function (props) {
             React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
 };
 
-var css_248z$6 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-accordion {\n  padding: 8px;\n  display: flex;\n  border-radius: 5px;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n.lui-accordion .chevron {\n  transition: all 0.3s ease-in-out;\n  transform: rotate(0);\n}\n.lui-accordion .chevron--isOpen {\n  transform: rotate(180deg);\n}\n.lui-accordion .accordion-heading {\n  padding: 4px;\n}\n.lui-accordion h4 {\n  padding: 4px;\n}\n.lui-accordion > summary {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.lui-accordion > summary h4 {\n  margin-top: 0;\n  display: inline-block;\n}";
-styleInject(css_248z$6);
+var css_248z$9 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.lui-accordion {\n  padding: 8px;\n  display: flex;\n  border-radius: 5px;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n.lui-accordion .chevron {\n  transition: all 0.3s ease-in-out;\n  transform: rotate(0);\n}\n.lui-accordion .chevron--isOpen {\n  transform: rotate(180deg);\n}\n.lui-accordion .accordion-heading {\n  padding: 4px;\n}\n.lui-accordion h4 {\n  padding: 4px;\n}\n.lui-accordion > summary {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.lui-accordion > summary h4 {\n  margin-top: 0;\n  display: inline-block;\n}";
+styleInject(css_248z$9);
 
 var LuiAccordion = function (props) {
     var _a = props.expanded, expanded = _a === void 0 ? false : _a, heading = props.heading, children = props.children, _b = props.iconColor, iconColor = _b === void 0 ? '#017A76' : _b, className = props.className, _c = props.style, style = _c === void 0 ? {} : _c;
@@ -54529,8 +54538,8 @@ var LuiMultiSwitch = function (_a) {
         React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default["default"].createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": option.disabled || disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
 };
 
-var css_248z$5 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiListBox {\n  padding: 0;\n  list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  user-select: none;\n  color: #2a292c;\n  line-height: 24px;\n  outline: none;\n  padding: 0.5rem 0.75rem;\n  border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n  border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n  background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n  background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n  background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n  padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  user-select: none;\n  color: #6b6966;\n  line-height: 16px;\n  padding: 0.5rem 0.5rem;\n}";
-styleInject(css_248z$5);
+var css_248z$8 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiListBox {\n  padding: 0;\n  list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  user-select: none;\n  color: #2a292c;\n  line-height: 24px;\n  outline: none;\n  padding: 0.5rem 0.75rem;\n  border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n  border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n  background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n  background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n  background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n  padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  user-select: none;\n  color: #6b6966;\n  line-height: 16px;\n  padding: 0.5rem 0.5rem;\n}";
+styleInject(css_248z$8);
 
 function $c1d7fb2ec91bae71$var$Item(props) {
     return null;
@@ -58030,16 +58039,16 @@ function DefaultEmptyIndicator() {
     return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
 }
 
-var css_248z$4 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.RadioItemRenderer {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 0 0 2rem;\n}\n.RadioItemRenderer::before {\n  content: \"\";\n  height: 1.5rem;\n  min-width: 1.5rem;\n  width: 1.5rem;\n  border: 2px solid #007198;\n  border-radius: 50%;\n  background-color: transparent;\n  position: absolute;\n  left: 0;\n  top: 0;\n  margin-right: 0.75rem;\n}\n.RadioItemRenderer:after {\n  content: \"\";\n  position: absolute;\n  left: 5px;\n  top: 5px;\n  background-color: #007198;\n  height: 14px;\n  min-width: 14px;\n  width: 14px;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n.RadioItemRenderer-isSelected:after {\n  opacity: 1;\n}";
-styleInject(css_248z$4);
+var css_248z$7 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.RadioItemRenderer {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 0 0 2rem;\n}\n.RadioItemRenderer::before {\n  content: \"\";\n  height: 1.5rem;\n  min-width: 1.5rem;\n  width: 1.5rem;\n  border: 2px solid #007198;\n  border-radius: 50%;\n  background-color: transparent;\n  position: absolute;\n  left: 0;\n  top: 0;\n  margin-right: 0.75rem;\n}\n.RadioItemRenderer:after {\n  content: \"\";\n  position: absolute;\n  left: 5px;\n  top: 5px;\n  background-color: #007198;\n  height: 14px;\n  min-width: 14px;\n  width: 14px;\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.3s ease-in-out;\n}\n.RadioItemRenderer-isSelected:after {\n  opacity: 1;\n}";
+styleInject(css_248z$7);
 
 function RadioItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
     return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
 }
 
-var css_248z$3 = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
-styleInject(css_248z$3);
+var css_248z$6 = ".CheckboxRenderer {\n  display: flex;\n  align-items: center;\n}";
+styleInject(css_248z$6);
 
 function CheckboxItemRenderer(_a) {
     var item = _a.item, isSelected = _a.isSelected;
@@ -58063,8 +58072,8 @@ function LuiSideMenuItem(_a) {
             React__default["default"].createElement("span", { className: "navText" }, label))));
 }
 
-var css_248z$2 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n@keyframes animate-stripes {\n  100% {\n    background-position: 100px 0;\n  }\n}\n.ProgressBar, .ProgressBar-PROC, .ProgressBar-COMP, .ProgressBar-FAIL {\n  height: 5px;\n  width: 100%;\n  background-color: #eaeaea;\n  border-radius: 3px;\n}\n.ProgressBar-FAIL {\n  background-color: #cc0000;\n}\n.ProgressBar-COMP {\n  background-color: #0aa245;\n}\n.ProgressBar-PROC {\n  background-color: #0096cc;\n  transition: width 0.3s ease-in-out;\n}\n.ProgressBar-PROC.indeterminate {\n  background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.75) 75%, transparent 75%);\n  background-size: 50px 100%;\n  animation: animate-stripes 5s linear infinite;\n}";
-styleInject(css_248z$2);
+var css_248z$5 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n@keyframes animate-stripes {\n  100% {\n    background-position: 100px 0;\n  }\n}\n.ProgressBar, .ProgressBar-PROC, .ProgressBar-COMP, .ProgressBar-FAIL {\n  height: 5px;\n  width: 100%;\n  background-color: #eaeaea;\n  border-radius: 3px;\n}\n.ProgressBar-FAIL {\n  background-color: #cc0000;\n}\n.ProgressBar-COMP {\n  background-color: #0aa245;\n}\n.ProgressBar-PROC {\n  background-color: #0096cc;\n  transition: width 0.3s ease-in-out;\n}\n.ProgressBar-PROC.indeterminate {\n  background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.75) 75%, transparent 75%);\n  background-size: 50px 100%;\n  animation: animate-stripes 5s linear infinite;\n}";
+styleInject(css_248z$5);
 
 var LuiProgressBar = function (_a) {
     var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
@@ -58092,8 +58101,8 @@ var LuiProgressBar = function (_a) {
         React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
 };
 
-var css_248z$1 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Toolbar {\n  position: absolute;\n  align-items: center;\n  align-self: center;\n  background: #ffffff;\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  margin: 0 0.75rem;\n  padding: 0;\n  width: fit-content;\n  z-index: 1000;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n\n.Left {\n  justify-self: start;\n}\n\n.Right {\n  justify-self: end;\n}";
-styleInject(css_248z$1);
+var css_248z$4 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Toolbar {\n  position: absolute;\n  align-items: center;\n  align-self: center;\n  background: #ffffff;\n  border-radius: 5px;\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  margin: 0 0.75rem;\n  padding: 0;\n  width: fit-content;\n  z-index: 1000;\n  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n\n.Left {\n  justify-self: start;\n}\n\n.Right {\n  justify-self: end;\n}";
+styleInject(css_248z$4);
 
 exports.ToolbarDirection = void 0;
 (function (ToolbarDirection) {
@@ -58115,8 +58124,8 @@ var ToolbarIcon = function (_a) {
     return iconImage ? (React__default["default"].createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default["default"].createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
 };
 
-var css_248z = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToolbarButton {\n  height: 40px;\n  width: 40px;\n  line-height: 12px;\n  margin: 2px;\n  padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ToolbarButton img {\n  border-radius: 3px;\n  margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n  border-radius: 5px;\n  border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n  height: 2px;\n  background-color: #eaeaea;\n  width: 100%;\n}";
-styleInject(css_248z);
+var css_248z$3 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.ToolbarButton {\n  height: 40px;\n  width: 40px;\n  line-height: 12px;\n  margin: 2px;\n  padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ToolbarButton img {\n  border-radius: 3px;\n  margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n  border-radius: 5px;\n  border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n  height: 2px;\n  background-color: #eaeaea;\n  width: 100%;\n}";
+styleInject(css_248z$3);
 
 /**
  * Create button for using either LuiIcon or Image.
@@ -58184,6 +58193,521 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
     return (React__default["default"].createElement("div", __assign({ ref: ref, className: clsx(selectedNum === 0 ? 'LuiCounter-zero' : 'LuiCounter-non-zero', className), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()));
 });
 
+var css_248z$2 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Separator {\n  background-color: #eaeaea;\n  position: absolute;\n  display: flex;\n  justify-content: space-around;\n  transition-property: background-color;\n  transition-delay: 750ms;\n  transition-duration: 300ms;\n}\n.Separator-arrows {\n  align-self: center;\n  position: relative;\n  opacity: 0;\n  transition-property: opacity;\n  transition-delay: 750ms;\n  transition-duration: 300ms;\n}\n.Separator:focus-within, .Separator:hover, .Separator:focus, .Separator:active {\n  background-color: #73c8e1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n}\n.Separator:focus-within .Separator-arrows, .Separator:hover .Separator-arrows, .Separator:focus .Separator-arrows, .Separator:active .Separator-arrows {\n  opacity: 1;\n  transition-delay: 0ms;\n  transition-duration: 0ms;\n  display: inline-block;\n}";
+styleInject(css_248z$2);
+
+var css_248z$1 = ".Control {\n  transition: opacity 0.2s ease;\n  position: absolute;\n  margin-left: 0 !important;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n}";
+styleInject(css_248z$1);
+
+var useForkRef = function (forwardedRef) {
+    var localRef = React.useRef(null);
+    return forwardedRef || localRef;
+};
+
+/**
+ * Given a ref/element if finds the Separator and returns the most useful attributes
+ */
+var getSeparatorAttributes = function (props) {
+    var _a, _b, _c;
+    return getValues((props.child
+        ? (_a = props.child) === null || _a === void 0 ? void 0 : _a.closest('[role="separator"]')
+        : (_b = props.separator) !== null && _b !== void 0 ? _b : (_c = props.ref) === null || _c === void 0 ? void 0 : _c.current));
+};
+var getValues = function (el) {
+    return {
+        valueNow: parseValue(el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuenow')),
+        valueMin: parseValue(el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuemin')),
+        valueMax: parseValue(el === null || el === void 0 ? void 0 : el.getAttribute('aria-valuemax')),
+        orientation: parseOrientation(el === null || el === void 0 ? void 0 : el.getAttribute('aria-orientation')),
+        thickness: getSeparatorThickness(el)
+    };
+};
+var parseValue = function (val) {
+    var parsed = parseFloat(val !== null && val !== void 0 ? val : '');
+    return isNaN(parsed) ? 0 : parsed;
+};
+var parseOrientation = function (val) {
+    return val === 'horizontal' || val === 'vertical' ? val : undefined;
+};
+/**
+ * Gets the separator width based on the splitter column gap.
+ */
+var getSeparatorThickness = function (separator) {
+    var initialGap = 4;
+    var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
+    if (!splitter) {
+        return initialGap;
+    }
+    var property = (separator === null || separator === void 0 ? void 0 : separator.getAttribute('aria-orientation')) === 'horizontal'
+        ? 'row-gap'
+        : 'column-gap';
+    var parsed = parseFloat(getComputedStyle(splitter).getPropertyValue(property) || '');
+    return isNaN(parsed) ? initialGap : parsed;
+};
+
+var ControlIcon = function (_a) {
+    var parent = _a.parent, side = _a.side;
+    var _b = React.useState(), attributes = _b[0], setAttributes = _b[1];
+    React.useEffect(function () {
+        var _a;
+        var separator = (_a = parent.current) === null || _a === void 0 ? void 0 : _a.closest('[role="separator"]');
+        var callback = function () { return setAttributes(getIconAndText(side, separator)); };
+        callback();
+        var observer = new MutationObserver(callback);
+        observer.observe(separator, { attributeFilter: ['aria-valuenow'] });
+        return function () { return observer.disconnect(); };
+    }, [parent, side]);
+    return attributes ? React__default["default"].createElement(LuiIcon, __assign({ size: "sm" }, attributes)) : null;
+};
+var getIconAndText = function (side, separator) {
+    var _a = getSeparatorAttributes({ separator: separator }), valueNow = _a.valueNow, orientation = _a.orientation;
+    var name = '';
+    var alt = '';
+    if (valueNow !== undefined) {
+        if (side === 'primary') {
+            var double = orientation === 'vertical'
+                ? 'ic_double_arrow_left'
+                : 'ic_keyboard_arrow_up'; // No double icon available
+            var single = orientation === 'vertical'
+                ? 'ic_keyboard_arrow_left'
+                : 'ic_keyboard_arrow_up';
+            name = valueNow !== 100 ? double : single;
+            alt =
+                valueNow !== 100 ? 'Collapse primary panel' : 'Restore primary panel';
+        }
+        else {
+            var double = orientation === 'vertical'
+                ? 'ic_double_arrow_right'
+                : 'ic_keyboard_arrow_down'; // No double icon available
+            var single = orientation === 'vertical'
+                ? 'ic_keyboard_arrow_right'
+                : 'ic_keyboard_arrow_down';
+            name = valueNow !== 0 ? double : single;
+            alt =
+                valueNow !== 0 ? 'Collapse secondary panel' : 'Restore secondary panel';
+        }
+    }
+    return { name: name, alt: alt };
+};
+
+var squareButtonSide = 25;
+var Control = React.forwardRef(function (props, forwardRef) {
+    var side = props.side, rest = __rest(props, ["side"]);
+    var ref = useForkRef(forwardRef);
+    React.useEffect(function () {
+        var callback = function () {
+            var control = ref.current;
+            var _a = getButtonProps(ref, side), hide = _a.hide, offset = _a.offset, orientation = _a.orientation;
+            var vertical = orientation === 'vertical';
+            control.style.left = vertical ? "".concat(offset, "px") : '50%';
+            control.style.transform = "translate".concat(vertical ? 'Y' : 'X', "(-50%)");
+            control.style.top = vertical ? '50%' : "".concat(offset, "px");
+            control.style.opacity = "".concat(hide ? 0 : 1);
+            control.style.pointerEvents = hide ? 'none' : '';
+            control.tabIndex = hide ? -1 : 0;
+        };
+        var separator = ref.current.closest('[role="separator"]');
+        callback();
+        var observer = new MutationObserver(callback);
+        observer.observe(separator, { attributeFilter: ['aria-valuenow'] });
+        return function () { return observer.disconnect(); };
+    }, [ref, side]);
+    return (React__default["default"].createElement(LuiButton, __assign({ ref: ref, level: "primary" }, rest, { style: __assign(__assign({}, rest === null || rest === void 0 ? void 0 : rest.style), { width: squareButtonSide, height: squareButtonSide, borderRadius: '50%' }), className: clsx('Control', 'lui-button-icon-only', 'lui-box-shadow', rest === null || rest === void 0 ? void 0 : rest.className) }), (rest === null || rest === void 0 ? void 0 : rest.children) || React__default["default"].createElement(ControlIcon, { parent: ref, side: side })));
+});
+var getButtonProps = function (button, side) {
+    var _a;
+    var _b = getSeparatorAttributes({ child: button.current }), valueNow = _b.valueNow, valueMin = _b.valueMin, valueMax = _b.valueMax, orientation = _b.orientation, thickness = _b.thickness;
+    var separator = (_a = button.current) === null || _a === void 0 ? void 0 : _a.closest('[role="separator"]');
+    var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
+    var buttonPadding = thickness * 2;
+    var offset = side === 'primary' ? -(squareButtonSide + buttonPadding) : buttonPadding;
+    var splitterRect = splitter === null || splitter === void 0 ? void 0 : splitter.getBoundingClientRect();
+    var splitterExtension = orientation === 'horizontal' ? splitterRect === null || splitterRect === void 0 ? void 0 : splitterRect.height : splitterRect === null || splitterRect === void 0 ? void 0 : splitterRect.width;
+    var hiddenPixels = 0;
+    if (splitterExtension !== undefined && valueNow !== undefined) {
+        var valueNowPx = (valueNow / 100.0) * splitterExtension;
+        hiddenPixels =
+            side === 'primary'
+                ? Math.abs(offset) - valueNowPx
+                : squareButtonSide - (splitterExtension - valueNowPx - buttonPadding);
+    }
+    hiddenPixels = Math.max(hiddenPixels, 0);
+    var reachedLimit = side === 'primary' ? valueMin === valueNow : valueMax === valueNow;
+    return { offset: offset, orientation: orientation, hide: Boolean(hiddenPixels || reachedLimit) };
+};
+
+/**
+ * Delimits the separator position value between 0 to 100 by default.
+ * It will prioritize supplied min and max delimiters as long as they are within the 0-100 range.
+ * @param props Expects a separator value and optional min and max delimiters
+ */
+var clampSeparator = function (props) {
+    var _a = props.min, min = _a === void 0 ? 0 : _a, value = props.value, _b = props.max, max = _b === void 0 ? 100 : _b;
+    var minValue = Math.max(isNaN(min) ? 0 : min, 0);
+    var maxValue = Math.min(isNaN(max) ? 100 : max, 100);
+    return Math.min(Math.max(value, minValue), maxValue);
+};
+
+/**
+ * Returns a value from 0 to 100 that represents the separator position from left to right.
+ * @param separatorRef Separator ref
+ * @param drag Represents mouse/touch horizontal/vertical coordinate when the user is resizing.
+ */
+var getSeparatorPosition = function (separatorRef, drag) {
+    var _a;
+    var splitter = (_a = separatorRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (!splitter) {
+        return 0;
+    }
+    var orientation = getSeparatorAttributes({ ref: separatorRef }).orientation;
+    var rect = splitter.getBoundingClientRect();
+    var getContainerPixels = function (prop) {
+        return parseFloat(getComputedStyle(splitter).getPropertyValue(prop) || '0');
+    };
+    var lengthProp = orientation !== 'horizontal' ? 'width' : 'height';
+    var offsetProp = orientation !== 'horizontal' ? 'left' : 'top';
+    var containerLength = rect[lengthProp] || getContainerPixels(lengthProp);
+    var containerOffset = rect[lengthProp]
+        ? rect[offsetProp]
+        : getContainerPixels(offsetProp);
+    var value = ((drag - containerOffset) / containerLength) * 100;
+    return clampSeparator({ value: value });
+};
+
+/**
+ * It captures window events to report a new position.
+ * Provides necessary handlers for separator.
+ */
+var useMoveSeparator = function (separator, resize) {
+    var _a = React.useState(false), resizing = _a[0], setResizing = _a[1];
+    var values = function () { return getSeparatorAttributes({ ref: separator }); };
+    React.useEffect(function () {
+        var move = function (e) {
+            var _a;
+            var key = values().orientation === 'horizontal' ? 'clientY' : 'clientX';
+            var drag = e.type === 'mousemove'
+                ? e[key]
+                : (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a[key];
+            if (resizing && drag !== undefined) {
+                resize(getSeparatorPosition(separator, drag));
+            }
+        };
+        var mouseup = function () { return setResizing(false); };
+        window.addEventListener('mousemove', move);
+        window.addEventListener('touchmove', move);
+        window.addEventListener('click', mouseup);
+        return function () {
+            window.removeEventListener('mousemove', move);
+            window.removeEventListener('touchmove', move);
+            window.removeEventListener('click', mouseup);
+        };
+    }, [separator, resizing]);
+    React.useEffect(function () {
+        animateSeparator(separator, resizing ? 'clear-transition' : 'add-transition');
+    }, [separator, resizing]);
+    return {
+        onMouseDown: function () { return setResizing(true); },
+        onTouchStart: function () { return setResizing(true); },
+        onTouchEnd: function () { return setResizing(false); },
+        onBlur: function () { return setResizing(false); }
+    };
+};
+var animateSeparator = function (separatorRef, animate) {
+    var separator = separatorRef.current;
+    var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
+    if (separator && splitter) {
+        if (animate === 'clear-transition') {
+            separator.style.transition = '';
+            splitter.style.transition = '';
+            splitter.style.cursor =
+                separator.getAttribute('aria-orientation') === 'vertical'
+                    ? 'col-resize'
+                    : 'row-resize';
+            splitter.classList.add('resizing');
+        }
+        else {
+            separator.style.transition = 'left 300ms, top 300ms';
+            splitter.style.transition =
+                'grid-template-columns 300ms, grid-template-rows 300ms';
+            splitter.style.cursor = '';
+            splitter.classList.remove('resizing');
+        }
+    }
+};
+
+/**
+ * Ensures valueNow is set to a valid value within its allowed boundaries.
+ * If boundaries and/or initialRatio are not specified, they will be defaulted.
+ */
+var useValueSeparator = function (_a) {
+    var separator = _a.separator, ratio = _a.ratio, onResized = _a.onResized, _b = _a.boundaries, min = _b.min, max = _b.max;
+    var prev = React.useRef();
+    var setValueNow = React.useCallback(function (val) {
+        var valueNow = getSeparatorAttributes({ ref: separator }).valueNow;
+        var value = val !== null && val !== void 0 ? val : (valueNow || min + (max - min) / 2);
+        var newValue = clampSeparator({ value: value, max: max, min: min });
+        resize(separator, newValue);
+        if (prev.current !== newValue) {
+            prev.current = newValue;
+            onResized === null || onResized === void 0 ? void 0 : onResized(newValue);
+        }
+    }, [onResized, min, max, prev]);
+    React.useEffect(function () {
+        setValueNow(ratio);
+    }, [setValueNow, ratio]);
+    React.useEffect(function () {
+        var callback = function () {
+            var value = getSeparatorAttributes({ ref: separator }).valueNow;
+            setValueNow(value);
+        };
+        callback();
+        var observer = new MutationObserver(callback);
+        observer.observe(separator.current, {
+            attributeFilter: ['aria-orientation', 'aria-valuemin', 'aria-valuemax']
+        });
+        return function () { return observer.disconnect(); };
+    }, [separator, setValueNow]);
+    React.useEffect(function () {
+        var observer = new MutationObserver(function (_a) {
+            var target = _a[0].target;
+            var el = target;
+            var splitter = target.parentElement;
+            var newValueNow = Number(el.getAttribute('aria-valuenow'));
+            if (!splitter.classList.contains('resizing')) {
+                setValueNow(newValueNow);
+            }
+        });
+        var attributeFilter = ['aria-valuenow'];
+        observer.observe(separator.current, { attributeFilter: attributeFilter });
+        return function () { return observer.disconnect(); };
+    }, [separator, setValueNow]);
+    return { setValueNow: setValueNow };
+};
+var resize = function (separator, value) {
+    var _a, _b;
+    var newValue = String(value);
+    if (!separator.current) {
+        return;
+    }
+    var _c = getSeparatorAttributes({
+        ref: separator
+    }), gap = _c.thickness, orientation = _c.orientation;
+    if (separator.current.getAttribute('aria-valuenow') !== newValue) {
+        separator.current.setAttribute('aria-valuenow', newValue);
+    }
+    var panels = (_a = separator.current.parentElement.childNodes.length) !== null && _a !== void 0 ? _a : 0;
+    var valueNow = Number(separator.current.getAttribute('aria-valuenow'));
+    var offset = gap / 2;
+    var absolute = "clamp(".concat(offset, "px, ").concat(valueNow, "%, calc(100% - ").concat(offset, "px))");
+    var gridTemplate = panels === 1
+        ? '1fr'
+        : "min(calc(".concat(valueNow, "% - ").concat(gap / 2, "px), calc(100% - ").concat(gap, "px)) 1fr");
+    var splitter = (_b = separator.current) === null || _b === void 0 ? void 0 : _b.parentElement;
+    if (splitter) {
+        splitter.style.opacity = '1';
+        if (orientation === 'vertical') {
+            splitter.style.columnGap = "".concat(gap, "px");
+            splitter.style.gridTemplateColumns = gridTemplate;
+            separator.current.style.width = "".concat(gap, "px");
+            separator.current.style.left = absolute;
+            separator.current.style.height = '100%';
+            separator.current.style.transform = 'translateX(-50%)';
+            separator.current.style.cursor = 'col-resize';
+            splitter.style.rowGap = '';
+            splitter.style.gridTemplateRows = '';
+            separator.current.style.top = '';
+        }
+        else {
+            splitter.style.rowGap = "".concat(gap, "px");
+            splitter.style.gridTemplateRows = gridTemplate;
+            separator.current.style.height = "".concat(gap, "px");
+            separator.current.style.top = absolute;
+            separator.current.style.width = '100%';
+            separator.current.style.transform = 'translateY(-50%)';
+            separator.current.style.cursor = 'row-resize';
+            splitter.style.columnGap = '';
+            splitter.style.gridTemplateColumns = '';
+            separator.current.style.left = '';
+        }
+    }
+};
+
+var isSplitSupported = function (splitter, separator) {
+    var childList = splitter === null || splitter === void 0 ? void 0 : splitter.childNodes.length;
+    return childList === 3 && splitter.childNodes[2] === separator;
+};
+/**
+ * Returns true if the splitter container has 3 child nodes, including the separator.
+ * The consumer must render 2 element nodes (not components), to be able to split.
+ * @param separatorRef Separator ref
+ */
+var useShowSeparator = function (separatorRef) {
+    React.useEffect(function () {
+        var separator = separatorRef.current;
+        var splitter = separator.parentElement;
+        setShowSeparator(separator, splitter, isSplitSupported(splitter, separatorRef === null || separatorRef === void 0 ? void 0 : separatorRef.current));
+        var observer = new MutationObserver(function (_a) {
+            var target = _a[0].target;
+            return setShowSeparator(separator, splitter, isSplitSupported(target, separatorRef === null || separatorRef === void 0 ? void 0 : separatorRef.current));
+        });
+        observer === null || observer === void 0 ? void 0 : observer.observe(splitter, { childList: true });
+        return function () { return observer === null || observer === void 0 ? void 0 : observer.disconnect(); };
+    }, []);
+};
+var setShowSeparator = function (separator, splitter, show) {
+    if (show) {
+        splitter.style.display = '';
+        separator.style.display = '';
+    }
+    else {
+        splitter.style.display = splitter.childNodes.length === 2 ? 'block' : '';
+        separator.style.display = 'none';
+    }
+};
+
+/**
+ * Gets the delta % the separator should move based on key down.
+ */
+var getKeyDownDeltaMove = function (e, valueNow) {
+    return getNewValueNow(shouldMoveFromKeyDown(e), valueNow, onePixelAsPercentage(e.currentTarget)) - valueNow;
+};
+var onePixelAsPercentage = function (separator) {
+    var splitter = separator === null || separator === void 0 ? void 0 : separator.parentElement;
+    if (splitter) {
+        var splitterWidth = splitter.getBoundingClientRect().width;
+        return splitterWidth ? 100 / splitterWidth : 0;
+    }
+    return 0;
+};
+var shouldMoveFromKeyDown = function (e) {
+    var orientation = e.currentTarget.getAttribute('aria-orientation');
+    var isPrimary = [
+        orientation === 'horizontal' ? 'ArrowUp' : 'ArrowLeft',
+        'Home',
+    ].includes(e.key);
+    var isSecondary = [
+        orientation === 'horizontal' ? 'ArrowDown' : 'ArrowRight',
+        'End',
+    ].includes(e.key);
+    var direction = isPrimary ? -1 : isSecondary ? 1 : 0;
+    var isMeta = [e.ctrlKey, e.shiftKey, e.metaKey, e.altKey].some(Boolean);
+    var isArrow = e.key.startsWith('Arrow');
+    var isLimit = ['Home', 'End'].includes(e.key);
+    var speed = isLimit ? 'fastest' : isMeta && isArrow ? 'faster' : 'slow';
+    return [direction, speed];
+};
+var getNewValueNow = function (_a, valueNow, pixelUnit) {
+    var direction = _a[0], speed = _a[1];
+    if (direction) {
+        switch (speed) {
+            case 'slow':
+                return valueNow + pixelUnit * direction;
+            case 'faster':
+                return valueNow + 10 * direction;
+            case 'fastest':
+                return direction === -1 ? 0 : 100;
+        }
+    }
+    return valueNow;
+};
+
+var canceEvent = function (e) {
+    if (e.currentTarget !== e.target) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+};
+var Separator = React.forwardRef(function (_a, forwardRef) {
+    var _b;
+    var parts = _a.parts, ratio = _a.ratio, onResized = _a.onResized, props = __rest(_a, ["parts", "ratio", "onResized"]);
+    var separator = useForkRef(forwardRef);
+    var boundaries = {
+        min: props['aria-valuemin'],
+        max: props['aria-valuemax']
+    };
+    var setValueNow = useValueSeparator({
+        ratio: ratio,
+        separator: separator,
+        onResized: onResized,
+        boundaries: boundaries
+    }).setValueNow;
+    useShowSeparator(separator);
+    var values = function () { return getSeparatorAttributes({ ref: separator }); };
+    return (React__default["default"].createElement("div", __assign({ ref: separator }, props, useMoveSeparator(separator, setValueNow), { onKeyDown: function (e) {
+            var _a;
+            var newValueNow = keyDownHandler(e);
+            if (values().valueNow !== newValueNow) {
+                setValueNow(newValueNow);
+                e.preventDefault();
+            }
+            (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, className: clsx('Separator', props.className) }),
+        React__default["default"].createElement("span", __assign({}, parts === null || parts === void 0 ? void 0 : parts.container, { className: clsx('Separator-arrows', (_b = parts === null || parts === void 0 ? void 0 : parts.container) === null || _b === void 0 ? void 0 : _b.className), onMouseDown: canceEvent, onTouchStart: canceEvent }),
+            React__default["default"].createElement(Control, __assign({}, parts === null || parts === void 0 ? void 0 : parts.primary, { side: "primary", onClick: function (e) {
+                    var _a, _b;
+                    setValueNow(controlClickHandler(e, 'primary'));
+                    (_b = (_a = parts === null || parts === void 0 ? void 0 : parts.primary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                } })),
+            React__default["default"].createElement(Control, __assign({}, parts === null || parts === void 0 ? void 0 : parts.secondary, { side: "secondary", onClick: function (e) {
+                    var _a, _b;
+                    setValueNow(controlClickHandler(e, 'secondary'));
+                    (_b = (_a = parts === null || parts === void 0 ? void 0 : parts.secondary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                } })))));
+});
+var controlClickHandler = function (e, side) {
+    var _a = getSeparatorAttributes({
+        child: e.currentTarget
+    }), valueNow = _a.valueNow, valueMin = _a.valueMin, valueMax = _a.valueMax;
+    var valueMiddle = valueMin + (valueMax - valueMin) / 2;
+    var newValue = [0, 100].includes(valueNow)
+        ? valueMiddle
+        : side === 'primary'
+            ? valueMin
+            : valueMax;
+    return newValue;
+};
+var keyDownHandler = function (e) {
+    var valueNow = getSeparatorAttributes({
+        child: e.currentTarget
+    }).valueNow;
+    var delta = getKeyDownDeltaMove(e, valueNow);
+    return valueNow + delta;
+};
+
+var css_248z = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Splitter {\n  display: grid;\n  position: relative;\n  overflow: hidden;\n  opacity: 0;\n}\n.Splitter > :first-child, .Splitter > :nth-child(2) {\n  position: relative;\n  z-index: 0;\n  background: #f9f9f9;\n  overflow: auto;\n}\n.Splitter.resizing * {\n  pointer-events: none;\n  user-select: none;\n}";
+styleInject(css_248z);
+
+/**
+ * Container that appends a separator when the children count equals 2.
+ * It looks at HTML nodes, not React components
+ */
+var Splitter = React.forwardRef(function (props, ref) {
+    if (props === void 0) { props = {}; }
+    var parts = props.parts, ratio = props.ratio, onResized = props.onResized, min = props.min, max = props.max, children = props.children, _a = props.orientation, orientation = _a === void 0 ? 'vertical' : _a, rest = __rest(props, ["parts", "ratio", "onResized", "min", "max", "children", "orientation"]);
+    return (React__default["default"].createElement("div", __assign({ ref: ref }, rest, { className: clsx('Splitter', rest === null || rest === void 0 ? void 0 : rest.className) }),
+        children,
+        React__default["default"].createElement(Separator, __assign({}, parts === null || parts === void 0 ? void 0 : parts.separator, { tabIndex: 0, "aria-valuemin": Math.max(min !== null && min !== void 0 ? min : 0, 0), "aria-valuemax": Math.min(max !== null && max !== void 0 ? max : 100, 100), role: "separator", "aria-orientation": orientation, ratio: ratio, onResized: onResized, parts: parts === null || parts === void 0 ? void 0 : parts.controls }))));
+});
+Splitter.displayName = 'Splitter';
+
+var getSeparator = function (splitter) {
+    var _a;
+    var lastChild = (_a = splitter.current) === null || _a === void 0 ? void 0 : _a.lastChild;
+    return (lastChild === null || lastChild === void 0 ? void 0 : lastChild.getAttribute('role')) === 'separator'
+        ? lastChild
+        : undefined;
+};
+var useSplitterRef = function () {
+    var ref = React.useRef(null);
+    var setRatio = function (val) {
+        var separator = getSeparator(ref);
+        if (separator) {
+            separator.setAttribute('aria-valuenow', String(val));
+        }
+    };
+    return { ref: ref, setRatio: setRatio };
+};
+
 exports.CheckboxItemRenderer = CheckboxItemRenderer;
 exports.LUI_WINDOW_NAME = LUI_WINDOW_NAME;
 exports.LuiAccordicard = LuiAccordicard;
@@ -58277,6 +58801,7 @@ exports.LuiToastMessage = LuiToastMessage;
 exports.LuiTooltip = LuiTooltip;
 exports.LuiUpdatesSplashModal = LuiUpdatesSplashModal;
 exports.RadioItemRenderer = RadioItemRenderer;
+exports.Splitter = Splitter;
 exports.ToolbarButton = ToolbarButton;
 exports.ToolbarItem = ToolbarItem;
 exports.ToolbarItemSeparator = ToolbarItemSeparator;
@@ -58290,4 +58815,5 @@ exports.useLuiFloatingWindow = lR;
 exports.useMediaQuery = useMediaQuery;
 exports.usePageClickFunction = usePageClickFunction;
 exports.useShowLUIMessage = useShowLUIMessage;
+exports.useSplitterRef = useSplitterRef;
 //# sourceMappingURL=index.js.map