@clickview/lite 0.0.24-rc.4 → 0.0.24

package/dist/scripts/4.chunk.js

@@ -1,1025 +1,331 @@
 (window["webpackJsonp_clickview_lite"] = window["webpackJsonp_clickview_lite"] || []).push([[4],{
 
-/***/ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidget.tsx":
-/*!*****************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/FixedWidget.tsx ***!
-  \*****************************************************************************************************************/
-/*! exports provided: FixedWidget */
+/***/ "../../libs/shared/src/components/forms/form-buttons/FormButtons.tsx":
+/*!***************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-buttons/FormButtons.tsx ***!
+  \***************************************************************************************************************/
+/*! exports provided: FormButtons */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FixedWidget", function() { return Memoized; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormButtons", function() { return FormButtons; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
-/* harmony import */ var _enums_CssMeasurement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../enums/CssMeasurement */ "../../libs/shared/src/enums/CssMeasurement.ts");
-/* harmony import */ var _widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../widget-button/WidgetButton */ "../../libs/shared/src/components/widgets/widget-button/WidgetButton.tsx");
-/* harmony import */ var _sliding_list_SlidingListContainer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../sliding-list/SlidingListContainer */ "../../libs/shared/src/components/widgets/sliding-list/SlidingListContainer.tsx");
-/* harmony import */ var _hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../hooks/UseGetMediaQueryString */ "../../libs/shared/src/hooks/UseGetMediaQueryString.ts");
-/* harmony import */ var _hooks_UseHover__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../hooks/UseHover */ "../../libs/shared/src/hooks/UseHover.ts");
-/* harmony import */ var _interfaces__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../interfaces */ "../../libs/shared/src/interfaces/index.ts");
-/* harmony import */ var _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../enums/WidgetInteraction */ "../../libs/shared/src/enums/WidgetInteraction.ts");
-/* harmony import */ var _hooks_UseLazyLoad__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../hooks/UseLazyLoad */ "../../libs/shared/src/hooks/UseLazyLoad.ts");
-/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
-/* harmony import */ var _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
-/* harmony import */ var _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
-/* harmony import */ var _enums_ThumbnailSize__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../../enums/ThumbnailSize */ "../../libs/shared/src/enums/ThumbnailSize.ts");
-/* harmony import */ var _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../../utils/WidgetHelper */ "../../libs/shared/src/utils/WidgetHelper.ts");
-/* harmony import */ var _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../../../../analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
-/* harmony import */ var _PartialFixedWidget__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./PartialFixedWidget */ "../../libs/shared/src/components/widgets/fixed-widget/PartialFixedWidget.tsx");
-/* harmony import */ var _FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./FixedWidgetUtils */ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetUtils.ts");
-/* harmony import */ var _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./FixedWidgetReducer */ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetReducer.tsx");
-/* harmony import */ var _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./fixed-widget.scss */ "../../libs/shared/src/components/widgets/fixed-widget/fixed-widget.scss");
-/* harmony import */ var _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default = /*#__PURE__*/__webpack_require__.n(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19__);
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var namespace = 'shared.fixedWidget';
-FixedWidget.defaultProps = {
-  type: _interfaces__WEBPACK_IMPORTED_MODULE_7__["WidgetType"].Row,
-  minimumItemCount: 0,
-  paddingSize: '3'
-};
-
-function FixedWidget(props) {
-  var _a, _b, _c, _d, _e;
-
-  var widgetType = props.type,
-      _props$analyticsData = props.analyticsData,
-      analyticsData = _props$analyticsData === void 0 ? {} : _props$analyticsData; // Map deprecated resources tile widget type to row type
-
-  if (widgetType === _interfaces__WEBPACK_IMPORTED_MODULE_7__["WidgetType"].ResourcesTile) widgetType = _interfaces__WEBPACK_IMPORTED_MODULE_7__["WidgetType"].Row;
-
-  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0__["useState"](null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      initialTouchX = _React$useState2[0],
-      setInitialTouchX = _React$useState2[1];
-
-  var _React$useState3 = react__WEBPACK_IMPORTED_MODULE_0__["useState"](null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      containerWidth = _React$useState4[0],
-      setContainerWidth = _React$useState4[1];
-
-  var _React$useState5 = react__WEBPACK_IMPORTED_MODULE_0__["useState"](0),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      percentageDragged = _React$useState6[0],
-      setPercentageDragged = _React$useState6[1];
-
-  var _React$useReducer = react__WEBPACK_IMPORTED_MODULE_0__["useReducer"](_FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_18__["FixedWidgetReducer"], _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_18__["initialWidgetState"], _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_18__["lazyWidgetInit"]),
-      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
-      state = _React$useReducer2[0],
-      dispatch = _React$useReducer2[1];
-
-  var containerRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"](null);
-
-  var _useHover = Object(_hooks_UseHover__WEBPACK_IMPORTED_MODULE_6__["useHover"])(),
-      _useHover2 = _slicedToArray(_useHover, 2),
-      buttonsRef = _useHover2[0],
-      isHovering = _useHover2[1];
-
-  var _React$useState7 = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      isHoveringOnFarLeft = _React$useState8[0],
-      setIsHoveringOnFarLeft = _React$useState8[1];
-
-  var _React$useState9 = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      isHoveringOnFarRight = _React$useState10[0],
-      setIsHoveringOnFarRight = _React$useState10[1];
-
-  var _useLazyLoad = Object(_hooks_UseLazyLoad__WEBPACK_IMPORTED_MODULE_9__["useLazyLoad"])(!props.lazyLoad),
-      ref = _useLazyLoad.ref,
-      shouldFetch = _useLazyLoad.inView;
-
-  var mediaQuery = Object(_hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_5__["useGetMediaQueryString"])();
-  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
-    dispatch({
-      type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Resize,
-      payload: {
-        mediaQuery: mediaQuery,
-        type: widgetType,
-        contents: props.contents,
-        collection: state.collection
-      }
-    });
-  }, [mediaQuery]);
-  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
-    if (!props.prefetched) return; // If the collection changes, re-initialize the widget state.
-
-    dispatch({
-      type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Init,
-      payload: {
-        mediaQuery: mediaQuery,
-        type: widgetType,
-        contents: props.contents,
-        collection: props.collection
-      }
-    });
-  }, [props.collection, props.prefetched]);
-  var response = Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["useFetchData"])(props, dispatch, mediaQuery, shouldFetch);
-
-  function onSetIsHovering(hovering, index) {
-    if (state.collection.length === state.viewableItems) {
-      setIsHoveringOnFarLeft(hovering);
-      setIsHoveringOnFarRight(hovering);
-      return;
-    } // This callback will hide the far left button if the user is hovering on the far left widget item.
-    // Same goes for the far right button & widget item.
-
-
-    if (index + 1 === state.collection.length) {
-      setIsHoveringOnFarRight(hovering);
-      return;
-    }
-
-    if (index === 0) {
-      setIsHoveringOnFarLeft(hovering);
-      return;
-    }
-
-    if ((index + 1 - state.offset % state.viewableItems) % state.viewableItems === 0) {
-      setIsHoveringOnFarRight(hovering);
-      return;
-    }
-
-    if ((index - state.offset % state.viewableItems) % state.viewableItems === 0) {
-      setIsHoveringOnFarLeft(hovering);
-      return;
-    }
-  }
-
-  var widgetContext = {
-    type: state.type,
-    size: state.currentSize,
-    collectionSize: state.collection.length,
-    contents: props.contents
-  };
-  var data = Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["formatData"])(props, ((_a = response) === null || _a === void 0 ? void 0 : _a.data) || props.collection);
-  if ((_b = response) === null || _b === void 0 ? void 0 : _b.hasError) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
-
-  if (!props.prefetched && !((_c = response) === null || _c === void 0 ? void 0 : _c.statusCode)) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-      ref: ref
-    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_PartialFixedWidget__WEBPACK_IMPORTED_MODULE_16__["PartialFixedWidget"], {
-      type: widgetType
-    }));
-  }
-
-  if (!state.collection.length || state.collection.length < props.minimumItemCount) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
-  var WidgetItemComponent = props.childComponent;
-
-  var getSliderAnalyticsData = function getSliderAnalyticsData(type) {
-    var _a, _b;
-
-    return Object.assign({
-      id: (_a = data) === null || _a === void 0 ? void 0 : _a.id,
-      name: (_b = data) === null || _b === void 0 ? void 0 : _b.name,
-      direction: type === _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Next ? 'right' : 'left'
-    }, props.analyticsData);
-  };
-
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "pb-3 px-".concat(props.paddingSize, " mx-n").concat(props.paddingSize, " overflow-hidden-x")
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: 'mb-1'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_app_link_AppLink__WEBPACK_IMPORTED_MODULE_10__["AppLink"], {
-    appLink: Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["getCollectionAppLink"])(props.appLink, data),
-    analyticsData: Object.assign({
-      id: (_d = data) === null || _d === void 0 ? void 0 : _d.id,
-      name: (_e = data) === null || _e === void 0 ? void 0 : _e.name
-    }, props.analyticsData),
-    analyticsOptions: _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__["WidgetHelper"].getSliderHeadingAnalyticsOptions()
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h2", {
-    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default.a.heading, " ").concat(props.appLink ? _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default.a.link : '', " h4 mb-0 d-inline-block align-top pl-1")
-  }, data.name, !!props.appLink && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__["SvgContainer"], {
-    svgName: _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_12__["cvSvgLibrary"].ChevronRight,
-    size: _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__["SvgContainerSize"].Small
-  })), props.settingsAppLink && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_app_link_AppLink__WEBPACK_IMPORTED_MODULE_10__["AppLink"], {
-    appLink: props.settingsAppLink
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_11__["SvgContainer"], {
-    svgName: _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_12__["cvSvgLibrary"].Cog,
-    className: 'd-inline-block svg-container cursor-pointer',
-    title: _common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_1__["LanguageService"].getPhrase(namespace, 'preferencesTooltip'),
-    tooltipPlacement: 'right'
-  }))), data.description && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("p", {
-    className: 'text-truncate pl-1 mb-0 description'
-  }, data.description)), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    ref: buttonsRef,
-    className: 'position-relative'
-  }, !isHoveringOnFarLeft && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default.a.leftOverflowGradient
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__["WidgetButton"], {
-    direction: _widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__["WidgetButtonDirection"].Left,
-    onClick: function onClick() {
-      dispatch({
-        type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Previous
-      });
-      _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_15__["AnalyticsHelper"].logUserAction(getSliderAnalyticsData(_enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Previous), _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__["WidgetHelper"].getSliderAnalyticsOptions());
-    },
-    hide: isHoveringOnFarLeft || state.offset <= state.collection.length && !(isHovering && state.offset !== state.viewableItems),
-    contents: props.contents
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_sliding_list_SlidingListContainer__WEBPACK_IMPORTED_MODULE_4__["SlidingListContainer"], {
-    position: state.position,
-    positionType: _enums_CssMeasurement__WEBPACK_IMPORTED_MODULE_2__["CssMeasurement"].Percentage,
-    onTouchMove: Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["getOnTouchStart"])(state, containerRef, containerWidth, setContainerWidth, initialTouchX, setInitialTouchX, setPercentageDragged),
-    onTouchEnd: Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["getOnTouchEnd"])(containerRef, setInitialTouchX, percentageDragged, setPercentageDragged, dispatch),
-    ref: containerRef,
-    percentageDragged: percentageDragged
-  }, state.collection.map(function (widgetItem, index) {
-    var _a;
-
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](WidgetItemComponent, {
-      key: widgetItem.id,
-      data: widgetItem,
-      appLink: props.childAppLink,
-      context: widgetContext,
-      preloadImage: Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_17__["getShouldPreload"])(state)(widgetItem),
-      thumbnailSize: props.thumbnailSize || _enums_ThumbnailSize__WEBPACK_IMPORTED_MODULE_13__["ThumbnailSize"].Medium,
-      analyticsData: Object.assign({
-        widgetId: data.id,
-        widgetName: data.name,
-        itemIndex: index
-      }, analyticsData),
-      analyticsOptions: Object.assign(Object.assign({}, (_a = props) === null || _a === void 0 ? void 0 : _a.analyticsOptions), _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__["WidgetHelper"].getSliderItemAnalyticsOptions()),
-      onHover: function onHover(hovering) {
-        /**
-         * For some reason this needs to be called after a set timeout, otherwise
-         * the `useHover` listener on the `buttonsRef` element will not detect it's hover
-         * event. A delay of 200ms is used for when `hovering` is false so that the effects of
-         * setting `isHoveringOnFarX` aren't applied until the CSS transform transition has
-         * completed.
-         */
-        window.setTimeout(function () {
-          onSetIsHovering(hovering, index);
-        }, hovering ? 0 : 200);
-      }
-    });
-  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__["WidgetButton"], {
-    direction: _widget_button_WidgetButton__WEBPACK_IMPORTED_MODULE_3__["WidgetButtonDirection"].Right,
-    onClick: function onClick() {
-      dispatch({
-        type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Next
-      });
-      _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_15__["AnalyticsHelper"].logUserAction(getSliderAnalyticsData(_enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_8__["WidgetInteraction"].Next), _utils_WidgetHelper__WEBPACK_IMPORTED_MODULE_14__["WidgetHelper"].getSliderAnalyticsOptions());
-    },
-    hide: isHoveringOnFarRight || (state.offset > state.viewableItems || state.offset === state.collection.length) && !(isHovering && state.offset < state.collection.length),
-    contents: props.contents
-  }), !isHoveringOnFarRight && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_19___default.a.rightOverflowGradient
-  })));
-}
-
-var Memoized = react__WEBPACK_IMPORTED_MODULE_0__["memo"](FixedWidget);
-
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetReducer.tsx":
-/*!************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/FixedWidgetReducer.tsx ***!
-  \************************************************************************************************************************/
-/*! exports provided: initialWidgetState, FixedWidgetReducer, lazyWidgetInit */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
+/* harmony import */ var _hooks_UseCanSubmitForm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/UseCanSubmitForm */ "../../libs/shared/src/hooks/UseCanSubmitForm.ts");
+/* harmony import */ var _spinner_button_SpinnerButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../spinner-button/SpinnerButton */ "../../libs/shared/src/components/spinner-button/SpinnerButton.tsx");
+/* harmony import */ var _text_Text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../text/Text */ "../../libs/shared/src/components/text/Text.tsx");
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "initialWidgetState", function() { return initialWidgetState; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FixedWidgetReducer", function() { return FixedWidgetReducer; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lazyWidgetInit", function() { return lazyWidgetInit; });
-/* harmony import */ var _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
-/* harmony import */ var _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../enums/WidgetInteraction */ "../../libs/shared/src/enums/WidgetInteraction.ts");
-/* harmony import */ var _interfaces__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../interfaces */ "../../libs/shared/src/interfaces/index.ts");
-/* harmony import */ var _FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./FixedWidgetUtils */ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetUtils.ts");
 
 
 
 
-var initialWidgetState = {
-  offset: 0,
-  viewableItems: 4,
-  position: 0,
-  collection: [],
-  currentSize: _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_0__["MediaQueryStrings"].LG,
-  type: _interfaces__WEBPACK_IMPORTED_MODULE_2__["WidgetType"].Row
-};
-
-var computeNextPosition = function computeNextPosition(prevState) {
-  var collection = prevState.collection,
-      viewableItems = prevState.viewableItems,
-      offset = prevState.offset,
-      position = prevState.position;
-  var remainingCount = collection.length - offset;
+var namespace = 'shared.formButtons';
+var ENTER_KEY_CODE = 13;
+function FormButtons(props) {
+  var formikProps = Object(formik__WEBPACK_IMPORTED_MODULE_1__["useFormikContext"])();
+  var canSubmit = Object(_hooks_UseCanSubmitForm__WEBPACK_IMPORTED_MODULE_2__["useCanSubmitForm"])(formikProps);
   /**
-   * If the remaining items are evening divisible by the items in view, or,
-   * we have more items that can be displayed in the view, move the slider a full 100%.
+   * This hook listens to "Enter" keypress events, and submits the form if there
+   * are no errors. This prevents any edge cases where submitting doesn't work on
+   * Enter normally, such as when a custom component is in focus.
    */
 
-  if (remainingCount % viewableItems === 0 || remainingCount > viewableItems) return {
-    position: position - 100,
-    offset: offset + viewableItems
-  };
-  /**
-   * Where there are less items than we can show in a full slide,
-   * calculate the % movement required to only show those items.
-   */
-
-  if (remainingCount < viewableItems) return {
-    position: position - remainingCount / viewableItems * 100,
-    offset: offset + remainingCount
-  };
-  /**
-   * Default back to the current state as a fallback
-   */
-
-  return {
-    position: position,
-    offset: offset
-  };
-};
-
-var computePreviousPosition = function computePreviousPosition(prevState) {
-  var viewableItems = prevState.viewableItems,
-      offset = prevState.offset,
-      position = prevState.position;
-  var remainingCount = offset - viewableItems;
-  if (remainingCount % viewableItems === 0 || remainingCount > viewableItems) return {
-    position: position + 100,
-    offset: offset - viewableItems
-  };
-  if (remainingCount < viewableItems) return {
-    position: position + remainingCount / viewableItems * 100,
-    offset: offset - remainingCount
-  };
-  return {
-    position: position,
-    offset: offset
-  };
-};
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
+    function onKeyPress(e) {
+      if (e.keyCode !== ENTER_KEY_CODE || !canSubmit) return;
+      formikProps.validateForm().then(function (errors) {
+        if (!Object.keys(errors).length) formikProps.submitForm();
+      });
+    }
 
-function FixedWidgetReducer(prevState, action) {
-  var _a, _b;
-
-  var type = action.type,
-      _action$payload = action.payload,
-      payload = _action$payload === void 0 ? {} : _action$payload;
-
-  switch (type) {
-    case _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__["WidgetInteraction"].Next:
-      {
-        return Object.assign(Object.assign({}, prevState), computeNextPosition(prevState));
-      }
-
-    case _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__["WidgetInteraction"].Previous:
-      {
-        return Object.assign(Object.assign({}, prevState), computePreviousPosition(prevState));
-      }
-
-    case _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__["WidgetInteraction"].Resize:
-      {
-        var computeViewableItems = Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_3__["getComputeFunction"])(payload.contents);
-        var initialSeen = computeViewableItems(payload.mediaQuery, payload.type, (_a = payload.collection) === null || _a === void 0 ? void 0 : _a.length);
-        return Object.assign(Object.assign({}, prevState), {
-          currentSize: payload.mediaQuery,
-          position: 0,
-          offset: initialSeen,
-          viewableItems: initialSeen,
-          type: payload.type
-        });
-      }
-
-    case _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_1__["WidgetInteraction"].Init:
-      {
-        var _computeViewableItems = Object(_FixedWidgetUtils__WEBPACK_IMPORTED_MODULE_3__["getComputeFunction"])(payload.contents);
-
-        var _initialSeen = _computeViewableItems(payload.mediaQuery, payload.type, (_b = payload.collection) === null || _b === void 0 ? void 0 : _b.length);
-
-        return lazyWidgetInit(Object.assign(Object.assign({}, prevState), {
-          collection: payload.collection,
-          currentSize: payload.mediaQuery,
-          offset: _initialSeen,
-          viewableItems: _initialSeen,
-          type: payload.type
-        }));
-      }
-
-    default:
-      return prevState;
-  }
-}
-function lazyWidgetInit(newState) {
-  return Object.assign(Object.assign({}, initialWidgetState), newState);
+    window.addEventListener('keypress', onKeyPress);
+    return function () {
+      return window.removeEventListener('keypress', onKeyPress);
+    };
+  }, [canSubmit]);
+  var phraseKey = 'save';
+  if (props.isNew) phraseKey = 'create';
+  if (props.hasNext) phraseKey = 'next';
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_spinner_button_SpinnerButton__WEBPACK_IMPORTED_MODULE_3__["SpinnerButton"], {
+    variant: props.variant || 'primary',
+    showSpinner: formikProps.isSubmitting,
+    type: 'submit',
+    disabled: !canSubmit
+  }, props.submitText ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, props.submitText) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_text_Text__WEBPACK_IMPORTED_MODULE_4__["Text"], {
+    namespace: namespace,
+    phrase: phraseKey
+  }));
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetUtils.ts":
-/*!*********************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/FixedWidgetUtils.ts ***!
-  \*********************************************************************************************************************/
-/*! exports provided: useFetchData, getShouldPreload, getCollectionAppLink, formatData, getComputeFunction, getOnTouchStart, getOnTouchEnd */
+/***/ "../../libs/shared/src/components/forms/form-checkbox/FormCheckbox.tsx":
+/*!*****************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-checkbox/FormCheckbox.tsx ***!
+  \*****************************************************************************************************************/
+/*! exports provided: FormCheckbox */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useFetchData", function() { return useFetchData; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getShouldPreload", function() { return getShouldPreload; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getCollectionAppLink", function() { return getCollectionAppLink; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "formatData", function() { return formatData; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getComputeFunction", function() { return getComputeFunction; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getOnTouchStart", function() { return getOnTouchStart; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getOnTouchEnd", function() { return getOnTouchEnd; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormCheckbox", function() { return FormCheckbox; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../common/src/react/utils/ObjectHelper */ "../../libs/common/src/react/utils/ObjectHelper.ts");
-/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
-/* harmony import */ var _common_src_react_utils_TextHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../common/src/react/utils/TextHelper */ "../../libs/common/src/react/utils/TextHelper.ts");
-/* harmony import */ var _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
-/* harmony import */ var _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../enums/WidgetInteraction */ "../../libs/shared/src/enums/WidgetInteraction.ts");
-/* harmony import */ var _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../enums/WidgetContents */ "../../libs/shared/src/enums/WidgetContents.ts");
-/* harmony import */ var _interfaces__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../interfaces */ "../../libs/shared/src/interfaces/index.ts");
-
-
-
-
-
-
-
-
-function useFetchData(props, dispatch, mediaQueryType, shouldFetch) {
-  var fetch = props.fetch,
-      setData = props.setData,
-      type = props.type,
-      items = props.collection,
-      prefetched = props.prefetched,
-      contents = props.contents;
-  var data = items;
-  var res;
-
-  if (!data || _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_1__["ObjectHelper"].isEmpty(data) && !prefetched) {
-    res = fetch(shouldFetch);
-    data = res.data;
+/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-bootstrap */ "react-bootstrap");
+/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _form_field_FormField__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../form-field/FormField */ "../../libs/shared/src/components/forms/form-field/FormField.tsx");
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   }
-  /**
-   * Once we have the widget data, lazily update our state with the new collection
-   */
-
-
-  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
-    if (!data || _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_1__["ObjectHelper"].isEmpty(data)) return;
-    dispatch({
-      type: _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_5__["WidgetInteraction"].Init,
-      payload: {
-        collection: _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__["FunctionHelper"].isFunction(setData) ? setData(data) : data,
-        mediaQuery: mediaQueryType,
-        type: type,
-        contents: contents
-      }
-    });
-  }, [data]);
-  return res;
-}
-/**
- * This function wrapper determines which widget item images should be pre-fetched by the LazyImage component.
- * It does this by looking at which images are going to be shown after the users clicks on the "Next"
- * widget button.
- */
 
