@splunk/react-ui 5.2.0 → 5.4.0

package/ButtonSimple.js

@@ -61,8 +61,8 @@
         r.r(e);
     // EXPORTS
         r.d(e, {
-        buttonMixin: () => /* reexport */ g,
-        default: () => /* reexport */ h
+        buttonMixin: () => /* reexport */ f,
+        default: () => /* reexport */ A
     });
     // CONCATENATED MODULE: external "react"
     const o = require("react");
@@ -79,8 +79,8 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const s = require("@splunk/themes");
     // CONCATENATED MODULE: external "lodash/merge"
-    const v = require("lodash/merge");
-    var b =  r.n(v);
+    const b = require("lodash/merge");
+    var v =  r.n(b);
     // CONCATENATED MODULE: ./src/ButtonSimple/mixin.ts
     function u(r) {
         "@babel/helpers - typeof";
@@ -100,9 +100,9 @@
         var i;
         var c;
         var l;
-        var d = s.variables.contentColorActive;
-        var v;
-        var b = s.variables.contentColorDisabled;
+        var d = s.variables.actionColorContentSecondary;
+        var b;
+        var v = s.variables.actionColorContentSecondaryDisabled;
         var u;
         switch (r) {
           case "primary":
@@ -111,8 +111,8 @@
                 o = s.variables.actionColorBackgroundPrimaryActive;
                 a = s.variables.actionColorBackgroundPrimaryDisabled;
                 t = s.variables.actionColorBackgroundPrimaryHover;
-                d = s.variables.contentColorInverted;
-                b = s.variables.contentColorInverted;
+                d = s.variables.actionColorContentPrimary;
+                v = s.variables.actionColorContentPrimaryDisabled;
                 break;
             }
 
@@ -122,8 +122,8 @@
                 o = s.variables.actionColorBackgroundDestructiveActive;
                 a = s.variables.actionColorBackgroundDestructiveDisabled;
                 t = s.variables.actionColorBackgroundDestructiveHover;
-                d = s.variables.contentColorInverted;
-                b = s.variables.contentColorInverted;
+                d = s.variables.actionColorContentDestructive;
+                v = s.variables.actionColorContentDestructiveDisabled;
                 break;
             }
 
@@ -137,8 +137,8 @@
                 o = s.variables.actionColorBackgroundDestructiveSecondaryActive;
                 a = s.variables.actionColorBackgroundDestructiveSecondaryDisabled;
                 t = s.variables.actionColorBackgroundDestructiveSecondaryHover;
-                d = s.variables.contentColorNegative;
-                b = s.variables.contentColorNegativeWeak;
+                d = s.variables.actionColorContentDestructiveSecondary;
+                v = s.variables.actionColorContentDestructiveSecondaryDisabled;
                 break;
             }
 
@@ -153,20 +153,20 @@
             break;
 
           case "subtle":
-            v = s.variables.contentColorAccentStrong;
-            u = s.variables.contentColorAccentStrong;
             o = s.variables.actionColorBackgroundSubtleActive;
             t = s.variables.actionColorBackgroundSubtleHover;
+            b = s.variables.actionColorContentSubtleActive;
+            u = s.variables.actionColorContentSubtleHover;
             break;
 
           case "standalone":
-            d = s.variables.contentColorAccent;
-            v = s.variables.contentColorAccentStrong;
-            b = s.variables.contentColorAccentWeak;
-            u = s.variables.contentColorAccentStrong;
             e = s.variables.actionColorBackgroundSubtle;
             o = s.variables.actionColorBackgroundSubtleActive;
             t = s.variables.actionColorBackgroundSubtleHover;
+            d = s.variables.actionColorContentStandalone;
+            b = s.variables.actionColorContentStandaloneActive;
+            v = s.variables.actionColorContentStandaloneDisabled;
+            u = s.variables.actionColorContentStandaloneHover;
             break;
 
           default:
@@ -181,13 +181,13 @@
             borderColorDisabled: c,
             borderColorHover: l,
             color: d,
-            colorActive: v,
-            colorDisabled: b,
+            colorActive: b,
+            colorDisabled: v,
             colorHover: u
         };
         return p;
     }
