colibri-ui 0.8.97 → 0.8.99

package/NavigationMenu/splitItems.d.ts

@@ -0,0 +1,30 @@
+export interface SplitInput {
+    itemWidths: number[];
+    /** Pinned items are always visible and go after the main items. */
+    pinnedWidths: number[];
+    moreWidth: number;
+    containerWidth: number;
+    /** CSS gap between items. */
+    gap: number;
+    /** Index of the active item or -1. */
+    activeIndex: number;
+    /** "More" is needed anyway, for example for `moreItems`. */
+    forceMore: boolean;
+}
+export interface SplitResult {
+    /** Indexes of the items left in the row, in the original order. */
+    visible: number[];
+    /** Indexes of the items moved to "More", in the original order. */
+    hidden: number[];
+}
+/**
+ * Splits items into the row and "More".
+ *
+ * Items go from left to right while they fit; the first one that does not fit
+ * and all after it move to "More". Space for the active item is reserved
+ * first, so it stays in the row and its neighbours move instead. Every element
+ * costs its width plus gap; the budget has one extra gap because N elements
+ * have N − 1 gaps.
+ */
+export declare const splitItems: ({ itemWidths, pinnedWidths, moreWidth, containerWidth, gap, activeIndex, forceMore, }: SplitInput) => SplitResult;
+export declare const isSameSplit: (a: SplitResult, b: SplitResult) => boolean;

package/NavigationMenu/splitItems.js

@@ -0,0 +1,54 @@
+'use strict';
+
+const sum = list => list.reduce((acc, n) => acc + n, 0);
+/**
+ * Splits items into the row and "More".
+ *
+ * Items go from left to right while they fit; the first one that does not fit
+ * and all after it move to "More". Space for the active item is reserved
+ * first, so it stays in the row and its neighbours move instead. Every element
+ * costs its width plus gap; the budget has one extra gap because N elements
+ * have N − 1 gaps.
+ */
+const splitItems = ({
+  itemWidths,
+  pinnedWidths,
+  moreWidth,
+  containerWidth,
+  gap,
+  activeIndex,
+  forceMore
+}) => {
+  const all = itemWidths.map((_, index) => index);
+  const cost = width => width + gap;
+  const pinnedCost = sum(pinnedWidths.map(cost));
+  if (!forceMore && sum(itemWidths.map(cost)) + pinnedCost <= containerWidth + gap) {
+    return {
+      visible: all,
+      hidden: []
+    };
+  }
+  const hasActive = activeIndex >= 0 && activeIndex < itemWidths.length;
+  let budget = containerWidth + gap - pinnedCost - cost(moreWidth);
+  if (hasActive) budget -= cost(itemWidths[activeIndex]);
+  const visible = [];
+  for (let index = 0; index < itemWidths.length; index++) {
+    if (index === activeIndex) continue;
+    if (cost(itemWidths[index]) > budget) break;
+    budget -= cost(itemWidths[index]);
+    visible.push(index);
+  }
+  if (hasActive) {
+    visible.push(activeIndex);
+    visible.sort((a, b) => a - b);
+  }
+  return {
+    visible,
+    hidden: all.filter(index => !visible.includes(index))
+  };
+};
+const isSameList = (a, b) => a.length === b.length && a.every((index, position) => index === b[position]);
+const isSameSplit = (a, b) => isSameList(a.visible, b.visible) && isSameList(a.hidden, b.hidden);
+
+exports.isSameSplit = isSameSplit;
+exports.splitItems = splitItems;

package/NavigationMenu/useOverflowSplit.d.ts

