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

package/CHANGELOG.md

@@ -1,6 +1,34 @@
 Change Log
 ============
 
+4.43.0 - March 4, 2025
+----------
+New Features:
+* `Popover` supports a new `hideArrow` prop that controls whether or not to render the arrow pointing to the anchor (SUI-7061).
+    * Defaults to `false` in Enterprise and `true` in Prisma themes, maintaining existing behavior.
+* A new `PopoverProvider` component has been added that supports a `hideArrow` prop to control whether or not any components using `Popover` render the arrow pointing to the anchor (SUI-5262).
+    * This controls `Color`, `ComboBox`, `Dropdown`, `Select`, `Multiselect`, `Search`, `SplitButton`, and `Tooltip`.
+* `Paginator` supports a new `generatePageProps` prop for customizing pages and Prev/Next buttons (SUI-6991).
+* `Code` now supports `language` `plaintext` (including additional aliases `plain`, `text`, and `txt`) (SUI-7266).
+
+Bug Fixes:
+* `Select`'s `filter` no longer has `aria-owns` attribute when blurred (SUI-7208).
+* `Number` now correctly prevents multiple decimals (SUI-7234).
+* `Menu` and `TabBar` now correctly ignore keyboard navigation when command key is pressed (SUI-7115).
+* `Popover`'s arrow is no longer misaligned when using `pointTo` or `align="edge"` (SUI-7191).
+* `CollapsiblePanel` now correctly applies height when content includes image (SUI-7084).
+* `Code` no longer applies `tabIndex=0` to static (non-scrollable) content (SUI-7325).
+* `JSONTree` now expands or collapses non-root nodes when the `enter` key is pressed (SUI-7076).
+
+Typescript:
+* `MultiselectChangeHandler` type now includes optional `reason` property in callback data (SUI-7222).
+* `Message` now correctly handles whitespace around `Link` (SUI-6271).
+
+Docs:
+* Added missing documentation for `ComboBox`'s `inputId` prop (SUI-7090).
+Bug Fixes:
+* `Select`'s `filter` no longer has `aria-owns` attribute when blurred (SUI-7208).
+
 4.42.0 - February 5, 2025
 ----------
 New Features:
@@ -262,6 +290,7 @@ Bug Fixes:
 Deprecations:
 * `NavigationProvider`'s `prefix` prop has been deprecated and will be removed in the next major version. Use the `transformUrl` prop instead. (SUI-6239)
 
+
 4.29.0 - April 2, 2024
 ----------
 Bug Fixes:

package/CHANGELOG.v5.mdx