-    function f(r, e) {
+    function C(r, e) {
         var o = typeof r === "string" && p.includes(r) ? r : undefined;
         var a = {};
         if (o && e !== undefined) {
@@ -196,50 +196,50 @@
             a = r;
         }
         var t = y(o);
-        var n = b()(t, a), c = n.background, l = n.backgroundActive, d = n.backgroundDisabled, v = n.backgroundDisabledSelected, f = n.backgroundHover, g = n.borderColor, C = n.borderColorActive, k = n.borderColorDisabled, S = n.borderColorHover, m = n.color, B = n.colorActive, A = n.colorDisabled, D = n.colorHover;
-        var h = c != null && c !== "transparent";
+        var n = v()(t, a), c = n.background, l = n.backgroundActive, d = n.backgroundDisabled, b = n.backgroundDisabledSelected, C = n.backgroundHover, f = n.borderColor, g = n.borderColorActive, S = n.borderColorDisabled, k = n.borderColorHover, m = n.color, D = n.colorActive, B = n.colorDisabled, h = n.colorHover;
+        var A = c != null && c !== "transparent";
         return function() {
-            return (0, i.css)([ "border:", " solid ", ";border-radius:", ";", " ", " cursor:pointer;position:relative;font-weight:", ";&:focus,&:hover{z-index:3;}&:focus{box-shadow:", ";}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";border-color:", ";color:", ";transition:none;}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";", "}" ], s.variables.inputBorderWidth, g, s.variables.borderRadius, (function(r) {
+            return (0, i.css)([ "border:", " solid ", ";border-radius:", ";", " ", " cursor:pointer;position:relative;font-weight:", ";&:focus,&:hover{z-index:3;}&:focus{box-shadow:", ";}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";border-color:", ";color:", ";transition:none;}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";", "}" ], s.variables.inputBorderWidth, f, s.variables.borderRadius, (function(r) {
                 var e = r.$append;
                 return e && (0, i.css)([ "border-top-right-radius:0.1px;border-bottom-right-radius:0.1px;border-right:none;" ]);
             }), (function(r) {
                 var e = r.$prepend;
                 return e && (0, i.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
-            }), s.variables.fontWeightSemiBold, s.variables.focusShadow, c, m, f, S, D, l, C, B, k, A, (function(r) {
+            }), s.variables.fontWeightSemiBold, s.variables.focusShadow, c, m, C, k, h, l, g, D, S, B, (function(r) {
                 var e = r.$selected;
-                return h && (0, i.css)([ "background-color:", ";" ], e ? v : d);
+                return A && (0, i.css)([ "background-color:", ";" ], e ? b : d);
             }));
         };
     }
-    /* harmony default export */    const g = f;
+    /* harmony default export */    const f = C;
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimpleStyles.ts
-    var C = {
+    var g = {
         borderColor: s.variables.interactiveColorAccentError,
         borderColorActive: s.variables.interactiveColorAccentError,
         borderColorHover: s.mixins.overlayColors(s.variables.interactiveColorAccentError, s.variables.interactiveColorBorderHover)
     };
-    var k = c()(d()).withConfig({
+    var S = c()(d()).withConfig({
         displayName: "ButtonSimpleStyles__StyledClickable",
         componentId: "vlarwe-0"
     })([ "", " align-items:center;justify-content:center;&:not([disabled],[aria-disabled='true']){", "}", "" ], s.mixins.reset("flex"), (function(r) {
         var e = r.$error;
         return e && (0, i.css)([ "", "" ], (0, s.pickVariant)("$variant", {
-            default: g("secondary", C),
-            secondary: g("secondary", C),
-            subtle: g("subtle", C)
+            default: f("secondary", g),
+            secondary: f("secondary", g),
+            subtle: f("subtle", g)
         }));
     }), (0, s.pickVariant)("$variant", {
-        default: g("secondary"),
-        primary: g("primary"),
-        secondary: g("secondary"),
-        subtle: g("subtle"),
-        destructive: g("destructive"),
-        destructiveSecondary: g("destructiveSecondary"),
-        standalone: g("standalone")
+        default: f("secondary"),
+        primary: f("primary"),
+        secondary: f("secondary"),
+        subtle: f("subtle"),
+        destructive: f("destructive"),
+        destructiveSecondary: f("destructiveSecondary"),
+        standalone: f("standalone")
     }));
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimple.tsx
-    function S() {
-        return S = Object.assign ? Object.assign.bind() : function(r) {
+    function k() {
+        return k = Object.assign ? Object.assign.bind() : function(r) {
             for (var e = 1; e < arguments.length; e++) {
                 var o = arguments[e];
                 for (var a in o) {
@@ -247,11 +247,11 @@
                 }
             }
             return r;
-        }, S.apply(null, arguments);
+        }, k.apply(null, arguments);
     }
     function m(r, e) {
         if (null == r) return {};
-        var o, a, t = B(r, e);
+        var o, a, t = D(r, e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(r);
             for (a = 0; a < n.length; a++) {
@@ -260,7 +260,7 @@
         }
         return t;
     }
-    function B(r, e) {
+    function D(r, e) {
         if (null == r) return {};
         var o = {};
         for (var a in r) {
@@ -271,7 +271,7 @@
         }
         return o;
     }
-    var A = {
+    var B = {
         action: n().string,
         appearance: n().oneOf([ "default", "secondary", "primary", "destructive", "destructiveSecondary", "subtle", "standalone" ]),
         append: n().bool,
@@ -284,11 +284,11 @@
         prepend: n().bool,
         to: n().string
     };
-    var D =  a().forwardRef((function(r, e) {
-        var o = r.appearance, t = o === void 0 ? "default" : o, n = r.append, i = r.children, c = r.disabled, l = r.error, d = r.isMenu, s = r.prepend, v = m(r, [ "appearance", "append", "children", "disabled", "error", "isMenu", "prepend" ]);
+    var h =  a().forwardRef((function(r, e) {
+        var o = r.appearance, t = o === void 0 ? "default" : o, n = r.append, i = r.children, c = r.disabled, l = r.error, d = r.isMenu, s = r.prepend, b = m(r, [ "appearance", "append", "children", "disabled", "error", "isMenu", "prepend" ]);
         // @docs-props-type ButtonSimplePropsBase
                 
-        return a().createElement(k, S({
+        return a().createElement(S, k({
             "aria-invalid": l,
             "data-test": "button-simple",
             disabled: c,
@@ -298,10 +298,10 @@
             $error: l,
             $isMenu: d,
             ref: e
-        }, v), i);
+        }, b), i);
     }));
-    D.propTypes = A;
-    /* harmony default export */    const h = D;
+    h.propTypes = B;
+    /* harmony default export */    const A = h;
     // only for styled-components that wrap ButtonSimple
         // CONCATENATED MODULE: ./src/ButtonSimple/index.ts
     module.exports = e;

package/CHANGELOG.md

@@ -1,6 +1,52 @@
 Change Log
 ============
 
+5.4.0 - October 7, 2025
+----------
+New Features:
+* `Switch` supports new `describedBy` prop to associate `ControlGroup`'s help component to the toggle (SUI-6140).
+* `StepBar` now supports vertical layout with new `orientation` prop (SUI-8210).
+
+Bug Fixes:
+* `CollapsiblePanel` actions are properly justified to the end (SUI-8173).
+* `Menu.Item` no longer throws invalid prop warning caused by default `selectableAppearance` value (SUI-8195).
+* Table's layout was breaking when any of its `HeadCell`s had a `width` value of `undefined` (SUI-8064).
+* `Popover`'s arrow no longer occasionally separates from the content when the browser is zoomed (SUI-7977).
+* `Avatar`'s initials no longer become misaligned if browser is zoomed in Safari  (SUI-8186).
+* `Popover` will no longer briefly render in an incorrect position when resized (SUI-8062).
+* `SlidingPanels` now has animation when rendering in React 16.8 (SUI-8124).
+* `Slider` now shows step marks in minimum value state (SUI-7960).
+
+5.3.0 - September 2, 2025
+----------
+New Features:
+* New `Checkbox` component (SUI-6373).
+* `Multiselect` and `Date` support new `append` and `prepend` props (SUI-8052).
+* `DefinitionList`'s `layout` prop now supports `"stacked"` layout (SUI-7880).
+* `Search` supports new `append` and `prepend` props (SUI-8081).
+* `File` now supports a new `inputId` prop (SUI-8031).
+* `Code` supports new `containerAppearance` prop (SUI-8158).
+
+Bug Fixes:
+* `Select` with `filter` now has visual affordance for selected + active options (SUI-8045).
+* `Multiselect` with `compact` now has visual affordance for selected + active options (SUI-8045).
+* `CollapsiblePanel`'s expand panel icon is now unified for all themes (SUI-8043).
+* `Text` password toggle icons now are consistent across all themes (SUI-8127).
+* `Modal.Footer` now correctly aligns `Button`s that render as anchor elements in `layout="auto"` (SUI-8116).
+* `DefinitionList`'s separator character now spans the full width in `layout="auto"` when the separator is a narrower character (SUI-7880).
+* `Dropdown` now closes on click when using server-side rendering (SUI-8123).
+* `TextArea`'s height was incorrect in compact mode. The height been aligned with other data entry components (SUI-8053).
+* `ControlGroup`'s label is correctly applied to `File` (SUI-8031).
+* `JSONTreeItem` now uses unique DOM `id`s by default (SUI-8159).
+* `Link` disabled state style updated to match button (SUI-8101).
+* Fixed `JSONTree`'s keyboard navigation and indent styling (SUI-8131).
+* Fixed `Avatar`'s initials being misaligned in Safari (SUI-8098).
+* Improved `Avatar`'s rendering of initials with 3 or more characters (SUI-8098).
+* `TextArea` adornments are now vertically aligned (SUI-7793).
+
+Deprecations:
+* `Switch`'s `appearance="checkbox"` prop value has been deprecated and will be removed in the next major version. See the migration guide for details (SUI-8179).
+
 5.2.0 - August 5, 2025
 ----------
 New Features:
@@ -23,6 +69,7 @@ Bug Fixes:
 * `Layer` no longer throws an error when one of its `children` becomes fullscreen (SUI-8014).
 * Improved `Table`'s truncation behavior in low string length label scenarios and improved probability of truncation ellipses showing in full (SUI-8025).
 * `Menu.Item` now enforces through TypeScript types that `selected` and `selectableAppearance` props can only be used when `selectable` is enabled (SUI‑6495).
+* `Tooltip` now supports a `pointTo` prop (SUI-8133).
 
 5.1.0 - July 2, 2025
 ----------

package/Calendar.js

@@ -163,7 +163,8 @@
     };
     function w(e) {
         var a = e.active, t = a === void 0 ? false : a, o = e.dayOfWeek, i = e.locale, u = i === void 0 ? "en_US" : i, 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 = D(e, [ "active", "dayOfWeek", "locale", "onClick", "onKeyDown", "selected", "today", "value" ]);
-        var g = (0, r.useCallback)((function(e) {
+        // @docs-props-type DayPropsBase
+                var g = (0, r.useCallback)((function(e) {
             e.preventDefault();
             c === null || c === void 0 ? void 0 : c(e, {
                 value: Y
@@ -239,7 +240,8 @@
     };
     function E(e) {
         var a = e.displayValue, r = e.endDate, t = e.highlightToday, o = e.locale, i = e.onChange, u = e.onKeyDown, c = e.selectedDate, d = e.selectedValue, s = e.startDate, v = e.todayValue;
-        var f = l()(s).locale(o).startOf("month");
+        // @docs-props-type DateGridPropsBase
+                var f = l()(s).locale(o).startOf("month");
         var y = [];
         while (f.isSameOrBefore(r)) {
             var Y = f.format("YYYY-MM-DD");
@@ -498,7 +500,8 @@
     }
     function J(e) {
         var a = e.headingId, t = e.locale, o = t === void 0 ? "en_US" : t, i = e.onChange, u = e.value, c = L(e, [ "headingId", "locale", "onChange", "value" ]);
-        var d = (0, r.useCallback)((function(e, a) {
+        // @docs-props-type MonthHeaderPropsBase
+                var d = (0, r.useCallback)((function(e, a) {
             e.stopPropagation();
             var r = l()(u, "YYYY-MM-DD").add(a, "M").format("YYYY-MM-DD");
             i === null || i === void 0 ? void 0 : i(e, {
@@ -665,7 +668,8 @@
     };
     function ye(e) {
         var a = e.describedBy, t = e.elementRef, o = e.highlightToday, i = 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 ? l()().format("YYYY-MM-DD") : Y, g = ie(e, [ "describedBy", "elementRef", "highlightToday", "labelledBy", "locale", "mockDate", "onChange", "required", "value" ]);
-        var b = (0, r.useState)(p), h = ae(b, 2), m = h[0], D = h[1];
+        // @docs-props-type CalendarPropsBase
+                var b = (0, r.useState)(p), h = ae(b, 2), m = h[0], D = h[1];
         var M = (0, r.useState)(s || se(d)), O = ae(M, 2), w = O[0], C = O[1];
         var k = (0, r.useState)(null), S = ae(k, 2), x = S[0], I = S[1];
         var E = (0, r.useRef)((0, u.createDOMID)("header"));

package/CardLayout.js

@@ -67,21 +67,21 @@
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
+    const o = require("prop-types");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
     const a = require("styled-components");
     var c =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const l = require("@splunk/themes");
+    const u = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/CardLayout/CardLayoutStyles.ts
-    var u = c().div.withConfig({
+    var l = c().div.withConfig({
         displayName: "CardLayoutStyles__Styled",
         componentId: "sc-18kz7zm-0"
-    })([ "", ";", " ", "" ], l.mixins.reset("flex"), (function(e) {
+    })([ "", ";", " ", "" ], u.mixins.reset("flex"), (function(e) {
         var r = e.$wrapCards;
         return r && (0, a.css)([ "flex-wrap:wrap;" ]);
-    }), (0, l.pickVariant)("$alignCards", {
+    }), (0, u.pickVariant)("$alignCards", {
         center: (0, a.css)([ "justify-content:center;" ]),
         right: (0, a.css)([ "justify-content:flex-end;" ])
     }));
@@ -94,8 +94,8 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, f(e);
     }
-    function d() {
-        return d = Object.assign ? Object.assign.bind() : function(e) {
+    function s() {
+        return s = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -103,9 +103,9 @@
                 }
             }
             return e;
-        }, d.apply(null, arguments);
+        }, s.apply(null, arguments);
     }
-    function s(e, r) {
+    function d(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -118,9 +118,9 @@
     function p(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? s(Object(t), !0).forEach((function(r) {
+            r % 2 ? d(Object(t), !0).forEach((function(r) {
                 y(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : s(Object(t)).forEach((function(r) {
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : d(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
@@ -148,18 +148,18 @@
         }
         return ("string" === r ? String : Number)(e);
     }
-    function g(e, r) {
+    function v(e, r) {
         if (null == e) return {};
-        var t, n, i = v(e, r);
+        var t, n, o = g(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
-        return i;
+        return o;
     }
-    function v(e, r) {
+    function g(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -171,35 +171,38 @@
         return t;
     }
     var O = {
-        alignCards: o().oneOf([ "left", "center", "right" ]),
-        cardMaxWidth: o().oneOfType([ o().number, o().string ]),
-        cardMinWidth: o().oneOfType([ o().number, o().string ]),
-        cardWidth: o().oneOfType([ o().number, o().string ]),
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        gutterSize: o().number,
-        wrapCards: o().bool
+        alignCards: i().oneOf([ "left", "center", "right" ]),
+        cardMaxWidth: i().oneOfType([ i().number, i().string ]),
+        cardMinWidth: i().oneOfType([ i().number, i().string ]),
+        cardWidth: i().oneOfType([ i().number, i().string ]),
+        children: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        gutterSize: i().number,
+        wrapCards: i().bool
     };
     function h(e) {
-        var r = e.alignCards, i = r === void 0 ? "left" : r, o = e.cardMaxWidth, a = e.cardMinWidth, c = e.cardWidth, l = e.children, f = e.elementRef, s = e.gutterSize, y = s === void 0 ? 10 : s, b = e.style, m = e.wrapCards, v = m === void 0 ? true : m, O = g(e, [ "alignCards", "cardMaxWidth", "cardMinWidth", "cardWidth", "children", "elementRef", "gutterSize", "style", "wrapCards" ]);
+        var r = e.alignCards, o = r === void 0 ? "left" : r, i = e.cardMaxWidth, a = e.cardMinWidth, c = e.cardWidth, u = e.children, f = e.elementRef, d = e.gutterSize, y = d === void 0 ? 10 : d, b = e.style, m = e.wrapCards, g = m === void 0 ? true : m, O = v(e, [ "alignCards", "cardMaxWidth", "cardMinWidth", "cardWidth", "children", "elementRef", "gutterSize", "style", "wrapCards" ]);
  // @docs-props-type CardLayoutPropsBase
-                var h = t.Children.toArray(l).filter(t.isValidElement).map((function(e) {
+                var h = t.Children.toArray(u).filter(t.isValidElement).map((function(e) {
             
             return (0, t.cloneElement)(e, {
                 minWidth: c || a || undefined,
-                maxWidth: c || o || undefined,
+                maxWidth: c || i || undefined,
                 margin: y / 2
             });
         }));
+        var j = (0, t.useMemo)((function() {
+            return p({
+                padding: y / 2
+            }, b);
+        }), [ y, b ]);
         
-        return n().createElement(u, d({
+        return n().createElement(l, s({
             "data-test": "card-layout",
-            $alignCards: i,
-            $wrapCards: v,
+            $alignCards: o,
+            $wrapCards: g,
             ref: f,
-            style: p({
-                padding: y / 2
-            }, b)
+            style: j
         }, O), h);
     }
     h.propTypes = O;

package/Checkbox.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/Checkbox';
+export * from './types/src/Checkbox';