-function getShouldPreload(state) {
-  var offset = state.offset,
-      viewableItems = state.viewableItems,
-      collection = state.collection; // The index of the latest item that has been fetched
-
-  var maxLoadedIndex = offset;
-  /**
-   * The indicesToPreload is an array of indices of widget items that should be prefetched by the
-   * LazyImage component
-   */
-
-  var indicesToPreload = [];
-
-  for (var i = 0; i < maxLoadedIndex + viewableItems; i++) {
-    indicesToPreload.push(i);
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
-  /**
-   * A widget item calls this function to determine whether or not its image can be pre-fetched.
-   * This is determined by whether or not its index has been deemed valid to be pre-fetched
-   * by the scope above
-   */
-
-
-  return function shouldPreload(widgetItem) {
-    var index = collection.indexOf(widgetItem);
-    return indicesToPreload.includes(index);
-  };
-}
-function getCollectionAppLink(appLink, data) {
-  if (!appLink) return;
-  return Object.assign(Object.assign({}, appLink), {
-    args: appLink.args || [data.id, _common_src_react_utils_TextHelper__WEBPACK_IMPORTED_MODULE_3__["TextHelper"].slugify(data.name)]
-  });
-}
-/**
- * Allow explicit name and description props to override the fetched
- * data properties.
- *
- * @param props
- * @param data
- */
-
-function formatData(props, data) {
-  var name = props.name,
-      description = props.description;
-  var overrideProps = {};
-  if (Array.isArray(data)) return {
-    name: name,
-    description: description
-  };
-  if (props.name) overrideProps.name = name;
-  if (props.description) overrideProps.description = description;
-  return Object.assign(Object.assign({}, data), overrideProps);
-}
-function getComputeFunction(contents) {
-  switch (contents) {
-    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Playlists:
-      return computeViewablePlaylists;
-
-    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Videos:
-      return computeViewableVideos;
-
-    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Subjects:
-      return computeViewableSubjects;
-
-    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].UserChannels:
-      return computeViewableUserChannels;
-
-    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Interactives:
-      return computeViewableInteractives;
-
-    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Clips:
-      return computeViewableClips;
-
-    case _enums_WidgetContents__WEBPACK_IMPORTED_MODULE_6__["WidgetContents"].Series:
-    default:
-      return computeViewableSeries;
-  }
-}
-
-function computeViewablePlaylists(mediaQuery, type, itemCount) {
-  var maxItems = 5;
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 2;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 3;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD) maxItems = 4;
-  if (itemCount < maxItems) maxItems = itemCount;
-  return maxItems;
-}
+  return t;
+};
 