@@ -0,0 +1,25 @@
+import type { SplitResult } from "./splitItems";
+interface Options {
+    itemCount: number;
+    pinnedCount: number;
+    activeIndex: number;
+    forceMore: boolean;
+    /** Changes with the item labels to recalculate. */
+    contentKey: string;
+}
+/**
+ * Measures the items and splits them into the row and "More".
+ *
+ * Widths come from a hidden measurer that always renders every item, so the
+ * items inside "More" are measured too, for example after a web font loads.
+ * ResizeObserver watches the container, the measurer and the "More" trigger.
+ * Before the first measurement, and on the server, `split` is `null`.
+ */
+export declare const useOverflowSplit: ({ itemCount, pinnedCount, activeIndex, forceMore, contentKey, }: Options) => {
+    split: SplitResult | null;
+    containerRef: import("react").RefObject<HTMLElement | null>;
+    listRef: import("react").RefObject<HTMLUListElement | null>;
+    measurerRef: import("react").RefObject<HTMLDivElement | null>;
+    moreRef: import("react").RefObject<HTMLLIElement | null>;
+};
+export {};

package/NavigationMenu/useOverflowSplit.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var React = require('react');
+var helpers = require('./helpers.js');
+var splitItems = require('./splitItems.js');
+
+const getWidth = element => element ? element.getBoundingClientRect().width : 0;
+/**
+ * Measures the items and splits them into the row and "More".
+ *
+ * Widths come from a hidden measurer that always renders every item, so the
+ * items inside "More" are measured too, for example after a web font loads.
+ * ResizeObserver watches the container, the measurer and the "More" trigger.
+ * Before the first measurement, and on the server, `split` is `null`.
+ */
+const useOverflowSplit = ({
+  itemCount,
+  pinnedCount,
+  activeIndex,
+  forceMore,
+  contentKey
+}) => {
+  const containerRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const measurerRef = React.useRef(null);
+  const moreRef = React.useRef(null);
+  const [split, setSplit] = React.useState(null);
+  helpers.useIsomorphicLayoutEffect(() => {
+    const container = containerRef.current;
+    const measurer = measurerRef.current;
+    if (!container || !measurer) return undefined;
+    const recalculate = () => {
+      const widths = Array.from(measurer.children, getWidth);
+      const gap = listRef.current ? parseFloat(getComputedStyle(listRef.current).columnGap) || 0 : 0;
+      const next = splitItems.splitItems({
+        itemWidths: widths.slice(0, itemCount),
+        pinnedWidths: widths.slice(itemCount, itemCount + pinnedCount),
+        moreWidth: getWidth(moreRef.current),
+        containerWidth: getWidth(container),
+        gap,
+        activeIndex,
+        forceMore
+      });
+      setSplit(prev => prev && splitItems.isSameSplit(prev, next) ? prev : next);
+    };
+    recalculate();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(recalculate);
+    observer.observe(container);
+    observer.observe(measurer);
+    if (moreRef.current) observer.observe(moreRef.current);
+    return () => observer.disconnect();
+  }, [itemCount, pinnedCount, activeIndex, forceMore, contentKey]);
+  return {
+    split,
+    containerRef,
+    listRef,
+    measurerRef,
+    moreRef
+  };
+};
+
+exports.useOverflowSplit = useOverflowSplit;

package/RadioGroup/Radio.js

