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

package/Typography.js

@@ -62,7 +62,7 @@
     // EXPORTS
         e.d(r, {
         Typography: () => /* reexport */ g,
-        default: () => /* reexport */ m
+        default: () => /* reexport */ h
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -70,15 +70,15 @@
     // CONCATENATED MODULE: external "prop-types"
     const a = require("prop-types");
     var o =  e.n(a);
-    // CONCATENATED MODULE: external "@splunk/themes/mixins"
-    const i = require("@splunk/themes/mixins");
-    var l =  e.n(i);
     // CONCATENATED MODULE: external "styled-components"
-    const s = require("styled-components");
-    var p =  e.n(s);
+    const i = require("styled-components");
+    var l =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/themes/mixins"
+    const s = require("@splunk/themes/mixins");
+    var u =  e.n(s);
     // CONCATENATED MODULE: ./src/Typography/Typography.tsx
-    function u() {
-        return u = Object.assign ? Object.assign.bind() : function(e) {
+    function p() {
+        return p = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -86,9 +86,9 @@
                 }
             }
             return e;
-        }, u.apply(null, arguments);
+        }, p.apply(null, arguments);
     }
-    function y(e, r) {
+    function c(e, r) {
         if (null == e) return {};
         var t, n, a = f(e, r);
         if (Object.getOwnPropertySymbols) {
@@ -110,64 +110,49 @@
         }
         return t;
     }
-    // TODO: Remove in next major version (SUI-5350)
-    // TODO: TypographyPropsBase should extend from TypographyParams (SUI-5343)
-    // Weight is omitted because the types conflict since weight no longer supports number values in the mixin
-    // but they are supported in the component to avoid a breaking change
-        var c = {
+    var y = {
         children: o().node.isRequired,
         as: o().string.isRequired,
         elementRef: o().oneOfType([ o().func, o().object ]),
-        family: o().oneOf([ "sansSerif", "monospace" ]),
-        variant: o().oneOf(i.typographyVariants),
-        size: o().number,
-        lineHeight: o().number,
+        family: o().oneOf([ "sansSerif", "monospace", "title" ]),
+        variant: o().oneOf(s.typographyVariants),
+        size: o().oneOf([ 24, 20, 18, 16, 14, 12 ]),
+        lineHeight: o().oneOf([ "single", "tight", "snug", "comfortable", "relaxed", "spacious", "normal" ]),
         color: o().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
-        weight: o().oneOf([ 300, 400, 500, 600, 700, 800, 900, "light", "normal", "semiBold", "bold", "extraBold", "heavy" ]),
-        withReset: o().bool
+        weight: o().oneOf([ "light", "normal", "semiBold", "bold", "extraBold", "heavy" ])
     };
-    var d = p().p.withConfig({
+    var d = l().p.withConfig({
         displayName: "Typography__StyledTypography",
         componentId: "cgxs34-0"
     })([ "", "" ], (function(e) {
         var r = e.$variant, t = e.$typographyParams;
-        return r ? l().typography(r, t) : l().typography(t);
+        return r ? u().typography(r, t) : u().typography(t);
     }));
-    var h = {
-        300: "light",
-        400: "normal",
-        500: "semiBold",
-        600: "semiBold",
-        700: "bold",
-        800: "extraBold",
-        900: "heavy"
-    };
     /**
  * Typography renders text content with styling based on the Splunk Design System.
  */    function g(e) {
-        var r = e.children, t = e.as, a = e.elementRef, o = e.variant, i = e.family, l = e.size, s = e.lineHeight, p = e.color, f = e.weight, c = e.withReset, g = y(e, [ "children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight", "withReset" ]);
+        var r = e.children, a = e.as, o = e.elementRef, i = e.variant, l = e.family, s = e.size, u = e.lineHeight, f = e.color, y = e.weight, g = c(e, [ "children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight" ]);
         // @docs-props-type TypographyPropsBase
-        // TODO: Remove in next major version (SUI-5350)
-                if (false) {}
-        var m = {
-            family: i,
-            size: l,
-            lineHeight: s,
-            color: p,
-            withReset: c,
-            weight: typeof f === "number" ? h[f] : f
-        };
+                var h = (0, t.useMemo)((function() {
+            return {
+                family: l,
+                size: s,
+                lineHeight: u,
+                color: f,
+                weight: y
+            };
+        }), [ f, l, u, s, y ]);
         
-        return n().createElement(d, u({
-            as: t,
-            ref: a,
+        return n().createElement(d, p({
+            as: a,
+            ref: o,
             "data-test": "typography",
-            $variant: o,
-            $typographyParams: m
+            $variant: i,
+            $typographyParams: h
         }, g), r);
     }
-    g.propTypes = c;
-    /* harmony default export */    const m = g;
+    g.propTypes = y;
+    /* harmony default export */    const h = g;
     // CONCATENATED MODULE: ./src/Typography/index.ts
     module.exports = r;
     /******/})();

package/WaitSpinner.js

@@ -8,27 +8,27 @@
     /******/ /* webpack/runtime/compat get default export */
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
-        /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
-            /******/ () => r["default"]
-            /******/ : () => r
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
             /******/;
-            e.d(t, {
-                a: t
+            e.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var i in t) {
-                /******/ if (e.o(t, i) && !e.o(r, i)) {
-                    /******/ Object.defineProperty(r, i, {
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
                         enumerable: true,
-                        get: t[i]
+                        get: r[n]
                     });
                     /******/                }
                 /******/            }
@@ -37,7 +37,7 @@
     /******/
     /******/ /* webpack/runtime/hasOwnProperty shorthand */
     /******/    (() => {
-        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
         /******/;
     })();
     /******/
@@ -56,168 +56,137 @@
             /******/        };
         /******/    })();
     /******/
-    /************************************************************************/    var r = {};
+    /************************************************************************/    var t = {};
     // ESM COMPAT FLAG
-        e.r(r);
+        e.r(t);
     // EXPORTS
-        e.d(r, {
-        default: () => /* reexport */ _
+        e.d(t, {
+        default: () => /* reexport */ x
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var i =  e.n(t);
+    const r = require("react");
+    var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const n = require("prop-types");
-    var a =  e.n(n);
+    const a = require("prop-types");
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
     const s = require("@splunk/react-ui/AnimationToggle");
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const o = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const l = require("@splunk/ui-utils/i18n");
+    const o = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var m =  e.n(c);
+    const l = require("styled-components");
+    var c =  e.n(l);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const f = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinnerStyles.ts
-    var f = m().div.withConfig({
+    var u = c().div.withConfig({
         displayName: "WaitSpinnerStyles__Styled",
         componentId: "sc-1nu971z-0"
-    })([ "", ";align-items:center;" ], o.mixins.reset("inline-flex"));
-    var p = (0, c.keyframes)([ "100%{transform:rotate(360deg);}" ]);
-    var d = (0, c.keyframes)([ "0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}" ]);
-    var u = "2.07s";
-    var y = m().svg.withConfig({
+    })([ "", ";align-items:center;" ], f.mixins.reset("inline-flex"));
+    var d = (0, l.keyframes)([ "100%{transform:rotate(360deg);}" ]);
+    var m = (0, l.keyframes)([ "0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}" ]);
+    var p = "2.07s";
+    var y = c().svg.withConfig({
         displayName: "WaitSpinnerStyles__StyledSvg",
         componentId: "sc-1nu971z-1"
-    })([ "", " ", "" ], (0, o.pickVariant)("$size", {
-        small: {
-            enterprise: (0, c.css)([ "width:14px;height:14px;" ]),
-            prisma: (0, c.css)([ "width:16px;height:16px;" ])
-        },
-        medium: {
-            enterprise: (0, c.css)([ "width:19px;height:19px;" ]),
-            prisma: (0, c.css)([ "width:24px;height:24px;" ])
-        },
-        large: {
-            enterprise: (0, c.css)([ "width:28px;height:28px;" ]),
-            prisma: (0, c.css)([ "width:40px;height:40px;" ])
-        }
+    })([ "", " ", "" ], (0, f.pickVariant)("$size", {
+        small: (0, l.css)([ "width:16px;height:16px;" ]),
+        medium: (0, l.css)([ "width:24px;height:24px;" ]),
+        large: (0, l.css)([ "width:40px;height:40px;" ])
     }), (function(e) {
-        var r = e.$animated;
-        return r && (0, o.pick)({
-            enterprise: (0, c.css)([ "transform-origin:center;animation:", " 1.2s steps(64) infinite;" ], p),
-            prisma: (0, c.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], p, u, d)
-        });
+        var t = e.$animated;
+        return t && (0, l.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], d, p, m);
     }));
-    var h = (0, c.keyframes)([ "0%{stroke-dasharray:110 10;stroke-dashoffset:-5.5;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:26 94;stroke-dashoffset:-152;}100%{stroke-dasharray:110 10;stroke-dashoffset:-246.5;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
-    var v = (0, c.keyframes)([ "0%{stroke-dasharray:7 113;stroke-dashoffset:3;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:90 30;stroke-dashoffset:-60;}100%{stroke-dasharray:7 113;stroke-dashoffset:-238;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
-    var g = m().circle.withConfig({
-        displayName: "WaitSpinnerStyles__StyledPrismaBasePath",
+    var v = (0, l.keyframes)([ "0%{stroke-dasharray:110 10;stroke-dashoffset:-5.5;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:26 94;stroke-dashoffset:-152;}100%{stroke-dasharray:110 10;stroke-dashoffset:-246.5;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
+    var h = (0, l.keyframes)([ "0%{stroke-dasharray:7 113;stroke-dashoffset:3;animation-timing-function:cubic-bezier(0.8,0,0.83,1);}50%{stroke-dasharray:90 30;stroke-dashoffset:-60;}100%{stroke-dasharray:7 113;stroke-dashoffset:-238;animation-timing-function:cubic-bezier(0.33,0,0.67,1);}" ]);
+    var g = c().circle.withConfig({
+        displayName: "WaitSpinnerStyles__StyledBasePath",
         componentId: "sc-1nu971z-2"
-    })([ "stroke:", ";stroke-width:2;fill:transparent;", " stroke-dasharray:110 10;stroke-dashoffset:-5.5;" ], o.variables.contentColorDisabled, (function(e) {
-        var r = e.$animated;
-        return r && (0, c.css)([ "animation:", " ", " infinite;animation-fill-mode:backwards;" ], h, u);
+    })([ "stroke:", ";stroke-width:2;fill:transparent;", " stroke-dasharray:110 10;stroke-dashoffset:-5.5;" ], f.variables.contentColorDisabled, (function(e) {
+        var t = e.$animated;
+        return t && (0, l.css)([ "animation:", " ", " infinite;animation-fill-mode:backwards;" ], v, p);
     }));
-    var k = m().circle.withConfig({
-        displayName: "WaitSpinnerStyles__StyledPrismaFillPath",
+    var b = c().circle.withConfig({
+        displayName: "WaitSpinnerStyles__StyledFillPath",
         componentId: "sc-1nu971z-3"
     })([ "fill:transparent;stroke-width:2;stroke:", ";stroke-dasharray:7 113;stroke-dashoffset:3;", "" ], (0, 
-    o.pickVariant)("$size", {
-        small: o.variables.contentColorDefault,
-        medium: o.variables.contentColorDefault,
-        large: o.variables.interactiveColorPrimary
+    f.pickVariant)("$size", {
+        small: f.variables.contentColorDefault,
+        medium: f.variables.contentColorDefault,
+        large: f.variables.interactiveColorPrimary
     }), (function(e) {
-        var r = e.$animated;
-        return r && (0, c.css)([ "animation:", " ", " infinite;" ], v, u);
-    }));
-    var b = m().circle.withConfig({
-        displayName: "WaitSpinnerStyles__StyledEnterpriseCircle",
-        componentId: "sc-1nu971z-4"
-    })([ "fill:transparent;stroke:", ";stroke-width:2px;", "" ], (0, o.pick)({
-        enterprise: {
-            dark: o.variables.white,
-            light: o.variables.gray60
-        },
-        prisma: o.variables.contentColorMuted
-    }), (0, o.pick)({
-        enterprise: (0, c.css)([ "stroke-dasharray:34 19;" ])
+        var t = e.$animated;
+        return t && (0, l.css)([ "animation:", " ", " infinite;" ], h, p);
     }));
     // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinner.tsx
-    function w() {
-        return w = Object.assign ? Object.assign.bind() : function(e) {
-            for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var i in t) {
-                    ({}).hasOwnProperty.call(t, i) && (e[i] = t[i]);
+    function k() {
+        return k = Object.assign ? Object.assign.bind() : function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
                 }
             }
             return e;
-        }, w.apply(null, arguments);
+        }, k.apply(null, arguments);
     }
-    function x(e, r) {
+    function w(e, t) {
         if (null == e) return {};
-        var t, i, n = S(e, r);
+        var r, n, a = S(e, t);
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < a.length; i++) {
-                t = a[i], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return n;
+        return a;
     }
-    function S(e, r) {
+    function S(e, t) {
         if (null == e) return {};
-        var t = {};
-        for (var i in e) {
-            if ({}.hasOwnProperty.call(e, i)) {
-                if (r.includes(i)) continue;
-                t[i] = e[i];
+        var r = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (t.includes(n)) continue;
+                r[n] = e[n];
             }
         }
-        return t;
+        return r;
     }
     var z = {
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        screenReaderText: a().oneOfType([ a().string, a().oneOf([ "null" ]) ]),
-        size: a().oneOf([ "small", "medium", "large" ])
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        screenReaderText: i().oneOfType([ i().string, i().oneOf([ "null" ]) ]),
+        size: i().oneOf([ "small", "medium", "large" ])
     };
     function O(e) {
-        var r = e.elementRef, t = e.screenReaderText, n = t === void 0 ? (0, l._)("Waiting") : t, a = e.size, c = a === void 0 ? "small" : a, m = x(e, [ "elementRef", "screenReaderText", "size" ]);
+        var t = e.elementRef, r = e.screenReaderText, a = r === void 0 ? (0, o._)("Waiting") : r, i = e.size, l = i === void 0 ? "small" : i, c = w(e, [ "elementRef", "screenReaderText", "size" ]);
         // @docs-props-type WaitSpinnerPropsBase
-                if (false) {}
-        var p = (0, s.useAnimationToggle)() === "on";
-        var d = (0, o.useSplunkTheme)(), u = d.isPrisma;
-        var h = u ? "0 0 40 40" : "0 0 19 19";
+                var f = (0, s.useAnimationToggle)() === "on";
         
-        return i().createElement(f, w({
-            "data-test": "wait-spinner"
-        }, m),  i().createElement(y, {
-            viewBox: h,
+        return n().createElement(u, k({
+            "data-test": "wait-spinner",
+            ref: t
+        }, c),  n().createElement(y, {
+            viewBox: "0 0 40 40",
             version: "1.1",
             xmlns: "http://www.w3.org/2000/svg",
-            ref: r,
-            $animated: p,
-            $size: c
-        }, n &&  i().createElement("title", null, n),  i().createElement("g", null, u ?  i().createElement(i().Fragment, null,  i().createElement(g, {
+            $animated: f,
+            $size: l
+        }, a &&  n().createElement("title", null, a),  n().createElement("g", null,  n().createElement(g, {
             r: "19",
             cx: "20",
             cy: "20",
-            $animated: p,
-            $size: c
-        }),  i().createElement(k, {
+            $animated: f,
+            $size: l
+        }),  n().createElement(b, {
             r: "19",
             cx: "20",
             cy: "20",
-            $animated: p,
-            $size: c
-        })) :  i().createElement(b, {
-            cx: "9.5",
-            cy: "9.5",
-            r: "8.5"
+            $animated: f,
+            $size: l
         }))));
     }
     O.propTypes = z;
-    /* harmony default export */    const _ = O;
+    /* harmony default export */    const x = O;
     // CONCATENATED MODULE: ./src/WaitSpinner/index.ts
-    module.exports = r;
+    module.exports = t;
     /******/})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.43.0",
+  "version": "5.0.0-beta.2",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -35,8 +35,8 @@
     "types:start": "yarn types:build --watch"
   },
   "peerDependencies": {
-    "react": "^16.8",
-    "react-dom": "^16.8",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.10"
   },
   "dependencies": {
@@ -44,17 +44,17 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@splunk/react-icons": "^4.12.0",
-    "@splunk/themes": "^0.23.0",
+    "@splunk/react-icons": "5.0.0-beta.2",
+    "@splunk/themes": "1.0.0-beta.2",
     "@splunk/ui-utils": "^1.8.0",
-    "commonmark": "^0.30.0",
-    "commonmark-react-renderer": "^4.3.2",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
     "prop-types": "^15.6.2",
+    "react-markdown": "^8.0.7",
     "react-resize-detector": "^3.2.1",
     "react-spring": "9.2.4",
+    "remark-gfm": "^1.0.0",
     "tinycolor2": "^1.4.1",
     "use-typed-event-listener": "^3.0.0"
   },
@@ -62,9 +62,9 @@
     "@babel/core": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "1.0.0-beta.14",
+    "@splunk/docs-gen": "1.0.0-beta.14.v5.2",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "1.0.0-beta.21",
+    "@splunk/react-docs": "1.0.0-beta.21.v5.2",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -77,16 +77,15 @@
     "@storybook/test-runner": "0.16.0",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^14.4.3",
-    "@types/commonmark": "^0.27.6",
     "@types/jest": "^26.0.0",
     "@types/lodash": "^4.14.156",
     "@types/node": "^10.17.26",
     "@types/prismjs": "^1.26.3",
-    "@types/react": "^16.9.38",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/react-resize-detector": "^3.1.1",
     "@types/sinon": "^4.3.3",
     "@types/styled-components": "^5.1.0",
@@ -132,9 +131,9 @@
     "prismjs": "^1.29.0",
     "prompt": "^1.0.0",
     "raw-loader": "^4.0.2",
-    "react": "^16.12.0",
+    "react": "^18.2.0",
     "react-docgen": "^5.4.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^18.2.0",
     "react-test-renderer": "^16.13.1",
     "sinon": "^2.1.0",
     "storybook": "^7.6.17",

package/stubs-dependencies.d.ts

@@ -1,10 +1,3 @@
-declare module 'commonmark-react-renderer' {
-    export default class Renderer {
-        constructor(options: {});
-        render(ast: import('commonmark').Node): React.ReactNode[];
-    }
-}
-
 // https://github.com/storybookjs/storybook/issues/7677
 // https://github.com/ComponentDriven/csf/blob/next/src/story.test.ts
 declare module '@storybook/react' {

package/stubs-splunkui.d.ts

@@ -10,9 +10,14 @@ declare module '__FONTS_IMPORT__/*' {
 
 declare module '@splunk/ui-utils/color' {
     function expandShortHandHex<T extends string | null | undefined>(arg: T): T;
-    function isValidHexColor(value: string): boolean;
+    function hexToRgb(hex: string): [number, number, number] | null;
     function isCSSColor(value: string): boolean;
+    function isValidHexColor(value: string): boolean;
+    function isValidRgb(value: string): boolean;
+    function namedColorToHex(colorName: string): string | undefined;
+
     const extendedColorKeywords: string[];
+    const extendedColorKeywordsToHex: { string: string };
 }
 
 declare module '@splunk/ui-utils/filter' {

package/types/src/Accordion/Accordion.d.ts

@@ -54,6 +54,10 @@ type AccordionProps = ClassComponentProps<AccordionControlledProps | AccordionUn
 interface AccordionState {
     openPanelId?: string | number;
 }
+/**
+ * @deprecated
+ * Accordion has been deprecated and will be removed in a future major version. Use Collapsible Panel's SingleOpenPanelGroup API instead.
+ */
 declare class Accordion extends Component<AccordionProps, AccordionState> {
     private controlledExternally;
     static propTypes: React.WeakValidationMap<AccordionProps>;
@@ -66,7 +70,7 @@ declare class Accordion extends Component<AccordionProps, AccordionState> {
     private getCurrentOpenPanel;
     private handleChange;
     private isControlled;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default Accordion;
 export { AccordionChangeHandler, Panel };

package/types/src/Accordion/Panel.d.ts

@@ -11,7 +11,6 @@ interface AccordionPanelPropsBase {
     /**
      * When `true` renders the Panel with padding.
      * When `false` render the Panel without padding.
-     * Note: in `v5` this will default to `true`. SUI-2559
      */
     inset?: boolean;
     /**
@@ -28,7 +27,7 @@ type AccordionPanelProps = ComponentProps<AccordionPanelPropsBase, 'div'>;
 /**
  * `Accordion.Panel` operates as a container component for content in an `Accordion`.
  */
-declare function Panel({ panelId, inset, ...otherProps }: AccordionPanelProps): JSX.Element;
+declare function Panel({ panelId, inset: insetProp, ...otherProps }: AccordionPanelProps): React.JSX.Element;
 declare namespace Panel {
     var propTypes: {
         description: PropTypes.Requireable<string>;

package/types/src/Accordion/docs/examples/Controlled.d.ts

@@ -1,2 +1,3 @@
-declare function Controlled(): JSX.Element;
+import React from 'react';
+declare function Controlled(): React.JSX.Element;
 export default Controlled;

package/types/src/Accordion/docs/examples/Inset.d.ts

@@ -1,2 +1,3 @@
-declare const Inset: () => JSX.Element;
+import React from 'react';
+declare const Inset: () => React.JSX.Element;
 export default Inset;

package/types/src/Accordion/docs/examples/Uncontrolled.d.ts

@@ -1,2 +1,3 @@
-declare function Uncontrolled(): JSX.Element;
+import React from 'react';
+declare function Uncontrolled(): React.JSX.Element;
 export default Uncontrolled;

package/types/src/Anchor/Anchor.d.ts

@@ -16,7 +16,7 @@ type AnchorProps = ComponentProps<AnchorPropsBase, 'a', 'href'>;
 /**
  * `Anchor` is a utility component used to add a fragment link to an element.
  */
-declare function Anchor({ children, elementRef, name, ...otherProps }: AnchorProps): JSX.Element;
+declare function Anchor({ children, elementRef, name, ...otherProps }: AnchorProps): React.JSX.Element;
 declare namespace Anchor {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/types/src/Anchor/docs/examples/Basic.d.ts

@@ -1,2 +1,3 @@
-declare function Basic(): JSX.Element;
+import React from 'react';
+declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Animation/Animation.d.ts

@@ -1,8 +1,18 @@
-import { SpringComponentProps as RSSpringComponentProps, TransitionComponentProps as RSTransitionComponentProps } from 'react-spring';
+/// <reference types="react" />
+import { SpringComponentProps as RSSpringComponentProps, TransitionComponentProps as RSTransitionComponentProps, UseSpringProps as RSUseSpringProps, UseTransitionProps as RSUseTransitionProps } from 'react-spring';
+declare function useAnimation({ immediate, ...otherProps }: RSUseSpringProps): {
+    [x: string]: any;
+    [x: number]: any;
+};
+declare function useAnimationTransition(items: any, { immediate, ...otherProps }: RSUseTransitionProps): import("react-spring").TransitionFn<any, {
+    [x: string]: any;
+    [x: number]: any;
+    [Symbol.hasInstance]: (value: any) => boolean;
+}>;
 /**
  * Wrappers to use in place of `Spring` and `Transition` from `react-spring`.
  * Uses `useAnimationToggle` to offer animation control.
  */
 declare function Spring({ children, immediate, ...otherProps }: RSSpringComponentProps): JSX.Element | null;
 declare function Transition({ items, children, immediate, ...otherProps }: RSTransitionComponentProps<any>): JSX.Element;
-export { Spring, Transition };
+export { Spring, Transition, useAnimation, useAnimationTransition };