@skedulo/sked-ui 0.0.1-react-18-upgrade-test → 0.0.1-react-18-preview

package/dist/index.js

@@ -6666,7 +6666,8 @@ var AvatarDetail = function AvatarDetail(_ref) {
       subtitle = _ref$subtitle === void 0 ? null : _ref$subtitle,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      linkUrl = _ref.linkUrl;
+      linkUrl = _ref.linkUrl,
+      target = _ref.target;
   var titleClasses = {
     tiny: 'sk-text-xs',
     small: 'sk-text-xs',
@@ -6703,7 +6704,8 @@ var AvatarDetail = function AvatarDetail(_ref) {
   }, linkUrl ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_link_Link__WEBPACK_IMPORTED_MODULE_4__["Link"], {
     href: linkUrl,
     type: "secondary",
-    className: "sk-text-neutral-850"
+    className: "sk-text-neutral-850",
+    target: target
   }, avatarName) : avatarName, subtitle && size !== 'small' && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('sk-text-neutral-700 sk-truncate', subtitleClasses[size])
   }, subtitle)));
@@ -6802,6 +6804,7 @@ var OverflowTooltip = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "isTextOverflow",
     value: function isTextOverflow() {
+      if (!this._element) return false;
       return this._element.clientWidth < this._element.scrollWidth;
     }
   }, {
@@ -14808,21 +14811,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DateSelector", function() { return DateSelector; });
 /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
 /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(166);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(24);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(23);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(0);
-/* harmony import */ var _CalendarControls__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(268);
-/* harmony import */ var _CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(270);
-
-
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(24);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(0);
+/* harmony import */ var _CalendarControls__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(268);
+/* harmony import */ var _CalendarControls_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(270);
 
 
 
@@ -14830,28 +14825,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 
 var DateSelector = function DateSelector(props) {
-  var calendarControlProps = Object(_CalendarControls__WEBPACK_IMPORTED_MODULE_5__["useCalendarControlsContext"])();
-
-  var _calendarControlProps = _objectSpread(_objectSpread({}, calendarControlProps), props),
-      onDateSelect = _calendarControlProps.onDateSelect,
-      onDayMouseEnter = _calendarControlProps.onDayMouseEnter,
-      onMonthMouseLeave = _calendarControlProps.onMonthMouseLeave,
-      highlightWeek = _calendarControlProps.highlightWeek,
-      selectWeek = _calendarControlProps.selectWeek,
-      _calendarControlProps2 = _calendarControlProps.selectedRange,
-      selectedRange = _calendarControlProps2 === void 0 ? 'day' : _calendarControlProps2,
-      selected = _calendarControlProps.selected,
-      _calendarControlProps3 = _calendarControlProps.buttonType,
-      buttonType = _calendarControlProps3 === void 0 ? 'transparent' : _calendarControlProps3,
-      validation = _calendarControlProps.validation,
-      _calendarControlProps4 = _calendarControlProps.dateFormat,
-      dateFormat = _calendarControlProps4 === void 0 ? 'MonthDayYear' : _calendarControlProps4,
-      minDate = _calendarControlProps.minDate,
-      maxDate = _calendarControlProps.maxDate;
-
+  var _props$onDateSelect, _props$onDayMouseEnte, _props$onMonthMouseLe, _props$highlightWeek, _props$selectWeek, _props$selectedRange, _props$selected, _ref, _props$buttonType, _props$validation, _ref2, _props$dateFormat, _props$minDate, _props$maxDate;
+
+  var calendarControlProps = Object(_CalendarControls__WEBPACK_IMPORTED_MODULE_4__["useCalendarControlsContext"])();
+  var onDateSelect = (_props$onDateSelect = props.onDateSelect) !== null && _props$onDateSelect !== void 0 ? _props$onDateSelect : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.onDateSelect;
+  var onDayMouseEnter = (_props$onDayMouseEnte = props.onDayMouseEnter) !== null && _props$onDayMouseEnte !== void 0 ? _props$onDayMouseEnte : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.onDayMouseEnter;
+  var onMonthMouseLeave = (_props$onMonthMouseLe = props.onMonthMouseLeave) !== null && _props$onMonthMouseLe !== void 0 ? _props$onMonthMouseLe : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.onMonthMouseLeave;
+  var highlightWeek = (_props$highlightWeek = props.highlightWeek) !== null && _props$highlightWeek !== void 0 ? _props$highlightWeek : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.highlightWeek;
+  var selectWeek = (_props$selectWeek = props.selectWeek) !== null && _props$selectWeek !== void 0 ? _props$selectWeek : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.selectWeek;
+  var selectedRange = (_props$selectedRange = props.selectedRange) !== null && _props$selectedRange !== void 0 ? _props$selectedRange : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.selectedRange;
+  var selected = (_props$selected = props.selected) !== null && _props$selected !== void 0 ? _props$selected : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.selected;
+  var buttonType = (_ref = (_props$buttonType = props.buttonType) !== null && _props$buttonType !== void 0 ? _props$buttonType : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.buttonType) !== null && _ref !== void 0 ? _ref : 'transparent';
+  var validation = (_props$validation = props.validation) !== null && _props$validation !== void 0 ? _props$validation : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.validation;
+  var dateFormat = (_ref2 = (_props$dateFormat = props.dateFormat) !== null && _props$dateFormat !== void 0 ? _props$dateFormat : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.dateFormat) !== null && _ref2 !== void 0 ? _ref2 : 'MonthDayYear';
+  var minDate = (_props$minDate = props.minDate) !== null && _props$minDate !== void 0 ? _props$minDate : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.minDate;
+  var maxDate = (_props$maxDate = props.maxDate) !== null && _props$maxDate !== void 0 ? _props$maxDate : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.maxDate;
   var className = props.className;
 
-  var _React$useState = react__WEBPACK_IMPORTED_MODULE_3___default.a.useState(false),
+  var _React$useState = react__WEBPACK_IMPORTED_MODULE_2___default.a.useState(false),
       _React$useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_React$useState, 2),
       expanded = _React$useState2[0],
       setExpanded = _React$useState2[1];
@@ -14861,10 +14852,10 @@ var DateSelector = function DateSelector(props) {
   };
 
   var startDate = selected !== null && selected !== void 0 ? selected : new Date();
-  var endDate = Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["endOfPeriod"])(selected, selectedRange);
-  var formattedStartDate = startDate.getFullYear() === endDate.getFullYear() ? Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatShortDate"])(startDate, dateFormat) : Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatLongDate"])(startDate, dateFormat);
-  var formattedEndDate = Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatLongDate"])(endDate, dateFormat);
-  var formattedDate = selectedRange === 'day' ? Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_6__["formatLongDate"])(selected, dateFormat) : "".concat(formattedStartDate, " - ").concat(formattedEndDate);
+  var endDate = Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_5__["endOfPeriod"])(selected, selectedRange);
+  var formattedStartDate = startDate.getFullYear() === endDate.getFullYear() ? Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_5__["formatShortDate"])(startDate, dateFormat) : Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_5__["formatLongDate"])(startDate, dateFormat);
+  var formattedEndDate = Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_5__["formatLongDate"])(endDate, dateFormat);
+  var formattedDate = selectedRange === 'day' ? Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_5__["formatLongDate"])(selected, dateFormat) : "".concat(formattedStartDate, " - ").concat(formattedEndDate);
   var buttonClasses = className !== null && className !== void 0 ? className : 'hover:sk-bg-neutral-250 sk-text-base sk-mr-3 sk-text-neutral-850 sk-px-3 sk-py-1 sk-leading-normal sk-border-none';
 
   var onChange = function onChange(date) {
@@ -14884,25 +14875,25 @@ var DateSelector = function DateSelector(props) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
-  var DateRangeDisplay = function DateRangeDisplay(_ref) {
-    var onClick = _ref.onClick;
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_3___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(___WEBPACK_IMPORTED_MODULE_4__["Button"], {
-      className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(buttonClasses, {
+  var DateRangeDisplay = function DateRangeDisplay(_ref3) {
+    var onClick = _ref3.onClick;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(___WEBPACK_IMPORTED_MODULE_3__["Button"], {
+      className: classnames__WEBPACK_IMPORTED_MODULE_1___default()(buttonClasses, {
         'sk-bg-neutral-250': expanded,
         'sk-border-red-400': validation && !validation.isValid
       }),
       buttonType: buttonType,
       onClick: toggleDatepicker(onClick),
       "data-sk-name": "date-range"
-    }, formattedDate, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(___WEBPACK_IMPORTED_MODULE_4__["Icon"], {
+    }, formattedDate, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(___WEBPACK_IMPORTED_MODULE_3__["Icon"], {
       name: "chevronDown",
       className: "sk-ml-1"
-    })), validation && !validation.isValid && validation.error && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement("p", {
+    })), validation && !validation.isValid && validation.error && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("p", {
       className: "sk-mt-1 sk-text-red-500"
     }, validation.error));
   };
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default.a.createElement(___WEBPACK_IMPORTED_MODULE_4__["Datepicker"], {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(___WEBPACK_IMPORTED_MODULE_3__["Datepicker"], {
     customInput: DateRangeDisplay,
     selected: selected,
     onChange: onChange,
@@ -17707,54 +17698,44 @@ function throwProtectedError(token) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "NavigationButtons", function() { return NavigationButtons; });
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(166);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(167);
-/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(0);
-/* harmony import */ var _CalendarControls_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(270);
-/* harmony import */ var _RangePicker__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(304);
-
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(167);
+/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
+/* harmony import */ var _CalendarControls_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(270);
+/* harmony import */ var _RangePicker__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(304);
 
 
 
 
 
 var NavigationButtons = function NavigationButtons(props) {
-  var calendarControlProps = Object(___WEBPACK_IMPORTED_MODULE_3__["useCalendarControlsContext"])();
-
-  var _calendarControlProps = _objectSpread(_objectSpread({}, calendarControlProps), props),
-      _calendarControlProps2 = _calendarControlProps.selectedRange,
-      selectedRange = _calendarControlProps2 === void 0 ? 'day' : _calendarControlProps2,
-      onDateSelect = _calendarControlProps.onDateSelect,
-      selected = _calendarControlProps.selected,
-      minDate = _calendarControlProps.minDate,
-      maxDate = _calendarControlProps.maxDate,
-      _calendarControlProps3 = _calendarControlProps.hideTooltipIfDisabled,
-      hideTooltipIfDisabled = _calendarControlProps3 === void 0 ? false : _calendarControlProps3;
+  var _ref, _props$selectedRange, _props$onDateSelect, _props$selected, _props$minDate, _props$maxDate, _ref2, _props$hideTooltipIfD;
+
+  var calendarControlProps = Object(___WEBPACK_IMPORTED_MODULE_2__["useCalendarControlsContext"])();
+  var selectedRange = (_ref = (_props$selectedRange = props.selectedRange) !== null && _props$selectedRange !== void 0 ? _props$selectedRange : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.selectedRange) !== null && _ref !== void 0 ? _ref : 'day';
+  var onDateSelect = (_props$onDateSelect = props.onDateSelect) !== null && _props$onDateSelect !== void 0 ? _props$onDateSelect : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.onDateSelect;
+  var selected = (_props$selected = props.selected) !== null && _props$selected !== void 0 ? _props$selected : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.selected;
+  var minDate = (_props$minDate = props.minDate) !== null && _props$minDate !== void 0 ? _props$minDate : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.minDate;
+  var maxDate = (_props$maxDate = props.maxDate) !== null && _props$maxDate !== void 0 ? _props$maxDate : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.maxDate;
+  var hideTooltipIfDisabled = (_ref2 = (_props$hideTooltipIfD = props.hideTooltipIfDisabled) !== null && _props$hideTooltipIfD !== void 0 ? _props$hideTooltipIfD : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.hideTooltipIfDisabled) !== null && _ref2 !== void 0 ? _ref2 : false;
 
   var backwardsHandler = function backwardsHandler() {
-    return onDateSelect(Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_4__["moveDate"])(selected, selectedRange, 'backward'));
+    return onDateSelect(Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_3__["moveDate"])(selected, selectedRange, 'backward'));
   };
 
   var forwardsHandler = function forwardsHandler() {
-    return onDateSelect(Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_4__["moveDate"])(selected, selectedRange, 'forward'));
+    return onDateSelect(Object(_CalendarControls_utils__WEBPACK_IMPORTED_MODULE_3__["moveDate"])(selected, selectedRange, 'forward'));
   };
 
   var isBackwardsDisabled = minDate && selected <= minDate;
   var isForwardsDisabled = maxDate && selected >= maxDate;
-  var previousTooltip = Object(lodash__WEBPACK_IMPORTED_MODULE_1__["capitalize"])("Previous ".concat(_RangePicker__WEBPACK_IMPORTED_MODULE_5__["dateRangeLabel"][selectedRange]));
-  var nextTooltip = Object(lodash__WEBPACK_IMPORTED_MODULE_1__["capitalize"])("Next ".concat(_RangePicker__WEBPACK_IMPORTED_MODULE_5__["dateRangeLabel"][selectedRange]));
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div", {
+  var previousTooltip = Object(lodash__WEBPACK_IMPORTED_MODULE_0__["capitalize"])("Previous ".concat(_RangePicker__WEBPACK_IMPORTED_MODULE_4__["dateRangeLabel"][selectedRange]));
+  var nextTooltip = Object(lodash__WEBPACK_IMPORTED_MODULE_0__["capitalize"])("Next ".concat(_RangePicker__WEBPACK_IMPORTED_MODULE_4__["dateRangeLabel"][selectedRange]));
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", {
     className: "sk-ml-3"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(___WEBPACK_IMPORTED_MODULE_3__["IconButton"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(___WEBPACK_IMPORTED_MODULE_2__["IconButton"], {
     className: "sk-inline-flex",
     icon: "chevronLeft",
     "data-sk-name": "navigate-backwards",
@@ -17763,7 +17744,7 @@ var NavigationButtons = function NavigationButtons(props) {
     compact: true,
     disableTooltip: hideTooltipIfDisabled && isBackwardsDisabled,
     tooltipContent: previousTooltip
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(___WEBPACK_IMPORTED_MODULE_3__["IconButton"], {
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(___WEBPACK_IMPORTED_MODULE_2__["IconButton"], {
     className: "sk-inline-flex",
     icon: "chevronRight",
     "data-sk-name": "navigate-forwards",
@@ -17783,18 +17764,10 @@ var NavigationButtons = function NavigationButtons(props) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "dateRangeLabel", function() { return dateRangeLabel; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RangePicker", function() { return RangePicker; });
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(166);
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
-/* harmony import */ var _CalendarControls__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(268);
-
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(23);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var _CalendarControls__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(268);
 
 
 
@@ -17806,14 +17779,12 @@ var dateRangeLabel = {
   month: 'Month'
 };
 var RangePicker = function RangePicker(props) {
-  var calendarControlProps = Object(_CalendarControls__WEBPACK_IMPORTED_MODULE_3__["useCalendarControlsContext"])();
+  var _ref, _props$selectedRange, _props$onRangeChange, _ref2, _props$rangeOptions;
 
-  var _calendarControlProps = _objectSpread(_objectSpread({}, calendarControlProps), props),
-      _calendarControlProps2 = _calendarControlProps.selectedRange,
-      selectedRange = _calendarControlProps2 === void 0 ? 'day' : _calendarControlProps2,
-      onRangeChange = _calendarControlProps.onRangeChange,
-      _calendarControlProps3 = _calendarControlProps.rangeOptions,
-      rangeOptions = _calendarControlProps3 === void 0 ? ['day', '3-days', 'week'] : _calendarControlProps3;
+  var calendarControlProps = Object(_CalendarControls__WEBPACK_IMPORTED_MODULE_2__["useCalendarControlsContext"])();
+  var selectedRange = (_ref = (_props$selectedRange = props.selectedRange) !== null && _props$selectedRange !== void 0 ? _props$selectedRange : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.selectedRange) !== null && _ref !== void 0 ? _ref : 'day';
+  var onRangeChange = (_props$onRangeChange = props.onRangeChange) !== null && _props$onRangeChange !== void 0 ? _props$onRangeChange : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.onRangeChange;
+  var rangeOptions = (_ref2 = (_props$rangeOptions = props.rangeOptions) !== null && _props$rangeOptions !== void 0 ? _props$rangeOptions : calendarControlProps === null || calendarControlProps === void 0 ? void 0 : calendarControlProps.rangeOptions) !== null && _ref2 !== void 0 ? _ref2 : ['day', '3-days', 'week'];
 
   var rangeChangeHandler = function rangeChangeHandler(option) {
     return function () {
@@ -17821,12 +17792,12 @@ var RangePicker = function RangePicker(props) {
     };
   };
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(___WEBPACK_IMPORTED_MODULE_2__["ButtonDropdown"], {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(___WEBPACK_IMPORTED_MODULE_1__["ButtonDropdown"], {
     label: dateRangeLabel[selectedRange],
     compact: true,
     "data-sk-name": "date-view-dropdown"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(___WEBPACK_IMPORTED_MODULE_2__["Menu"], null, rangeOptions.map(function (option) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(___WEBPACK_IMPORTED_MODULE_2__["MenuItem"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(___WEBPACK_IMPORTED_MODULE_1__["Menu"], null, rangeOptions.map(function (option) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(___WEBPACK_IMPORTED_MODULE_1__["MenuItem"], {
       className: "sk-font-sans",
       key: option,
       onClick: rangeChangeHandler(option),
@@ -18158,6 +18129,7 @@ var Datepicker = function Datepicker(_ref3) {
       calendarRef.current = datepickerRef;
 
       if (inputRef) {
+        // eslint-disable-next-line no-param-reassign
         inputRef.current = datepickerRef === null || datepickerRef === void 0 ? void 0 : datepickerRef.input;
       }
     },
@@ -45548,7 +45520,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var _excluded = ["id", "name", "items", "placeholder", "autoFocus", "className", "icon", "onSelectedItemChange", "disabled", "onMenuToggle", "loading", "itemToString", "ItemRenderer", "filterHandler", "itemIsValid", "getNewItemData"];
+var _excluded = ["id", "name", "items", "placeholder", "autoFocus", "className", "icon", "onSelectedItemChange", "disabled", "onMenuToggle", "loading", "itemToString", "ItemRenderer", "filterHandler", "itemIsValid", "getNewItemData", "inputProps"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -45597,6 +45569,7 @@ var SearchSelect = function SearchSelect(_ref) {
       label: input
     }];
   } : _ref$getNewItemData,
+      restInputProps = _ref.inputProps,
       rest = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(_ref, _excluded);
 
   var _React$useState = react__WEBPACK_IMPORTED_MODULE_3__["useState"](items),
@@ -45709,14 +45682,15 @@ var SearchSelect = function SearchSelect(_ref) {
       getItemProps = _useCombobox.getItemProps,
       openMenu = _useCombobox.openMenu;
 
-  var inputProps = {
+  var inputProps = _objectSpread({
     refKey: 'inputRef',
     id: id,
     onClick: openMenu,
     name: name,
     disabled: disabled,
     autoFocus: autoFocus
-  };
+  }, restInputProps);
+
   var trigger = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_select_components__WEBPACK_IMPORTED_MODULE_9__["SearchSelectTrigger"], {
     comboboxProps: // @ts-ignore: suppressRefError isn't in the types
     getComboboxProps({}, {
@@ -57516,20 +57490,23 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TableBody", function() { return TableBody; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TableRow", function() { return TableRow; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TableCell", function() { return TableCell; });
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(23);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24);
-/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _utils_Strings__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(738);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(23);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(24);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _utils_Strings__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(738);
+
 
 
 var _excluded = ["className", "children"],
     _excluded2 = ["className", "children"],
-    _excluded3 = ["className", "children"],
+    _excluded3 = ["className", "children", "style"],
     _excluded4 = ["className", "children"];
 
 
@@ -57537,62 +57514,73 @@ var _excluded = ["className", "children"],
 var Table = function Table(props) {
   var className = props.className,
       children = props.children,
-      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(props, _excluded);
+      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(props, _excluded);
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("table", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-table sk-w-full sk-border-collapse', className)
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("table", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default()({
+    className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-table sk-w-full sk-border-collapse', className)
   }, otherProps), children);
 };
 var TableHeadRow = function TableHeadRow(props) {
   var className = props.className,
       children = props.children,
-      rest = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(props, _excluded2);
+      rest = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(props, _excluded2);
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("tr", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-h-10 sk-text-left', className)
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("tr", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default()({
+    className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-h-10 sk-text-left', className)
   }, rest), children);
 };
 var TableHead = function TableHead(_ref) {
   var cells = _ref.cells,
       sticky = _ref.sticky,
       className = _ref.className;
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("thead", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("thead", {
     className: className
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"](TableHeadRow, null, cells.map(function (cell) {
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("th", {
-      "data-sk-name": "th-".concat(Object(_utils_Strings__WEBPACK_IMPORTED_MODULE_4__["createTestLabel"])(cell.name)),
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"](TableHeadRow, null, cells.map(function (cell) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("th", {
+      "data-sk-name": "th-".concat(Object(_utils_Strings__WEBPACK_IMPORTED_MODULE_5__["createTestLabel"])(cell.name)),
       key: cell.name,
-      className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-th sk-bg-neutral-250 sk-text-neutral-650 sk-text-xxs sk-uppercase sk-font-medium', {
+      className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-th sk-bg-neutral-250 sk-text-neutral-650 sk-text-xxs sk-uppercase sk-font-medium', {
         'sk-sticky sk-top-0': sticky
       }, cell.className),
       style: {
         width: cell.width || '',
         minWidth: '120px'
       }
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("span", {
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("span", {
       className: "sk-th-content sk-px-3"
     }, cell.name));
   })));
 };
 var TableBody = function TableBody(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("tbody", null, props.children);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("tbody", null, props.children);
 };
 var TableRow = function TableRow(props) {
+  var _React$useState = react__WEBPACK_IMPORTED_MODULE_3__["useState"]({}),
+      _React$useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_React$useState, 2),
+      inlineStyle = _React$useState2[0],
+      setInlineStyle = _React$useState2[1];
+
   var className = props.className,
       children = props.children,
-      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(props, _excluded3);
+      style = props.style,
+      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(props, _excluded3); // Hack to fix weird issue with border-bottom not displaying on Platform List page on initial page load after React 18 upgrade
+
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("tr", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-border-b sk-border-neutral-350 sk-leading-tight', className)
+  react__WEBPACK_IMPORTED_MODULE_3__["useEffect"](function () {
+    setInlineStyle(style);
+  }, [style]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("tr", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default()({
+    className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-border-b sk-border-neutral-350 sk-leading-tight', className),
+    style: inlineStyle
   }, otherProps), children);
 };
 var TableCell = function TableCell(props) {
   var className = props.className,
       children = props.children,
-      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(props, _excluded4);
+      otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(props, _excluded4);
 
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("td", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
-    className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-p-3 sk-text-xs sk-text-neutral-850', className)
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("td", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_1___default()({
+    className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('sk-p-3 sk-text-xs sk-text-neutral-850', className)
   }, otherProps), children);
 };
 
@@ -58201,8 +58189,9 @@ var TableHeaderCell = function TableHeaderCell(props) {
       columnMaxWidth = props.maxWidth,
       id = props.id,
       getHeaderProps = props.getHeaderProps,
-      render = props.render,
-      sticky = props.sticky;
+      sticky = props.sticky; // Workaround for type error coming from React Table after upgrading to React 18
+
+  var render = props.render;
   var minWidth = columnMinWidth || columnWidth;
   var maxWidth = columnMaxWidth || columnWidth;
   var width = columnWidth;
@@ -58241,13 +58230,14 @@ var CellContentRenderer = function CellContentRenderer(props) {
 var ExpandedTableCell = function ExpandedTableCell(props) {
   var getCellProps = props.getCellProps,
       children = props.children,
-      render = props.render,
       value = props.value;
   var _props$column = props.column,
       emptyCellText = _props$column.emptyCellText,
       id = _props$column.id,
       Header = _props$column.Header;
-  var cellProps = getCellProps();
+  var cellProps = getCellProps(); // Workaround for type error coming from React Table after upgrading to React 18
+
+  var render = props.render;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_table_Table__WEBPACK_IMPORTED_MODULE_10__["TableCell"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, cellProps, {
     "data-sk-name": Object(_utils_Strings__WEBPACK_IMPORTED_MODULE_8__["createTestLabel"])(String(cellProps.key))
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"](CellContentRenderer, {
@@ -58259,13 +58249,14 @@ var ExpandedTableCell = function ExpandedTableCell(props) {
 };
 var CondensedTableCell = function CondensedTableCell(props) {
   var getCellProps = props.getCellProps,
-      render = props.render,
       value = props.value;
   var _props$column2 = props.column,
       emptyCellText = _props$column2.emptyCellText,
       id = _props$column2.id,
       Header = _props$column2.Header;
-  var cellProps = getCellProps();
+  var cellProps = getCellProps(); // Workaround for type error coming from React Table after upgrading to React 18
+
+  var render = props.render;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_table_Table__WEBPACK_IMPORTED_MODULE_10__["TableCell"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, cellProps, {
     "data-sk-name": Object(_utils_Strings__WEBPACK_IMPORTED_MODULE_8__["createTestLabel"])(String(cellProps.key))
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_popups_overflow_tooltip_OverflowTooltip__WEBPACK_IMPORTED_MODULE_7__["OverflowTooltip"], {
@@ -59002,6 +58993,7 @@ var Loading = function Loading(_ref) {
     right: 'sk-text-right'
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    "data-testid": "loading-throb",
     className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('loading-throb', className, alignment[align])
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
     className: "loading-throb__bounce loading-throb__bounce--first"
@@ -60976,9 +60968,13 @@ var SkedFormValidation = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_6___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_2___default()(_this), "wrapInValidatorProvider", function (customValidators) {
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7__["createElement"](calidation__WEBPACK_IMPORTED_MODULE_10__["ValidatorsProvider"], {
-        validators: customValidators
-      }, _this.renderFormValidation());
+      return (
+        /*#__PURE__*/
+        // @ts-ignore - Not valid JSX, need to upgrade Calidation library to fix type
+        react__WEBPACK_IMPORTED_MODULE_7__["createElement"](calidation__WEBPACK_IMPORTED_MODULE_10__["ValidatorsProvider"], {
+          validators: customValidators
+        }, _this.renderFormValidation())
+      );
     });
 
     _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_6___default()(_babel_runtime_helpers_assertThisInitialized__WEBPACK_IMPORTED_MODULE_2___default()(_this), "handleClick", function (evt) {
@@ -61069,59 +61065,63 @@ var SkedFormValidation = /*#__PURE__*/function (_React$PureComponent) {
        */
 
       var key = initialValues ? Object.keys(initialValues).join('.') : Object.keys(config).join('.');
-      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_7__["createElement"](calidation__WEBPACK_IMPORTED_MODULE_10__["FormValidation"], {
-        key: key,
-        config: config,
-        onSubmit: _this.handleFormSubmit,
-        initialValues: initialValues,
-        transforms: transforms
-      }, function (form) {
-        _this._form = form;
-        var fields = form.fields,
-            errors = form.errors,
-            submitted = form.submitted,
-            setField = form.setField,
-            submit = form.submit,
-            resetAll = form.resetAll,
-            isValid = form.isValid,
-            setError = form.setError;
-
-        var isValidOnSubmit = function isValidOnSubmit(fieldName) {
-          var validOnSubmit = !submitted || submitted && !errors[fieldName];
-          return {
-            isValid: validOnSubmit,
-            error: !isValid ? errors[fieldName] : null
+      return (
+        /*#__PURE__*/
+        // @ts-ignore - Not valid JSX, need to upgrade Calidation library to fix type
+        react__WEBPACK_IMPORTED_MODULE_7__["createElement"](calidation__WEBPACK_IMPORTED_MODULE_10__["FormValidation"], {
+          key: key,
+          config: config,
+          onSubmit: _this.handleFormSubmit,
+          initialValues: initialValues,
+          transforms: transforms
+        }, function (form) {
+          _this._form = form;
+          var fields = form.fields,
+              errors = form.errors,
+              submitted = form.submitted,
+              setField = form.setField,
+              submit = form.submit,
+              resetAll = form.resetAll,
+              isValid = form.isValid,
+              setError = form.setError;
+
+          var isValidOnSubmit = function isValidOnSubmit(fieldName) {
+            var validOnSubmit = !submitted || submitted && !errors[fieldName];
+            return {
+              isValid: validOnSubmit,
+              error: !isValid ? errors[fieldName] : null
+            };
           };
-        };
 
-        var isValidAfterModified = function isValidAfterModified(fieldName) {
-          var validAfterModified = !_this.state.fieldsModified.has(fieldName) && !submitted || submitted && !errors[fieldName] || _this.state.fieldsModified.has(fieldName) && !errors[fieldName];
-          return {
-            isValid: validAfterModified,
-            error: !isValid ? errors[fieldName] : null
+          var isValidAfterModified = function isValidAfterModified(fieldName) {
+            var validAfterModified = !_this.state.fieldsModified.has(fieldName) && !submitted || submitted && !errors[fieldName] || _this.state.fieldsModified.has(fieldName) && !errors[fieldName];
+            return {
+              isValid: validAfterModified,
+              error: !isValid ? errors[fieldName] : null
+            };
           };
-        };
 
-        var updateFn = _this.customFormFieldUpdate(setField, fields, _this.setModifiedField);
-
-        return _this.props.children({
-          fields: fields,
-          errors: errors,
-          submitted: submitted,
-          setField: setField,
-          submit: submit,
-          resetAll: resetAll,
-          isValidOnSubmit: isValidOnSubmit,
-          isValidAfterModified: isValidAfterModified,
-          customFieldUpdate: updateFn,
-          resetFieldsToInitialValues: _this.resetFieldsToInitialValues,
-          setFormReadonly: _this.setFormReadonly,
-          isFormReadonly: _this.state.isFormReadonly,
-          fieldsModified: _this.state.fieldsModified,
-          isValid: isValid,
-          setError: setError
-        });
-      });
+          var updateFn = _this.customFormFieldUpdate(setField, fields, _this.setModifiedField);
+
+          return _this.props.children({
+            fields: fields,
+            errors: errors,
+            submitted: submitted,
+            setField: setField,
+            submit: submit,
+            resetAll: resetAll,
+            isValidOnSubmit: isValidOnSubmit,
+            isValidAfterModified: isValidAfterModified,
+            customFieldUpdate: updateFn,
+            resetFieldsToInitialValues: _this.resetFieldsToInitialValues,
+            setFormReadonly: _this.setFormReadonly,
+            isFormReadonly: _this.state.isFormReadonly,
+            fieldsModified: _this.state.fieldsModified,
+            isValid: isValid,
+            setError: setError
+          });
+        })
+      );
     });
 
     _this.state = {
@@ -61135,11 +61135,14 @@ var SkedFormValidation = /*#__PURE__*/function (_React$PureComponent) {
   _babel_runtime_helpers_createClass__WEBPACK_IMPORTED_MODULE_1___default()(SkedFormValidation, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var initialValues = this.props.initialValues;
+      var _this$props3 = this.props,
+          initialValues = _this$props3.initialValues,
+          options = _this$props3.options;
 
       if (!react_fast_compare__WEBPACK_IMPORTED_MODULE_8___default()(prevProps.initialValues, initialValues)) {
         // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
+          isFormReadonly: options.clickToEdit,
           initialValues: initialValues
         });
       }
@@ -64664,6 +64667,7 @@ var Pill = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["forwardRef"](functio
       otherProps = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, _excluded);
 
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, otherProps, {
+    "data-sk-name": "sked-pill",
     ref: ref,
     className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('sk-pl-2 sk-font-medium sk-text-xs sk-rounded sk-inline-flex sk-items-center sked-pill-leading', {
       'sk-bg-neutral-750 sk-text-white': theme === 'dark' && !disabled