@thecb/components 4.0.3-beta-0 → 4.0.5

package/dist/index.cjs.js

@@ -275,21 +275,47 @@ function __spreadArrays() {
     return r;
 }
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
 var clamp = function (min, max) { return function (v) {
     return Math.max(Math.min(v, max), min);
 }; };
 var sanitize = function (v) { return (v % 1 ? Number(v.toFixed(5)) : v); };
 var floatRegex = /(-)?(\d[\d\.]*)/g;
-var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
-var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
+var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i;
 
 var number = {
     test: function (v) { return typeof v === 'number'; },
     parse: parseFloat,
     transform: function (v) { return v; }
 };
-var alpha = __assign(__assign({}, number), { transform: clamp(0, 1) });
-var scale = __assign(__assign({}, number), { default: 1 });
+var alpha = __assign$1(__assign$1({}, number), { transform: clamp(0, 1) });
+var scale = __assign$1(__assign$1({}, number), { default: 1 });
 
 var createUnitType = function (unit) { return ({
     test: function (v) {
@@ -303,7 +329,7 @@ var percent = createUnitType('%');
 var px = createUnitType('px');
 var vh = createUnitType('vh');
 var vw = createUnitType('vw');
-var progressPercentage = __assign(__assign({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
+var progressPercentage = __assign$1(__assign$1({}, percent), { parse: function (v) { return percent.parse(v) / 100; }, transform: function (v) { return percent.transform(v * 100); } });
 
 var getValueFromFunctionString = function (value) {
     return value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
@@ -311,17 +337,12 @@ var getValueFromFunctionString = function (value) {
 var clampRgbUnit = clamp(0, 255);
 var isRgba = function (v) { return v.red !== undefined; };
 var isHsla = function (v) { return v.hue !== undefined; };
-function getValuesAsArray(value) {
-    return getValueFromFunctionString(value)
-        .replace(/(,|\/)/g, ' ')
-        .split(/ \s*/);
-}
 var splitColorValues = function (terms) {
     return function (v) {
         if (typeof v !== 'string')
             return v;
         var values = {};
-        var valuesArray = getValuesAsArray(v);
+        var valuesArray = getValueFromFunctionString(v).split(/,\s*/);
         for (var i = 0; i < 4; i++) {
             values[terms[i]] =
                 valuesArray[i] !== undefined ? parseFloat(valuesArray[i]) : 1;
@@ -330,14 +351,14 @@ var splitColorValues = function (terms) {
     };
 };
 var rgbaTemplate = function (_a) {
-    var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha = _b === void 0 ? 1 : _b;
-    return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
+    var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
+    return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha$$1 + ")";
 };
 var hslaTemplate = function (_a) {
-    var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha = _b === void 0 ? 1 : _b;
-    return "hsla(" + hue + ", " + saturation + ", " + lightness + ", " + alpha + ")";
+    var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
+    return "hsla(" + hue + ", " + saturation + ", " + lightness + ", " + alpha$$1 + ")";
 };
-var rgbUnit = __assign(__assign({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
+var rgbUnit = __assign$1(__assign$1({}, number), { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
 function isColorString(color, colorType) {
     return color.startsWith(colorType) && singleColorRegex.test(color);
 }
@@ -345,12 +366,12 @@ var rgba = {
     test: function (v) { return (typeof v === 'string' ? isColorString(v, 'rgb') : isRgba(v)); },
     parse: splitColorValues(['red', 'green', 'blue', 'alpha']),
     transform: function (_a) {
-        var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
+        var red = _a.red, green = _a.green, blue = _a.blue, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
         return rgbaTemplate({
             red: rgbUnit.transform(red),
             green: rgbUnit.transform(green),
             blue: rgbUnit.transform(blue),
-            alpha: sanitize(alpha.transform(alpha$1))
+            alpha: sanitize(alpha.transform(alpha$$1))
         });
     }
 };
@@ -358,16 +379,16 @@ var hsla = {
     test: function (v) { return (typeof v === 'string' ? isColorString(v, 'hsl') : isHsla(v)); },
     parse: splitColorValues(['hue', 'saturation', 'lightness', 'alpha']),
     transform: function (_a) {
-        var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$1 = _b === void 0 ? 1 : _b;
+        var hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness, _b = _a.alpha, alpha$$1 = _b === void 0 ? 1 : _b;
         return hslaTemplate({
             hue: Math.round(hue),
             saturation: percent.transform(sanitize(saturation)),
             lightness: percent.transform(sanitize(lightness)),
-            alpha: sanitize(alpha.transform(alpha$1))
+            alpha: sanitize(alpha.transform(alpha$$1))
         });
     }
 };
-var hex = __assign(__assign({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
+var hex = __assign$1(__assign$1({}, rgba), { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
         var r = '';
         var g = '';
         var b = '';
@@ -501,134 +522,140 @@ if (process.env.NODE_ENV !== 'production') {
     };
 }
 
-var prevTime = 0;
-var onNextFrame = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined ? function (callback) {
-    return window.requestAnimationFrame(callback);
-} : function (callback) {
-    var timestamp = Date.now();
-    var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));
-    prevTime = timestamp + timeToCall;
-    setTimeout(function () {
-        return callback(prevTime);
-    }, timeToCall);
-};
-
-var createStep = function (setRunNextFrame) {
-    var processToRun = [];
-    var processToRunNextFrame = [];
-    var numThisFrame = 0;
-    var isProcessing = false;
-    var i = 0;
-    var cancelled = new WeakSet();
-    var toKeepAlive = new WeakSet();
-    var renderStep = {
-        cancel: function (process) {
-            var indexOfCallback = processToRunNextFrame.indexOf(process);
-            cancelled.add(process);
-            if (indexOfCallback !== -1) {
-                processToRunNextFrame.splice(indexOfCallback, 1);
-            }
-        },
-        process: function (frame) {
-            var _a;
-            isProcessing = true;
-            _a = [processToRunNextFrame, processToRun], processToRun = _a[0], processToRunNextFrame = _a[1];
-            processToRunNextFrame.length = 0;
-            numThisFrame = processToRun.length;
-            if (numThisFrame) {
-                var process_1;
-                for (i = 0; i < numThisFrame; i++) {
-                    process_1 = processToRun[i];
-                    process_1(frame);
-                    if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {
-                        renderStep.schedule(process_1);
-                        setRunNextFrame(true);
-                    }
-                }
-            }
-            isProcessing = false;
-        },
-        schedule: function (process, keepAlive, immediate) {
-            if (keepAlive === void 0) {
-                keepAlive = false;
-            }
-            if (immediate === void 0) {
-                immediate = false;
-            }
-            invariant(typeof process === "function", "Argument must be a function");
-            var addToCurrentBuffer = immediate && isProcessing;
-            var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;
-            cancelled.delete(process);
-            if (keepAlive) toKeepAlive.add(process);
-            if (buffer.indexOf(process) === -1) {
-                buffer.push(process);
-                if (addToCurrentBuffer) numThisFrame = processToRun.length;
-            }
-        }
+var prevTime = 0;
+var onNextFrame = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined
+    ? function (callback) { return window.requestAnimationFrame(callback); }
+    : function (callback) {
+        var timestamp = Date.now();
+        var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));
+        prevTime = timestamp + timeToCall;
+        setTimeout(function () { return callback(prevTime); }, timeToCall);
     };
-    return renderStep;
-};
 
-var maxElapsed = 40;
-var defaultElapsed = 1 / 60 * 1000;
-var useDefaultElapsed = true;
-var willRunNextFrame = false;
-var isProcessing = false;
-var frame = {
-    delta: 0,
-    timestamp: 0
-};
-var stepsOrder = ["read", "update", "preRender", "render", "postRender"];
-var setWillRunNextFrame = function (willRun) {
-    return willRunNextFrame = willRun;
-};
-var steps = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
-    acc[key] = createStep(setWillRunNextFrame);
-    return acc;
-}, {});
-var sync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
-    var step = steps[key];
-    acc[key] = function (process, keepAlive, immediate) {
-        if (keepAlive === void 0) {
-            keepAlive = false;
-        }
-        if (immediate === void 0) {
-            immediate = false;
-        }
-        if (!willRunNextFrame) startLoop();
-        step.schedule(process, keepAlive, immediate);
-        return process;
-    };
-    return acc;
-}, {});
-var cancelSync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
-    acc[key] = steps[key].cancel;
-    return acc;
-}, {});
-var processStep = function (stepId) {
-    return steps[stepId].process(frame);
-};
-var processFrame = function (timestamp) {
-    willRunNextFrame = false;
-    frame.delta = useDefaultElapsed ? defaultElapsed : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
-    if (!useDefaultElapsed) defaultElapsed = frame.delta;
-    frame.timestamp = timestamp;
-    isProcessing = true;
-    stepsOrder.forEach(processStep);
-    isProcessing = false;
-    if (willRunNextFrame) {
-        useDefaultElapsed = false;
-        onNextFrame(processFrame);
-    }
-};
-var startLoop = function () {
-    willRunNextFrame = true;
-    useDefaultElapsed = true;
-    if (!isProcessing) onNextFrame(processFrame);
-};
-var getFrameData = function () {
-    return frame;
-};
+var createStep = (function (setRunNextFrame) {
+    var processToRun = [];
+    var processToRunNextFrame = [];
+    var numThisFrame = 0;
+    var isProcessing = false;
+    var i = 0;
+    var cancelled = new WeakSet();
+    var toKeepAlive = new WeakSet();
+    var renderStep = {
+        cancel: function (process) {
+            var indexOfCallback = processToRunNextFrame.indexOf(process);
+            cancelled.add(process);
+            if (indexOfCallback !== -1) {
+                processToRunNextFrame.splice(indexOfCallback, 1);
+            }
+        },
+        process: function (frame) {
+            var _a;
+            isProcessing = true;
+            _a = [
+                processToRunNextFrame,
+                processToRun
+            ], processToRun = _a[0], processToRunNextFrame = _a[1];
+            processToRunNextFrame.length = 0;
+            numThisFrame = processToRun.length;
+            if (numThisFrame) {
+                var process_1;
+                for (i = 0; i < numThisFrame; i++) {
+                    process_1 = processToRun[i];
+                    process_1(frame);
+                    if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {
+                        renderStep.schedule(process_1);
+                        setRunNextFrame(true);
+                    }
+                }
+            }
+            isProcessing = false;
+        },
+        schedule: function (process, keepAlive, immediate) {
+            if (keepAlive === void 0) { keepAlive = false; }
+            if (immediate === void 0) { immediate = false; }
+            invariant(typeof process === 'function', 'Argument must be a function');
+            var addToCurrentBuffer = immediate && isProcessing;
+            var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;
+            cancelled.delete(process);
+            if (keepAlive)
+                toKeepAlive.add(process);
+            if (buffer.indexOf(process) === -1) {
+                buffer.push(process);
+                if (addToCurrentBuffer)
+                    numThisFrame = processToRun.length;
+            }
+        }
+    };
+    return renderStep;
+});
+
+var StepId;
+(function (StepId) {
+    StepId["Read"] = "read";
+    StepId["Update"] = "update";
+    StepId["Render"] = "render";
+    StepId["PostRender"] = "postRender";
+    StepId["FixedUpdate"] = "fixedUpdate";
+})(StepId || (StepId = {}));
+
+var maxElapsed = 40;
+var defaultElapsed = (1 / 60) * 1000;
+var useDefaultElapsed = true;
+var willRunNextFrame = false;
+var isProcessing = false;
+var frame = {
+    delta: 0,
+    timestamp: 0
+};
+var stepsOrder = [
+    StepId.Read,
+    StepId.Update,
+    StepId.Render,
+    StepId.PostRender
+];
+var setWillRunNextFrame = function (willRun) { return (willRunNextFrame = willRun); };
+var _a = stepsOrder.reduce(function (acc, key) {
+    var step = createStep(setWillRunNextFrame);
+    acc.sync[key] = function (process, keepAlive, immediate) {
+        if (keepAlive === void 0) { keepAlive = false; }
+        if (immediate === void 0) { immediate = false; }
+        if (!willRunNextFrame)
+            startLoop();
+        step.schedule(process, keepAlive, immediate);
+        return process;
+    };
+    acc.cancelSync[key] = function (process) { return step.cancel(process); };
+    acc.steps[key] = step;
+    return acc;
+}, {
+    steps: {},
+    sync: {},
+    cancelSync: {}
+}), steps = _a.steps, sync = _a.sync, cancelSync = _a.cancelSync;
+var processStep = function (stepId) { return steps[stepId].process(frame); };
+var processFrame = function (timestamp) {
+    willRunNextFrame = false;
+    frame.delta = useDefaultElapsed
+        ? defaultElapsed
+        : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
+    if (!useDefaultElapsed)
+        defaultElapsed = frame.delta;
+    frame.timestamp = timestamp;
+    isProcessing = true;
+    stepsOrder.forEach(processStep);
+    isProcessing = false;
+    if (willRunNextFrame) {
+        useDefaultElapsed = false;
+        onNextFrame(processFrame);
+    }
+};
+var startLoop = function () {
+    willRunNextFrame = true;
+    useDefaultElapsed = true;
+    if (!isProcessing)
+        onNextFrame(processFrame);
+};
+var getFrameData = function () { return frame; };
 
 var DEFAULT_OVERSHOOT_STRENGTH = 1.525;
 var reversed = function (easing) {
@@ -903,15 +930,15 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
+var __assign$2 = function() {
+    __assign$2 = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign$1.apply(this, arguments);
+    return __assign$2.apply(this, arguments);
 };
 
 var mixLinearColor = function (from, to, v) {
@@ -934,7 +961,7 @@ var mixColor = (function (from, to) {
     invariant(fromColorType.transform === toColorType.transform, 'Both colors must be hex/RGBA, OR both must be HSLA.');
     var fromColor = fromColorType.parse(from);
     var toColor = toColorType.parse(to);
-    var blended = __assign$1({}, fromColor);
+    var blended = __assign$2({}, fromColor);
     var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
     return function (v) {
         for (var key in blended) {
@@ -979,7 +1006,7 @@ var mixArray = function (from, to) {
     };
 };
 var mixObject = function (origin, target) {
-    var output = __assign$1({}, origin, target);
+    var output = __assign$2({}, origin, target);
     var blendValue = {};
     for (var key in output) {
         if (origin[key] !== undefined && target[key] !== undefined) {
@@ -3369,15 +3396,15 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-var __assign$2 = function () {
-    __assign$2 = Object.assign || function __assign(t) {
+var __assign$3 = function () {
+    __assign$3 = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign$2.apply(this, arguments);
+    return __assign$3.apply(this, arguments);
 };
 
 function __rest$1(s, e) {
@@ -3497,12 +3524,12 @@ var intelligentTransition = {
     opacity: linearTween,
     default: tween
 };
-var dragAction = /*#__PURE__*/__assign$2( /*#__PURE__*/__assign$2({}, intelligentTransition), { x: /*#__PURE__*/createPointer(pointerX, 'left', 'right', BoundingBoxDimension.width), y: /*#__PURE__*/createPointer(pointerY, 'top', 'bottom', BoundingBoxDimension.height) });
+var dragAction = /*#__PURE__*/__assign$3( /*#__PURE__*/__assign$3({}, intelligentTransition), { x: /*#__PURE__*/createPointer(pointerX, 'left', 'right', BoundingBoxDimension.width), y: /*#__PURE__*/createPointer(pointerY, 'top', 'bottom', BoundingBoxDimension.height) });
 var justAxis = function (_a) {
     var from = _a.from;
     return just(from);
 };
-var intelligentDragEnd = /*#__PURE__*/__assign$2( /*#__PURE__*/__assign$2({}, intelligentTransition), { x: justAxis, y: justAxis });
+var intelligentDragEnd = /*#__PURE__*/__assign$3( /*#__PURE__*/__assign$3({}, intelligentTransition), { x: justAxis, y: justAxis });
 var defaultTransitions = /*#__PURE__*/new Map([['default', intelligentTransition], ['drag', dragAction], ['dragEnd', intelligentDragEnd]]);
 
 var animationLookup = {
@@ -3597,7 +3624,7 @@ var getAction = function (v, _a, _b) {
         velocity: velocity,
         ease: ease
     } : { ease: ease };
-    return animationLookup[type](__assign$2(__assign$2({}, baseProps), def));
+    return animationLookup[type](__assign$3(__assign$3({}, baseProps), def));
 };
 var isAction = function (action$$1) {
     return typeof action$$1.start !== 'undefined';
@@ -3976,7 +4003,7 @@ var convertPositionalUnits = function (state, nextPose) {
             changedPositionalKeys.push(key);
             if (!applyAtEndHasBeenCopied) {
                 applyAtEndHasBeenCopied = true;
-                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$2({}, nextPose.applyAtEnd) : {};
+                nextPose.applyAtEnd = nextPose.applyAtEnd ? __assign$3({}, nextPose.applyAtEnd) : {};
             }
             nextPose.applyAtEnd[key] = nextPose.applyAtEnd[key] || nextPose[key];
             setValue(state, key, to);
@@ -4033,7 +4060,7 @@ var createPoseConfig = function (element, _a) {
         pressable = _a.pressable,
         dragBounds = _a.dragBounds,
         config = __rest$1(_a, ["onDragStart", "onDragEnd", "onPressStart", "onPressEnd", "draggable", "hoverable", "focusable", "pressable", "dragBounds"]);
-    var poseConfig = __assign$2(__assign$2({ flip: {} }, config), { props: __assign$2(__assign$2({}, config.props), { onDragStart: onDragStart,
+    var poseConfig = __assign$3(__assign$3({ flip: {} }, config), { props: __assign$3(__assign$3({}, config.props), { onDragStart: onDragStart,
             onDragEnd: onDragEnd,
             onPressStart: onPressStart,
             onPressEnd: onPressEnd,
@@ -4047,8 +4074,8 @@ var createPoseConfig = function (element, _a) {
         var _b = dragPoses(draggable),
             drag = _b.drag,
             dragEnd = _b.dragEnd;
-        poseConfig.drag = __assign$2(__assign$2({}, drag), poseConfig.drag);
-        poseConfig.dragEnd = __assign$2(__assign$2({}, dragEnd), poseConfig.dragEnd);
+        poseConfig.drag = __assign$3(__assign$3({}, drag), poseConfig.drag);
+        poseConfig.dragEnd = __assign$3(__assign$3({}, dragEnd), poseConfig.dragEnd);
     }
     return poseConfig;
 };
@@ -4094,7 +4121,7 @@ var domPose = /*#__PURE__*/pose({
         var props = _a.props,
             activeActions = _a.activeActions;
         var measure = props.dimensions.measure;
-        var poserApi = __assign$2(__assign$2({}, api), { addChild: function (element, childConfig) {
+        var poserApi = __assign$3(__assign$3({}, api), { addChild: function (element, childConfig) {
                 return api._addChild(createPoseConfig(element, childConfig), domPose);
             }, measure: measure, flip: function (op) {
                 if (op) {
@@ -4164,7 +4191,7 @@ var pickAssign = function (shouldPick, sources) {
     }, {});
 };
 
-var _a = React.createContext({}), PoseParentConsumer = _a.Consumer, PoseParentProvider = _a.Provider;
+var _a$1 = React.createContext({}), PoseParentConsumer = _a$1.Consumer, PoseParentProvider = _a$1.Provider;
 var calcPopFromFlowStyle = function (el) {
     var offsetTop = el.offsetTop, offsetLeft = el.offsetLeft, offsetWidth = el.offsetWidth, offsetHeight = el.offsetHeight;
     return {
@@ -6137,16 +6164,6 @@ var Text = function Text(_ref) {
 
 var Text$1 = themeComponent(Text, "Text", fallbackValues, "p");
 
-function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject6() {
   var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
@@ -6198,7 +6215,7 @@ function _templateObject2$1() {
 }
 
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  min-height: ", ";\n  ", "\n  min-width: ", ";\n  max-width: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border: ", ";\n  text-align: ", ";\n\n  &:hover, &:focus {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  &:disabled {\n    ", "\n  }\n\n  & * {\n    color: ", ";\n  }\n\n  ", "\n  ", "\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  min-height: ", ";\n  ", "\n  min-width: ", ";\n  max-width: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border: ", ";\n  text-align: ", ";\n\n  &:hover, &:focus {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  &:disabled {\n    ", "\n  }\n\n  & * {\n    color: ", ";\n  }\n\n  ", "\n  ", "\n"]);
 
   _templateObject$1 = function _templateObject() {
     return data;
@@ -6232,9 +6249,14 @@ var BoxWrapper = styled__default(function (_ref) {
       maxWidth = _ref.maxWidth,
       padding = _ref.padding,
       hiddenStyles = _ref.hiddenStyles,
-      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles"]);
-
-  return /*#__PURE__*/React__default.createElement("div", props);
+      ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
+      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"]);
+
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    "aria-controls": ariaControls,
+    "aria-label": ariaLabel
+  }, props));
 })(_templateObject$1(), function (_ref2) {
   var padding = _ref2.padding;
   return padding;
@@ -6297,9 +6319,6 @@ var BoxWrapper = styled__default(function (_ref) {
 }, function (_ref20) {
   var extraStyles = _ref20.extraStyles;
   return styled.css(_templateObject6(), extraStyles);
-}, function (_ref21) {
-  var hiddenStyles = _ref21.hiddenStyles;
-  return hiddenStyles && styled.css(_templateObject7());
 });
 /* eslint-enable no-unused-vars */
 
@@ -10042,11 +10061,9 @@ function usePanGesture(_a, ref) {
             onPanEnd && onPanEnd(event, info);
         },
     };
-    React.useEffect(function () {
-        if (panSession.current !== null) {
-            panSession.current.updateHandlers(handlers);
-        }
-    });
+    if (panSession.current !== null) {
+        panSession.current.updateHandlers(handlers);
+    }
     function onPointerDown(event) {
         panSession.current = new PanSession(event, handlers, {
             transformPagePoint: transformPagePoint,
@@ -11087,7 +11104,7 @@ function useForceUpdate() {
 
 var SyncLayoutContext = React.createContext(null);
 
-var _a$1;
+var _a$2;
 var StepName;
 (function (StepName) {
     StepName["Prepare"] = "prepare";
@@ -11125,12 +11142,12 @@ var createUseSyncEffect = function (stepName) { return function (callback) {
     jobsNeedProcessing = true;
     jobs[stepName].push(callback);
 }; };
-var layoutSync = (_a$1 = {},
-    _a$1[StepName.Prepare] = createUseSyncEffect(StepName.Prepare),
-    _a$1[StepName.Read] = createUseSyncEffect(StepName.Read),
-    _a$1[StepName.Render] = createUseSyncEffect(StepName.Render),
-    _a$1.flush = flushAllJobs,
-    _a$1);
+var layoutSync = (_a$2 = {},
+    _a$2[StepName.Prepare] = createUseSyncEffect(StepName.Prepare),
+    _a$2[StepName.Read] = createUseSyncEffect(StepName.Read),
+    _a$2[StepName.Render] = createUseSyncEffect(StepName.Render),
+    _a$2.flush = flushAllJobs,
+    _a$2);
 
 function isHTMLElement$1(element) {
     return element instanceof HTMLElement;
@@ -14347,15 +14364,12 @@ var Heading = function Heading(_ref) {
       className = _ref.className,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "h1" : _ref$variant,
-      _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "h1" : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "dataQa", "children"]);
 
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
-    variant: variant,
-    as: as,
+    as: variant,
     weight: weight,
     color: color,
     margin: margin,
@@ -16366,10 +16380,10 @@ function _templateObject8() {
   return data;
 }
 
-function _templateObject7$1() {
+function _templateObject7() {
   var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border-radius: 2px;\n  transition: all 150ms;\n\n  ", " {\n    visibility: ", ";\n  }\n\n  ", ";\n"]);
 
-  _templateObject7$1 = function _templateObject7() {
+  _templateObject7 = function _templateObject7() {
     return data;
   };
 
@@ -16446,7 +16460,7 @@ var CheckboxIcon = styled__default.svg(_templateObject3$3(), function (_ref) {
 var HiddenCheckbox = styled__default.input.attrs({
   type: "checkbox"
 })(_templateObject6$1());
-var StyledCheckbox = styled__default.div(_templateObject7$1(), CheckboxIcon, function (_ref2) {
+var StyledCheckbox = styled__default.div(_templateObject7(), CheckboxIcon, function (_ref2) {
   var checked = _ref2.checked;
   return checked ? "visible" : "hidden";
 }, function (_ref3) {
@@ -18395,8 +18409,8 @@ var color$5 = {
   disabled: "".concat(DUSTY_GREY)
 };
 var labelColor = {
-  "default": "".concat(FIREFLY_GREY),
-  disabled: "".concat(FIREFLY_GREY)
+  "default": "".concat(STORM_GREY),
+  disabled: "".concat(STORM_GREY)
 };
 var borderColor = {
   "default": "".concat(GREY_CHATEAU),
@@ -18845,16 +18859,23 @@ var CCIconWrapper = styled__default.div(_templateObject2$e());
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
       autoPay = _ref.autoPay,
+      expireDate = _ref.expireDate,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(GenericCard, null)), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     padding: "0 0 0 8px",
     color: themeValues.textColor,
     textAlign: "left",
     extraStyles: "display: inline-block;"
-  }, "Card ending in ".concat(lastFour)), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
+  }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "pXS",
+    color: ASH_GREY,
+    textAlign: "left"
+  }, "Exp ".concat(expireDate))), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.autopayTextColor,
     extraStyles: "font-style: italic;"
@@ -18993,19 +19014,16 @@ var LabeledAmount = function LabeledAmount(_ref) {
       variant = _ref$variant === void 0 ? "pL" : _ref$variant,
       label = _ref.label,
       amount = _ref.amount,
-      themeValues = _ref.themeValues,
-      as = _ref.as;
+      themeValues = _ref.themeValues;
   var LabeledAmountText = variant === "h6" ? Heading$1 : Paragraph$1;
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row"
   }, /*#__PURE__*/React__default.createElement(LabeledAmountText, {
     variant: variant,
-    as: as,
     weight: themeValues.fontWeight,
     extraStyles: "text-align: start; flex: 3;"
   }, label, ":"), /*#__PURE__*/React__default.createElement(LabeledAmountText, {
     variant: variant,
-    as: as,
     weight: themeValues.fontWeight,
     extraStyles: "text-align: end; flex: 1;"
   }, amount));
@@ -19293,10 +19311,10 @@ function _templateObject8$1() {
   return data;
 }
 
-function _templateObject7$2() {
+function _templateObject7$1() {
   var data = _taggedTemplateLiteral(["", " needs an uppercase letter"]);
 
-  _templateObject7$2 = function _templateObject7() {
+  _templateObject7$1 = function _templateObject7() {
     return data;
   };
 
@@ -19402,7 +19420,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -32695,10 +32713,10 @@ function _templateObject8$2() {
   return data;
 }
 
-function _templateObject7$3() {
+function _templateObject7$2() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  font-size: ", ";\n  color: ", ";\n"]);
 
-  _templateObject7$3 = function _templateObject7() {
+  _templateObject7$2 = function _templateObject7() {
     return data;
   };
 
@@ -32791,7 +32809,7 @@ var ActionWrapper = styled__default.div(_templateObject6$3(), function (_ref7) {
   var isMobile = _ref7.isMobile;
   return isMobile && "display: none";
 });
-var TableItemKey = styled__default.div(_templateObject7$3(), function (_ref8) {
+var TableItemKey = styled__default.div(_templateObject7$2(), function (_ref8) {
   var isMobile = _ref8.isMobile;
   return !isMobile && "flex: 1";
 }, function (_ref9) {
@@ -34374,7 +34392,7 @@ var textAlign = {
 };
 var titleType = {
   "default": "h5",
-  largeTitle: "h1"
+  largeTitle: "h3"
 };
 var titleSpacing = {
   "default": "0.5rem",
@@ -34418,11 +34436,12 @@ var Module = function Module(_ref) {
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
       children = _ref.children;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: variant === "default" ? "h5" : "h2",
+    variant: variant === "default" ? "h5" : "h3",
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
-    textAlign: themeValues.textAlign
+    textAlign: themeValues.textAlign,
+    "aria-level": variant === "default" ? "3" : "1"
   }, heading), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -36058,20 +36077,23 @@ var fallbackValues$t = {
 var AutopayModal = function AutopayModal(_ref) {
   var autoPayActive = _ref.autoPayActive,
       autoPaySchedule = _ref.autoPaySchedule,
+      paymentPlanSchedule = _ref.paymentPlanSchedule,
       toggleModal = _ref.toggleModal,
       modalOpen = _ref.modalOpen,
       deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
       navigateToSettings = _ref.navigateToSettings,
       buttonLinkType = _ref.buttonLinkType,
       isMobile = _ref.isMobile,
-      themeValues = _ref.themeValues;
+      themeValues = _ref.themeValues,
+      isPaymentPlan = _ref.isPaymentPlan;
+  var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   var modalExtraProps = {
-    modalHeaderText: autoPayActive ? "Deactivate Autopay" : "Set Up Autopay",
-    modalBodyText: autoPayActive ? "Are you sure you want to deactivate autopay? You will need to manually make your next payment." : "To set up autopay you must save a payment method and address in your profile. Do you want to save these now?",
-    continueButtonText: autoPayActive ? "Disable Autopay" : "Add to Profile",
+    modalHeaderText: autoPayActive ? "Deactivate ".concat(planType) : "Set Up ".concat(planType),
+    modalBodyText: autoPayActive ? "Are you sure you want to deactivate ".concat(isPaymentPlan ? "your payment plan" : "autopay", "? You will need to manually make your next payment.") : "To set up ".concat(isPaymentPlan ? "a payment plan" : "autopay", " you must save a payment method and address in your profile. Do you want to save these now?"),
+    continueButtonText: autoPayActive ? "Disable ".concat(planType) : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive ? function () {
-      deactivatePaymentSchedule(autoPaySchedule);
+      deactivatePaymentSchedule(isPaymentPlan ? paymentPlanSchedule : autoPaySchedule, isPaymentPlan);
       toggleModal(false);
     } : navigateToSettings
   };
@@ -36081,7 +36103,7 @@ var AutopayModal = function AutopayModal(_ref) {
   return /*#__PURE__*/React__default.createElement(Modal$1, _extends({
     ModalLink: function ModalLink() {
       return buttonLinkType ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-        text: autoPayActive ? "Manage Autopay" : "Set Up Autopay",
+        text: autoPayActive ? "Manage ".concat(planType) : "Set Up ".concat(planType),
         variant: "tertiary",
         action: function action() {
           toggleModal(true);
@@ -36100,7 +36122,7 @@ var AutopayModal = function AutopayModal(_ref) {
         justify: isMobile ? "flex-start" : "flex-end",
         align: "center"
       }, /*#__PURE__*/React__default.createElement(AutopayOnIcon$1, null), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-        text: "Autopay On",
+        text: "".concat(planType, " On"),
         variant: "smallGhost",
         dataQa: "Autopay On",
         textExtraStyles: "font-size: 0.875rem; ",
@@ -36125,7 +36147,9 @@ var AmountModule = function AmountModule(_ref) {
       isMobile = _ref.isMobile,
       deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
       navigateToSettings = _ref.navigateToSettings,
-      autoPaySchedule = _ref.autoPaySchedule;
+      autoPaySchedule = _ref.autoPaySchedule,
+      paymentPlanSchedule = _ref.paymentPlanSchedule,
+      isPaymentPlan = _ref.isPaymentPlan;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -36150,7 +36174,9 @@ var AmountModule = function AmountModule(_ref) {
     modalOpen: modalOpen,
     navigateToSettings: navigateToSettings,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
-    isMobile: isMobile
+    isMobile: isMobile,
+    paymentPlanSchedule: paymentPlanSchedule,
+    isPaymentPlan: isPaymentPlan
   })));
 };
 
@@ -36164,7 +36190,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
       handleAutopayAction = _ref.handleAutopayAction,
       deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
       navigateToSettings = _ref.navigateToSettings,
-      autoPaySchedule = _ref.autoPaySchedule;
+      autoPaySchedule = _ref.autoPaySchedule,
+      paymentPlanSchedule = _ref.paymentPlanSchedule,
+      isPaymentPlan = _ref.isPaymentPlan;
+  var planType = isPaymentPlan ? "Payment Plan" : "Autopay";
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -36216,7 +36245,9 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     isMobile: isMobile,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     navigateToSettings: navigateToSettings,
-    autoPaySchedule: autoPaySchedule
+    autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
+    isPaymentPlan: isPaymentPlan
   }))), /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "16px" : "0"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -36237,7 +36268,7 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     extraStyles: isMobile && "flex-grow: 1;"
   }, autoPayAvailable && !autoPayEnabled ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "tertiary",
-    text: "Set Up Autopay",
+    text: "Set Up ".concat(planType),
     action: function action() {
       setDetailedObligation(obligations, config);
       handleAutopayAction();
@@ -36252,7 +36283,9 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
     navigateToSettings: navigateToSettings,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     buttonLinkType: true,
-    isMobile: isMobile
+    isMobile: isMobile,
+    paymentPlanSchedule: paymentPlanSchedule,
+    isPaymentPlan: isPaymentPlan
   })), !isMobile && /*#__PURE__*/React__default.createElement(Box, {
     padding: isMobile ? "0 0 0 8px" : "8px",
     extraStyles: isMobile && "flex-grow: 1;"
@@ -36289,8 +36322,10 @@ var Obligation = function Obligation(_ref) {
       handleAutopayAction = _ref.handleAutopayAction,
       deactivatePaymentSchedule = _ref.deactivatePaymentSchedule,
       autoPaySchedule = _ref.autoPaySchedule,
+      paymentPlanSchedule = _ref.paymentPlanSchedule,
       navigateToSettings = _ref.navigateToSettings,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      isPaymentPlan = _ref.isPaymentPlan;
   var obligation = obligations[0];
   var customAttributes = obligation.customAttributes;
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -36334,7 +36369,9 @@ var Obligation = function Obligation(_ref) {
     isMobile: isMobile,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     navigateToSettings: navigateToSettings,
-    autoPaySchedule: autoPaySchedule
+    autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
+    isPaymentPlan: isPaymentPlan
   }))), !isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -36342,10 +36379,12 @@ var Obligation = function Obligation(_ref) {
     handleAutopayAction: handleAutopayAction,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
     navigateToSettings: navigateToSettings,
     config: config,
     actions: actions,
-    isMobile: isMobile
+    isMobile: isMobile,
+    isPaymentPlan: isPaymentPlan
   }))), isMobile && /*#__PURE__*/React__default.createElement(PaymentDetailsActions, {
     obligations: obligations,
     autoPayEnabled: autoPayEnabled,
@@ -36353,10 +36392,12 @@ var Obligation = function Obligation(_ref) {
     handleAutopayAction: handleAutopayAction,
     deactivatePaymentSchedule: deactivatePaymentSchedule,
     autoPaySchedule: autoPaySchedule,
+    paymentPlanSchedule: paymentPlanSchedule,
     navigateToSettings: navigateToSettings,
     config: config,
     actions: actions,
-    isMobile: isMobile
+    isMobile: isMobile,
+    isPaymentPlan: isPaymentPlan
   }));
 };
 
@@ -36670,7 +36711,6 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
     label: "Subtotal",
     amount: displayCurrency(subtotal)
   }), feeElems), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
-    as: "h2",
     variant: themeValues.labeledAmountTotal,
     label: "Total",
     amount: displayCurrency(total)
@@ -36792,11 +36832,9 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     justify: "space-between",
     align: "center"
   }, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h5",
-    weight: "700",
-    as: "h1"
+    variant: "h6",
+    weight: "700"
   }, titleText), displayCurrency(total))) : /*#__PURE__*/React__default.createElement(Heading$1, {
-    as: "h1",
     variant: "h3",
     weight: "700",
     margin: "1rem 0 0 0"
@@ -37458,8 +37496,7 @@ var RadioSection = function RadioSection(_ref) {
         src: icon.img,
         key: icon.img,
         fade: !icon.enabled,
-        isMobile: isMobile,
-        alt: icon.altText
+        isMobile: isMobile
       });
     })))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
       initial: false