@splunk/react-ui 5.9.0 → 5.9.1

package/ColumnLayout.js

@@ -62,8 +62,8 @@
     // EXPORTS
         e.d(r, {
         Column: () => /* reexport */ m,
-        Row: () => /* reexport */ _,
-        default: () => /* reexport */ T
+        Row: () => /* reexport */ E,
+        default: () => /* reexport */ z
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -72,12 +72,12 @@
     const a = require("prop-types");
     var i =  e.n(a);
     // CONCATENATED MODULE: external "styled-components"
-    const l = require("styled-components");
-    var o =  e.n(l);
+    const o = require("styled-components");
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/themes"
     const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ColumnLayout/ColumnStyles.ts
-    var u = o().div.withConfig({
+    var u = l().div.withConfig({
         displayName: "ColumnStyles__Styled",
         componentId: "sc-1pchz98-0"
     })([ "", " flex:", ";", "" ], c.mixins.reset("block"), (function(e) {
@@ -86,10 +86,10 @@
     }), (function(e) {
         var r = e.$gutter, t = e.$span;
         if (r === 0) {
-            return (0, l.css)([ "width:", "%;" ], 100 / 12 * t);
+            return (0, o.css)([ "width:", "%;" ], 100 / 12 * t);
         }
         var n = r !== undefined ? "".concat(r, "px") : c.variables.spacingXLarge;
-        return (0, l.css)([ "width:calc( (100% - 11 * ", ") * ", " + (", " * ", ") );" ], n, t / 12, n, t - 1);
+        return (0, o.css)([ "width:calc( (100% - 11 * ", ") * ", " + (", " * ", ") );" ], n, t / 12, n, t - 1);
     }));
     // CONCATENATED MODULE: ./src/ColumnLayout/Column.tsx
     function s() {
@@ -133,15 +133,15 @@
         span: i().number
     };
     function p(e) {
-        var r = e.children, t = e.elementRef, a = e.gutter, i = e.span, l = i === void 0 ? 1 : i, o = d(e, [ "children", "elementRef", "gutter", "span" ]);
+        var r = e.children, t = e.elementRef, a = e.gutter, i = e.span, o = i === void 0 ? 1 : i, l = d(e, [ "children", "elementRef", "gutter", "span" ]);
         // @docs-props-type ColumnPropsBase
                 
         return n().createElement(u, s({
             "data-test": "column",
             ref: t,
             $gutter: a,
-            $span: l
-        }, o), r);
+            $span: o
+        }, l), r);
     }
     p.propTypes = v;
     /* harmony default export */    const m = p;
@@ -149,34 +149,34 @@
     const g = require("@splunk/react-ui/Divider");
     var y =  e.n(g);
     // CONCATENATED MODULE: ./src/ColumnLayout/ColumnLayoutStyles.ts
-    var b = o().div.withConfig({
+    var b = l().div.withConfig({
         displayName: "ColumnLayoutStyles__Styled",
         componentId: "sc-3eatxz-0"
     })([ "", ";flex-direction:column;", ";" ], c.mixins.reset("flex"), (function(e) {
         var r = e.$hasDivider, t = e.$gutter;
         var n = t !== undefined ? "".concat(t, "px") : c.variables.spacingXLarge;
         if (r) {
-            return (0, l.css)([ "gap:calc(", " / 2);" ], n);
+            return (0, o.css)([ "gap:calc(", " / 2);" ], n);
         }
-        return (0, l.css)([ "gap:", ";" ], n);
+        return (0, o.css)([ "gap:", ";" ], n);
     }));
-    var h = o()(y()).withConfig({
+    var h = l()(y()).withConfig({
         displayName: "ColumnLayoutStyles__StyledDivider",
         componentId: "sc-3eatxz-1"
     })([ "border-color:", ";height:0;" ], c.variables.borderColorWeak);
     // CONCATENATED MODULE: ./src/ColumnLayout/RowStyles.ts
-    var O = o().div.withConfig({
+    var O = l().div.withConfig({
         displayName: "RowStyles__Styled",
         componentId: "sc-121ntds-0"
     })([ "", ";flex-flow:row nowrap;", ";&[data-align-items='start']{align-items:flex-start;}&[data-align-items='end']{align-items:flex-end;}&[data-align-items='center']{align-items:center;}&[data-align-items='stretch']{align-items:stretch;}" ], c.mixins.reset("flex"), (function(e) {
         var r = e.$hasDivider, t = e.$gutter;
         var n = t !== undefined ? "".concat(t, "px") : c.variables.spacingXLarge;
         if (r) {
-            return (0, l.css)([ "gap:calc(", " / 2);" ], n);
+            return (0, o.css)([ "gap:calc(", " / 2);" ], n);
         }
-        return (0, l.css)([ "gap:", ";" ], n);
+        return (0, o.css)([ "gap:", ";" ], n);
     }));
-    var w = o()(y()).withConfig({
+    var w = l()(y()).withConfig({
         displayName: "RowStyles__StyledDivider",
         componentId: "sc-121ntds-1"
     })([ "border-color:", ";flex:0 0 1;" ], c.variables.borderColorWeak);
@@ -224,7 +224,7 @@
         gutter: i().number
     };
     function P(e) {
-        var r = e.alignItems, a = r === void 0 ? "stretch" : r, i = e.children, l = e.divider, o = e.elementRef, c = e.gutter, u = S(e, [ "alignItems", "children", "divider", "elementRef", "gutter" ]);
+        var r = e.alignItems, a = r === void 0 ? "stretch" : r, i = e.children, o = e.divider, l = e.elementRef, c = e.gutter, u = S(e, [ "alignItems", "children", "divider", "elementRef", "gutter" ]);
         // @docs-props-type RowPropsBase
                 if (false) {
             var s;
@@ -237,7 +237,7 @@
         }), [ c ]);
         var f = (0, t.useCallback)((function(e, r, t, a) {
             e.push(r);
-            if (l && t < a.length - 1) {
+            if (o && t < a.length - 1) {
                 e.push( n().createElement(w, {
                     orientation: "vertical",
                     decorative: true,
@@ -245,22 +245,42 @@
                 }));
             }
             return e;
-        }), [ l ]);
+        }), [ o ]);
         var v = t.Children.toArray(i).filter(t.isValidElement).map(d).reduce(f, []);
         
         return n().createElement(O, x({
             "data-align-items": a,
             "data-test": "row",
-            $hasDivider: l,
+            $hasDivider: o,
             $gutter: c,
-            ref: o
+            ref: l
         }, u), v);
     }
     P.propTypes = C;
-    /* harmony default export */    const _ = P;
+    /* harmony default export */    const E = P;
+    // CONCATENATED MODULE: ./src/utils/useDeprecate.tsx
+    var _ = "is deprecated and will be removed in the next major version.";
+    var R = function e(r) {
+        var n = r.additionalMessage, a = n === void 0 ? "" : n, i = r.componentName;
+        (0, t.useEffect)((function() {
+            if (false) {}
+        }), [ a, i ]);
+    };
+    var $ = function e(r) {
+        var t = r.additionalMessage, n = t === void 0 ? "" : t, a = r.componentName, i = r.propName, o = r.propValue;
+        useEffect((function() {
+            if (false) {}
+        }), [ n, a, i, o ]);
+    };
+    var k = function e(r) {
+        var t = r.additionalMessage, n = t === void 0 ? "" : t, a = r.componentName, i = r.deprecatedPropValue, o = r.propName, l = r.propValue;
+        useEffect((function() {
+            if (false) {}
+        }), [ n, a, o, l, i ]);
+    };
     // CONCATENATED MODULE: ./src/ColumnLayout/ColumnLayout.tsx
-    function R() {
-        return R = Object.assign ? Object.assign.bind() : function(e) {
+    function I() {
+        return I = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -268,11 +288,11 @@
                 }
             }
             return e;
-        }, R.apply(null, arguments);
+        }, I.apply(null, arguments);
     }
-    function $(e, r) {
+    function N(e, r) {
         if (null == e) return {};
-        var t, n, a = E(e, r);
+        var t, n, a = T(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
@@ -281,7 +301,7 @@
         }
         return a;
     }
-    function E(e, r) {
+    function T(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -292,25 +312,29 @@
         }
         return t;
     }
-    var k = {
+    var D = {
         children: i().node,
         divider: i().oneOf([ "none", "vertical", "horizontal" ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
         gutter: i().number
     };
     /**
- * `ColumnLayout` provides simple API for laying out content into columns. It is based on flexbox
- * and has 12 columns.
- */    function I(e) {
-        var r = e.children, a = e.divider, i = a === void 0 ? "none" : a, l = e.elementRef, o = e.gutter, c = $(e, [ "children", "divider", "elementRef", "gutter" ]);
+ * @deprecated
+ * ColumnLayout has been deprecated and will be removed in a future major version. Use CSS `grid` or `flex` instead.
+ */    function M(e) {
+        var r = e.children, a = e.divider, i = a === void 0 ? "none" : a, o = e.elementRef, l = e.gutter, c = N(e, [ "children", "divider", "elementRef", "gutter" ]);
         // @docs-props-type ColumnLayoutPropsBase
-                var u = (0, t.useCallback)((function(e) {
+                R({
+            additionalMessage: "Use CSS grid or flexbox instead.",
+            componentName: "ColumnLayout"
+        });
+        var u = (0, t.useCallback)((function(e) {
             
             return (0, t.cloneElement)(e, {
                 divider: i === "vertical",
-                gutter: o
+                gutter: l
             });
-        }), [ i, o ]);
+        }), [ i, l ]);
         var s = (0, t.useCallback)((function(e, r, t, a) {
             e.push(r);
             if (i === "horizontal" && t < a.length - 1) {
@@ -323,17 +347,17 @@
         }), [ i ]);
         var d = t.Children.toArray(r).filter(t.isValidElement).map(u).reduce(s, []);
         
-        return n().createElement(b, R({
+        return n().createElement(b, I({
             "data-test": "column-layout",
-            $gutter: o,
+            $gutter: l,
             $hasDivider: i === "horizontal",
-            ref: l
+            ref: o
         }, c), d);
     }
-    I.propTypes = k;
-    I.Row = _;
-    I.Column = m;
-    /* harmony default export */    const T = I;
+    M.propTypes = D;
+    M.Row = E;
+    M.Column = m;
+    /* harmony default export */    const z = M;
     // CONCATENATED MODULE: ./src/ColumnLayout/index.ts
     module.exports = r;
     /******/})();

package/Dropdown.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = o => {
-            /******/ var n = o && o.__esModule ? 
+            /******/ var r = o && o.__esModule ? 
             /******/ () => o["default"]
             /******/ : () => o
             /******/;
-            e.d(n, {
-                a: n
+            e.d(r, {
+                a: r
             });
-            /******/            return n;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (o, n) => {
-            /******/ for (var r in n) {
-                /******/ if (e.o(n, r) && !e.o(o, r)) {
-                    /******/ Object.defineProperty(o, r, {
+        /******/ e.d = (o, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(o, n)) {
+                    /******/ Object.defineProperty(o, n, {
                         enumerable: true,
-                        get: n[r]
+                        get: r[n]
                     });
                     /******/                }
                 /******/            }
@@ -64,8 +64,8 @@
         default: () => /* reexport */ w
     });
     // CONCATENATED MODULE: external "react"
-    const n = require("react");
-    var r =  e.n(n);
+    const r = require("react");
+    var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const t = require("prop-types");
     var a =  e.n(t);
@@ -84,7 +84,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function f(e, o) {
+    function d(e, o) {
         if (e) {
             if (typeof e === "function") {
                 e(o);
@@ -97,41 +97,41 @@
         }
     }
     // CONCATENATED MODULE: ./src/Dropdown/Dropdown.tsx
-    function d(e, o) {
-        return b(e) || g(e, o) || v(e, o) || p();
+    function f(e, o) {
+        return b(e) || y(e, o) || v(e, o) || p();
     }
     function p() {
         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 v(e, o) {
         if (e) {
-            if ("string" == typeof e) return y(e, o);
-            var n = {}.toString.call(e).slice(8, -1);
-            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? y(e, o) : void 0;
+            if ("string" == typeof e) return g(e, o);
+            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) ? g(e, o) : void 0;
         }
     }
-    function y(e, o) {
+    function g(e, o) {
         (null == o || o > e.length) && (o = e.length);
-        for (var n = 0, r = Array(o); n < o; n++) {
-            r[n] = e[n];
+        for (var r = 0, n = Array(o); r < o; r++) {
+            n[r] = e[r];
         }
-        return r;
+        return n;
     }
-    function g(e, o) {
-        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != n) {
-            var r, t, a, l, i = [], u = !0, c = !1;
+    function y(e, o) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var n, t, a, l, i = [], u = !0, c = !1;
             try {
-                if (a = (n = n.call(e)).next, 0 === o) {
-                    if (Object(n) !== n) return;
+                if (a = (r = r.call(e)).next, 0 === o) {
+                    if (Object(r) !== r) return;
                     u = !1;
-                } else for (;!(u = (r = a.call(n)).done) && (i.push(r.value), i.length !== o); u = !0) {
+                } else for (;!(u = (n = a.call(r)).done) && (i.push(n.value), i.length !== o); u = !0) {
                 }
             } catch (e) {
                 c = !0, t = e;
             } finally {
                 try {
-                    if (!u && null != n["return"] && (l = n["return"](), Object(l) !== l)) return;
+                    if (!u && null != r["return"] && (l = r["return"](), Object(l) !== l)) return;
                 } finally {
                     if (c) throw t;
                 }
@@ -171,11 +171,11 @@
         toggle: a().element.isRequired
     };
     function O(e) {
-        var o = e["aria-labelledby"], t = e.align, a = t === void 0 ? "center" : t, l = e.canCoverAnchor, u = l === void 0 ? true : l, p = e.children, v = e.closeReasons, y = v === void 0 ? C : v, g = e.defaultPlacement, b = g === void 0 ? "below" : g, m = e.elementRef, h = e.focusToggleReasons, O = h === void 0 ? k : h, w = e.inputId, R = e.open, S = e.openWithArrowKeys, A = e.onRequestClose, I = e.onRequestOpen, q = e.repositionMode, P = q === void 0 ? "flip" : q, D = e.retainFocus, K = D === void 0 ? false : D, j = e.takeFocus, M = j === void 0 ? true : j, T = e.toggle;
+        var o = e["aria-labelledby"], t = e.align, a = t === void 0 ? "center" : t, l = e.canCoverAnchor, u = l === void 0 ? true : l, p = e.children, v = e.closeReasons, g = v === void 0 ? C : v, y = e.defaultPlacement, b = y === void 0 ? "below" : y, m = e.elementRef, h = e.focusToggleReasons, O = h === void 0 ? k : h, w = e.inputId, R = e.open, S = e.openWithArrowKeys, A = e.onRequestClose, I = e.onRequestOpen, q = e.repositionMode, P = q === void 0 ? "flip" : q, D = e.retainFocus, K = D === void 0 ? false : D, j = e.takeFocus, M = j === void 0 ? true : j, T = e.toggle;
         // @docs-props-type DropdownPropsBase
-                var F = (0, n.useState)(null), E = d(F, 2), N = E[0], _ = E[1];
-        var x = (0, n.useState)(false), W = d(x, 2), U = W[0], z = W[1];
-        var V = (0, n.useRef)(null);
+                var F = (0, r.useState)(null), E = f(F, 2), N = E[0], _ = E[1];
+        var x = (0, r.useState)(false), W = f(x, 2), U = W[0], z = W[1];
+        var V = (0, r.useRef)(null);
         var $ = c()({
             componentName: "Dropdown",
             /* eslint-disable-next-line prefer-rest-params */
@@ -185,32 +185,32 @@
             valuePropName: "open"
         });
         var B = $ ? R : U;
-        var G = (0, n.useState)((function() {
+        var G = (0, r.useState)((function() {
             return {
                 popoverId: (0, s.createDOMID)("popover"),
                 toggleId: (0, s.createDOMID)("toggle")
             };
-        })), H = d(G, 1), J = H[0], L = J.popoverId, Q = J.toggleId;
+        })), H = f(G, 1), J = H[0], L = J.popoverId, Q = J.toggleId;
         var X = w || T.props.id || Q;
-        var Y = (0, n.useCallback)((function(e) {
+        var Y = (0, r.useCallback)((function(e) {
             V.current = e;
             _(e);
             // TS: ref does not exist on React.ReactElement - technically, this is undocumented API
-                        f(T.ref, e);
+                        d(T.ref, e);
         }), [ T ]);
         var Z = T.props.disabled;
         var ee = Z === true || Z === "disabled" || Z === "dimmed";
-        var oe = (0, n.useCallback)((function(e) {
-            var o, n;
+        var oe = (0, r.useCallback)((function(e) {
+            var o, r;
             if (ee) {
                 return;
             }
-            (o = (n = T.props).onKeyDown) === null || o === void 0 ? void 0 : o.call(n, e);
+            (o = (r = T.props).onKeyDown) === null || o === void 0 ? void 0 : o.call(r, e);
             if (!S) {
                 return;
             }
-            var r = e.key;
-            if (r === "ArrowUp" || r === "ArrowDown") {
+            var n = e.key;
+            if (n === "ArrowUp" || n === "ArrowDown") {
                 e.preventDefault();
                 I === null || I === void 0 ? void 0 : I(e, {
                     reason: "toggleKeydown"
@@ -220,20 +220,20 @@
                 }
             }
         }), [ $, ee, S, I, T ]);
-        var ne = (0, n.useCallback)((function(e) {
-            var o = e.event, n = e.reason;
-            if (o && n === "clickAway") {
-                var r = o.target;
-                while (r) {
+        var re = (0, r.useCallback)((function(e) {
+            var o = e.event, r = e.reason;
+            if (o && r === "clickAway") {
+                var n = o.target;
+                while (n) {
                     // Ignore clicks on toggle.
-                    if (V.current === r) {
+                    if (V.current === n) {
                         return;
                     }
-                    r = r.parentNode;
+                    n = n.parentNode;
                 }
             }
-            if (B && y.includes(n)) {
-                if (O.includes(n)) {
+            if (B && g.includes(r)) {
+                if (O.includes(r)) {
                     var t;
                     (t = V.current) === null || t === void 0 ? void 0 : t.focus();
                 }
@@ -242,22 +242,28 @@
                 }
                 A === null || A === void 0 ? void 0 : A(e);
             }
-        }), [ y, O, $, B, A ]);
-        var re = (0, n.useCallback)((function(e) {
-            ne({
+        }), [ g, O, $, B, A ]);
+        var ne = (0, r.useCallback)((function(e) {
+            var o, r;
+            // Don't close the dropdown when clicking a disabled item.
+                        var n = (o = (r = e.target).closest) === null || o === void 0 ? void 0 : o.call(r, '[aria-disabled="true"]');
+            if (n && e.currentTarget.contains(n)) {
+                return;
+            }
+            re({
                 reason: "contentClick",
                 event: e
             });
-        }), [ ne ]);
-        var te = (0, n.useCallback)((function(e) {
-            var o, n;
+        }), [ re ]);
+        var te = (0, r.useCallback)((function(e) {
+            var o, r;
             if (ee) {
                 e.preventDefault();
                 return;
             }
-            (o = (n = T.props).onClick) === null || o === void 0 ? void 0 : o.call(n, e);
+            (o = (r = T.props).onClick) === null || o === void 0 ? void 0 : o.call(r, e);
             if (B) {
-                ne({
+                re({
                     reason: "toggleClick",
                     event: e
                 });
@@ -269,8 +275,8 @@
                     z(true);
                 }
             }
-        }), [ ne, $, B, ee, I, T ]);
-        var ae =  (0, n.cloneElement)(T, {
+        }), [ re, $, B, ee, I, T ]);
+        var ae =  (0, r.cloneElement)(T, {
             onClick: te,
             onKeyDown: oe,
             ref: Y,
@@ -282,16 +288,16 @@
             id: X
         });
         
-        return r().createElement(r().Fragment, null, ae,  r().createElement(i(), {
+        return n().createElement(n().Fragment, null, ae,  n().createElement(i(), {
             align: a,
             open: !!N && B,
-            autoCloseWhenOffScreen: y.includes("offScreen"),
+            autoCloseWhenOffScreen: g.includes("offScreen"),
             anchor: N,
             canCoverAnchor: u,
             elementRef: m,
             retainFocus: K,
             defaultPlacement: b,
-            onRequestClose: ne,
+            onRequestClose: re,
             repositionMode: P,
             id: L,
             "aria-labelledby": "".concat(o !== null && o !== void 0 ? o : "", " ").concat(X).trim(),
@@ -300,14 +306,14 @@
         }, typeof p === "function" ? function() {
             
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-            return r().createElement("div", {
-                onClick: re
+            return n().createElement("div", {
+                onClick: ne
             }, p.apply(void 0, arguments));
         } : 
         
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-        r().createElement("div", {
-            onClick: re
+        n().createElement("div", {
+            onClick: ne
         }, p)));
     }
     O.propTypes = h;

package/LICENSE

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2026 Cisco Systems, Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/MIGRATION.md

@@ -2,6 +2,46 @@
 
 This document lists migration guidance for new features and breaking changes.
 
+## 5.10.0
+
+### Deprecated `ColumnLayout`
+
+#### Change
+`ColumnLayout` has been deprecated and will be removed in a future major version.
+
+#### Context
+`ColumnLayout` is a flexbox-based component that provides a 12-column grid abstraction. It exists for historical and backwards-compatibility reasons. We recommend migrating to CSS `grid` directly, which provides better styling control, supports intrinsic sizing, allows the use of design tokens for spacing, and avoids the overhead of a React component.
+
+#### Migration steps
+If you aren't familiar with CSS grid layout, explore some of the following resources before migrating:
+- [CSS grid layout guide](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout)
+- [Basic concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Basic_concepts)
+- [CSS grid property reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid)
+
+Replace `ColumnLayout`, `ColumnLayout.Row`, and `ColumnLayout.Column` with CSS `grid`. Use `gridColumn` with `span` for column widths, and replace the `gutter` prop with `gap`:
+
+```jsx
+// Before
+<ColumnLayout gutter={8}>
+    <ColumnLayout.Row>
+        <ColumnLayout.Column span={3}>Column</ColumnLayout.Column>
+        <ColumnLayout.Column span={9}>Content</ColumnLayout.Column>
+    </ColumnLayout.Row>
+</ColumnLayout>
+
+// After
+const StyledGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: ${variables.spacingSmall};
+`;
+
+<StyledGrid>
+    <div style={{ gridColumn: 'span 3' }}>Column</div>
+    <div style={{ gridColumn: 'span 9' }}>Content</div>
+</StyledGrid>
+```
+
 ## 5.5.0
 
 ### Deprecated `Switch`'s `selectedLabel`, `someSelectedLabel`, and `unselectedLabel` props