-function computeViewableVideos(mediaQuery, type, itemCount) {
-  var maxItems = 4;
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 2;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 3;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD) maxItems = 4;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].LG || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XL || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XXL) {
-    if (type === _interfaces__WEBPACK_IMPORTED_MODULE_7__["WidgetType"].LargeRow) maxItems = 3;else if (itemCount < 4) maxItems = 3;else maxItems = 4;
-  }
-  if (itemCount < maxItems) maxItems = itemCount;
-  return maxItems;
-}
 
-function computeViewableSubjects(mediaQuery, type, itemCount) {
-  var maxItems = 6;
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 3;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD) maxItems = 4;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].LG) maxItems = 5;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XL || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XXL) maxItems = 6;
-  if (itemCount < maxItems) maxItems = itemCount;
-  return maxItems;
-}
 
-function computeViewableUserChannels(mediaQuery, type, itemCount) {
-  var maxItems = 6;
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 2;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 3;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD) maxItems = 4;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].LG) maxItems = 5;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XL || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XXL) maxItems = 6;
-  if (itemCount < maxItems) maxItems = itemCount;
-  return maxItems;
-}
-
-function computeViewableInteractives(mediaQuery, type, itemCount) {
-  var maxItems = 3;
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 2;
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 1;
-  if (itemCount < Math.ceil(maxItems)) maxItems = itemCount;
-  return maxItems;
-}
 
