@splunk/react-ui 5.2.0 → 5.3.0

package/Tooltip.js

@@ -294,6 +294,10 @@
         onRequestOpen: i().func,
         open: i().bool,
         openDelay: i().oneOfType([ i().oneOf([ "primary", "secondary" ]), i().number ]),
+        pointTo: i().shape({
+            x: i().number,
+            y: i().number
+        }),
         /** @private */
         prepend: i().bool,
         renderAnchor: i().func
@@ -307,20 +311,20 @@
  * The Tooltip component wraps arbitrary content to be displayed when the target element is hovered
  * or focused.
  */    function X(e) {
-        var n = e.appearance, o = e.append, l = e.children, i = e.closeDelay, u = i === void 0 ? 300 : i, s = e.closeWhen, c = s === void 0 ? "default" : s, p = e.content, d = e.contentRelationship, g = e.defaultPlacement, O = g === void 0 ? "above" : g, h = e.elementRef, S = e.inline, C = S === void 0 ? true : S, L = e.onRequestClose, I = e.onRequestOpen, _ = e.open, D = e.openDelay, M = D === void 0 ? "primary" : D, x = e.renderAnchor, B = e.prepend, H = W(e, [ "appearance", "append", "children", "closeDelay", "closeWhen", "content", "contentRelationship", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "open", "openDelay", "renderAnchor", "prepend" ]);
+        var n = e.appearance, o = e.append, l = e.children, i = e.closeDelay, u = i === void 0 ? 300 : i, s = e.closeWhen, c = s === void 0 ? "default" : s, p = e.content, d = e.contentRelationship, g = e.defaultPlacement, O = g === void 0 ? "above" : g, h = e.elementRef, S = e.inline, C = S === void 0 ? true : S, L = e.onRequestClose, I = e.onRequestOpen, _ = e.open, D = e.openDelay, M = D === void 0 ? "primary" : D, x = e.renderAnchor, B = e.pointTo, H = e.prepend, F = W(e, [ "appearance", "append", "children", "closeDelay", "closeWhen", "content", "contentRelationship", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "open", "openDelay", "renderAnchor", "pointTo", "prepend" ]);
         // @docs-props-type TooltipPropsBase
-                var F = (0, r.useState)(false), K = N(F, 2), V = K[0], U = K[1];
-        var $ = (0, r.useState)(null), z = N($, 2), X = z[0], Y = z[1];
-        var Z = (0, r.useState)(null), ee = N(Z, 2), ne = ee[0], re = ee[1];
-        var te = (0, r.useState)(null), oe = N(te, 2), ae = oe[0], le = oe[1];
-        var ie = (0, r.useState)(null), ue = N(ie, 2), se = ue[0], ce = ue[1];
-        var fe = (0, r.useState)((function() {
+                var K = (0, r.useState)(false), V = N(K, 2), U = V[0], $ = V[1];
+        var z = (0, r.useState)(null), X = N(z, 2), Y = X[0], Z = X[1];
+        var ee = (0, r.useState)(null), ne = N(ee, 2), re = ne[0], te = ne[1];
+        var oe = (0, r.useState)(null), ae = N(oe, 2), le = ae[0], ie = ae[1];
+        var ue = (0, r.useState)(null), se = N(ue, 2), ce = se[0], fe = se[1];
+        var pe = (0, r.useState)((function() {
             return {
                 ariaId: (0, y.createDOMID)("aria-id"),
                 popoverId: (0, y.createDOMID)("popover")
             };
-        })), pe = N(fe, 1), ve = pe[0], de = ve.ariaId, me = ve.popoverId;
-        var be = m()({
+        })), ve = N(pe, 1), de = ve[0], me = de.ariaId, be = de.popoverId;
+        var ye = m()({
             componentName: "Tooltip",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
@@ -328,189 +332,189 @@
             defaultValuePropName: "defaultOpen",
             valuePropName: "open"
         });
-        var ye = (0, r.useMemo)((function() {
+        var ge = (0, r.useMemo)((function() {
             var e = !!p;
-            return !!X && be ? _ : e && V;
-        }), [ X, p, be, V, _ ]);
-        var ge = (0, r.useRef)();
+            return !!Y && ye ? _ : e && U;
+        }), [ Y, p, ye, U, _ ]);
+        var Oe = (0, r.useRef)();
         (0, r.useEffect)((function() {
             return function() {
-                if (ge.current !== undefined) {
-                    clearTimeout(ge.current);
+                if (Oe.current !== undefined) {
+                    clearTimeout(Oe.current);
                 }
             };
         }), []);
-        var Oe = (0, r.useCallback)((function(e, n) {
-            if (ge.current !== undefined) {
-                clearTimeout(ge.current);
+        var he = (0, r.useCallback)((function(e, n) {
+            if (Oe.current !== undefined) {
+                clearTimeout(Oe.current);
             }
-            ge.current = setTimeout((function() {
-                if (!be) {
-                    U(false);
+            Oe.current = setTimeout((function() {
+                if (!ye) {
+                    $(false);
                 }
                 L === null || L === void 0 ? void 0 : L(e, n);
             }), u);
-        }), [ u, be, L ]);
-        var he = (0, r.useCallback)((function(e, n) {
+        }), [ u, ye, L ]);
+        var Se = (0, r.useCallback)((function(e, n) {
             var r = M === "primary" ? 300 : 750;
             var t = typeof M === "number" ? M : r;
-            if (ge.current !== undefined) {
-                clearTimeout(ge.current);
+            if (Oe.current !== undefined) {
+                clearTimeout(Oe.current);
             }
-            ge.current = setTimeout((function() {
-                var r = ye;
-                if (!be) {
-                    U(true);
+            Oe.current = setTimeout((function() {
+                var r = ge;
+                if (!ye) {
+                    $(true);
                 }
                 if (!r) {
                     I === null || I === void 0 ? void 0 : I(e, n);
                 }
             }), t);
-        }), [ be, ye, I, M ]);
-        var Se = (0, r.useCallback)((function(e) {
-            he(e, {
+        }), [ ye, ge, I, M ]);
+        var Ce = (0, r.useCallback)((function(e) {
+            Se(e, {
                 reason: "mouseEnterToggle"
             });
-        }), [ he ]);
-        var Ce = (0, r.useCallback)((function(e) {
-            he(e, {
+        }), [ Se ]);
+        var ke = (0, r.useCallback)((function(e) {
+            Se(e, {
                 reason: "mouseEnterPopover"
             });
-        }), [ he ]);
-        var ke = (0, r.useCallback)((function(e) {
-            he(e, {
+        }), [ Se ]);
+        var Ee = (0, r.useCallback)((function(e) {
+            Se(e, {
                 reason: "mouseEnterHitArea"
             });
-        }), [ he ]);
-        var Ee = (0, r.useCallback)((function(e) {
+        }), [ Se ]);
+        var Te = (0, r.useCallback)((function(e) {
             var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "mouseLeaveToggle";
-            if (e.relatedTarget == null || e.relatedTarget !== ae && e.relatedTarget !== se) {
-                Oe(e, {
+            if (e.relatedTarget == null || e.relatedTarget !== le && e.relatedTarget !== ce) {
+                he(e, {
                     reason: n
                 });
             }
-        }), [ Oe, ae, se ]);
-        var Te = (0, r.useCallback)((function(e) {
-            Ee(e, "mouseLeavePopover");
-        }), [ Ee ]);
+        }), [ he, le, ce ]);
         var Pe = (0, r.useCallback)((function(e) {
-            Ee(e, "mouseLeaveHitArea");
-        }), [ Ee ]);
+            Te(e, "mouseLeavePopover");
+        }), [ Te ]);
         var je = (0, r.useCallback)((function(e) {
-            Oe(e, {
+            Te(e, "mouseLeaveHitArea");
+        }), [ Te ]);
+        var we = (0, r.useCallback)((function(e) {
+            he(e, {
                 reason: "mouseStopHitArea"
             });
-        }), [ Oe ]);
-        var we = a()(je, 10);
-        var Re = (0, r.useCallback)((function(e) {
+        }), [ he ]);
+        var Re = a()(we, 10);
+        var Le = (0, r.useCallback)((function(e) {
             // Handle mouse events with native events due to current issues with how they
             // are handled by react. See https://github.com/facebook/react/issues/4251,
             // https://github.com/facebook/react/issues/19419, and SUI-1232.
-            if (e) {
-                e.addEventListener("mouseenter", Se);
-                e.addEventListener("mouseleave", Ee);
-            } else if (X) {
-                X.removeEventListener("mouseenter", Se);
-                X.removeEventListener("mouseleave", Ee);
-            }
-            Y(e);
-        }), [ X, Se, Ee ]);
-        var Le = (0, r.useCallback)((function(e) {
             if (e) {
                 e.addEventListener("mouseenter", Ce);
                 e.addEventListener("mouseleave", Te);
-            } else if (ae) {
-                ae.removeEventListener("mouseenter", Ce);
-                ae.removeEventListener("mouseleave", Te);
+            } else if (Y) {
+                Y.removeEventListener("mouseenter", Ce);
+                Y.removeEventListener("mouseleave", Te);
             }
-            le(e);
-        }), [ Ce, Te, ae ]);
+            Z(e);
+        }), [ Y, Ce, Te ]);
         var qe = (0, r.useCallback)((function(e) {
-            ce(e);
-        }), []);
+            if (e) {
+                e.addEventListener("mouseenter", ke);
+                e.addEventListener("mouseleave", Pe);
+            } else if (le) {
+                le.removeEventListener("mouseenter", ke);
+                le.removeEventListener("mouseleave", Pe);
+            }
+            ie(e);
+        }), [ ke, Pe, le ]);
         var Ie = (0, r.useCallback)((function(e) {
+            fe(e);
+        }), []);
+        var Ae = (0, r.useCallback)((function(e) {
             // Handle mouse events with native events due to current issues with how they
             // are handled by react. See https://github.com/facebook/react/issues/4251,
             // https://github.com/facebook/react/issues/19419, and SUI-1232.
             if (e) {
-                e.addEventListener("mouseenter", ke);
-                e.addEventListener("mousemove", we);
-                e.addEventListener("mouseleave", Pe);
-            } else if (ne) {
-                ne.removeEventListener("mouseenter", ke);
-                ne.removeEventListener("mousemove", we);
-                ne.removeEventListener("mouseleave", Pe);
+                e.addEventListener("mouseenter", Ee);
+                e.addEventListener("mousemove", Re);
+                e.addEventListener("mouseleave", je);
+            } else if (re) {
+                re.removeEventListener("mouseenter", Ee);
+                re.removeEventListener("mousemove", Re);
+                re.removeEventListener("mouseleave", je);
             }
-            re(e);
-        }), [ ke, Pe, we, ne ]);
-        var Ae = (0, r.useCallback)((function(e) {
+            te(e);
+        }), [ Ee, je, Re, re ]);
+        var _e = (0, r.useCallback)((function(e) {
             if (c !== "notOnClick") {
-                Oe(e, {
+                he(e, {
                     reason: "toggleClick"
                 });
             }
-        }), [ c, Oe ]);
-        var _e = (0, r.useCallback)((function(e) {
-            he(e, {
+        }), [ c, he ]);
+        var De = (0, r.useCallback)((function(e) {
+            Se(e, {
                 reason: "focusToggle"
             });
-        }), [ he ]);
-        var De = (0, r.useCallback)((function(e) {
-            Oe(e, {
+        }), [ Se ]);
+        var Me = (0, r.useCallback)((function(e) {
+            he(e, {
                 reason: "blurToggle"
             });
-        }), [ Oe ]);
-        var Me = (0, r.useCallback)((function(e) {
-            Oe(null, e);
-        }), [ Oe ]);
+        }), [ he ]);
         var Ne = (0, r.useCallback)((function(e) {
-            Re(e);
+            he(null, e);
+        }), [ he ]);
+        var xe = (0, r.useCallback)((function(e) {
+            Le(e);
             R(h, e);
-        }), [ h, Re ]);
-        var xe = (0, r.useMemo)((function() {
+        }), [ h, Le ]);
+        var Be = (0, r.useMemo)((function() {
             return {
                 "data-test": "toggle",
-                elementRef: Ne,
-                onBlur: De,
-                onClick: Ae,
-                onFocus: _e
+                elementRef: xe,
+                onBlur: Me,
+                onClick: _e,
+                onFocus: De
             };
-        }), [ De, Ae, _e, Ne ]);
-        var Be = (0, r.useMemo)((function() {
+        }), [ Me, _e, De, xe ]);
+        var He = (0, r.useMemo)((function() {
             return d === "label" ? {
-                "aria-labelledby": de,
-                labelledBy: de
+                "aria-labelledby": me,
+                labelledBy: me
             } : {
-                "aria-describedby": de,
-                describedBy: de
+                "aria-describedby": me,
+                describedBy: me
             };
-        }), [ d, de ]);
-        var He = (0, r.useMemo)((function() {
+        }), [ d, me ]);
+        var Fe = (0, r.useMemo)((function() {
             return {
                 append: o,
-                prepend: B
+                prepend: H
             };
-        }), [ o, B ]);
-        var Fe = (0, r.useMemo)((function() {
-            return A(A(A({}, Be), xe), He);
-        }), [ Be, xe, He ]);
+        }), [ o, H ]);
         var Ke = (0, r.useMemo)((function() {
-            return A(A({}, Be), He);
-        }), [ Be, He ]);
-        var We = (0, r.useCallback)((function() {
-            if (false) {}
-            return x === null || x === void 0 ? void 0 : x(A(A(A({}, Fe), Be), He));
-        }), [ Be, Fe, l, He, x ]);
+            return A(A(A({}, He), Be), Fe);
+        }), [ He, Be, Fe ]);
+        var We = (0, r.useMemo)((function() {
+            return A(A({}, He), Fe);
+        }), [ He, Fe ]);
         var Ve = (0, r.useCallback)((function() {
+            if (false) {}
+            return x === null || x === void 0 ? void 0 : x(A(A(A({}, Ke), He), Fe));
+        }), [ He, Ke, l, Fe, x ]);
+        var Ue = (0, r.useCallback)((function() {
             var e;
             if ( (0, r.isValidElement)(l)) {
-                e =  (0, r.cloneElement)(l, Ke);
+                e =  (0, r.cloneElement)(l, We);
             } else if (l) {
                 e = l;
             } else {
                 e =  t().createElement(w, {
                     appearance: "subtle",
-                    "aria-describedby": de,
+                    "aria-describedby": me,
                     "aria-label": (0, b._)("More info"),
                     icon: Q
                 });
@@ -519,43 +523,44 @@
             
             return t().createElement(n, {
                 "data-test": "toggle",
-                onClick: Ae,
-                onFocus: _e,
-                onBlur: De,
-                ref: Re
+                onClick: _e,
+                onFocus: De,
+                onBlur: Me,
+                ref: Le
             }, e);
-        }), [ l, C, Ae, _e, De, Re, Ke, de ]);
-        var Ue = C ? E : k;
-        var $e = !!p &&  t().createElement(v(), {
+        }), [ l, C, _e, De, Me, Le, We, me ]);
+        var $e = C ? E : k;
+        var ze = !!p &&  t().createElement(v(), {
             "aria-hidden": "true",
-            id: de
+            id: me
         }, p);
-        var ze =  t().createElement(f(), {
+        var Ge =  t().createElement(f(), {
             role: "tooltip",
             align: "center",
-            anchor: X,
+            anchor: Y,
             animationConfig: G,
             appearance: n,
             closeReasons: J,
             defaultPlacement: O,
-            id: me,
-            open: ye,
-            onRequestClose: Me,
-            elementRef: Le,
-            hitAreaRef: Ie,
-            outerRef: qe
+            id: be,
+            open: ge,
+            onRequestClose: Ne,
+            elementRef: qe,
+            hitAreaRef: Ae,
+            outerRef: Ie,
+            pointTo: B
         },  t().createElement(j, null, p));
         if (x) {
             
-            return t().createElement(t().Fragment, null, We(), $e, ze);
+            return t().createElement(t().Fragment, null, Ve(), ze, Ge);
         }
         
-        return t().createElement(Ue, q({
+        return t().createElement($e, q({
             "data-test": "tooltip",
-            "data-test-open": ye,
-            "data-test-popover-id": me,
+            "data-test-open": ge,
+            "data-test-popover-id": be,
             ref: h
-        }, H), Ve(), $e, ze);
+        }, F), Ue(), ze, Ge);
     }
     X.propTypes = z;
     X.possibleOpenReasons = U;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -11,7 +11,7 @@
     "docs:publish:external": "eval $(splunk-docs-package docs-external --suffix=public) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
     "docs:start": "INTERNAL=true webpack serve --config docs.gen.webpack.config.js",
     "docs:start:external": "webpack serve --config docs.gen.webpack.config.js",
-    "eslint": "eslint src .storybook --ext \".ts,.tsx,.js,.jsx\"",
+    "eslint": "eslint --rulesdir ../../infra/eslint/rules src .storybook --ext \".ts,.tsx,.js,.jsx\"",
     "eslint:fix": "yarn run eslint --fix",
     "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
     "lint": "yarn run eslint && yarn run stylelint",
@@ -29,8 +29,8 @@
     "test:watch": "jest --watch",
     "test:cypress": "yarn cypress open --component",
     "test:cypress:ci": "yarn cypress run --component",
-    "types:build": "yarn types:build:cypress && tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
-    "types:build:cypress": "tsc --p cypress/tsconfig.cypress.json",
+    "types:build": "yarn types:noemit && yarn tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
+    "types:noemit": "tsc --p cypress/tsconfig.check-cypress.json && tsc --p tsconfig.check-docs.json",
     "types:start": "yarn types:build --watch"
   },
   "peerDependencies": {
@@ -44,8 +44,8 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.2.0",
-    "@splunk/themes": "^1.2.0",
+    "@splunk/react-icons": "^5.3.0",
+    "@splunk/themes": "^1.2.1",
     "@splunk/ui-utils": "^1.10.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
@@ -60,9 +60,9 @@
     "@babel/core": "^7.28.0",
     "@babel/plugin-transform-runtime": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "^1.1.0",
+    "@splunk/docs-gen": "^1.1.1",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.2.0",
+    "@splunk/react-docs": "^1.3.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
@@ -87,14 +87,13 @@
     "@types/react-dom": "^18.2.0",
     "@types/styled-components": "^5.1.0",
     "@types/tinycolor2": "^1.4.2",
-    "@types/webdriverio": "^5.0.0",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
     "axe-html-reporter": "^2.2.11",
     "axe-playwright": "^1.1.11",
     "babel-loader": "^8.3.0",
-    "babel-plugin-istanbul": "^5.1.0",
+    "babel-plugin-istanbul": "^5.2.0",
     "babel-plugin-styled-components": "^1.10.7",
     "babel-plugin-transform-imports": "^2.0.0",
     "babel-plugin-transform-require-context": "^0.1.1",

package/tsconfig.check-docs.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["stubs-*.d.ts", "src/docs/**/*"],
+  "exclude": []
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 /**
  * @name Basic
- * @description An Avatar can show one to three characters. You can use the getInitials helper to shorten a name.
+ * @description An Avatar can show one to three characters. You can use the `getInitials` helper to shorten a name.
  */
 export default function Basic(): React.JSX.Element;

package/types/src/Checkbox/Checkbox.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+/** @public */
+type CheckboxChangeHandler = (event: React.ChangeEvent<HTMLInputElement>, data: {
+    checked: boolean;
+    name?: string;
+    value?: string;
+}) => void;
+interface CheckboxPropsBase {
+    /**
+     * Setting this value makes the component controlled. If set, the onChange callback is required.
+     * A setting of "indeterminate" is considered unchecked for the purposes of form submission.
+     */
+    checked?: boolean | 'indeterminate';
+    /** The content to display inside the checkbox label. */
+    children?: React.ReactNode;
+    /** Set this property instead of checked to make the component uncontrolled. */
+    defaultChecked?: boolean;
+    /**
+     * The id of the description.
+     * When placed in a ControlGroup, this is automatically set to the ControlGroup's help component.
+     */
+    describedBy?: string;
+    disabled?: boolean;
+    /**
+     * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Mark the component as having an error.
+     */
+    error?: boolean;
+    inert?: boolean;
+    /**
+     * A React ref which is set to the input element when the component mounts and null when it unmounts.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * The id of the label.
+     * When placed in a ControlGroup, this is automatically set to the ControlGroup's label.
+     */
+    labelledBy?: string;
+    /**
+     * The name is returned with onChange events, which can be used to identify the
+     * control when multiple controls share an onChange callback.
+     */
+    name?: string;
+    /**
+     * Fires when the checked state changes.
+     */
+    onChange?: CheckboxChangeHandler;
+    /** @private. */
+    required?: boolean;
+    /**
+     * Returned by the onChange handler and submitted during form submission if the checkbox is checked.
+     * This defaults to "on" if the input is checked.
+     */
+    value?: string;
+}
+interface CheckboxPropsBaseControlled extends CheckboxPropsBase {
+    defaultChecked?: never;
+    onChange: CheckboxChangeHandler;
+}
+interface CheckboxPropsBaseUncontrolled extends CheckboxPropsBase {
+    defaultChecked?: boolean;
+    checked?: never;
+}
+type CheckboxProps = ComponentProps<CheckboxPropsBaseControlled | CheckboxPropsBaseUncontrolled, 'input'>;
+declare const Checkbox: {
+    ({ checked, children, defaultChecked, describedBy, disabled, elementRef, error, id, inert, inputRef, labelledBy, name, onChange, required, role, tabIndex, value, ...otherProps }: CheckboxProps): React.JSX.Element;
+    propTypes: {
+        checked: PropTypes.Requireable<string | boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        defaultChecked: PropTypes.Requireable<boolean>;
+        describedBy: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        elementRef: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<boolean>;
+        inert: PropTypes.Requireable<boolean>;
+        inputRef: PropTypes.Requireable<object>;
+        labelledBy: PropTypes.Requireable<string>;
+        name: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** @private. */
+        required: PropTypes.Requireable<boolean>;
+    };
+};
+export default Checkbox;
+export { CheckboxChangeHandler, CheckboxPropsBase, CheckboxPropsBaseControlled, CheckboxPropsBaseUncontrolled, };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Controlled
+ * @description Checkbox can be controlled using the checked prop and an onChange callback.
+ */
+declare const Basic: () => React.JSX.Element;
+export default Basic;

package/types/src/Checkbox/docs/examples/Disabled.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name Disabled
+ */
+declare const Disabled: () => React.JSX.Element;
+export default Disabled;

package/types/src/Checkbox/docs/examples/Error.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name Error
+ */
+declare function CheckboxError(): React.JSX.Element;
+export default CheckboxError;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Uncontrolled
+ * @description Checkbox can also used as an uncontrolled component, using defaultChecked to set the initial checked state.
+ */
+declare const Uncontrolled: () => React.JSX.Element;
+export default Uncontrolled;

package/types/src/Checkbox/index.d.ts

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

package/types/src/Code/Code.d.ts

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 type CodeSupportedLanguages = 'bash' | 'clike' | 'css' | 'html' | 'json' | 'javascript' | 'js' | 'jsx' | 'typescript' | 'ts' | 'tsx' | 'markup' | 'mathml' | 'plain' | 'plaintext' | 'splunk-spl' | 'sql' | 'svg' | 'text' | 'txt' | 'xml' | 'yaml' | 'yml';
 interface CodePropsBase {
+    /** Change the style of the Code container. */
+    containerAppearance?: 'none' | 'section';
     /**
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
@@ -43,9 +45,10 @@ interface CodePropsBase {
     value?: string;
 }
 type CodeProps = ComponentProps<CodePropsBase, 'pre'>;
-declare function Code({ elementRef, indentChars, language, languageFallback, lineHighlights, lineNumberStart, showIndentGuide, showLineNumbers, value, ...otherProps }: CodeProps): React.JSX.Element;
+declare function Code({ containerAppearance, elementRef, indentChars, language, languageFallback, lineHighlights, lineNumberStart, showIndentGuide, showLineNumbers, value, ...otherProps }: CodeProps): React.JSX.Element;
 declare namespace Code {
     var propTypes: {
+        containerAppearance: PropTypes.Requireable<string>;
         elementRef: PropTypes.Requireable<object>;
         indentChars: PropTypes.Requireable<number>;
         language: PropTypes.Requireable<string>;

package/types/src/Code/LineHighlights.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface LineHighlightProps {
     highlight: string;
     width: number;
+    containerAppearance: 'none' | 'section';
 }
 type Ranges = [number, number][];
 declare const parseHighlightLines: (highlight: string) => Ranges;