@@ -0,0 +1,195 @@
+Change Log
+============
+
+5.0.0-beta.2 - March 5, 2025
+----------
+API Changes:
+* `Popover` now defaults `hideArrow` to `false` in all themes (SUI-7061).
+* `Select` now supports `defaultPlacement` when `filter` is not set (SUI-7326).
+* `Card`'s `selected` prop has been deprecated. See migration guide for details (SUI-7292).
+* `Code`'s `indentChars` prop has been removed (SUI-5989).
+* `Color` no longer exports method `isValidHex`. Instead use `@splunk/ui-utils/color/isValidHexColor` (SUI-2552).
+* `RadioList`'s `direction` prop has been deprecated. See migration guide for details (SUI-7342).
+* `Dropdown` no longer supports a `focus` method. See migration guide for details (SUI-7364).
+* `ControlGroup` now defaults `labelPosition` to `top` (SUI-7331).
+
+Bug Fixes:
+* `Table`'s `actions` now correctly applies focus style in the `HeadCell`(SUI-7310).
+
+TypeScript:
+* `Select`'s type now matches component functionality by supporting the `repositionMode` prop (SUI-7326).
+
+5.0.0-beta.1 - February 20, 2025
+----------
+`react-ui@5.0.0` is a major release with significant design updates.
+* Many components have been updated to have similar appearance and behaviors across themes.
+* As a result of a unified approach to spacing and layout, layout changes are expected. See the migration guide for specific details and guidance.
+
+New Features:
+* `Avatar` is now available to use instead of `Monogram` and supports images (SUI-3227).
+* `CollapsiblePanel` now supports a new `appearance` prop with `"default"` and `"subtle"` values (SUI-5098).
+* `DefinitionList` can configure the separator character used to separate key-value pairs with the new `separatorCharacter` prop (SUI-5557).
+    * Enterprise themes no has a default value for the separator character (SUI-5557).
+* `Link` now supports a new `appearance` prop with `"default"` and `"inline"` values (SUI-6003).
+* `Markdown` uses `react-markdown` for rendering markdown content.
+    * `Markdown` supports rendering tables (SUI-5624).
+    * `Markdown` now can render heading levels 5 and 6.
+    * Blockquotes are now rendered by default
+    * All types for custom renderers have been adapted to match types of `react-markdown`.
+    * Renderers do not support `propTypes` due to an incompatibility with `react-markdown` types.
+* `Modal.Footer` supports a new prop `layout` with `"auto"`(default) and `"none"` values (SUI-6678).
+* `Modal` no longer closes when clicking outside (SUI-5898).
+* `Number` supports a new `onClick` prop (SUI-3418).
+* `Select` now has a consistent visual error design across themes (SUI-6432).
+* `Slider` supports new `thumbRef` prop to target the slider thumb element (SUI-7101).
+* `Switch` supports a new `toggleRef` prop to target the underlying toggle element (SUI-7101).
+* `TabBar.Tab` now generates a `tabId` automatically if `tabId` prop is not passed (SUI-7033).
+* `TabLayout.Panel`s support a new `inset` prop (default `true`) to control padding in the panel (SUI-5705).
+* `Text` now always displays the clear button when the `canClear` prop is present and a value is entered (SUI-6986).
+* `Typography`'s `lineHeight` supports a new scale: `"single"`, `"tight"`, `"snug"`, `
+* `WaitSpinner` now supports prop `size="large"` for Enterprise themes (SUI-6080)."comfortable"`, `"relaxed"`, `"spacious"`, `"normal"`.
+* New `Layout` component can be used to arrange components with standard spacing between them (SUI-6678).
+* New `Prose` component can be used to style content components for long-form text content (SUI-5504).
+
+API Changes:
+* `react` and `react-dom` peer dependencies are now `"^16.8.0 || ^17.0.0 || ^18.0.0"`.
+* Adopt `@splunk/themes@1.0.0`
+* `Paragraph`, `Heading`, and `List` no longer have margin outside their border box (SUI-5683).
+* Components that support the `inline` prop no longer add margin-left when a sibling to another `inline` element. See the migration guide for details. (SUI-6678).
+* `Button`, `Clickable`, `CollapsiblePanel`, and `Menu.Item` default behavior for the `disabled` prop is now `"dimmed"` (SUI-7200).
+    * The `disabled` prop supports a new `"disabled"` value.
+    * A new `data-test-disabled` test hook has been added for testing.
+
+* `Accordion`'s `inset` prop now defaults to `true`. Unified `Accordion`'s `inset` padding values to match `CollapsiblePanel` (SUI-2559).
+
+* `Button`'s `appearance` prop no longer supports the `"flat"`, `"pill"`, or `"toggle"` values (SUI-6561).
+* `Button`'s `selected` prop has been removed (SUI-6058).
+* `Button` no longer supports the `error` prop.
+
+* `Card` and `Card.Footer`'s `showBorder` prop has been removed (SUI-6577).
+
+* `Clickable`'s `NavigationProvider` `prefix` prop has been removed (SUI-7103).
+
+* `CollapsiblePanel`'s `inset` prop now defaults to `true` (SUI-5760).
+* `CollapsiblePanel`'s `onRequestClose` and `onRequestOpen` props have been removed. Use `onChange` instead (SUI-6226).
+* `CollapsiblePanel`'s `titleWithActions` prop has been removed. Use `actions` prop instead (SUI-6355).
+
+* `Color`'s `hideInput` prop now defaults to `false` in both Enterprise and Prisma themes, making the input field always visible by default (SUI-6459).
+* `Color`'s `defaultPalette` is now equal to the data viz static colors (SUI-6405).
+
+* `ComboBox`, `ControlGroup`, and `StaticContent`'s `size` prop has been removed (SUI-6400).
+
+* `Concertina` has been removed (SUI-5741).
+
+* `ControlGroup`'s label text is now left aligned in Enterprise theme when `labelPosition="left"` (SUI-6408).
+
+* `DefinitionList`'s `termWidth` prop now requires fully qualified style value as a string, eg. `"120px"` (SUI-5557).
+* `DefinitionList.Term` and `DefinitionList.Description` now require the `children` prop.
+
+* `Dropdown`'s `toggle` prop no longer accepts React class components or functional components without `React.forwardRef` (SUI-3532).
+
+* `Heading`'s `level='s'` and `level='ss'` have been removed. See migration guide for details (SUI-5583).
+* `Heading` now requires the `children` prop (SUI-5665).
+
+* `JSONTree`'s `expandChildren="withShiftModifier"` value has been removed. Use the `expandChildrenOnShiftKey` prop instead (SUI-5808).
+* `JSONTree`'s `expandChildrenOnShiftKey` prop now defaults to `true` (SUI-5841).
+* `JSONTree`'s `expandChildren` prop has been renamed to `defaultExpanded` and no longer affects node expansion behavior after the initial render (SUI-5813).
+
+* `Link` now renders an `a` element instead of a `button` element when disabled (SUI-6007).
+
+* `List`'s `type` prop has been removed. Use CSS to style the `list-style-type` property (SUI-5622).
+
+* `Menu`'s `retainFocus` prop has been removed. Use `focusMode` prop instead (SUI-6164).
+* `Menu`'s `focusMode` prop now defaults to `roving` (SUI-6164).
+* `Menu.Item` and `Search.Option`'s `icon` prop has been removed. Use `startAdornment` and/or `endAdornment` instead (SUI-6762).
+
+* `Message` no longer supports `appearance="banner"` (SUI-6123).
+* `Message.Link` has been removed. Use `Link` instead (SUI-6124).
+* `Message` now has a maximum width (SUI-6122).
+
+* `Modal`'s `returnFocus` prop is now required (SUI-5996).
+* `Modal.Header` no longer supports the `onRequestClose` prop (SUI-5933).
+    * The close button in `Modal.Header` now calls the `onRequestClose` handler from `Modal`.
+    * If closed with the close button in `Modal.Header`, the `reason` parameter of `Modal`'s `onRequestClose` prop will be set to `"clickCloseButton"`.
+* `Modal` with on `onRequestClose` set will display the close button in the `Modal.Header` by default.
+    * This can be hidden by passing the `hideCloseButton` prop to `Modal.Header` (SUI-5933).
+* `Modal.Footer` has updated default styling. This can be reverted by setting `layout="none"` (SUI-6678).
+
+* `Monogram`'s `xlarge` option for `size` prop has been removed (SUI-3222).
+
+* `Number`'s `placeholder` and `useSyntheticPlaceholder` props have been removed (SUI-7070).
+
+* `Popover`'s `anchor` prop now requires a ref to a HTML element and no longer accepts refs to React class component instances (SUI-3532).
+* `Popover` is now center-aligned in both Enterprise and Prisma themes (SUI-7038).
+
+* `Progress` has been redesigned:
+    * Native HTML `<progress>` element is used
+    * New visual design to allow all parts of the component to hit required contrast ratios.
+* `Progress` `type="warning"` has been removed (SUI-6491).
+
+* `RadioBar`'s `appearance` prop has been removed (SUI-6386).
+* `RadioBar`'s `icon` prop has been removed (SUI-7104).
+
+* `Search`'s icon placement is now at the start of the input in all themes (SUI-6242).
+
+* `Select`'s `appearance` prop no longer supports the `"primary"`, `"pill"`, `"flat"`, or `"toggle"` values. (SUI-6440, SUI-6866).
+    * The default value of `appearance` is now `"default"`.
+
+* `Slider`'s test hook `[data-test="handle"]` has been renamed to `[data-test="thumb"]` (SUI-7101).
+
+* `Switch`'s test hook `[data-test="button"]` has been renamed to `[data-test="toggle"]` (SUI-7101).
+
+* `Table.HeadDropdownCell`'s `defaultPlacement` prop has been removed (SUI-6742).
+* `Table.HeadDropdownCell` supports a new `buttonRef` prop to target the underlying button (SUI-6843).
+
+* `TabBar`'s  and `TabLayout`'s `appearance` prop has been removed (SUI-6835).
+* `TabBar`'s  and `TabLayout`'s `iconSize` prop has been removed (SUI-6960).
+
+* `TabLayout`'s unused `count` prop was removed (SUI-7047).
+
+* `Text`'s `appearance` prop has been removed. Use `Search` component instead of `appearance="search"` (SUI-5978).
+* `Text`'s `placeholder` and `useSyntheticPlaceholder` props have been removed (SUI-5979, SUI-5977).
+* `Text`'s `multiline`, `rowsMax`, `rowsMin` props have been removed (SUI-5975).
+* `Text`'s `onInputClick` prop has been renamed to `onClick` (SUI-5952).
+* `Text` and `TextArea` now only apply the `className` prop to the root element (SUI-6214).
+
+* `TextArea`'s `canClear` prop has been removed (SUI-6061).
+* `TextArea`'s `placeholder` prop has been removed (SUI-6061).
+
+* `Tooltip` prop `defaultPlacement` no longer supports value `"theme"`.
+    * `defaultPlacement` now defaults to `"above"` for all themes.
+* `Tooltip` `appearance` is now `"normal"` for all themes.
+
+* `Typography`'s `weight` prop no longer supports numeric values. Use the equivalent keyword value instead (SUI-5679).
+* `Typography`'s `withReset` prop has been removed (SUI-5686).
+* `Typography` has been updated to align with the themes mixin:
+    * `variant` no longer supports `"title7"` and `"footnote"`.
+    * `size` no longer supports `56`, `36`, `32`, and `10`.
+    * `lineHeight` no longer supports pixel values.
+
+* `WaitSpinner` can now be styled with `styled-components` (SUI-6213).
+* `WaitSpinner`'s `elementRef` is now set to the component's root element (SUI-6213).
+
+Bug Fixes:
+* `Modal.Header`'s `icon` prop no longer requires `width="100%" height="100%"` to be set on the icon to render at the correct size (SUI-5931).
+* `Link`s are now underlined on focus and hover to improve accessibility (SUI-2835).
+* `ControlGroup`'s error text now has a new visual style and renders an icon to improve accessibility (SUI-6395).
+* `Color`'s selected swatch checkmark color is now white or black based on the swatch value to have improved contrast (SUI-6404).
+* `Popover`'s arrow border color in Enterprise themes now matches `Popover`'s content background color (SUI-6671).
+* `Number`'s step buttons now show in Enterprise themes when disabled (SUI-7073).
+* `Card.Header` no longer erroneously adds extra padding-bottom when it is the last child within its parent (SUI-6818).
+
+Docs:
+* `WaitSpinner`'s `children` prop was improperly documented in PropTypes as being allowed. This has been fixed (SUI-6081).
+
+TypeScript:
+* `Color`'s `ExpandClickHandler` type has been removed (SUI-6405).
+* `ComboBox`, `Date`, `Multiselect`, `Number`, `Search`, `Select`, and `Text` no longer use the TypeScript `HTMLTextAreaElement` type in event handlers and refs (SUI-6206).
+* `Date`'s `onClick` prop now uses TypeScript `HTMLInputElement` type (SUI-5952).
+* `TextArea`'s `inputRef` prop is now `HTMLTextAreaElement`.
+* `TextArea`'s `TextAreaChangeHandler` `event` type is now `React.ChangeEvent<HTMLTextAreaElement>`.
+
+Deprecations:
+* `Accordion` has been deprecated and will be removed in a future major version. Use `CollapsiblePanel`'s `SingleOpenPanelGroup` API instead (SUI-5827).
+* `Monogram` has been deprecated and will be removed in a future major version. Use `Avatar` instead (SUI-5608).
+* `Select`'s `"link"` value of the `appearance` prop has been deprecated and will be removed in the next major version. See the migration guide for details (SUI-6724).

package/Calendar.js

@@ -88,17 +88,17 @@
     var p =  e.n(f);
     // CONCATENATED MODULE: external "styled-components"
     const y = require("styled-components");
-    var h =  e.n(y);
+    var Y =  e.n(y);
     // CONCATENATED MODULE: ./src/Calendar/DayStyles.ts
     /* Element used to prevent vertical shift on firefox when the font-weight is increased with $selected */
-    var Y = h().div.withConfig({
+    var h = Y().div.withConfig({
         displayName: "DayStyles__StyledValue",
         componentId: "sc-1nryhyt-0"
     })([ "left:0;line-height:", ";position:absolute;top:0;width:100%;" ], (0, d.pick)({
         enterprise: "2em",
         prisma: "36px "
     }));
-    var m = h().div.withConfig({
+    var m = Y().div.withConfig({
         displayName: "DayStyles__StyledInner",
         componentId: "sc-1nryhyt-1"
     })([ "border:", ";border-radius:", ";color:", ";height:", ";position:relative;text-align:center;width:", ";" ], (0, 
@@ -121,7 +121,7 @@
         enterprise: "calc(2em - 2px)",
         prisma: "36px"
     }));
-    var b = h().td.withConfig({
+    var b = Y().td.withConfig({
         displayName: "DayStyles__StyledCell",
         componentId: "sc-1nryhyt-2"
     })([ "", ";cursor:pointer;", ";", ";" ], d.mixins.reset("table-cell"), (0, d.pickVariant)("$today", {
@@ -136,11 +136,11 @@
         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.linkColor),
+            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.linkColor),
+            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)
         })
     }));
@@ -189,7 +189,7 @@
     };
     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 h = (0, r.useCallback)((function(e) {
+        var Y = (0, r.useCallback)((function(e) {
             e.preventDefault();
             c === null || c === void 0 ? void 0 : c(e, {
                 value: p
@@ -210,16 +210,16 @@
             "data-test": "day-of-month",
             "data-active-day": n,
             "data-is-today": f,
-            onClick: h,
+            onClick: Y,
             onKeyDown: D,
             $today: f,
             $selected: d
-        }, y),  t().createElement(m, null,  t().createElement(Y, null, k)));
+        }, y),  t().createElement(m, null,  t().createElement(h, null, k)));
     }
     w.propTypes = k;
     /* harmony default export */    const C = w;
     // CONCATENATED MODULE: ./src/Calendar/DateTableStyles.ts
-    var S = h().table.withConfig({
+    var S = Y().table.withConfig({
         displayName: "DateTableStyles__Styled",
         componentId: "sc-1lbrjq0-0"
     })([ "", ";table-layout:fixed;border-spacing:", ";width:", ";margin:", ";" ], d.mixins.reset("table"), (0, 
@@ -233,7 +233,7 @@
         enterprise: "0",
         prisma: "-8px"
     }));
-    var O = h().th.withConfig({
+    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, 
@@ -302,18 +302,18 @@
         var p = [];
         while (f.isSameOrBefore(r)) {
             var y = f.format("YYYY-MM-DD");
-            var h = y === v;
-            var Y = y === s;
+            var Y = y === v;
+            var h = y === s;
             var m = y === a;
             p.push( t().createElement(C, {
                 key: y,
                 locale: l,
                 onClick: o,
                 onKeyDown: c,
-                active: u ? m : h,
-                today: n && h,
+                active: u ? m : Y,
+                today: n && Y,
                 value: y,
-                selected: Y
+                selected: h
             }));
             f.add(1, "day");
         }
@@ -349,8 +349,8 @@
     }
     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 h = (0, d.useSplunkTheme)(), Y = h.family;
-        var m = Y === "prisma" ? "dd" : "ddd";
+        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");
@@ -415,21 +415,21 @@
                 value: i()(t, "YYYY-MM-DD").add(1, "y").format("YYYY-MM-DD")
             });
         };
-        var z = function e(a, r) {
+        var A = function e(a, r) {
             var t = 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")
             });
         };
-        var A = function e(a, r) {
+        var N = function e(a, r) {
             var t = 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")
             });
         };
-        var N = function e(a, r) {
+        var z = function e(a, r) {
             var t = (0, v.keycode)(a.nativeEvent);
             switch (t) {
               case "enter":
@@ -470,11 +470,11 @@
                 break;
 
               case "home":
-                z(a, r);
+                A(a, r);
                 break;
 
               case "end":
-                A(a, r);
+                N(a, r);
                 break;
 
               default:
@@ -487,7 +487,7 @@
             highlightToday: n,
             locale: c,
             onChange: u,
-            onKeyDown: N,
+            onKeyDown: z,
             selectedDate: g,
             selectedValue: f,
             startDate: M,
@@ -503,40 +503,34 @@
     /* harmony default export */    const B = V;
     // CONCATENATED MODULE: external "lodash/omit"
     const R = require("lodash/omit");
-    var z =  e.n(R);
+    var A =  e.n(R);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronLeft"
-    const A = require("@splunk/react-icons/ChevronLeft");
-    var N =  e.n(A);
+    const N = require("@splunk/react-icons/ChevronLeft");
+    var z =  e.n(N);
     // 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 U =  e.n($);
+    var L =  e.n($);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-    const L = require("@splunk/react-icons/enterprise/ChevronRight");
-    var W =  e.n(L);
+    const U = require("@splunk/react-icons/enterprise/ChevronRight");
+    var W =  e.n(U);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const X = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
     const F = require("@splunk/react-ui/Button");
     var G =  e.n(F);
     // CONCATENATED MODULE: ./src/Calendar/MonthHeaderStyles.ts
-    var J = h().div.withConfig({
+    var J = Y().div.withConfig({
         displayName: "MonthHeaderStyles__StyledBox",
         componentId: "sc-18bmbh7-0"
-    })([ "display:flex;position:relative;line-height:", ";padding:0 2px;margin-bottom:10px;" ], d.variables.inputHeight);
-    var Q = h().span.withConfig({
+    })([ "display:flex;align-items:center;position:relative;padding:0 2px;margin-bottom:", ";" ], d.variables.spacingSmall);
+    var Q = Y().span.withConfig({
         displayName: "MonthHeaderStyles__StyledHeading",
         componentId: "sc-18bmbh7-1"
-    })([ "display:block;text-align:center;text-transform:", ";flex:1 0 1px;", ";" ], (0, 
-    d.pick)({
-        enterprise: "capitalize",
-        prisma: "uppercase"
-    }), (0, d.pick)({
-        prisma: (0, y.css)([ "font-size:20px;font-weight:bold;color:", ";" ], d.variables.contentColorActive)
-    }));
-    var Z = h()(G()).withConfig({
+    })([ "", " display:block;text-align:center;flex:1 0 1px;" ], d.mixins.typography("title2"));
+    var Z = Y()(G()).withConfig({
         displayName: "MonthHeaderStyles__StyledButton",
         componentId: "sc-18bmbh7-2"
     })([ "flex:0 0 auto;" ]);
@@ -607,10 +601,10 @@
                 value: r
             });
         }), [ o, c ]);
-        var h = (0, r.useCallback)((function(e) {
+        var Y = (0, r.useCallback)((function(e) {
             y(e, -1);
         }), [ y ]);
-        var Y = (0, r.useCallback)((function(e) {
+        var h = (0, r.useCallback)((function(e) {
             y(e, 1);
         }), [ y ]);
         var m = i()(c, "YYYY-MM-DD", l);
@@ -620,19 +614,19 @@
         
         return t().createElement(d.SplunkThemeProvider, {
             density: f ? "comfortable" : p
-        },  t().createElement(J, z()(u, "onChange"),  t().createElement(Z, {
+        },  t().createElement(J, A()(u, "onChange"),  t().createElement(Z, {
             appearance: "subtle",
-            icon: v ?  t().createElement(U(), {
+            icon: v ?  t().createElement(L(), {
                 hideDefaultTooltip: true,
                 screenReaderText: g,
                 size: 1
-            }) :  t().createElement(N(), {
+            }) :  t().createElement(z(), {
                 "aria-label": g,
                 height: "24",
                 width: "24"
             }),
             "data-test": "previous-month",
-            onClick: h
+            onClick: Y
         }),  t().createElement(Q, {
             id: a,
             "data-test": "header-label"
@@ -648,7 +642,7 @@
                 width: "24"
             }),
             "data-test": "next-month",
-            onClick: Y
+            onClick: h
         })));
     }
     oe.propTypes = re;
@@ -657,16 +651,10 @@
     const ce = require("@splunk/react-ui/Box");
     var ue =  e.n(ce);
     // CONCATENATED MODULE: ./src/Calendar/CalendarStyles.ts
-    var se = h()(ue()).withConfig({
+    var se = Y()(ue()).withConfig({
         displayName: "CalendarStyles__StyledBox",
         componentId: "sc-18925wt-0"
-    })([ "width:", ";padding:", ";" ], (0, d.pick)({
-        enterprise: "220px",
-        prisma: "332px"
-    }), (0, d.pick)({
-        enterprise: "8px",
-        prisma: d.variables.spacingLarge
-    }));
+    })([ "width:332px;padding:", ";" ], d.variables.spacingLarge);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -699,26 +687,26 @@
         }, ve.apply(null, arguments);
     }
     function fe(e, a) {
-        return me(e) || Ye(e, a) || ye(e, a) || pe();
+        return me(e) || he(e, a) || ye(e, a) || pe();
     }
     function pe() {
         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) {
         if (e) {
-            if ("string" == typeof e) return he(e, a);
+            if ("string" == typeof e) return Ye(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) ? he(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) ? Ye(e, a) : void 0;
         }
     }
-    function he(e, a) {
+    function Ye(e, a) {
         (null == a || a > e.length) && (a = e.length);
         for (var r = 0, t = Array(a); r < a; r++) {
             t[r] = e[r];
         }
         return t;
     }
-    function Ye(e, a) {
+    function he(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;
@@ -790,13 +778,12 @@
     /**
  * Place focus on the active day.
  */    var Ce = function e(a) {
-        var r;
-        var t = a === null || a === void 0 ? void 0 : (r = a.current) === null || r === void 0 ? void 0 : r.querySelector(Me);
-        t === null || t === void 0 ? void 0 : t.focus();
+        var r = a === null || a === void 0 ? void 0 : a.querySelector(Me);
+        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, h = be(e, [ "describedBy", "elementRef", "highlightToday", "labelledBy", "locale", "mockDate", "onChange", "required", "value" ]);
-        var Y = (0, r.useState)(y), m = fe(Y, 2), b = m[0], g = m[1];
+        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"));
@@ -822,7 +809,7 @@
         }), [ s, d, k ]);
         (0, r.useEffect)((function() {
             if (O === "day") {
-                Ce(I);
+                Ce(I.current);
             }
         }), [ b, O ]);
         var _ = (0, r.useCallback)((function(e, a) {
@@ -846,7 +833,7 @@
             "aria-describedby": a,
             "aria-required": f,
             "data-test": "calendar"
-        }, h, {
+        }, Y, {
             elementRef: q
         }),  t().createElement(ie, {
             headingId: E.current,