-function computeViewableClips(mediaQuery, type, itemCount) {
-  var maxItems = 3;
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].MD || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 2;
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 1;
-  if (itemCount < Math.ceil(maxItems)) maxItems = itemCount;
-  return maxItems;
-}
-
-function computeViewableSeries(mediaQuery, type, itemCount) {
-  var maxItems = 4;
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].XS) maxItems = 2;else if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_4__["MediaQueryStrings"].SM) maxItems = 3;
-  if (itemCount < maxItems) maxItems = itemCount;
-  return maxItems;
-}
 /**
- * Touch event handlers
+ * Use this checkbox within Formik contexts
  */
 
-
-function getOnTouchStart(widgetState, containerRef, containerWidth, setContainerWidth, initialTouchX, setInitialTouchX, setPercentageDragged) {
-  return function (event) {
-    var firstTouch = event.touches.item(0);
-    var touchX = firstTouch.clientX;
-    /**
-     * Runs only on the very first touch event.
-     *
-     * Sets the initial x-coordinate as a reference point to calculate how far the user has dragged before
-     * they release their finder
-     */
-
-    if (!initialTouchX) {
-      containerRef.current.style.transition = '';
-      setContainerWidth(containerRef.current.getBoundingClientRect().width);
-      setInitialTouchX(touchX);
-    }
-
-    var pixelsDragged = initialTouchX - touchX; // Calculate how far the user has moved their finger as a percentage of the widget's container element
-
-    var currentPercentageDragged = pixelsDragged / containerWidth * 100;
-    /**
-     * These 2 if statements prevent the user from dragging the widget beyond its limits.
-     * One if statement handles if they have dragged to the left, and the other is for dragging to the right.
-     *
-     * The same logic is used to hide the widget buttons (see the `hide` prop passed to `<WidgetButton />`)
-     */
-
-    if (currentPercentageDragged < 0 && widgetState.offset === widgetState.viewableItems) currentPercentageDragged = 0;else if (currentPercentageDragged > 0 && widgetState.offset === widgetState.collection.length) currentPercentageDragged = 0;
-    setPercentageDragged(currentPercentageDragged);
-  };
-}
-var DRAG_TOLERANCE = 7.5; // % of container width using to trigger a transition.
-
-function getOnTouchEnd(containerRef, setInitialTouchX, percentageDragged, setPercentageDragged, dispatch) {
-  return function () {
-    containerRef.current.style.transition = 'transform .4s ease-in-out';
-    setInitialTouchX(null);
-    /**
-     * Only trigger a Next/Previous widget event if the user has dragged beyond DRAG_TOLERANCE% either way of the
-     * container's width. This means if the user only drags left/right a tiny little bit, the widget
-     * will simply slide back into its original place.
-     */
-
-    if (Math.abs(percentageDragged) >= DRAG_TOLERANCE) {
-      var reducerAction = percentageDragged > 0 ? _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_5__["WidgetInteraction"].Next : _enums_WidgetInteraction__WEBPACK_IMPORTED_MODULE_5__["WidgetInteraction"].Previous;
-      dispatch({
-        type: reducerAction
-      });
-    }
-
-    setPercentageDragged(0);
-  };
+function FormCheckbox(props) {
+  var label = props.label,
+      fieldProps = __rest(props, ["label"]);
+
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Form"].Group, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'custom-control custom-checkbox'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_form_field_FormField__WEBPACK_IMPORTED_MODULE_2__["FieldWrapper"], Object.assign({
+    className: 'custom-control-input'
+  }, fieldProps)), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Form"].Label, {
+    className: 'custom-control-label',
+    htmlFor: fieldProps.id
+  }, label)));
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/widgets/fixed-widget/PartialFixedWidget.tsx":
-/*!************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/PartialFixedWidget.tsx ***!
-  \************************************************************************************************************************/
-/*! exports provided: PartialFixedWidget */
+/***/ "../../libs/shared/src/components/forms/form-field/CharacterCounter.tsx":
+/*!******************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-field/CharacterCounter.tsx ***!
+  \******************************************************************************************************************/
+/*! exports provided: CharacterCounter */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PartialFixedWidget", function() { return PartialFixedWidget; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CharacterCounter", function() { return CharacterCounter; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
-/* harmony import */ var _hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../hooks/UseGetMediaQueryString */ "../../libs/shared/src/hooks/UseGetMediaQueryString.ts");
-/* harmony import */ var _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./fixed-widget.scss */ "../../libs/shared/src/components/widgets/fixed-widget/fixed-widget.scss");
-/* harmony import */ var _fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3__);
-
-
-
-
-
-function useMediaQueryListeners() {
-  var mediaQuery = Object(_hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_2__["useGetMediaQueryString"])();
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__["MediaQueryStrings"].XS) return {
-    itemCount: 1,
-    colSize: 12
-  };
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__["MediaQueryStrings"].SM) return {
-    itemCount: 2,
-    colSize: 6
-  };
-  if (mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__["MediaQueryStrings"].MD) return {
-    itemCount: 3,
-    colSize: 4
-  };
-  return {
-    itemCount: 4,
-    colSize: 3
-  };
-}
-
-var PartialLoadingItem = function PartialLoadingItem(_ref) {
-  var colSize = _ref.colSize;
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "col-".concat(colSize)
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default.a.partialItem, " mx-1 partial-loading-background")
-  }));
-};
+/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
 