@@ -20,7 +20,7 @@ const Radio = ({
   onMouseEnter,
   className,
   disabled = false,
-  testId
+  "data-testid": testId
 }) => (/*#__PURE__*/React__default.default.createElement(index.InputRadio, {
   id: id,
   value: value,
@@ -34,7 +34,7 @@ const Radio = ({
   name: name,
   className: className,
   disabled: disabled,
-  testid: testId
+  "data-testid": testId
 }));
 
 exports.Radio = Radio;

package/RadioGroup/index.js

@@ -40,7 +40,7 @@ const RadioGroup = /*#__PURE__*/React.memo(({
   return /*#__PURE__*/React__default.default.createElement(Radio.Radio, {
     key: optionVal,
     id: id,
-    testId: id,
+    "data-testid": id,
     value: optionVal,
     text: text,
     note: note,

package/RadioGroup/index.props.d.ts

@@ -34,5 +34,5 @@ export type RadioProps = {
     onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
     className: string;
     disabled?: boolean;
-    testId?: string;
+    "data-testid"?: string;
 };

package/Select/index.d.ts

@@ -1,3 +1,3 @@
 import type { JSX } from "react";
 import type { SelectProps } from "./index.props";
-export declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, "aria-label": ariaLabel, }: SelectProps<T>) => JSX.Element;
+export declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, "aria-label": ariaLabel, "data-testid": testId, }: SelectProps<T>) => JSX.Element;

package/Select/index.js

@@ -32,7 +32,8 @@ const Select = ({
   customInputRoot,
   className,
   onChange,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const id = React.useId();
@@ -56,6 +57,7 @@ const Select = ({
     }) => selected)) === null || _a === void 0 ? void 0 : _a.label;
   }, [preparedOptions]);
   return /*#__PURE__*/React__default.default.createElement(index.FormField, {
+    "data-testid": testId,
     className: clsx__default.default(styles__default.default["form-field"], {
       [styles__default.default["full-width"]]: Boolean(fullWidth)
     }, className),
@@ -104,8 +106,7 @@ const Select = ({
     disabled: Boolean(disabled)
   }, /*#__PURE__*/React__default.default.createElement("div", {
     id: valueId,
-    className: styles__default.default["base-input"],
-    "data-testid": "base-input"
+    className: styles__default.default["base-input"]
   }, preparedLabel !== null && preparedLabel !== void 0 ? preparedLabel : (/*#__PURE__*/React__default.default.createElement("span", {
     className: styles__default.default.placeholder
   }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {

package/Separator/index.js

@@ -11,9 +11,11 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 const Separator = ({
-  className
-}) => (/*#__PURE__*/React__default.default.createElement("div", {
-  className: clsx__default.default(styles__default.default.root, className)
-}));
+  className,
+  "data-testid": testId
+}) => /*#__PURE__*/React__default.default.createElement("div", {
+  className: clsx__default.default(styles__default.default.root, className),
+  "data-testid": testId
+});
 
 exports.Separator = Separator;

package/Separator/index.props.d.ts

@@ -1,3 +1,4 @@
-export type SeparatorProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type SeparatorProps = TestIdProps & {
     className?: string;
 };

package/Skeleton/index.js

@@ -15,9 +15,11 @@ const SkeletonRect = ({
   className,
   width,
   height,
-  radius = "sm"
+  radius = "sm",
+  "data-testid": testId
 }) => (/*#__PURE__*/React__default.default.createElement("div", {
   className: clsx__default.default(styles__default.default.rect, className),
+  "data-testid": testId,
   style: {
     width: toRemLength(width),
     height: toRemLength(height),
@@ -27,9 +29,11 @@ const SkeletonRect = ({
 const SkeletonText = ({
   className,
   width,
-  size
+  size,
+  "data-testid": testId
 }) => (/*#__PURE__*/React__default.default.createElement("div", {
   className: clsx__default.default(styles__default.default.text, className),
+  "data-testid": testId,
   style: {
     width: toRemLength(width),
     height: toRemLength(size)

package/Skeleton/index.props.d.ts

@@ -1,9 +1,10 @@
-export type TextProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type TextProps = TestIdProps & {
     className?: string;
     width?: number | string;
     size?: number | string;
 };
-export type RectProps = {
+export type RectProps = TestIdProps & {
     className?: string;
     width?: number | string;
     height?: number | string;

package/Status/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { PropsWithChildren } from "react";
 import type { StatusProps } from "./index.props";
-export declare const Status: ({ className, indicator, showIndicator, tag: Component, children, type, }: PropsWithChildren<StatusProps>) => React.JSX.Element;
+export declare const Status: ({ className, indicator, showIndicator, tag: Component, children, type, "data-testid": testId, }: PropsWithChildren<StatusProps>) => React.JSX.Element;

package/Status/index.js

@@ -16,8 +16,10 @@ const Status = ({
   showIndicator = true,
   tag: Component = "span",
   children,
-  type
+  type,
+  "data-testid": testId
 }) => (/*#__PURE__*/React__default.default.createElement(Component, {
+  "data-testid": testId,
   className: clsx__default.default(styles__default.default.root, {
     [styles__default.default[`root_${type}`]]: Boolean(type)
   }, className)

package/Status/index.props.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { TestIdProps } from "../helpers/testId";
 export type StatusTag = "span" | "div";
 export declare enum STATUS_TYPE {
     SUCCESS = "success",
@@ -6,7 +7,7 @@ export declare enum STATUS_TYPE {
     INFO = "info",
     WARNING = "warning"
 }
-export type StatusProps = {
+export type StatusProps = TestIdProps & {
     className?: string;
     indicator?: ReactNode;
     showIndicator?: boolean;

package/TextArea/index.js

@@ -53,7 +53,6 @@ const TextArea = _a => {
     hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(TextareaAutosize__default.default, Object.assign({
     ref: inputRef,
-    "data-testid": "textarea",
     disabled: disabled,
     minRows: minRows,
     maxRows: maxRows,

package/Theme/index.d.ts

@@ -692,7 +692,11 @@ export declare const THEMES: {
         "component-pagination-bg-current": string;
         "component-pagination-bg-hover": string;
         "component-pagination-focus-ring": string;
+        "component-navigation-item-text": string;
+        "component-navigation-item-text-selected": string;
+        "component-navigation-item-bg-hover": string;
         "component-navigation-item-bg-selected": string;
+        "component-navigation-item-focus-ring": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
         "palette-black": string;
@@ -1536,7 +1540,11 @@ export declare const THEMES: {
         "component-pagination-bg-current": string;
         "component-pagination-bg-hover": string;
         "component-pagination-focus-ring": string;
+        "component-navigation-item-text": string;
+        "component-navigation-item-text-selected": string;
+        "component-navigation-item-bg-hover": string;
         "component-navigation-item-bg-selected": string;
+        "component-navigation-item-focus-ring": string;
         "component-chip-bg-selected": string;
         "component-chip-bg-selected-strong": string;
         "palette-black": string;

package/Theme/themes/buenos_aires.d.ts

@@ -613,7 +613,11 @@ declare const _default: {
     "component-pagination-bg-current": string;
     "component-pagination-bg-hover": string;
     "component-pagination-focus-ring": string;
+    "component-navigation-item-text": string;
+    "component-navigation-item-text-selected": string;
+    "component-navigation-item-bg-hover": string;
     "component-navigation-item-bg-selected": string;
+    "component-navigation-item-focus-ring": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;
     "palette-black": string;

package/Theme/themes/buenos_aires.js

@@ -619,7 +619,11 @@ var THEME_BA = {
   "component-pagination-bg-current": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-pagination-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
   "component-pagination-focus-ring": theme_buenos_aires.default.BRAND_BA_LIME,
+  "component-navigation-item-text": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-navigation-item-text-selected": theme_buenos_aires.default.BRAND_BA_LIME,
+  "component-navigation-item-bg-hover": theme_buenos_aires.default.NEUTRAL_BA_100,
   "component-navigation-item-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
+  "component-navigation-item-focus-ring": theme_buenos_aires.default.BRAND_BA_LIME,
   "component-chip-bg-selected": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-chip-bg-selected-strong": theme_buenos_aires.default.BRAND_BA_LIME,
   "palette-black": theme_buenos_aires.default.BRAND_BA_FOREST,

package/Theme/themes/jaipur.d.ts

@@ -613,7 +613,11 @@ declare const _default: {
     "component-pagination-bg-current": string;
     "component-pagination-bg-hover": string;
     "component-pagination-focus-ring": string;
+    "component-navigation-item-text": string;
+    "component-navigation-item-text-selected": string;
+    "component-navigation-item-bg-hover": string;
     "component-navigation-item-bg-selected": string;
+    "component-navigation-item-focus-ring": string;
     "component-chip-bg-selected": string;
     "component-chip-bg-selected-strong": string;
     "palette-black": string;

package/Theme/themes/jaipur.js

@@ -619,7 +619,11 @@ var theme_jaipur = {
   "component-pagination-bg-current": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-pagination-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
   "component-pagination-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
+  "component-navigation-item-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-navigation-item-text-selected": theme_jaipur$1.default.BRAND_JP_PINK,
+  "component-navigation-item-bg-hover": theme_jaipur$1.default.NEUTRAL_JP_100,
   "component-navigation-item-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
+  "component-navigation-item-focus-ring": theme_jaipur$1.default.BRAND_JP_PINK,
   "component-chip-bg-selected": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-chip-bg-selected-strong": theme_jaipur$1.default.BRAND_JP_PINK,
   "palette-black": theme_jaipur$1.default.BRAND_JP_EGGPLANT,

package/TimeSelect/index.js

@@ -29,7 +29,8 @@ const TimeSelect = ({
   zIndex,
   hasError,
   hint,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "data-testid": testId
 }) => {
   const baseOptions = React.useMemo(() => helpers.generateSuggest(interval).map(item => ({
     value: item.time,
@@ -45,6 +46,7 @@ const TimeSelect = ({
   }), [baseOptions, currentDate, selectedDate, allowedTimeRange, interval]);
   return /*#__PURE__*/React__default.default.createElement(index$1.Select, {
     "aria-label": ariaLabel,
+    "data-testid": testId,
     className: className,
     customInputRoot: customInputRoot,
     fontSize: fontSize,

package/Tooltip/index.js

@@ -18,7 +18,8 @@ const Tooltip = ({
   withTail = false,
   placement = "bottom",
   strategy = "absolute",
-  className
+  className,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const arrowRef = React.useRef(null);
@@ -66,6 +67,7 @@ const Tooltip = ({
     ref: refs.setFloating
   }, getFloatingProps(), {
     className: clsx__default.default(styles__default.default.tooltip, className),
+    "data-testid": testId,
     style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex
     })

package/Tooltip/index.props.d.ts

@@ -1,6 +1,7 @@
 import type { Placement, Strategy } from "@floating-ui/react";
 import type { ReactNode } from "react";
-export type TooltipProps = {
+import type { PopupTestIdProps } from "../helpers/testId";
+export type TooltipProps = PopupTestIdProps & {
     content: ReactNode;
     zIndex?: number;
     placement?: Placement;

package/base/FormField/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { FormFieldProps } from "./index.props";
-export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, labelId, required, className, ref, }: FormFieldProps) => React.JSX.Element;
+export declare const FormField: ({ label, hint, children, hasError, hintId, htmlFor, labelId, required, className, ref, "data-testid": testId, }: FormFieldProps) => React.JSX.Element;

package/base/FormField/index.js

@@ -21,10 +21,12 @@ const FormField = ({
   labelId,
   required,
   className,
-  ref
+  ref,
+  "data-testid": testId
 }) => (/*#__PURE__*/React__default.default.createElement("div", {
   className: clsx__default.default(styles__default.default.container, className),
-  ref: ref
+  ref: ref,
+  "data-testid": testId
 }, label && (/*#__PURE__*/React__default.default.createElement(index.Typography, {
   className: clsx__default.default(styles__default.default.label, {
     [styles__default.default.label_required]: Boolean(required)

package/base/FormField/index.props.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { PropsWithChildren } from "react";
-export type FormFieldProps = PropsWithChildren<{
+import type { TestIdProps } from "../../helpers/testId";
+export type FormFieldProps = PropsWithChildren<TestIdProps & {
     className?: string;
     hasError?: boolean;
     hint?: ReactNode;

package/esm/Accordion/index.js

@@ -11,7 +11,8 @@ const Accordion = ({
   children,
   className,
   tabIndex,
-  defaultOpen = false
+  defaultOpen = false,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const contentRef = useRef(null);
@@ -35,7 +36,8 @@ const Accordion = ({
     return () => observer.disconnect();
   }, [isOpen]);
   return /*#__PURE__*/React.createElement("div", {
-    className: clsx(styles.root, className)
+    className: clsx(styles.root, className),
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.header
   }, /*#__PURE__*/React.createElement("button", {

package/esm/Accordion/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { PropsWithChildren, ReactNode } from "react";
-export type AccordionProps = PropsWithChildren<{
+import type { TestIdProps } from "../helpers/testId";
+export type AccordionProps = PropsWithChildren<TestIdProps & {
     title: ReactNode;
     className?: string;
     boldTitle?: boolean;

package/esm/Avatar/index.js

@@ -84,7 +84,6 @@ const Avatar = /*#__PURE__*/memo(props => {
       })
     }, onClick && roleProps), /*#__PURE__*/React.createElement("img", Object.assign({
       ref: ref,
-      "data-testid": "avatar",
       alt: alt,
       src: src,
       className: clsx(styles.avatar, {
@@ -94,8 +93,7 @@ const Avatar = /*#__PURE__*/memo(props => {
   }
   if (hasInitials) {
     return /*#__PURE__*/React.createElement("span", Object.assign({
-      ref: ref,
-      "data-testid": "avatar"
+      ref: ref
     }, roleProps, {
       className: clsx(styles["avatar-initials"], {
         [styles["avatar-bordered"]]: Boolean(bordered),
@@ -106,8 +104,7 @@ const Avatar = /*#__PURE__*/memo(props => {
     }, initials.trim().slice(0, 2)));
   }
   return /*#__PURE__*/React.createElement("span", Object.assign({
-    ref: ref,
-    "data-testid": "avatar"
+    ref: ref
   }, roleProps, {
     className: clsx(styles["avatar-stub"], {
       [styles["avatar-bordered"]]: Boolean(bordered),

package/esm/Avatar/index.props.d.ts

@@ -1,9 +1,10 @@
 import type { AvatarSize } from "./constants";
+import type { TestIdProps } from "../helpers/testId";
 export declare enum AccountType {
     Person = "person",
     Organization = "org"
 }
-export type AvatarProps = {
+export type AvatarProps = TestIdProps & {
     accountType?: AccountType;
     alt?: string;
     size?: AvatarSize;

package/esm/Badge/Control/index.props.d.ts

@@ -1,3 +1,4 @@
-export interface ControlProps {
+import type { TestIdProps } from "../../helpers/testId";
+export interface ControlProps extends TestIdProps {
     className?: string;
 }

package/esm/Badge/index.js

@@ -24,8 +24,7 @@ const Badge = _a => {
     className: clsx(styles.root, {
       [styles[`root_direction_${direction}`]]: Boolean(direction),
       [styles["root_invisible"]]: Boolean(invisible)
-    }, className),
-    "data-testid": "badge"
+    }, className)
   }, displayValue)));
 };
 

package/esm/Button/index.js

@@ -30,7 +30,6 @@ const Button = _a => {
       [styles[`variant_${variant}_disabled`]]: Boolean(disabled)
     }, className),
     disabled: disabled,
-    "data-testid": "button",
     type: type || "button"
   }, props), icon && /*#__PURE__*/React.createElement("span", {
     className: styles.icon

package/esm/Checkbox/index.js

@@ -16,9 +16,11 @@ const Checkbox = ({
   variant = "primary",
   className,
   disabled,
-  hasError
+  hasError,
+  "data-testid": testId
 }) => (/*#__PURE__*/React.createElement("div", {
-  className: styles.root
+  className: styles.root,
+  "data-testid": testId
 }, /*#__PURE__*/React.createElement("label", {
   className: styles.label,
   htmlFor: id

package/esm/Checkbox/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { FocusEvent, ChangeEvent, ReactNode } from "react";
-export interface CheckboxProps {
+import type { TestIdProps } from "../helpers/testId";
+export interface CheckboxProps extends TestIdProps {
     checked?: boolean;
     className?: string;
     disabled?: boolean;