colibri-ui 0.8.98 → 0.8.99

package/Accordion/index.js

@@ -19,7 +19,8 @@ const Accordion = ({
   children,
   className,
   tabIndex,
-  defaultOpen = false
+  defaultOpen = false,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const contentRef = React.useRef(null);
@@ -43,7 +44,8 @@ const Accordion = ({
     return () => observer.disconnect();
   }, [isOpen]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(styles__default.default.root, className)
+    className: clsx__default.default(styles__default.default.root, className),
+    "data-testid": testId
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default.header
   }, /*#__PURE__*/React__default.default.createElement("button", {

package/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/Avatar/index.js

@@ -92,7 +92,6 @@ const Avatar = /*#__PURE__*/React.memo(props => {
       })
     }, onClick && roleProps), /*#__PURE__*/React__default.default.createElement("img", Object.assign({
       ref: ref,
-      "data-testid": "avatar",
       alt: alt,
       src: src,
       className: clsx__default.default(styles__default.default.avatar, {
@@ -102,8 +101,7 @@ const Avatar = /*#__PURE__*/React.memo(props => {
   }
   if (hasInitials) {
     return /*#__PURE__*/React__default.default.createElement("span", Object.assign({
-      ref: ref,
-      "data-testid": "avatar"
+      ref: ref
     }, roleProps, {
       className: clsx__default.default(styles__default.default["avatar-initials"], {
         [styles__default.default["avatar-bordered"]]: Boolean(bordered),
@@ -114,8 +112,7 @@ const Avatar = /*#__PURE__*/React.memo(props => {
     }, initials.trim().slice(0, 2)));
   }
   return /*#__PURE__*/React__default.default.createElement("span", Object.assign({
-    ref: ref,
-    "data-testid": "avatar"
+    ref: ref
   }, roleProps, {
     className: clsx__default.default(styles__default.default["avatar-stub"], {
       [styles__default.default["avatar-bordered"]]: Boolean(bordered),

package/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/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/Badge/index.js

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

package/Button/index.js

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

package/Checkbox/index.js

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

package/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;

package/Chip/index.js

@@ -19,13 +19,11 @@ const Chip = _a => {
       onClick,
       onClickIcon,
       size = "m",
-      testID = "chip",
       variant = "primary"
     } = _a,
-    props = tslib.__rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID", "variant"]);
+    props = tslib.__rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "variant"]);
   return /*#__PURE__*/React__default.default.createElement("span", Object.assign({
-    className: styles__default.default.chip,
-    "data-testid": testID
+    className: styles__default.default.chip
   }, props), /*#__PURE__*/React__default.default.createElement("span", {
     className: clsx__default.default(styles__default.default.inner, styles__default.default[`inner_variant_${variant}`], {
       [styles__default.default["inner_active"]]: iconEnd || isActive,

package/Chip/index.props.d.ts

@@ -1,9 +1,9 @@
+import type { TestIdProps } from "../helpers/testId";
 export type ChipSize = "s" | "m" | "l";
 export type ChipVariant = "primary" | "secondary" | "outline" | "pseudo" | "alert" | "success" | "clear";
-export type ChipProps = {
+export type ChipProps = TestIdProps & {
     size?: ChipSize;
     variant?: ChipVariant;
-    testID?: string;
     isActive?: boolean;
     iconEnd?: React.ReactNode;
     onClick?: () => void;

package/ColorPicker/ColorPicker.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { ColorPickerProps } from "./index.props";
-export declare const ColorPicker: ({ value, onChange, presets, columns, disabled, placement, zIndex, labels: labelsProp, children, }: ColorPickerProps) => React.JSX.Element;
+export declare const ColorPicker: ({ value, onChange, presets, columns, disabled, placement, zIndex, labels: labelsProp, children, "data-testid": testId, }: ColorPickerProps) => React.JSX.Element;

package/ColorPicker/ColorPicker.js

@@ -31,7 +31,8 @@ const ColorPicker = ({
   placement = "bottom-start",
   zIndex,
   labels: labelsProp,
-  children
+  children,
+  "data-testid": testId
 }) => {
   var _a, _b;
   const [isOpen, setOpen] = React.useState(false);
@@ -85,7 +86,8 @@ const ColorPicker = ({
   }));
   return /*#__PURE__*/React__default.default.createElement("span", {
     ref: rootRef,
-    className: styles__default.default.root
+    className: styles__default.default.root,
+    "data-testid": testId
   }, /*#__PURE__*/React__default.default.createElement(index$1.Dropdown, {
     trigger: ["click"],
     visible: isOpen,

package/ColorPicker/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
 import type { Placement } from "@floating-ui/react";
+import type { TestIdProps } from "../helpers/testId";
 export interface ColorPickerPreset {
     /** HEX color, for example `#d81b60`. */
     value: string;
@@ -24,7 +25,7 @@ export interface ColorPickerLabels {
     cancel: string;
     save: string;
 }
-export interface ColorPickerProps {
+export interface ColorPickerProps extends TestIdProps {
     /** Current color in HEX. A color missing from `presets` is shown as an extra swatch. */
     value?: string;
     /** Called with the chosen color as lowercase `#rrggbb`. */

package/Counter/index.js

@@ -20,7 +20,8 @@ const Counter = ({
   fullWidth,
   onChange,
   disabled,
-  className
+  className,
+  "data-testid": testId
 }) => {
   const minusDisabled = disabled || value <= min;
   const plusDisabled = disabled || value >= max;
@@ -33,7 +34,8 @@ const Counter = ({
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(styles__default.default.root, {
       [styles__default.default["root_fullWidth"]]: Boolean(fullWidth)
-    }, className)
+    }, className),
+    "data-testid": testId
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(styles__default.default.control, {
       [styles__default.default["control_fullWidth"]]: Boolean(fullWidth)

package/Counter/index.props.d.ts

@@ -1,4 +1,5 @@
-export type CounterProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type CounterProps = TestIdProps & {
     value: number;
     max: number;
     min: number;

package/Datepicker/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { Props } from "./index.props";
-export declare const Datepicker: ({ className, disabled, endPlaceholder, hasError, hint, label, placeholder, required, selectedDate, selectedRange, selectionMode, size, startPlaceholder, onChangeDate, onChangeRange, ...calendarProps }: Props) => React.JSX.Element;
+export declare const Datepicker: ({ className, disabled, endPlaceholder, hasError, hint, label, placeholder, required, selectedDate, selectedRange, selectionMode, size, startPlaceholder, onChangeDate, onChangeRange, "data-testid": testId, ...calendarProps }: Props) => React.JSX.Element;

package/Datepicker/index.js

@@ -28,11 +28,13 @@ const Datepicker = _a => {
       size = "m",
       startPlaceholder,
       onChangeDate,
-      onChangeRange
+      onChangeRange,
+      "data-testid": testId
     } = _a,
-    calendarProps = tslib.__rest(_a, ["className", "disabled", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "startPlaceholder", "onChangeDate", "onChangeRange"]);
+    calendarProps = tslib.__rest(_a, ["className", "disabled", "endPlaceholder", "hasError", "hint", "label", "placeholder", "required", "selectedDate", "selectedRange", "selectionMode", "size", "startPlaceholder", "onChangeDate", "onChangeRange", "data-testid"]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(styles__default.default.root, className)
+    className: clsx__default.default(styles__default.default.root, className),
+    "data-testid": testId
   }, /*#__PURE__*/React__default.default.createElement(index.DatePicker, Object.assign({}, calendarProps, {
     disabled: disabled,
     endPlaceholder: endPlaceholder,

package/Datepicker/index.props.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from "react";
 import type { CalendarCommonProps } from "../Calendar";
+import type { TestIdProps } from "../helpers/testId";
 export type DatepickerSize = "s" | "m" | "l";
 export type DatepickerSelectionMode = "single" | "range";
 export type DatepickerRangeValue = [string, string];
 export type DatepickerCalendarProps = Omit<CalendarCommonProps, "className" | "size">;
-export type Props = DatepickerCalendarProps & {
+export type Props = DatepickerCalendarProps & TestIdProps & {
     className?: string;
     disabled?: boolean;
     endPlaceholder?: string;

package/DotsLoader/index.js

@@ -10,8 +10,11 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-const DotsLoader = () => (/*#__PURE__*/React__default.default.createElement("div", {
-  className: styles__default.default.wrapper
+const DotsLoader = ({
+  "data-testid": testId
+}) => (/*#__PURE__*/React__default.default.createElement("div", {
+  className: styles__default.default.wrapper,
+  "data-testid": testId
 }, /*#__PURE__*/React__default.default.createElement("div", {
   className: clsx__default.default({
     [styles__default.default.dot]: true,

package/DotsLoader/index.props.d.ts

@@ -1 +1,2 @@
-export type DotsLoaderProps = Record<string, never>;
+import type { TestIdProps } from "../helpers/testId";
+export type DotsLoaderProps = TestIdProps;

package/Dropdown/index.js

@@ -14,6 +14,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 const Dropdown = ({
   children,
+  "data-testid": testId,
   zIndex,
   fontSize,
   disabled,
@@ -95,7 +96,7 @@ const Dropdown = ({
     onClick: () => setOpen(false)
   }, /*#__PURE__*/React__default.default.createElement("div", Object.assign({
     ref: refs.setFloating,
-    "data-testid": "popper-container",
+    "data-testid": testId,
     className: clsx__default.default(styles__default.default["popper-container"], styles__default.default[`placement-${finalPlacement}`]),
     style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex,
@@ -105,7 +106,6 @@ const Dropdown = ({
     role: "menu",
     tabIndex: 0
   }, getFloatingProps()), /*#__PURE__*/React__default.default.createElement("div", {
-    "data-testid": "overlay-container",
     className: styles__default.default["overlay-container"],
     onClick: onClickOverlay
   }, overlay))))));

package/Dropdown/index.props.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import type { Placement, Strategy } from "@floating-ui/react";
+import type { PopupTestIdProps } from "../helpers/testId";
 export type Trigger = "click" | "hover" | "focus";
-export type DropdownProps = {
+export type DropdownProps = PopupTestIdProps & {
     defaultVisible?: boolean;
     disabled?: boolean;
     flip?: boolean;

package/Grid/index.js

@@ -16,9 +16,11 @@ const Grid = ({
   gridRowGap = "6",
   gridColumnGap = "4",
   gridItemMinWidth = "var(--component-grid-item-min-width)",
-  className
+  className,
+  "data-testid": testId
 }) => (/*#__PURE__*/React__default.default.createElement("div", {
   className: clsx__default.default(styles__default.default.root, className),
+  "data-testid": testId,
   style: {
     rowGap: `var(--space-${gridRowGap})`,
     columnGap: `var(--space-${gridColumnGap})`,

package/Grid/index.props.d.ts

@@ -1,5 +1,6 @@
+import type { TestIdProps } from "../helpers/testId";
 export type Space = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32";
-export type GridProps = {
+export type GridProps = TestIdProps & {
     className?: string;
     gridRowGap?: Space;
     gridColumnGap?: Space;

package/InputRadio/index.js

@@ -31,9 +31,9 @@ const InputRadio = /*#__PURE__*/React.memo(_a => {
       style,
       text,
       value,
-      testid
+      "data-testid": testId
     } = _a,
-    rest = tslib.__rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
+    rest = tslib.__rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "data-testid"]);
   return (
     /*#__PURE__*/
     // Keyboard activation of the nested radio dispatches a click that bubbles to the label.
@@ -44,7 +44,7 @@ const InputRadio = /*#__PURE__*/React.memo(_a => {
       style: style,
       onClick: onClick,
       onMouseEnter: onMouseEnter,
-      "data-testid": testid
+      "data-testid": testId
     }, /*#__PURE__*/React__default.default.createElement("div", {
       className: clsx__default.default(styles__default.default.container, {
         [styles__default.default["container_disabled"]]: Boolean(disabled),

package/InputRadio/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { ChangeEvent, CSSProperties, FocusEvent, PropsWithChildren } from "react";
-export type InputRadioProps = PropsWithChildren<{
+import type { TestIdProps } from "../helpers/testId";
+export type InputRadioProps = PropsWithChildren<TestIdProps & {
     checked?: boolean;
     className?: string;
     containerClassName?: string;
@@ -16,5 +17,4 @@ export type InputRadioProps = PropsWithChildren<{
     style?: CSSProperties;
     text?: string;
     value: string | number;
-    testid?: string;
 }>;

package/Menu/components/MenuItem/index.js

@@ -33,7 +33,6 @@ const MenuItem = _a => {
     ref: ref,
     role: "menuitem",
     tabIndex: disabled ? -1 : 0,
-    "data-testid": "menuitem",
     "aria-disabled": disabled || undefined,
     className: clsx__default.default(styles__default.default.item, {
       [styles__default.default["item_disabled"]]: Boolean(disabled),

package/Menu/components/MenuItem/index.props.d.ts

@@ -1,6 +1,7 @@
 import type { KeyboardEvent, MouseEvent } from "react";
 import type { MenuVariant } from "../../index.props";
-export interface MenuItemProps {
+import type { TestIdProps } from "../../../helpers/testId";
+export interface MenuItemProps extends TestIdProps {
     className?: string;
     isSelected?: boolean;
     onClick?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;

package/Menu/index.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import type { Props } from "./index.props";
-export declare const Menu: ({ selected, variant, className, onClick, children, ref, }: Props) => React.JSX.Element;
+export declare const Menu: ({ selected, variant, className, onClick, children, ref, "data-testid": testId, }: Props) => React.JSX.Element;

package/Menu/index.js

@@ -16,7 +16,8 @@ const Menu = ({
   className,
   onClick,
   children,
-  ref
+  ref,
+  "data-testid": testId
 }) => {
   const renderChild = React.useMemo(() => React.Children.map(children, child => {
     if (! /*#__PURE__*/React.isValidElement(child)) return child;
@@ -36,7 +37,8 @@ const Menu = ({
   return /*#__PURE__*/React__default.default.createElement("ul", {
     ref: ref,
     className: clsx__default.default(styles__default.default.menu, className),
-    role: "menu"
+    role: "menu",
+    "data-testid": testId
   }, renderChild);
 };
 

package/Menu/index.props.d.ts

@@ -1,7 +1,8 @@
 import type { ReactElement, KeyboardEvent, MouseEvent } from "react";
 import type { MenuItemProps } from "./components/MenuItem/index.props";
+import type { TestIdProps } from "../helpers/testId";
 export type MenuVariant = "primary";
-export type Props = {
+export type Props = TestIdProps & {
     selected?: string[];
     variant?: MenuVariant;
     className?: string;

package/Modal/index.js

@@ -31,7 +31,8 @@ const ModalRoot = ({
   onClose,
   title,
   withinParent = false,
-  fillParent = false
+  fillParent = false,
+  "data-testid": testId
 }) => {
   const [dialog, setDialog] = React.useState(null);
   const [container, setContainer] = React.useState(null);
@@ -99,6 +100,7 @@ const ModalRoot = ({
     ref: setDialog,
     role: "dialog",
     "aria-modal": "true",
+    "data-testid": testId,
     tabIndex: -1,
     "aria-labelledby": titleCount > 0 ? titleId : undefined
   }, /*#__PURE__*/React__default.default.createElement("div", {

package/Modal/index.props.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from "react";
-export type ModalProps = {
+import type { TestIdProps } from "../helpers/testId";
+export type ModalProps = TestIdProps & {
     className?: string;
     onClose?: () => void;
     /**

package/MultiSelect/index.js

@@ -40,7 +40,8 @@ const MultiSelect = ({
   value = [],
   type,
   onChange,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "data-testid": testId
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const id = React.useId();
@@ -80,6 +81,7 @@ const MultiSelect = ({
     })
   }))), [preparedGroups]);
   return /*#__PURE__*/React__default.default.createElement(index$1.FormField, {
+    "data-testid": testId,
     className: clsx__default.default(styles__default.default["form-field"], {
       [styles__default.default["full-width"]]: Boolean(fullWidth)
     }, className),

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;