-function PartialFixedWidget(props) {
-  var _useMediaQueryListene = useMediaQueryListeners(),
-      itemCount = _useMediaQueryListene.itemCount,
-      colSize = _useMediaQueryListene.colSize;
 
-  var items = [];
-
-  for (var i = 0; i < itemCount; i++) {
-    items.push(react__WEBPACK_IMPORTED_MODULE_0__["createElement"](PartialLoadingItem, {
-      key: i,
-      colSize: colSize
-    }));
-  }
+function CharacterCounter(props) {
+  var _useFormikContext = Object(formik__WEBPACK_IMPORTED_MODULE_1__["useFormikContext"])(),
+      values = _useFormikContext.values;
 
+  var field = values[props.fieldName];
+  if (typeof field !== 'string') return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: 'widget pb-3'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default.a.partialHeading, " mx-1 mb-1 partial-loading-background")
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default.a.partialDescription, " mx-1 my-1 partial-loading-background")
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "".concat(_fixed_widget_scss__WEBPACK_IMPORTED_MODULE_3___default.a.slidingContainer, " row")
-  }, items));
+    className: 'float-right text-muted'
+  }, field.length, "/", props.limit);
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/widgets/fixed-widget/fixed-widget.scss":
-/*!*******************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/fixed-widget.scss ***!
-  \*******************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-module.exports = {"leftOverflowGradient":"cv--leftOverflowGradient--u_MPi","rightOverflowGradient":"cv--rightOverflowGradient--38ooL","partialHeading":"cv--partialHeading--OVsdA","partialDescription":"cv--partialDescription--1HtA2","partialItem":"cv--partialItem--3G2hG","largePartialItem":"cv--largePartialItem--NnK8O","heading":"cv--heading--BQnCC","link":"cv--link--ph0Qy"};
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/widgets/sliding-list/SlidingListContainer.tsx":
-/*!**************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/sliding-list/SlidingListContainer.tsx ***!
-  \**************************************************************************************************************************/
-/*! exports provided: SlidingListContainer */
+/***/ "../../libs/shared/src/components/forms/form-field/FormField.tsx":
+/*!***********************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-field/FormField.tsx ***!
+  \***********************************************************************************************************/
+/*! exports provided: FieldWrapper, FormField */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SlidingListContainer", function() { return SlidingListContainer; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FieldWrapper", function() { return FieldWrapper; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormField", function() { return FormField; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _common_src_backbone_utils_UserAgentHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../common/src/backbone/utils/UserAgentHelper */ "../../libs/common/src/backbone/utils/UserAgentHelper.ts");
-/* harmony import */ var _enums_CssMeasurement__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../enums/CssMeasurement */ "../../libs/shared/src/enums/CssMeasurement.ts");
-/* harmony import */ var _utils_DragHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/DragHelper */ "../../libs/shared/src/utils/DragHelper.ts");
+/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
+/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-bootstrap */ "react-bootstrap");
+/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
+/* harmony import */ var _utils_FormHelper__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/FormHelper */ "../../libs/shared/src/utils/FormHelper.ts");
+/* harmony import */ var _CharacterCounter__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./CharacterCounter */ "../../libs/shared/src/components/forms/form-field/CharacterCounter.tsx");
+/* harmony import */ var _form_checkbox_FormCheckbox__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../form-checkbox/FormCheckbox */ "../../libs/shared/src/components/forms/form-checkbox/FormCheckbox.tsx");
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
 
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 
 
 
-var isTouchScreen = _common_src_backbone_utils_UserAgentHelper__WEBPACK_IMPORTED_MODULE_1__["UserAgentHelper"].isTouchScreen();
 
