@splunk/react-ui 5.0.0 → 5.2.0

package/Typography.js

@@ -77,8 +77,8 @@
     const s = require("@splunk/themes/mixins");
     var u =  e.n(s);
     // CONCATENATED MODULE: ./src/Typography/Typography.tsx
-    function p() {
-        return p = Object.assign ? Object.assign.bind() : function(e) {
+    function f() {
+        return f = 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,31 +86,31 @@
                 }
             }
             return e;
-        }, p.apply(null, arguments);
+        }, f.apply(null, arguments);
     }
-    function c(e, r) {
+    function p(e, r) {
         if (null == e) return {};
-        var t, n, o = f(e, r);
+        var t, n, o = y(e, r);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (n = 0; n < a.length; n++) {
-                t = a[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+                t = a[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
         return o;
     }
-    function f(e, r) {
+    function y(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
+                if (-1 !== r.indexOf(n)) continue;
                 t[n] = e[n];
             }
         }
         return t;
     }
-    var y = {
+    var c = {
         as: a().string.isRequired,
         children: a().node.isRequired,
         color: a().oneOf([ "active", "default", "disabled", "inverted", "muted", "inherit" ]),
@@ -132,7 +132,7 @@
     /**
  * Typography renders text content with styling based on the Splunk Design System.
  */    function g(e) {
-        var r = e.as, o = e.children, a = e.color, i = e.elementRef, l = e.family, s = e.lineHeight, u = e.size, f = e.variant, y = e.weight, g = e.withReset, h = g === void 0 ? true : g, v = c(e, [ "as", "children", "color", "elementRef", "family", "lineHeight", "size", "variant", "weight", "withReset" ]);
+        var r = e.as, o = e.children, a = e.color, i = e.elementRef, l = e.family, s = e.lineHeight, u = e.size, y = e.variant, c = e.weight, g = e.withReset, h = g === void 0 ? true : g, v = p(e, [ "as", "children", "color", "elementRef", "family", "lineHeight", "size", "variant", "weight", "withReset" ]);
         // @docs-props-type TypographyPropsBase
                 var m = (0, t.useMemo)((function() {
             return {
@@ -140,20 +140,20 @@
                 family: l,
                 lineHeight: s,
                 size: u,
-                weight: y,
+                weight: c,
                 withReset: h
             };
-        }), [ a, l, s, u, y, h ]);
+        }), [ a, l, s, u, c, h ]);
         
-        return n().createElement(d, p({
+        return n().createElement(d, f({
             as: r,
             "data-test": "typography",
             ref: i,
             $typographyParams: m,
-            $variant: f
+            $variant: y
         }, v), o);
     }
-    g.propTypes = y;
+    g.propTypes = c;
     /* harmony default export */    const h = g;
     // CONCATENATED MODULE: ./src/Typography/index.ts
     module.exports = r;

package/WaitSpinner.js

@@ -79,11 +79,11 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const f = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinnerStyles.ts
-    var u = c().div.withConfig({
+    var d = c().div.withConfig({
         displayName: "WaitSpinnerStyles__Styled",
         componentId: "sc-1nu971z-0"
     })([ "", ";align-items:center;" ], f.mixins.reset("inline-flex"));
-    var d = (0, l.keyframes)([ "100%{transform:rotate(360deg);}" ]);
+    var u = (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({
@@ -95,7 +95,7 @@
         large: (0, l.css)([ "width:40px;height:40px;" ])
     }), (function(e) {
         var t = e.$animated;
-        return t && (0, l.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], d, p, m);
+        return t && (0, l.css)([ "animation:", " ", " infinite linear,", " 500ms cubic-bezier(0.01,0,0,1);" ], u, p, m);
     }));
     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);}" ]);
@@ -131,7 +131,7 @@
         if (Object.getOwnPropertySymbols) {
             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]);
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -141,7 +141,7 @@
         var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
+                if (-1 !== t.indexOf(n)) continue;
                 r[n] = e[n];
             }
         }
@@ -157,7 +157,7 @@
         // @docs-props-type WaitSpinnerPropsBase
                 var f = (0, s.useAnimationToggle)() === "on";
         
-        return n().createElement(u, k({
+        return n().createElement(d, k({
             "data-test": "wait-spinner",
             ref: t
         }, c),  n().createElement(y, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -44,9 +44,9 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.0.0",
-    "@splunk/themes": "^1.0.0",
-    "@splunk/ui-utils": "^1.9.0",
+    "@splunk/react-icons": "^5.2.0",
+    "@splunk/themes": "^1.2.0",
+    "@splunk/ui-utils": "^1.10.0",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
     "moment": "^2.29.4",
@@ -57,21 +57,21 @@
     "use-typed-event-listener": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.18.6",
+    "@babel/core": "^7.28.0",
+    "@babel/plugin-transform-runtime": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "^1.0.0",
+    "@splunk/docs-gen": "^1.1.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.0.0",
+    "@splunk/react-docs": "^1.2.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.2",
-    "@storybook/addon-a11y": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-a11y": "^7.6.20",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
     "@storybook/csf": "^0.0.1",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/manager-api": "^7.6.20",
+    "@storybook/react-webpack5": "^7.6.20",
     "@storybook/test-runner": "0.16.0",
     "@testing-library/cypress": "^9.0.0",
     "@testing-library/dom": "^10.4.0",
@@ -81,18 +81,17 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.14.156",
-    "@types/node": "^10.17.26",
+    "@types/node": "^18.16.0",
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/sinon": "^4.3.3",
     "@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.3",
+    "axe-html-reporter": "^2.2.11",
     "axe-playwright": "^1.1.11",
     "babel-loader": "^8.3.0",
     "babel-plugin-istanbul": "^5.1.0",
@@ -128,20 +127,18 @@
     "mkdirp": "^0.5.1",
     "playwright": "^1.45.0",
     "prismjs": "^1.29.0",
-    "prompt": "^1.0.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-docgen": "^5.4.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^16.13.1",
-    "sinon": "^2.1.0",
-    "storybook": "^7.6.17",
+    "storybook": "^7.6.20",
     "styled-components": "^5.3.10",
     "stylelint": "^15.11.0",
     "typescript": "^5.8.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.9.0"
   },
   "engines": {

package/stubs-dependencies.d.ts

@@ -1,70 +0,0 @@
-// https://github.com/storybookjs/storybook/issues/7677
-// https://github.com/ComponentDriven/csf/blob/next/src/story.test.ts
-declare module '@storybook/react' {
-    type Context = {
-        id: StoryId;
-        kind: StoryKind;
-        name: StoryName;
-    };
-
-    type StoryId = string;
-    type StoryKind = string;
-    type StoryName = string;
-
-    type StoryFnType<Context, ReturnType> = (context?: Context) => ReturnType;
-
-    type DecoratorFunctionBase<Context, StoryFn extends StoryFnType<Context, any>> = (
-        fn: StoryFn,
-        context: Context
-    ) => ReturnType<StoryFn>;
-
-    type DefaultParameters = { [name: string]: any };
-
-    type ParametersType<T extends { [P: string]: any } = DefaultParameters> = {
-        [P in keyof T]: T[P];
-    };
-
-    interface KindMetaBase<
-        Decorator extends DecoratorFunctionBase<any, any>,
-        Parameters extends ParametersType,
-        Component = unknown
-    > {
-        id?: StoryId;
-        title: StoryKind;
-        component?: Component;
-        subcomponents?: Record<string, Component>;
-        decorators?: Decorator[];
-        parameters?: Parameters;
-    }
-
-    interface StoryMetaBase<
-        Context,
-        StoryFn extends StoryFnType<Context, any>,
-        Decorator extends DecoratorFunctionBase<Context, StoryFn>,
-        Parameters extends ParametersType
-    > {
-        (context?: Context): ReturnType<StoryFn>;
-        storyName?: StoryName;
-        decorators?: Decorator[];
-        parameters?: Parameters;
-    }
-
-    export type StoryFn = (c?: Context) => JSXElementConstructor<Record<string, unknown>>;
-
-    export type DecoratorFunction = DecoratorFunctionBase<Context, StoryFn>;
-
-    export type KindMetaWithParams<Parameters, Component = unknown> = KindMetaBase<
-        DecoratorFunction,
-        Parameters,
-        Component
-    >;
-
-    export type KindMeta<Component = unknown> = KindMetaWithParams<DefaultParameters, Component>;
-
-    export type StoryMeta<Parameters = DefaultParameters> = StoryMetaBase<
-        Context,
-        StoryFn,
-        DecoratorFunction,
-        Parameters
-    >;
-}

package/stubs-splunkui.d.ts

@@ -85,6 +85,10 @@ declare module '@splunk/ui-utils/promise' {
     function makeCancelable<T>(arg: Promise<T>): CancelablePromise<T>;
 }
 
+declare module '@splunk/ui-utils/scroll' {
+    export function scrollIntoViewIfNeeded(el?: HTMLElement | null): void;
+}
+
 declare module '@splunk/ui-utils/style' {
     type ClassNameArg = ClassNameArg | Record<string, unknown> | string | undefined | null;
     function toClassName(...args: ClassNameArg[]): string;

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

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

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Inset
+ * @description inset adds padding to the Accordion Panel. This can be set on the Accordion, or individual Panels. Individual Panels can override inset from their parent Accordion.
+ */
 declare const Inset: () => React.JSX.Element;
 export default Inset;

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

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

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description `Anchor` can be added to any `Heading` level.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/AnimationToggle/docs/examples/Provider.d.ts

@@ -1,4 +1,8 @@
 import React, { Component } from 'react';
+/**
+ * @name Controlling animation via a provider
+ * @description Shows how to control animation using an AnimationToggleProvider. This can be used to disable animation for most components included in this library.
+ */
 declare class Provider extends Component<object, {
     animatedTransitions: boolean;
     open: boolean;

package/types/src/AnimationToggle/docs/examples/ReducedMotionComponent.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Support reduced motion with a component
+ * @description Shows how to use the Animation Toggle component to offer an alternative when the user prefers reduced motion. If reduced motion is preferred but animations are disabled or no reduced motion alternative is set, Animation Toggle considers animations to be disabled.
+ */
 declare const ReducedMotionComponent: () => React.JSX.Element;
 export default ReducedMotionComponent;

package/types/src/AnimationToggle/docs/examples/ReducedMotionHook.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Support reduced motion with a hook
+ * @description Shows how to use the useAnimationToggle hook to offer an alternative when the user prefers reduced motion. If reduced motion is preferred but animations are disabled useAnimationToggle returns 'off'.
+ */
 declare const ReducedMotionHook: () => React.JSX.Element;
 export default ReducedMotionHook;

package/types/src/AnimationToggle/docs/examples/ToggleComponent.d.ts

@@ -1,4 +1,8 @@
 import React, { Component } from 'react';
+/**
+ * @name Offering animation control with a component
+ * @description Shows how to use the Animation Toggle component to render different content based on current animation settings.
+ */
 declare class ToggleComponent extends Component<object, {
     animatedTransitions: boolean;
 }> {

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

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Background color
+ * @description An Avatar can render a provided background color and will automatically change the text color to satisfy accessibility contrast requirements. For the automatic text color change, backgroundColor must be provided as a string without a represented alpha value.
+ */
 export default function BackgroundColor(): React.JSX.Element;

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

@@ -1,2 +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.
+ */
 export default function Basic(): React.JSX.Element;

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

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Image
+ * @description An Avatar can show an image provided as an icon, <img>, or asset.
+ */
 export default function Image(): React.JSX.Element;

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

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Interactive
+ * @description Avatars can be interactive by including the appropriate props to make them buttons or links.
+ */
 export default function Interactive(): React.JSX.Element;

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

@@ -1,2 +1,6 @@
 import React from 'react';
+/**
+ * @name Size
+ * @description Avatars can be one of three standard sizes: small, medium (default), or large. The size prop can also be a string if the standard size doesn't fit your use case. Note: using a non-standard size may have unexpected layouts when combined with other components.
+ */
 export default function Size(): React.JSX.Element;

package/types/src/Breadcrumbs/docs/examples/Adornments.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Adornments
+ * @description A startAdornment and/or endAdornment can be added to a Breadcrumbs.Item. Icons should be decorative.
+ */
 declare function Adornments(): React.JSX.Element;
 export default Adornments;

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

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

package/types/src/Breadcrumbs/docs/examples/CustomizedClick.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Customized click
+ * @description A custom onClick handler can be set on the root Breadcrumbs component or individual Breadcrumbs.Item components. If both components have onClick handlers, both handlers will be called when the Breadcrumbs.Item is clicked.
+ */
 declare function CustomizedClick(): React.JSX.Element;
 export default CustomizedClick;

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

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

package/types/src/Button/docs/examples/Block.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Block sized
+ * @description By default, Buttons exist in inline blocks. Set inline to false to make the Button the full width of the parent container.
+ */
 declare function Block(): React.JSX.Element;
 export default Block;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Disabled
+ * @description Consider keeping Buttons enabled and inform the user why the action may have failed or can't be completed. Disabling buttons creates barriers for all users and can exclude people with disabilities. If a Button is passed disabled the default behavior is to render a 'dimmed' button. This ensures the button is still discoverable and can receive focus, but the button cannot not be activated by the user. If necessary, a Button can be completely disabled by setting disabled='disabled'. In these cases, consider contacting us to collaborate on alternatives for a more inclusive experience.
+ */
 declare function Disabled(): React.JSX.Element;
 export default Disabled;

package/types/src/Button/docs/examples/Icons.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name With icons
+ * @description By default, icons appear to the left of Button text. If you want an icon to appear the right of Button text, add it as a child and correct margins or other positioning as necessary.
+ */
 declare function Icons(): React.JSX.Element;
 export default Icons;

package/types/src/Button/docs/examples/Menus.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name With menu indicator
+ * @description Add the isMenu prop to display the menu indicator to the right of Button text. See [Dropdown](Dropdown) to learn how to create a dropdown menu.
+ */
 declare function Menus(): React.JSX.Element;
 export default Menus;

package/types/src/Button/docs/examples/To.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name As a link
+ * @description Add the to prop to indicate that the Button behaves as a link. The openInNewContext prop will open the link in a new window or tab and display the external link indicator
+ */
 declare function To(): React.JSX.Element;
 export default To;

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

@@ -1,2 +1,5 @@
 import React from 'react';
+/**
+ * @name Basic
+ */
 export default function Basic(): React.JSX.Element;

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

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Basic
+ * @description A Card with a title and body. In this example, the content determines the width of the Card. Otherwise, pass in a width to fix the Card width.
+ */
 declare function Basic(): React.JSX.Element;
 export default Basic;

package/types/src/Card/docs/examples/Clickable.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Clickable card
+ * @description A Card that goes to a URL or performs an action when clicked.
+ */
 declare function Clickable(): React.JSX.Element;
 export default Clickable;

package/types/src/Card/docs/examples/Full.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Full card
+ * @description A Card with a header, body, and footer. In this example, the height and width of the Card are set. Card.Footer must always be last in a Card.
+ */
 declare function FullCard(): React.JSX.Element;
 export default FullCard;

package/types/src/Card/docs/examples/HeadingTitle.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Card with heading
+ * @description Pass the Heading component into the title prop when there is content underneath to satisfy accessibility requirements.
+ */
 declare function HeadingTitle(): React.JSX.Element;
 export default HeadingTitle;

package/types/src/Card/docs/examples/Images.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Card with images
+ * @description A Card with Images. You can switch the order of Card.Header and Card.Body.
+ */
 declare function Images(): React.JSX.Element;
 export default Images;

package/types/src/Card/docs/examples/Selectable.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Selectable card
+ * @description A Card that is selected when clicked. The card must be provided an onClick in order to use the selected prop.
+ */
 declare function Selectable(): React.JSX.Element;
 export default Selectable;

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

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

package/types/src/CardLayout/docs/examples/Interactive.d.ts

@@ -11,6 +11,10 @@ interface InteractiveState {
     setAsWidth: boolean;
     hasMaxWidth: boolean;
 }
+/**
+ * @name Interactive card layout
+ * @description The default layout scales cards equally and wraps them. As a best practice, pass in a minWidth style to each Card to prevent an overly narrow width when the screen is resized. You can pass in a maxWidth style so the Card doesn't get too wide. In this example, the minWidth is initially set to 200.
+ */
 declare class Interactive extends Component<object, InteractiveState> {
     constructor(props: object);
     handleChangeAmount: NumberChangeHandler;

package/types/src/Chip/docs/examples/Appearance.d.ts

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

package/types/src/Chip/docs/examples/CustomColors.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Custom colors
+ * @description When using custom colors, ensure you are following the WCAG guideline of a contrast ratio >= 4.5:1 between text and background.
+ */
 declare function CustomColors(): React.JSX.Element;
 export default CustomColors;

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

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

package/types/src/Chip/docs/examples/Icon.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
+/**
+ * @name With icons
+ */
 declare function Icon(): React.JSX.Element;
 export default Icon;

package/types/src/Chip/docs/examples/Removable.d.ts

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

package/types/src/Chip/docs/examples/RemovableWithNonStringChildren.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+/**
+ * @name Removable with non-string children
+ * @description The descriptive label for a Chip can be overridden by applying an aria-label attribute. This is necessary if passing children that are not of type string.
+ */
 declare const RemovableWithNonStringChildren: () => React.JSX.Element;
 export default RemovableWithNonStringChildren;