@splunk/react-ui 5.0.0-beta.2 → 5.0.0-beta.4

package/Calendar.js

@@ -24,11 +24,11 @@
     /******/    (() => {
         /******/ // define getter functions for harmony exports
         /******/ e.d = (a, r) => {
-            /******/ for (var t in r) {
-                /******/ if (e.o(r, t) && !e.o(a, t)) {
-                    /******/ Object.defineProperty(a, t, {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(a, n)) {
+                    /******/ Object.defineProperty(a, n, {
                         enumerable: true,
-                        get: r[t]
+                        get: r[n]
                     });
                     /******/                }
                 /******/            }
@@ -61,125 +61,101 @@
         e.r(a);
     // EXPORTS
         e.d(a, {
-        calendarActiveSelector: () => /* reexport */ Me,
-        default: () => /* reexport */ Oe,
-        focusActiveDay: () => /* reexport */ Ce
+        calendarActiveSelector: () => /* reexport */ de,
+        default: () => /* reexport */ pe,
+        focusActiveDay: () => /* reexport */ ye
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
-    var t =  e.n(r);
+    var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const n = require("prop-types");
-    var l =  e.n(n);
+    const t = require("prop-types");
+    var l =  e.n(t);
     // CONCATENATED MODULE: external "moment"
     const o = require("moment");
     var i =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const c = require("@splunk/ui-utils/id");
-    // CONCATENATED MODULE: external "lodash/times"
-    const u = require("lodash/times");
-    var s =  e.n(u);
+    const u = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "styled-components"
+    const c = require("styled-components");
+    var d =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const d = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const v = require("@splunk/ui-utils/keyboard");
+    const s = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/Calendar/CalendarStyles.ts
+    var v = d().div.withConfig({
+        displayName: "CalendarStyles__Styled",
+        componentId: "sc-18925wt-0"
+    })([ "", ";grid-row-gap:", ";padding:", ";" ], s.mixins.reset("grid"), s.variables.spacingXSmall, s.variables.spacingLarge);
+    // CONCATENATED MODULE: external "lodash/times"
+    const f = require("lodash/times");
+    var y =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const f = require("@splunk/react-ui/ScreenReaderContent");
-    var p =  e.n(f);
-    // CONCATENATED MODULE: external "styled-components"
-    const y = require("styled-components");
-    var Y =  e.n(y);
+    const Y = require("@splunk/react-ui/ScreenReaderContent");
+    var p =  e.n(Y);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
+    const g = require("@splunk/ui-utils/keyboard");
+    // CONCATENATED MODULE: ./src/Calendar/DateGridStyles.ts
+    var b = d().div.withConfig({
+        displayName: "DateGridStyles__Styled",
+        componentId: "sc-7cb7ui-0"
+    })([ "", ";grid-template-columns:repeat(7,min-content);grid-row-gap:", ";" ], s.mixins.reset("grid"), s.variables.spacingXSmall);
+    var h = d().div.withConfig({
+        displayName: "DateGridStyles__StyledWeekday",
+        componentId: "sc-7cb7ui-1"
+    })([ "", ";text-align:center;" ], s.mixins.typography("smallBody"));
     // CONCATENATED MODULE: ./src/Calendar/DayStyles.ts
-    /* Element used to prevent vertical shift on firefox when the font-weight is increased with $selected */
-    var h = Y().div.withConfig({
-        displayName: "DayStyles__StyledValue",
+    var m = d().div.withConfig({
+        displayName: "DayStyles__Styled",
         componentId: "sc-1nryhyt-0"
-    })([ "left:0;line-height:", ";position:absolute;top:0;width:100%;" ], (0, d.pick)({
-        enterprise: "2em",
-        prisma: "36px "
-    }));
-    var m = Y().div.withConfig({
-        displayName: "DayStyles__StyledInner",
-        componentId: "sc-1nryhyt-1"
-    })([ "border:", ";border-radius:", ";color:", ";height:", ";position:relative;text-align:center;width:", ";" ], (0, 
-    d.pick)({
-        enterprise: "1px solid transparent",
-        prisma: "none"
-    }), (0, d.pick)({
-        enterprise: d.variables.borderRadius,
-        prisma: "50%"
-    }), (0, d.pick)({
-        enterprise: {
-            light: d.variables.gray45,
-            dark: d.variables.gray98
-        },
-        prisma: d.variables.contentColorActive
-    }), (0, d.pick)({
-        enterprise: "2em",
-        prisma: "36px "
-    }), (0, d.pick)({
-        enterprise: "calc(2em - 2px)",
-        prisma: "36px"
-    }));
-    var b = Y().td.withConfig({
-        displayName: "DayStyles__StyledCell",
-        componentId: "sc-1nryhyt-2"
-    })([ "", ";cursor:pointer;", ";", ";" ], d.mixins.reset("table-cell"), (0, d.pickVariant)("$today", {
-        true: {
-            enterprise: (0, y.css)([ "& > ", "{background-color:", ";}&:focus{& > ", "{box-shadow:", ";}}" ], /* sc-sel */ m, (0, 
-            d.pick)({
-                light: d.variables.gray92,
-                dark: d.variables.gray45
-            }), /* sc-sel */ m, d.variables.focusShadow),
-            prisma: (0, y.css)([ "& > ", "{box-shadow:inset 0 0 0 1px ", ";}&:focus{& > ", "{box-shadow:inset 0 0 0 1px ", ",", ";}}" ], /* sc-sel */ m, d.variables.interactiveColorBorder, /* sc-sel */ m, d.variables.interactiveColorBorder, d.variables.focusShadow)
-        },
-        false: (0, y.css)([ "&:focus{& > ", "{box-shadow:", ";}}" ], /* sc-sel */ m, d.variables.focusShadow)
-    }), (0, d.pickVariant)("$selected", {
-        true: (0, d.pick)({
-            enterprise: (0, y.css)([ "& > ", "{border-color:", ";}" ], /* sc-sel */ m, d.variables.contentColorAccent),
-            prisma: (0, y.css)([ "& > ", "{background-color:", ";font-weight:", ";}" ], /* sc-sel */ m, d.variables.interactiveColorOverlaySelected, d.variables.fontWeightBold)
-        }),
-        false: (0, d.pick)({
-            enterprise: (0, y.css)([ "&:hover{& > ", "{background-color:", ";color:", ";}}" ], /* sc-sel */ m, d.variables.backgroundColorHover, d.variables.contentColorLink),
-            prisma: (0, y.css)([ "&:hover{& > ", "{background-color:", ";}}" ], /* sc-sel */ m, d.variables.interactiveColorOverlayHover)
-        })
+    })([ "", " width:", ";height:", ";align-items:center;justify-content:center;border:1px solid transparent;border-radius:", ";color:", ";cursor:pointer;", " ", " &:focus{box-shadow:", ";font-weight:", ";outline:none;z-index:0;}&:hover{background-color:", ";color:", ";}", "" ], s.mixins.reset("flex"), s.variables.inputHeight, s.variables.inputHeight, s.variables.borderRadius, s.variables.contentColorActive, (function(e) {
+        var a = e.$dayOfWeek;
+        // We need the + 1 here since the dayOfWeek goes from 0-6 (Sun-Sat) but grid-column values go from 1-7.
+        return (0, c.css)([ "grid-column:calc(", " + 1);" ], a);
+    }), (function(e) {
+        var a = e.$today;
+        return a && (0, c.css)([ "border:1px solid ", ";" ], s.variables.borderColor);
+    }), s.variables.focusShadow, s.variables.fontWeightBold, s.variables.interactiveColorOverlayHover, s.variables.contentColorAccent, (function(e) {
+        var a = e.$selected;
+        return a && (0, c.css)([ "border:1px solid ", ";font-weight:", ";background-color:", ";&:hover{background-color:", ";}" ], s.variables.contentColorAccent, s.variables.fontWeightBold, s.variables.interactiveColorOverlaySelected, s.mixins.overlayColors(s.variables.interactiveColorOverlaySelected, s.variables.interactiveColorOverlayHover));
     }));
     // CONCATENATED MODULE: ./src/Calendar/Day.tsx
-    function g() {
-        return g = Object.assign ? Object.assign.bind() : function(e) {
+    function D() {
+        return D = Object.assign ? Object.assign.bind() : function(e) {
             for (var a = 1; a < arguments.length; a++) {
                 var r = arguments[a];
-                for (var t in r) {
-                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                 }
             }
             return e;
-        }, g.apply(null, arguments);
+        }, D.apply(null, arguments);
     }
     function M(e, a) {
         if (null == e) return {};
-        var r, t, n = D(e, a);
+        var r, n, t = C(e, a);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < l.length; t++) {
-                r = l[t], a.includes(r) || {}.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
+            for (n = 0; n < l.length; n++) {
+                r = l[n], a.includes(r) || {}.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
             }
         }
-        return n;
+        return t;
     }
-    function D(e, a) {
+    function C(e, a) {
         if (null == e) return {};
         var r = {};
-        for (var t in e) {
-            if ({}.hasOwnProperty.call(e, t)) {
-                if (a.includes(t)) continue;
-                r[t] = e[t];
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (a.includes(n)) continue;
+                r[n] = e[n];
             }
         }
         return r;
     }
-    var k = {
+    var O = {
         active: l().bool,
+        /** @private. */
+        dayOfWeek: l().number,
         locale: l().string,
         onClick: l().func,
         onKeydown: l().func,
@@ -187,98 +163,73 @@
         today: l().bool,
         value: l().string
     };
-    function w(e) {
-        var a = e.active, n = a === void 0 ? false : a, l = e.locale, o = l === void 0 ? "en_US" : l, c = e.onClick, u = e.onKeyDown, s = e.selected, d = s === void 0 ? false : s, v = e.today, f = v === void 0 ? false : v, p = e.value, y = M(e, [ "active", "locale", "onClick", "onKeyDown", "selected", "today", "value" ]);
-        var Y = (0, r.useCallback)((function(e) {
+    function k(e) {
+        var a = e.active, t = a === void 0 ? false : a, l = e.dayOfWeek, o = e.locale, u = o === void 0 ? "en_US" : o, c = e.onClick, d = e.onKeyDown, s = e.selected, v = s === void 0 ? false : s, f = e.today, y = f === void 0 ? false : f, Y = e.value, p = M(e, [ "active", "dayOfWeek", "locale", "onClick", "onKeyDown", "selected", "today", "value" ]);
+        var g = (0, r.useCallback)((function(e) {
             e.preventDefault();
             c === null || c === void 0 ? void 0 : c(e, {
-                value: p
+                value: Y
             });
-        }), [ c, p ]);
-        var D = (0, r.useCallback)((function(e) {
+        }), [ c, Y ]);
+        var b = (0, r.useCallback)((function(e) {
             e.preventDefault();
-            u === null || u === void 0 ? void 0 : u(e, {
-                value: p
+            d === null || d === void 0 ? void 0 : d(e, {
+                value: Y
             });
-        }), [ u, p ]);
-        var k = p && i()(p, "YYYY-MM-DD", o).format("D");
+        }), [ d, Y ]);
+        var h = Y && i()(Y, "YYYY-MM-DD", u).format("D");
         
-        return t().createElement(b, g({
-            tabIndex: n ? 0 : -1,
-            "aria-selected": d,
-            "data-test-day": k,
+        return n().createElement(m, D({
+            tabIndex: t ? 0 : -1,
+            "aria-selected": v,
+            "data-test-day": h,
             "data-test": "day-of-month",
-            "data-active-day": n,
-            "data-is-today": f,
-            onClick: Y,
-            onKeyDown: D,
-            $today: f,
-            $selected: d
-        }, y),  t().createElement(m, null,  t().createElement(h, null, k)));
+            "data-active-day": t,
+            "data-is-today": y,
+            onClick: g,
+            onKeyDown: b,
+            $dayOfWeek: l,
+            $today: y,
+            $selected: v
+        }, p), h);
     }
-    w.propTypes = k;
-    /* harmony default export */    const C = w;
-    // CONCATENATED MODULE: ./src/Calendar/DateTableStyles.ts
-    var S = Y().table.withConfig({
-        displayName: "DateTableStyles__Styled",
-        componentId: "sc-1lbrjq0-0"
-    })([ "", ";table-layout:fixed;border-spacing:", ";width:", ";margin:", ";" ], d.mixins.reset("table"), (0, 
-    d.pick)({
-        enterprise: "3px",
-        prisma: d.variables.spacingSmall
-    }), (0, d.pick)({
-        enterprise: "100%",
-        prisma: "calc(100% + 16px)"
-    }), (0, d.pick)({
-        enterprise: "0",
-        prisma: "-8px"
-    }));
-    var O = Y().th.withConfig({
-        displayName: "DateTableStyles__StyledTableHeader",
-        componentId: "sc-1lbrjq0-1"
-    })([ "", ";text-align:center;padding-bottom:", ";color:", ";font-size:", ";" ], d.mixins.reset("table-cell"), (0, 
-    d.pick)({
-        enterprise: "2px",
-        prisma: d.variables.spacingXSmall
-    }), d.variables.contentColorMuted, (0, d.pick)({
-        enterprise: d.variables.fontSizeSmall,
-        prisma: d.variables.fontSize
-    }));
-    // CONCATENATED MODULE: ./src/Calendar/DateTable.tsx
-    function x() {
-        return x = Object.assign ? Object.assign.bind() : function(e) {
+    k.propTypes = O;
+    /* harmony default export */    const w = k;
+    // CONCATENATED MODULE: ./src/Calendar/DateGrid.tsx
+    function S() {
+        return S = Object.assign ? Object.assign.bind() : function(e) {
             for (var a = 1; a < arguments.length; a++) {
                 var r = arguments[a];
-                for (var t in r) {
-                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                 }
             }
             return e;
-        }, x.apply(null, arguments);
+        }, S.apply(null, arguments);
     }
-    function E(e, a) {
+    function I(e, a) {
         if (null == e) return {};
-        var r, t, n = I(e, a);
+        var r, n, t = j(e, a);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < l.length; t++) {
-                r = l[t], a.includes(r) || {}.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
+            for (n = 0; n < l.length; n++) {
+                r = l[n], a.includes(r) || {}.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
             }
         }
-        return n;
+        return t;
     }
-    function I(e, a) {
+    function j(e, a) {
         if (null == e) return {};
         var r = {};
-        for (var t in e) {
-            if ({}.hasOwnProperty.call(e, t)) {
-                if (a.includes(t)) continue;
-                r[t] = e[t];
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (a.includes(n)) continue;
+                r[n] = e[n];
             }
         }
         return r;
     }
-    var _ = {
+    var E = {
         displayValue: l().string.isRequired,
         highlightToday: l().bool,
         labelledBy: l().string,
@@ -288,153 +239,130 @@
         selectedValue: l().string.isRequired,
         todayValue: l().string
     };
-    function j(e) {
-        return s()(e, (function(e) {
-            
-            return t().createElement("td", {
-                key: "".concat(e)
-            });
-        }));
-    }
-    function q(e) {
-        var a = e.displayValue, r = e.endDate, n = e.highlightToday, l = e.locale, o = e.onChange, c = e.onKeyDown, u = e.selectedDate, s = e.selectedValue, d = e.startDate, v = e.todayValue;
-        var f = i()(d).locale(l).startOf("month");
-        var p = [];
+    function _(e) {
+        var a = e.displayValue, r = e.endDate, t = e.highlightToday, l = e.locale, o = e.onChange, u = e.onKeyDown, c = e.selectedDate, d = e.selectedValue, s = e.startDate, v = e.todayValue;
+        var f = i()(s).locale(l).startOf("month");
+        var y = [];
         while (f.isSameOrBefore(r)) {
-            var y = f.format("YYYY-MM-DD");
-            var Y = y === v;
-            var h = y === s;
-            var m = y === a;
-            p.push( t().createElement(C, {
-                key: y,
+            var Y = f.format("YYYY-MM-DD");
+            var p = Y === v;
+            var g = Y === d;
+            var b = Y === a;
+            var h = Number(f.format("e"));
+            y.push( n().createElement(w, {
+                key: Y,
                 locale: l,
                 onClick: o,
-                onKeyDown: c,
-                active: u ? m : Y,
-                today: n && Y,
-                value: y,
-                selected: h
+                onKeyDown: u,
+                active: c ? b : p,
+                today: t && p,
+                value: Y,
+                selected: g,
+                dayOfWeek: h
             }));
             f.add(1, "day");
         }
-        return p;
+        return y;
     }
-    function T(e) {
-        return e.reduce((function(e, a, r) {
-            var t = Math.floor(r / 7);
-            e[t].push(a);
-            return e;
-        }), s()(7, (function() {
-            return [];
-        }))).map((function(e, a) {
-            
-            // eslint-disable-next-line react/no-array-index-key
-            return t().createElement("tr", {
-                key: "$week-".concat(a)
-            }, e);
-        }));
-    }
-    function P(e, a) {
-        
-        return t().createElement("thead", null,  t().createElement("tr", null, s()(7, (function(r) {
-            var n = i()().locale(e).weekday(r).format(a);
+    function q(e, a) {
+        return y()(7, (function(r) {
+            var t = i()().locale(e).weekday(r).format(a);
             var l = i()().locale(e).weekday(r).format("dddd");
             
-            return t().createElement(O, {
-                key: n
-            },  t().createElement(p(), null, l),  t().createElement("span", {
+            return n().createElement(h, {
+                key: t
+            },  n().createElement(p(), null, l),  n().createElement("span", {
                 "aria-hidden": true
-            }, n));
-        }))));
+            }, t));
+        }));
     }
-    function V(e) {
-        var a = e.displayValue, r = e.highlightToday, n = r === void 0 ? false : r, l = e.labelledBy, o = e.locale, c = o === void 0 ? "en_US" : o, u = e.onChange, s = e.onInternalChange, f = e.selectedValue, p = e.todayValue, y = E(e, [ "displayValue", "highlightToday", "labelledBy", "locale", "onChange", "onInternalChange", "selectedValue", "todayValue" ]);
-        var Y = (0, d.useSplunkTheme)(), h = Y.family;
-        var m = h === "prisma" ? "dd" : "ddd";
-        var b = i()(a, "YYYY-MM-DD", c);
-        var g = i()(f, "YYYY-MM-DD", c);
-        var M = i()(b).startOf("month");
-        var D = i()(b).endOf("month").startOf("day");
-        var k = function e(a, r) {
+    function P(e) {
+        var a = e.displayValue, r = e.highlightToday, t = r === void 0 ? false : r, l = e.labelledBy, o = e.locale, u = o === void 0 ? "en_US" : o, c = e.onChange, d = e.onInternalChange, s = e.selectedValue, v = e.todayValue, f = I(e, [ "displayValue", "highlightToday", "labelledBy", "locale", "onChange", "onInternalChange", "selectedValue", "todayValue" ]);
+        var y = "dd";
+        var Y = i()(a, "YYYY-MM-DD", u);
+        var p = i()(s, "YYYY-MM-DD", u);
+        var h = i()(Y).startOf("month");
+        var m = i()(Y).endOf("month").startOf("day");
+        var D = function e(a, r) {
             a.preventDefault();
-            u === null || u === void 0 ? void 0 : u(a, r);
+            c === null || c === void 0 ? void 0 : c(a, r);
         };
-        var w = function e(a, r) {
-            var t = r.value;
+        var M = function e(a, r) {
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").add(-1, "d").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").add(-1, "d").format("YYYY-MM-DD")
             });
         };
         var C = function e(a, r) {
-            var t = r.value;
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").add(1, "d").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").add(1, "d").format("YYYY-MM-DD")
             });
         };
         var O = function e(a, r) {
-            var t = r.value;
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").add(-1, "w").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").add(-1, "w").format("YYYY-MM-DD")
             });
         };
-        var I = function e(a, r) {
-            var t = r.value;
+        var k = function e(a, r) {
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").add(1, "w").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").add(1, "w").format("YYYY-MM-DD")
             });
         };
-        var _ = function e(a, r) {
-            var t = r.value;
+        var w = function e(a, r) {
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").add(-1, "M").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").add(-1, "M").format("YYYY-MM-DD")
             });
         };
-        var V = function e(a, r) {
-            var t = r.value;
+        var j = function e(a, r) {
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").add(1, "M").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").add(1, "M").format("YYYY-MM-DD")
             });
         };
-        var B = function e(a, r) {
-            var t = r.value;
+        var E = function e(a, r) {
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").add(-1, "y").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").add(-1, "y").format("YYYY-MM-DD")
             });
         };
-        var R = function e(a, r) {
-            var t = r.value;
+        var P = function e(a, r) {
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").add(1, "y").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").add(1, "y").format("YYYY-MM-DD")
             });
         };
-        var A = function e(a, r) {
-            var t = r.value;
+        var x = function e(a, r) {
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").startOf("week").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").startOf("week").format("YYYY-MM-DD")
             });
         };
-        var N = function e(a, r) {
-            var t = r.value;
+        var V = function e(a, r) {
+            var n = r.value;
             a.preventDefault();
-            s === null || s === void 0 ? void 0 : s(a, {
-                value: i()(t, "YYYY-MM-DD").endOf("week").format("YYYY-MM-DD")
+            d === null || d === void 0 ? void 0 : d(a, {
+                value: i()(n, "YYYY-MM-DD").endOf("week").format("YYYY-MM-DD")
             });
         };
-        var z = function e(a, r) {
-            var t = (0, v.keycode)(a.nativeEvent);
-            switch (t) {
+        var T = function e(a, r) {
+            var n = (0, g.keycode)(a.nativeEvent);
+            switch (n) {
               case "enter":
               case "space":
-                k(a, r);
+                D(a, r);
                 break;
 
               case "up":
@@ -442,11 +370,11 @@
                 break;
 
               case "down":
-                I(a, r);
+                k(a, r);
                 break;
 
               case "left":
-                w(a, r);
+                M(a, r);
                 break;
 
               case "right":
@@ -455,206 +383,163 @@
 
               case "page up":
                 if (a.shiftKey) {
-                    B(a, r);
+                    E(a, r);
                 } else {
-                    _(a, r);
+                    w(a, r);
                 }
                 break;
 
               case "page down":
                 if (a.shiftKey) {
-                    R(a, r);
+                    P(a, r);
                 } else {
-                    V(a, r);
+                    j(a, r);
                 }
                 break;
 
               case "home":
-                A(a, r);
+                x(a, r);
                 break;
 
               case "end":
-                N(a, r);
+                V(a, r);
                 break;
 
               default:
  // do nothing
                         }
         };
-        var K = j(M.format("e")).concat(q({
-            displayValue: a,
-            endDate: D,
-            highlightToday: n,
-            locale: c,
-            onChange: u,
-            onKeyDown: z,
-            selectedDate: g,
-            selectedValue: f,
-            startDate: M,
-            todayValue: p
-        })).concat(j(6 - D.format("e")));
         
-        return t().createElement(S, x({
+        return n().createElement(b, S({
             role: "grid",
             "aria-labelledby": l
-        }, y), P(c, m),  t().createElement("tbody", null, T(K)));
+        }, f), q(u, y), _({
+            displayValue: a,
+            endDate: m,
+            highlightToday: t,
+            locale: u,
+            onChange: c,
+            onKeyDown: T,
+            selectedDate: p,
+            selectedValue: s,
+            startDate: h,
+            todayValue: v
+        }));
     }
-    V.propTypes = _;
-    /* harmony default export */    const B = V;
+    P.propTypes = E;
+    /* harmony default export */    const x = P;
     // CONCATENATED MODULE: external "lodash/omit"
-    const R = require("lodash/omit");
-    var A =  e.n(R);
+    const V = require("lodash/omit");
+    var T =  e.n(V);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronLeft"
-    const N = require("@splunk/react-icons/ChevronLeft");
-    var z =  e.n(N);
+    const B = require("@splunk/react-icons/ChevronLeft");
+    var A =  e.n(B);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const K = require("@splunk/react-icons/ChevronRight");
-    var H =  e.n(K);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronLeft"
-    const $ = require("@splunk/react-icons/enterprise/ChevronLeft");
-    var L =  e.n($);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const U = require("@splunk/react-icons/enterprise/ChevronRight");
-    var W =  e.n(U);
+    const R = require("@splunk/react-icons/ChevronRight");
+    var K =  e.n(R);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const X = require("@splunk/ui-utils/i18n");
+    const N = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const F = require("@splunk/react-ui/Button");
-    var G =  e.n(F);
+    const W = require("@splunk/react-ui/Button");
+    var H =  e.n(W);
     // CONCATENATED MODULE: ./src/Calendar/MonthHeaderStyles.ts
-    var J = Y().div.withConfig({
-        displayName: "MonthHeaderStyles__StyledBox",
+    var $ = d().div.withConfig({
+        displayName: "MonthHeaderStyles__Styled",
         componentId: "sc-18bmbh7-0"
-    })([ "display:flex;align-items:center;position:relative;padding:0 2px;margin-bottom:", ";" ], d.variables.spacingSmall);
-    var Q = Y().span.withConfig({
+    })([ "", ";grid-template-columns:min-content 1fr min-content;align-items:center;" ], s.mixins.reset("grid"));
+    var U = d().span.withConfig({
         displayName: "MonthHeaderStyles__StyledHeading",
         componentId: "sc-18bmbh7-1"
-    })([ "", " display:block;text-align:center;flex:1 0 1px;" ], d.mixins.typography("title2"));
-    var Z = Y()(G()).withConfig({
+    })([ "", " text-align:center;" ], s.mixins.typography("title4"));
+    var z = d()(H()).withConfig({
         displayName: "MonthHeaderStyles__StyledButton",
         componentId: "sc-18bmbh7-2"
-    })([ "flex:0 0 auto;" ]);
+    })([ "border:none;" ]);
     // CONCATENATED MODULE: ./src/Calendar/MonthHeader.tsx
-    function ee(e, a) {
+    function L(e, a) {
         if (null == e) return {};
-        var r, t, n = ae(e, a);
+        var r, n, t = G(e, a);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < l.length; t++) {
-                r = l[t], a.includes(r) || {}.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
+            for (n = 0; n < l.length; n++) {
+                r = l[n], a.includes(r) || {}.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
             }
         }
-        return n;
+        return t;
     }
-    function ae(e, a) {
+    function G(e, a) {
         if (null == e) return {};
         var r = {};
-        for (var t in e) {
-            if ({}.hasOwnProperty.call(e, t)) {
-                if (a.includes(t)) continue;
-                r[t] = e[t];
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (a.includes(n)) continue;
+                r[n] = e[n];
             }
         }
         return r;
     }
-    var re = {
+    var X = {
         headingId: l().string,
         locale: l().string,
         onChange: l().func,
         value: l().string.isRequired
     };
-    var te = {
-        default: "MMMM YYYY",
-        ja: "YYYY年MMM",
-        ko: "YYYY년 MMMM",
-        "zh-cn": "YYYY年MMM",
-        "zh-tw": "YYYY年MMM"
-    };
-    var ne = {
+    var F = {
         default: "MMM YYYY",
         ja: "YYYY年 MMM",
         ko: "YYYY년 MMMM",
         "zh-cn": "YYYY年 MMM",
         "zh-tw": "YYYY年 MMM"
     };
-    function le(e) {
-        var a = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-        var r = e.toLowerCase().replace("_", "-");
-        return a ? ne[r] || 
-        // full locale match
-        ne[r.substr(0, 2)] || 
-        // language match
-        ne["default"] : te[r] || 
+    function J(e) {
+        var a = e.toLowerCase().replace("_", "-");
+        return F[a] || 
         // full locale match
-        te[r.substr(0, 2)] || 
+        F[a.substr(0, 2)] || 
         // language match
-        te["default"];
- // default
-        }
-    function oe(e) {
-        var a = e.headingId, n = e.locale, l = n === void 0 ? "en_US" : n, o = e.onChange, c = e.value, u = ee(e, [ "headingId", "locale", "onChange", "value" ]);
-        var s = (0, d.useSplunkTheme)(), v = s.isEnterprise, f = s.isPrisma, p = s.density;
-        var y = (0, r.useCallback)((function(e, a) {
+        F["default"];
+    }
+    function Q(e) {
+        var a = e.headingId, t = e.locale, l = t === void 0 ? "en_US" : t, o = e.onChange, u = e.value, c = L(e, [ "headingId", "locale", "onChange", "value" ]);
+        var d = (0, r.useCallback)((function(e, a) {
             e.stopPropagation();
-            var r = i()(c, "YYYY-MM-DD").add(a, "M").format("YYYY-MM-DD");
+            var r = i()(u, "YYYY-MM-DD").add(a, "M").format("YYYY-MM-DD");
             o === null || o === void 0 ? void 0 : o(e, {
                 value: r
             });
-        }), [ o, c ]);
-        var Y = (0, r.useCallback)((function(e) {
-            y(e, -1);
-        }), [ y ]);
-        var h = (0, r.useCallback)((function(e) {
-            y(e, 1);
-        }), [ y ]);
-        var m = i()(c, "YYYY-MM-DD", l);
-        var b = m.format(le(l, f));
-        var g = (0, X._)("Previous month");
-        var M = (0, X._)("Next month");
+        }), [ o, u ]);
+        var s = (0, r.useCallback)((function(e) {
+            d(e, -1);
+        }), [ d ]);
+        var v = (0, r.useCallback)((function(e) {
+            d(e, 1);
+        }), [ d ]);
+        var f = i()(u, "YYYY-MM-DD", l);
+        var y = f.format(J(l));
+        var Y = (0, N._)("Previous month");
+        var p = (0, N._)("Next month");
         
-        return t().createElement(d.SplunkThemeProvider, {
-            density: f ? "comfortable" : p
-        },  t().createElement(J, A()(u, "onChange"),  t().createElement(Z, {
-            appearance: "subtle",
-            icon: v ?  t().createElement(L(), {
-                hideDefaultTooltip: true,
-                screenReaderText: g,
-                size: 1
-            }) :  t().createElement(z(), {
-                "aria-label": g,
-                height: "24",
-                width: "24"
+        return n().createElement($, T()(c, "onChange"),  n().createElement(z, {
+            appearance: "secondary",
+            icon:  n().createElement(A(), {
+                "aria-label": Y
             }),
             "data-test": "previous-month",
-            onClick: Y
-        }),  t().createElement(Q, {
+            onClick: s
+        }),  n().createElement(U, {
             id: a,
             "data-test": "header-label"
-        }, b),  t().createElement(Z, {
-            appearance: "subtle",
-            icon: v ?  t().createElement(W(), {
-                hideDefaultTooltip: true,
-                screenReaderText: M,
-                size: 1
-            }) :  t().createElement(H(), {
-                "aria-label": M,
-                height: "24",
-                width: "24"
+        }, y),  n().createElement(z, {
+            appearance: "secondary",
+            icon:  n().createElement(K(), {
+                "aria-label": p
             }),
             "data-test": "next-month",
-            onClick: h
-        })));
+            onClick: v
+        }));
     }
-    oe.propTypes = re;
-    /* harmony default export */    const ie = oe;
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const ce = require("@splunk/react-ui/Box");
-    var ue =  e.n(ce);
-    // CONCATENATED MODULE: ./src/Calendar/CalendarStyles.ts
-    var se = Y()(ue()).withConfig({
-        displayName: "CalendarStyles__StyledBox",
-        componentId: "sc-18925wt-0"
-    })([ "width:332px;padding:", ";" ], d.variables.spacingLarge);
+    Q.propTypes = X;
+    /* harmony default export */    const Z = Q;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -662,7 +547,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function de(e, a) {
+    function ee(e, a) {
         if (e) {
             if (typeof e === "function") {
                 e(a);
@@ -675,86 +560,86 @@
         }
     }
     // CONCATENATED MODULE: ./src/Calendar/Calendar.tsx
-    function ve() {
-        return ve = Object.assign ? Object.assign.bind() : function(e) {
+    function ae() {
+        return ae = Object.assign ? Object.assign.bind() : function(e) {
             for (var a = 1; a < arguments.length; a++) {
                 var r = arguments[a];
-                for (var t in r) {
-                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                 }
             }
             return e;
-        }, ve.apply(null, arguments);
+        }, ae.apply(null, arguments);
     }
-    function fe(e, a) {
-        return me(e) || he(e, a) || ye(e, a) || pe();
+    function re(e, a) {
+        return ie(e) || oe(e, a) || te(e, a) || ne();
     }
-    function pe() {
+    function ne() {
         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 ye(e, a) {
+    function te(e, a) {
         if (e) {
-            if ("string" == typeof e) return Ye(e, a);
+            if ("string" == typeof e) return le(e, a);
             var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? Ye(e, a) : void 0;
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? le(e, a) : void 0;
         }
     }
-    function Ye(e, a) {
+    function le(e, a) {
         (null == a || a > e.length) && (a = e.length);
-        for (var r = 0, t = Array(a); r < a; r++) {
-            t[r] = e[r];
+        for (var r = 0, n = Array(a); r < a; r++) {
+            n[r] = e[r];
         }
-        return t;
+        return n;
     }
-    function he(e, a) {
+    function oe(e, a) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
-            var t, n, l, o, i = [], c = !0, u = !1;
+            var n, t, l, o, i = [], u = !0, c = !1;
             try {
                 if (l = (r = r.call(e)).next, 0 === a) {
                     if (Object(r) !== r) return;
-                    c = !1;
-                } else for (;!(c = (t = l.call(r)).done) && (i.push(t.value), i.length !== a); c = !0) {
+                    u = !1;
+                } else for (;!(u = (n = l.call(r)).done) && (i.push(n.value), i.length !== a); u = !0) {
                 }
             } catch (e) {
-                u = !0, n = e;
+                c = !0, t = e;
             } finally {
                 try {
-                    if (!c && null != r["return"] && (o = r["return"](), Object(o) !== o)) return;
+                    if (!u && null != r["return"] && (o = r["return"](), Object(o) !== o)) return;
                 } finally {
-                    if (u) throw n;
+                    if (c) throw t;
                 }
             }
             return i;
         }
     }
-    function me(e) {
+    function ie(e) {
         if (Array.isArray(e)) return e;
     }
-    function be(e, a) {
+    function ue(e, a) {
         if (null == e) return {};
-        var r, t, n = ge(e, a);
+        var r, n, t = ce(e, a);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < l.length; t++) {
-                r = l[t], a.includes(r) || {}.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
+            for (n = 0; n < l.length; n++) {
+                r = l[n], a.includes(r) || {}.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
             }
         }
-        return n;
+        return t;
     }
-    function ge(e, a) {
+    function ce(e, a) {
         if (null == e) return {};
         var r = {};
-        for (var t in e) {
-            if ({}.hasOwnProperty.call(e, t)) {
-                if (a.includes(t)) continue;
-                r[t] = e[t];
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (a.includes(n)) continue;
+                r[n] = e[n];
             }
         }
         return r;
     }
-    var Me = '[data-active-day="true"]';
-    var De = {
+    var de = '[data-active-day="true"]';
+    var se = {
         describedBy: l().string,
         highlightToday: l().bool,
         labelledBy: l().string,
@@ -766,10 +651,10 @@
         value: l().string,
         elementRef: l().oneOfType([ l().func, l().object ])
     };
-    var ke = function e(a) {
+    var ve = function e(a) {
         return i()().locale(a).format("YYYY-MM-DD");
     };
-    var we = function e(a) {
+    var fe = function e(a) {
         if (!moment(a, "YYYY-MM-DD").isValid()) {
             return new Error("Invalid value prop ".concat(a, " passed to Calendar. value must be a string date formatted 'YYYY-MM-DD'."));
         }
@@ -777,26 +662,26 @@
     };
     /**
  * Place focus on the active day.
- */    var Ce = function e(a) {
-        var r = a === null || a === void 0 ? void 0 : a.querySelector(Me);
+ */    var ye = function e(a) {
+        var r = a === null || a === void 0 ? void 0 : a.querySelector(de);
         r === null || r === void 0 ? void 0 : r.focus();
     };
-    function Se(e) {
-        var a = e.describedBy, n = e.elementRef, l = e.highlightToday, o = e.labelledBy, u = e.locale, s = u === void 0 ? "en_US" : u, d = e.mockDate, v = e.onChange, f = e.required, p = e.value, y = p === void 0 ? i()().format("YYYY-MM-DD") : p, Y = be(e, [ "describedBy", "elementRef", "highlightToday", "labelledBy", "locale", "mockDate", "onChange", "required", "value" ]);
-        var h = (0, r.useState)(y), m = fe(h, 2), b = m[0], g = m[1];
-        var M = (0, r.useState)(d || ke(s)), D = fe(M, 2), k = D[0], w = D[1];
-        var C = (0, r.useState)(null), S = fe(C, 2), O = S[0], x = S[1];
-        var E = (0, r.useRef)((0, c.createDOMID)("header"));
-        var I = (0, r.useRef)();
+    function Ye(e) {
+        var a = e.describedBy, t = e.elementRef, l = e.highlightToday, o = e.labelledBy, c = e.locale, d = c === void 0 ? "en_US" : c, s = e.mockDate, f = e.onChange, y = e.required, Y = e.value, p = Y === void 0 ? i()().format("YYYY-MM-DD") : Y, g = ue(e, [ "describedBy", "elementRef", "highlightToday", "labelledBy", "locale", "mockDate", "onChange", "required", "value" ]);
+        var b = (0, r.useState)(p), h = re(b, 2), m = h[0], D = h[1];
+        var M = (0, r.useState)(s || ve(d)), C = re(M, 2), O = C[0], k = C[1];
+        var w = (0, r.useState)(null), S = re(w, 2), I = S[0], j = S[1];
+        var E = (0, r.useRef)((0, u.createDOMID)("header"));
+        var _ = (0, r.useRef)();
         (0, r.useEffect)((function() {
             if (false) {}
-        }), [ y ]);
+        }), [ p ]);
         (0, r.useEffect)((function() {
-            if (!d) {
+            if (!s) {
                 var e = setInterval((function() {
-                    var e = ke(s);
-                    if (e !== k) {
-                        w(e);
+                    var e = ve(d);
+                    if (e !== O) {
+                        k(e);
                     }
                 }), 1e3);
                 return function() {
@@ -806,53 +691,51 @@
                 };
             }
             return undefined;
-        }), [ s, d, k ]);
+        }), [ d, s, O ]);
         (0, r.useEffect)((function() {
-            if (O === "day") {
-                Ce(I.current);
+            if (I === "day") {
+                ye(_.current);
             }
-        }), [ b, O ]);
-        var _ = (0, r.useCallback)((function(e, a) {
+        }), [ m, I ]);
+        var q = (0, r.useCallback)((function(e, a) {
             var r = a.value;
-            g(r);
-            x("month");
+            D(r);
+            j("month");
         }), []);
-        var j = (0, r.useCallback)((function(e, a) {
+        var P = (0, r.useCallback)((function(e, a) {
             var r = a.value;
-            g(r);
-            x("day");
+            D(r);
+            j("day");
         }), []);
-        var q = (0, r.useCallback)((function(e) {
-            de(I, e);
-            de(n, e);
-        }), [ n ]);
+        var V = (0, r.useCallback)((function(e) {
+            ee(_, e);
+            ee(t, e);
+        }), [ t ]);
         
-        return t().createElement(se, ve({
-            inline: true,
+        return n().createElement(v, ae({
             "aria-labelledby": o,
             "aria-describedby": a,
-            "aria-required": f,
-            "data-test": "calendar"
-        }, Y, {
-            elementRef: q
-        }),  t().createElement(ie, {
+            "aria-required": y,
+            "data-test": "calendar",
+            ref: V
+        }, g),  n().createElement(Z, {
             headingId: E.current,
-            locale: s,
-            onChange: _,
-            value: b
-        }),  t().createElement(B, {
-            displayValue: b,
+            locale: d,
+            onChange: q,
+            value: m
+        }),  n().createElement(x, {
+            displayValue: m,
             highlightToday: l,
             labelledBy: E.current,
-            locale: s,
-            onChange: v,
-            onInternalChange: j,
-            selectedValue: y,
-            todayValue: k
+            locale: d,
+            onChange: f,
+            onInternalChange: P,
+            selectedValue: p,
+            todayValue: O
         }));
     }
-    Se.propTypes = De;
-    /* harmony default export */    const Oe = Se;
+    Ye.propTypes = se;
+    /* harmony default export */    const pe = Ye;
     // CONCATENATED MODULE: ./src/Calendar/index.ts
     module.exports = a;
     /******/})();