-function getPositionStyling(xPosition, measurement, dragPercentage) {
-  // Used in situations where a touch screen user is dragging the `<FixedWidget />`
-  if (measurement === _enums_CssMeasurement__WEBPACK_IMPORTED_MODULE_2__["CssMeasurement"].Percentage && dragPercentage) xPosition = xPosition - dragPercentage;
-  return {
-    transform: "translate3d(".concat(xPosition).concat(measurement, ", 0px, 0px)"),
-    transition: 'transform .4s ease-in-out'
-  };
-}
 
-var SlidingListContainer = react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"](function (props, ref) {
-  var children = props.children,
-      positionType = props.positionType,
-      onDrag = props.onDrag,
-      onDragEnd = props.onDragEnd,
-      onTouchMove = props.onTouchMove,
-      onTouchEnd = props.onTouchEnd,
-      percentageDragged = props.percentageDragged,
-      _props$position = props.position,
-      position = _props$position === void 0 ? 0 : _props$position;
-
-  function getEventListeners() {
-    var listenerProps = {};
-
-    if (onDrag && onDragEnd) {
-      listenerProps.draggable = true;
-      listenerProps.onDrag = onDrag;
-      listenerProps.onDragEnd = onDragEnd;
-      listenerProps.onDragStart = _utils_DragHelper__WEBPACK_IMPORTED_MODULE_3__["DragHelper"].hideDragImage;
-
-      listenerProps.onDragOver = function (e) {
-        return e.preventDefault();
-      };
-    }
 
-    if (onTouchMove && onTouchEnd && isTouchScreen) {
-      listenerProps.onTouchMoveCapture = onTouchMove;
-      listenerProps.onTouchEndCapture = onTouchEnd;
-    }
 
-    return listenerProps;
-  }
 
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", Object.assign({
-    className: 'd-flex flex-nowrap position-relative w-100',
-    style: getPositionStyling(position, positionType, percentageDragged),
-    ref: ref
-  }, getEventListeners()), children);
-});
+function FieldWrapper(props) {
+  var children = props.children,
+      fieldProps = __rest(props, ["children"]);
+
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](formik__WEBPACK_IMPORTED_MODULE_1__["Field"], Object.assign({}, fieldProps), _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_3__["FunctionHelper"].isFunction(children) ? function (f) {
+    return children(f);
+  } : react__WEBPACK_IMPORTED_MODULE_0__["Children"].count(children) ? children : null);
+}
+function FormField(props) {
+  var label = props.label,
+      className = props.className,
+      showCharacterCounter = props.showCharacterCounter,
+      fieldProps = __rest(props, ["label", "className", "showCharacterCounter"]);
+
+  var _useFormikContext = Object(formik__WEBPACK_IMPORTED_MODULE_1__["useFormikContext"])(),
+      errors = _useFormikContext.errors,
+      touched = _useFormikContext.touched;
+
+  if (fieldProps.type === 'checkbox') return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_form_checkbox_FormCheckbox__WEBPACK_IMPORTED_MODULE_6__["FormCheckbox"], Object.assign({}, props));
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Group, null, !!label && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Label, {
+    htmlFor: fieldProps.id
+  }, label), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](FieldWrapper, Object.assign({
+    className: _utils_FormHelper__WEBPACK_IMPORTED_MODULE_4__["FormHelper"].getCustomFormControlClassName(errors, touched, fieldProps.name, className)
+  }, fieldProps)), !!showCharacterCounter && !!fieldProps.maxLength && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_CharacterCounter__WEBPACK_IMPORTED_MODULE_5__["CharacterCounter"], {
+    fieldName: fieldProps.name,
+    limit: fieldProps.maxLength
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](formik__WEBPACK_IMPORTED_MODULE_1__["ErrorMessage"], {
+    name: fieldProps.name
+  }, function (errorMessage) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control.Feedback, {
+      type: 'invalid'
+    }, errorMessage);
+  }));
+}
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/widgets/widget-button/WidgetButton.tsx":
-/*!*******************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/widget-button/WidgetButton.tsx ***!
-  \*******************************************************************************************************************/
-/*! exports provided: WidgetButtonDirection, WidgetButton */
+/***/ "../../libs/shared/src/components/forms/form-wrapper/FormWrapper.tsx":
+/*!***************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/forms/form-wrapper/FormWrapper.tsx ***!
+  \***************************************************************************************************************/
+/*! exports provided: FormWrapper, useFormikContextWrapper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetButtonDirection", function() { return WidgetButtonDirection; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetButton", function() { return WidgetButton; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormWrapper", function() { return FormWrapper; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useFormikContextWrapper", function() { return useFormikContextWrapper; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
-/* harmony import */ var _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
-/* harmony import */ var _widget_button_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./widget-button.scss */ "../../libs/shared/src/components/widgets/widget-button/widget-button.scss");
-/* harmony import */ var _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_widget_button_scss__WEBPACK_IMPORTED_MODULE_3__);
-
-
-
-
-var WidgetButtonDirection;
-
-(function (WidgetButtonDirection) {
-  WidgetButtonDirection[WidgetButtonDirection["Left"] = 0] = "Left";
-  WidgetButtonDirection[WidgetButtonDirection["Right"] = 1] = "Right";
-})(WidgetButtonDirection || (WidgetButtonDirection = {}));
-
-function getPositionClass(contents, isLeftDirection) {
-  var className = _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.topPos; // Left / Right
-
-  if (isLeftDirection) className += ' ' + _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.left;else className += ' ' + _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.right;
-  return className;
-}
-
-var WidgetButton = react__WEBPACK_IMPORTED_MODULE_0__["memo"](function (props) {
-  var isLeft = props.direction === WidgetButtonDirection.Left;
-  var arrowSvg = isLeft ? _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__["cvSvgLibrary"].ChevronLeft : _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__["cvSvgLibrary"].ChevronRight;
-  var positionClass = getPositionClass(props.contents, isLeft);
-  if (props.hide) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    role: 'button',
-    className: "".concat(positionClass, " ").concat(_widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.button),
-    onClick: props.onClick
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_1__["SvgContainer"], {
-    svgName: arrowSvg,
-    size: _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_1__["SvgContainerSize"].Medium,
-    className: "svg-container d-inline-block ".concat(_widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.chevron)
-  })), props.useGradientBackdrop && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: isLeft ? _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.gradientLeft : _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.gradientRight
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    role: 'button',
-    onClick: props.onClick,
-    className: isLeft ? _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.extendedClickableAreaLeft : _widget_button_scss__WEBPACK_IMPORTED_MODULE_3___default.a.extendedClickableAreaRight
-  }));
-}, function (prevProps, nextProps) {
-  return prevProps.hide === nextProps.hide;
-});
+/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
+/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
+/* harmony import */ var _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../common/src/react/utils/ObjectHelper */ "../../libs/common/src/react/utils/ObjectHelper.ts");
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
 
-/***/ }),
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
 
-/***/ "../../libs/shared/src/components/widgets/widget-button/widget-button.scss":
-/*!*********************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/widget-button/widget-button.scss ***!
-  \*********************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 
-// extracted by mini-css-extract-plugin
-module.exports = {"left":"cv--left--789pr","right":"cv--right--1P8qt","button":"cv--button--24q_F","chevron":"cv--chevron--3M27X","gradientLeft":"cv--gradientLeft--3fkiw","gradientRight":"cv--gradientRight--2RDDy","extendedClickableAreaRight":"cv--extendedClickableAreaRight--13dgy","extendedClickableAreaLeft":"cv--extendedClickableAreaLeft--37LtK","videoTopPos":"cv--videoTopPos--1XTRO","topPos":"cv--topPos--3_p_J"};
 
-/***/ }),
 
-/***/ "../../libs/shared/src/enums/CssMeasurement.ts":
-/*!*****************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/enums/CssMeasurement.ts ***!
-  \*****************************************************************************************/
-/*! exports provided: CssMeasurement */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CssMeasurement", function() { return CssMeasurement; });
-var CssMeasurement;
 
-(function (CssMeasurement) {
-  CssMeasurement["Percentage"] = "%";
-  CssMeasurement["Pixels"] = "px";
-})(CssMeasurement || (CssMeasurement = {}));
 
-/***/ }),
+function omitNullInitialValues(initialValues) {
+  var values = _common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_3__["ObjectHelper"].deepClone(initialValues);
+  Object.keys(values).forEach(function (key) {
+    if (!values.hasOwnProperty(key)) return;
+    if (_common_src_react_utils_ObjectHelper__WEBPACK_IMPORTED_MODULE_3__["ObjectHelper"].isObject(values[key])) values[key] = omitNullInitialValues(values[key]);else if (values[key] === null) delete values[key];
+  });
+  return values;
+}
 
-/***/ "../../libs/shared/src/enums/WidgetContents.ts":
-/*!*****************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/enums/WidgetContents.ts ***!
-  \*****************************************************************************************/
-/*! exports provided: WidgetContents */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+FormWrapper.defaultProps = {
+  castInitialValues: true,
+  castValuesOnSubmit: true
+};
+function FormWrapper(props) {
+  var castInitialValues = props.castInitialValues,
+      castValuesOnSubmit = props.castValuesOnSubmit,
+      initialValues = props.initialValues,
+      onSubmit = props.onSubmit,
+      resetOnSubmit = props.resetOnSubmit,
+      formikProps = __rest(props, ["castInitialValues", "castValuesOnSubmit", "initialValues", "onSubmit", "resetOnSubmit"]);
+  /**
+   * If castInitialValues is true, cast initialValues to the validationSchema.
+   * This will ensure that any data fetched from the api conforms to the expected form data shape.
+   */
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetContents", function() { return WidgetContents; });
-var WidgetContents;
-
-(function (WidgetContents) {
-  WidgetContents["Videos"] = "videos";
-  WidgetContents["Series"] = "series";
-  WidgetContents["Subjects"] = "subjects";
-  WidgetContents["Playlists"] = "playlists";
-  WidgetContents["UserChannels"] = "user channels";
-  WidgetContents["Interactives"] = "interactives";
-  WidgetContents["Clips"] = "clips";
-})(WidgetContents || (WidgetContents = {}));
 
-/***/ }),
+  var formattedInitialValues = castInitialValues && props.validationSchema ? props.validationSchema.cast(omitNullInitialValues(initialValues)) : initialValues;
 
-/***/ "../../libs/shared/src/enums/WidgetInteraction.ts":
-/*!********************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/enums/WidgetInteraction.ts ***!
-  \********************************************************************************************/
-/*! exports provided: WidgetInteraction */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+  var onSubmitHandler = function onSubmitHandler(values, _ref) {
+    var setSubmitting = _ref.setSubmitting,
+        resetForm = _ref.resetForm;
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetInteraction", function() { return WidgetInteraction; });
-var WidgetInteraction;
+    /**
+     * validationSchema.cast will coerce the values to the types defined in validationSchema.
+     * This is useful for trimming inputs:
+     * e.g. if a value field has type Yup.string().trim(), it will be automatically trimmed.
+     */
+    var formattedData = castValuesOnSubmit && props.validationSchema ? props.validationSchema.cast(values) : values;
+    onSubmit(formattedData, function () {
+      resetOnSubmit && resetForm();
+      setSubmitting(false);
+    });
+  };
 
-(function (WidgetInteraction) {
-  WidgetInteraction["Init"] = "init";
-  WidgetInteraction["Next"] = "next";
-  WidgetInteraction["Previous"] = "previous";
-  WidgetInteraction["Resize"] = "resize";
-  WidgetInteraction["Drag"] = "drag";
-})(WidgetInteraction || (WidgetInteraction = {}));
+  var initialStatus = {
+    allowInitialSubmit: props.allowInitialSubmit
+  };
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](formik__WEBPACK_IMPORTED_MODULE_1__["Formik"], Object.assign({
+    enableReinitialize: true
+  }, formikProps, {
+    initialValues: formattedInitialValues,
+    onSubmit: onSubmitHandler,
+    initialStatus: initialStatus
+  }), _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__["FunctionHelper"].isFunction(props.children) ? function (f) {
+    return props.children(f);
+  } : react__WEBPACK_IMPORTED_MODULE_0__["Children"].count(props.children) ? props.children : null);
+}
+function useFormikContextWrapper() {
+  return Object(formik__WEBPACK_IMPORTED_MODULE_1__["useFormikContext"])();
+}
 
 /***/ }),
 
-/***/ "../../libs/shared/src/hooks/UseHover.ts":
-/*!***********************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/hooks/UseHover.ts ***!
-  \***********************************************************************************/
-/*! exports provided: useHover, useHoverIntent */
+/***/ "../../libs/shared/src/hooks/UseCanSubmitForm.ts":
+/*!*******************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/hooks/UseCanSubmitForm.ts ***!
+  \*******************************************************************************************/
+/*! exports provided: useCanSubmitForm */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useHover", function() { return useHover; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useHoverIntent", function() { return useHoverIntent; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useCanSubmitForm", function() { return useCanSubmitForm; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -1033,129 +339,61 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
-
-var defaultOptions = {
-  className: '',
-  delay: 0
-};
 /**
- * This hook detects hover events on an element.
- * This should only be used where CSS hover events won't suffice for what you are trying to achieve.
+ * useCanSubmitForm determines if a form can be submitted.
+ *
+ * It will return true if a form is valid and has been changed from it's initial state.
+ *
+ * A common use case for this is determining whether or not to enable
+ * a submit button in a form.
  */
 
-function useHover() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultOptions;
+function useCanSubmitForm(formikProps) {
+  var _a;
 
   var _React$useState = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      isHovering = _React$useState2[0],
-      setHovering = _React$useState2[1];
+      canSubmit = _React$useState2[0],
+      setCanSubmit = _React$useState2[1];
 
-  var ref = react__WEBPACK_IMPORTED_MODULE_0__["useRef"](null);
-  var triggerHover = _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__["FunctionHelper"].throttle(function () {
-    var _a, _b;
-
-    if (options.className) (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add(options.className);
-    setHovering(true);
-  }, options.delay, {
-    leading: false
-  });
-
-  var handleMouseOut = function handleMouseOut() {
-    var _a, _b;
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
+    var _a;
 
-    if (_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__["FunctionHelper"].isFunction(triggerHover.cancel)) triggerHover.cancel();
-    if (options.className) (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(options.className);
-    setHovering(false);
-  };
+    if (!formikProps.isValid) {
+      setCanSubmit(false);
+      return;
+    } // If the form values have changed of if allowInitialSubmit is true, set canSubmit to true.
 
-  react__WEBPACK_IMPORTED_MODULE_0__["useLayoutEffect"](function () {
-    var node = ref.current;
 
-    if (node) {
-      node.addEventListener('mouseenter', triggerHover);
-      node.addEventListener('mouseleave', handleMouseOut);
-      return function () {
-        node.removeEventListener('mouseenter', triggerHover);
-        node.removeEventListener('mouseleave', handleMouseOut);
-      };
-    }
-  }, [ref.current, triggerHover, handleMouseOut]);
-  return [ref, isHovering];
-}
-function useHoverIntent(className) {
-  return useHover({
-    className: className,
-    delay: 275
-  });
+    if (formikProps.dirty || ((_a = formikProps.initialStatus) === null || _a === void 0 ? void 0 : _a.allowInitialSubmit)) setCanSubmit(true);else setCanSubmit(false);
+  }, [formikProps.isValid, (_a = formikProps.initialStatus) === null || _a === void 0 ? void 0 : _a.allowInitialSubmit, formikProps.dirty, formikProps.values]);
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
+    if (formikProps.isSubmitting) setCanSubmit(false);
+  }, [formikProps.isSubmitting]);
+  return canSubmit;
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/utils/DragHelper.ts":
+/***/ "../../libs/shared/src/utils/FormHelper.ts":
 /*!*************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/utils/DragHelper.ts ***!
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/utils/FormHelper.ts ***!
   \*************************************************************************************/
-/*! exports provided: DragHelper */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragHelper", function() { return DragHelper; });
-/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
-
-var blankImage = new Image();
-blankImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
-var DragHelper = {
-  // This removes the image that appears when you drag a draggable HTML element
-  hideDragImage: function hideDragImage(event) {
-    if (!event.dataTransfer.setDragImage || _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_0__["FunctionHelper"].isFunction(event.dataTransfer.setDragImage)) return;
-    event.dataTransfer.setDragImage(blankImage, 0, 0);
-  }
-};
-
-/***/ }),
-
-/***/ "../../libs/shared/src/utils/WidgetHelper.ts":
-/*!***************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/utils/WidgetHelper.ts ***!
-  \***************************************************************************************/
-/*! exports provided: WidgetHelper */
+/*! exports provided: FormHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WidgetHelper", function() { return WidgetHelper; });
-/* harmony import */ var _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../analytics/src/interfaces */ "../../libs/analytics/src/interfaces/index.ts");
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormHelper", function() { return FormHelper; });
+/* harmony import */ var formik__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! formik */ "../../../node_modules/formik/dist/formik.esm.js");
 
-var WidgetHelper = {
-  /**
-   * Used by both the FixedWidget and DynamicWidget
-   */
-  getSliderAnalyticsOptions: function getSliderAnalyticsOptions() {
-    return {
-      actionType: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["UserAction"].Click,
-      location: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["LocationContext"].SlidingList,
-      entity: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["EntityType"].Widget,
-      descriptor: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClickDescriptor"].Slide
-    };
-  },
+var FormHelper = {
+  getCustomFormControlClassName: function getCustomFormControlClassName(errors, touched, attribute, additionalClassName) {
+    var className = 'form-control'; // Using getIn as it supports dot notation
 
-  /**
-   * Used by both the FixedWidget and DynamicWidget
-   */
-  getSliderItemAnalyticsOptions: function getSliderItemAnalyticsOptions() {
-    return {
-      location: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["LocationContext"].SlidingListItem
-    };
-  },
-  getSliderHeadingAnalyticsOptions: function getSliderHeadingAnalyticsOptions() {
-    return {
-      actionType: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["UserAction"].Click,
-      location: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["LocationContext"].SlidingList,
-      entity: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["EntityType"].Widget,
-      descriptor: _analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_0__["ClickDescriptor"].Title
-    };
+    if (Object(formik__WEBPACK_IMPORTED_MODULE_0__["getIn"])(touched, attribute) && Object(formik__WEBPACK_IMPORTED_MODULE_0__["getIn"])(errors, attribute)) className += ' is-invalid';
+    if (additionalClassName) className += " ".concat(additionalClassName);
+    return className;
   }
 };