@staffbase/design 18.3.0 → 18.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.d.ts CHANGED
@@ -40,7 +40,7 @@ import { HTMLProps } from 'react';
40
40
  import { Input } from '@base-ui/react/input';
41
41
  import { InputHTMLAttributes } from 'react';
42
42
  import { InputProps as InputProps_2 } from '@base-ui/react';
43
- import { JSX } from 'react/jsx-runtime';
43
+ import { JSX } from 'react';
44
44
  import { Menu as Menu_2 } from '@base-ui/react/menu';
45
45
  import { MouseEvent as MouseEvent_2 } from 'react';
46
46
  import { MutableRefObject } from 'react';
@@ -79,7 +79,7 @@ export declare type ActionItemVariant = 'default' | 'critical';
79
79
  /** @deprecated use Menu component instead */
80
80
  export declare function ActionMenu({ children, ...options }: {
81
81
  children: ReactNode;
82
- } & Omit<ActionMenuOptions, 'listRef'>): JSX.Element;
82
+ } & Omit<ActionMenuOptions, 'listRef'>): default_2.JSX.Element;
83
83
 
84
84
  export declare namespace ActionMenu {
85
85
  var displayName: string;
@@ -1445,7 +1445,7 @@ export declare const PieChartIcon: default_2.NamedExoticComponent<default_2.SVGA
1445
1445
  export declare const Pill: ForwardRefExoticComponent<Omit<PillProps, "ref"> & RefAttributes<HTMLDivElement>>;
1446
1446
 
1447
1447
  declare interface PillProps extends ComponentProps<'div'> {
1448
- color?: 'critical' | 'warning' | 'primary' | 'success' | 'neutral' | 'purple' | 'cyan' | 'pink' | 'teal';
1448
+ color?: 'critical' | 'warning' | 'primary' | 'success' | 'neutral' | 'purple' | 'cyan' | 'pink' | 'teal' | 'yellow';
1449
1449
  variant?: 'solid' | 'outline';
1450
1450
  children: ReactNode;
1451
1451
  }
package/dist/main.js CHANGED
@@ -1,3 +1,15 @@
1
+ /*
2
+ Copyright 2026, Staffbase SE and contributors.
3
+ Licensed under the Apache License, Version 2.0 (the "License");
4
+ you may not use this file except in compliance with the License.
5
+ You may obtain a copy of the License at
6
+ http://www.apache.org/licenses/LICENSE-2.0
7
+ Unless required by applicable law or agreed to in writing, software
8
+ distributed under the License is distributed on an "AS IS" BASIS,
9
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10
+ See the License for the specific language governing permissions and
11
+ limitations under the License.
12
+ */
1
13
  import { FloatingFocusManager, FloatingList, FloatingOverlay, FloatingPortal, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useFocus, useHover, useInteractions, useListItem, useListNavigation, useMergeRefs, useRole, useTransitionStatus, useTransitionStyles } from "@floating-ui/react";
2
14
  import clsx$1, { clsx } from "clsx";
3
15
  import React, { cloneElement, createContext, createElement, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
@@ -122,7 +134,6 @@ var ActionMenuContent = React.forwardRef(function ActionMenuContent(props, propR
122
134
  modal: false,
123
135
  initialFocus: -1,
124
136
  children: /* @__PURE__ */ jsx("div", {
125
- "data-c13y-component": "action-menu-content",
126
137
  className: clsx$1("ds-action-menu", className),
127
138
  ref: forkedRef,
128
139
  style: {
@@ -157,7 +168,6 @@ var ActionMenuItem = React.forwardRef(function ActionMenuItem(props, ref) {
157
168
  const itemRef = useMergeRefs([ref, listItemRef]);
158
169
  return /* @__PURE__ */ jsxs("button", {
159
170
  role: "menuitem",
160
- "data-c13y-component": "action-menu-item",
161
171
  className: clsx$1("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__basic-item", `ds-action-menu__basic-item--${variant}`, className),
162
172
  ...rest,
163
173
  ...context.getItemProps({
@@ -192,7 +202,6 @@ var ActionMenuLinkItem = React.forwardRef(function ActionMenuLinkItem(props, ref
192
202
  const itemRef = useMergeRefs([ref, listItemRef]);
193
203
  return /* @__PURE__ */ jsxs("a", {
194
204
  role: "menuitem",
195
- "data-c13y-component": "action-menu-link-item",
196
205
  className: clsx$1("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__link-item", className),
197
206
  ...rest,
198
207
  ...context.getItemProps({
@@ -9072,7 +9081,6 @@ function getDividerStyles(props) {
9072
9081
  function Divider(props) {
9073
9082
  const { dividerPosition = "horizontal", className = "", fullWidth = false, ...otherProps } = props;
9074
9083
  return /* @__PURE__ */ jsx("hr", {
9075
- "data-c13y-component": "divider",
9076
9084
  className: clsx$1("ds-divider", `ds-divider--${dividerPosition}`, className),
9077
9085
  style: getDividerStyles({
9078
9086
  dividerPosition,
@@ -9826,6 +9834,30 @@ var HelpButton = forwardRef(function HelpButton(props, ref) {
9826
9834
  });
9827
9835
  HelpButton.displayName = "HelpButton";
9828
9836
  //#endregion
9837
+ //#region src/utils/splitC13yProps.ts
9838
+ /**
9839
+ * Splits a props object into its `data-c13y-*` customizability attributes and
9840
+ * everything else.
9841
+ *
9842
+ * Portalled overlays render a positioner wrapper around the visible popup. The
9843
+ * public prop type extends the positioner's props, so a consumer-supplied
9844
+ * `data-c13y-region` / `data-c13y-purpose` / `data-c13y-id` would otherwise land
9845
+ * on the invisible positioner instead of the visible popup that carries
9846
+ * `data-c13y-component`. Use this to forward the customizability attributes onto
9847
+ * the popup while keeping positioner props (`align`, `sideOffset`, …) on the
9848
+ * positioner.
9849
+ */
9850
+ function splitC13yProps(props) {
9851
+ const c13y = {};
9852
+ const rest = {};
9853
+ for (const key of Object.keys(props)) if (key.startsWith("data-c13y-")) c13y[key] = props[key];
9854
+ else rest[key] = props[key];
9855
+ return {
9856
+ c13y,
9857
+ rest
9858
+ };
9859
+ }
9860
+ //#endregion
9829
9861
  //#region src/components/menu/Menu.tsx
9830
9862
  var Root$6 = (props) => {
9831
9863
  return /* @__PURE__ */ jsx(Menu$1.Root, {
@@ -9843,14 +9875,16 @@ var Trigger$4 = (props) => {
9843
9875
  };
9844
9876
  var Popup$3 = forwardRef((props, ref) => {
9845
9877
  const { className, children, container, ...rest } = props;
9878
+ const { c13y, rest: positionerProps } = splitC13yProps(rest);
9846
9879
  return /* @__PURE__ */ jsx(Menu$1.Portal, {
9847
9880
  container,
9848
9881
  children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
9849
9882
  align: "end",
9850
9883
  sideOffset: 4,
9851
9884
  ref,
9852
- ...rest,
9885
+ ...positionerProps,
9853
9886
  children: /* @__PURE__ */ jsx(Menu$1.Popup, {
9887
+ ...c13y,
9854
9888
  "data-c13y-component": "menu-popover",
9855
9889
  className: clsx$1("ds-menu__popup", className),
9856
9890
  children,
@@ -10003,21 +10037,18 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
10003
10037
  const { title, titleAddon, showCancelButton = false, cancelButtonText, onCancel, showHeaderButton = false, headerButtonIsGhost = true, onHeaderButtonClick, headerButtonText } = props;
10004
10038
  let headerButton;
10005
10039
  if (showHeaderButton && onHeaderButtonClick && headerButtonText) if (headerButtonIsGhost) headerButton = /* @__PURE__ */ jsx(GhostButton, {
10006
- "data-c13y-purpose": "accept",
10007
10040
  className: clsx$1("ds-modal__ghost-button--accept"),
10008
10041
  variant: "primary",
10009
10042
  onClick: () => onHeaderButtonClick(),
10010
10043
  children: headerButtonText
10011
10044
  });
10012
10045
  else headerButton = /* @__PURE__ */ jsx(Button, {
10013
- "data-c13y-purpose": "accept",
10014
10046
  className: clsx$1("ds-modal__button--accept"),
10015
10047
  variant: "primary",
10016
10048
  onClick: () => onHeaderButtonClick(),
10017
10049
  children: headerButtonText
10018
10050
  });
10019
10051
  return /* @__PURE__ */ jsxs("div", {
10020
- "data-c13y-component": "modal-header",
10021
10052
  className: clsx$1("ds-modal__header"),
10022
10053
  ref,
10023
10054
  children: [/* @__PURE__ */ jsxs("div", {
@@ -10031,7 +10062,6 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
10031
10062
  }), /* @__PURE__ */ jsxs("div", {
10032
10063
  className: "ds-modal__header-buttons",
10033
10064
  children: [!!headerButton && headerButton, showCancelButton && cancelButtonText && /* @__PURE__ */ jsx(IconGhostButton, {
10034
- "data-c13y-purpose": "cancel",
10035
10065
  className: clsx$1("ds-modal__ghost-button--cancel"),
10036
10066
  variant: "secondary",
10037
10067
  style: { padding: "10px" },
@@ -10045,7 +10075,6 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
10045
10075
  fullWidth: true
10046
10076
  }), /* @__PURE__ */ jsx("div", {
10047
10077
  className: "ds-modal__header-content",
10048
- "data-c13y-component": "modal-header-content",
10049
10078
  "data-testid": "header-content-wrapper",
10050
10079
  children: props.children
10051
10080
  })] })]
@@ -10111,7 +10140,6 @@ function ModalContent(props) {
10111
10140
  setScrollShadows(scroll, scrollContent.current);
10112
10141
  }, [scroll]);
10113
10142
  return /* @__PURE__ */ jsx("div", {
10114
- "data-c13y-component": "modal-content",
10115
10143
  className: clsx$1("ds-modal__inner-content", scroll && "ds-modal__inner-content--scroll"),
10116
10144
  "data-testid": "main-content-wrapper",
10117
10145
  ref: scrollContent,
@@ -10122,20 +10150,17 @@ function ModalContent(props) {
10122
10150
  var ModalFooter = forwardRef(function ModalFooter(props, ref) {
10123
10151
  const { cancelButtonText, onCancel, footerButtonText, footerButtonVariant, onFooterButtonClick, disableFooterButton } = props;
10124
10152
  return footerButtonText && onFooterButtonClick ? /* @__PURE__ */ jsxs("div", {
10125
- "data-c13y-component": "modal-footer",
10126
10153
  className: clsx$1("ds-modal__footer"),
10127
10154
  "data-testid": "footer",
10128
10155
  ref,
10129
10156
  children: [props.children, /* @__PURE__ */ jsxs("div", {
10130
10157
  className: "ds-modal__footer-buttons",
10131
10158
  children: [cancelButtonText && /* @__PURE__ */ jsx(Button, {
10132
- "data-c13y-purpose": "cancel",
10133
10159
  className: clsx$1("ds-modal__button--cancel"),
10134
10160
  variant: "secondary",
10135
10161
  onClick: () => onCancel(),
10136
10162
  children: cancelButtonText
10137
10163
  }), footerButtonText && onFooterButtonClick && /* @__PURE__ */ jsx(Button, {
10138
- "data-c13y-purpose": "accept",
10139
10164
  className: clsx$1("ds-modal__button--accept"),
10140
10165
  variant: footerButtonVariant,
10141
10166
  disabled: disableFooterButton,
@@ -10222,7 +10247,6 @@ function ModalDialog(props) {
10222
10247
  children: /* @__PURE__ */ jsx(FloatingFocusManager, {
10223
10248
  context,
10224
10249
  children: /* @__PURE__ */ jsxs("div", {
10225
- "data-c13y-component": "modal-dialog",
10226
10250
  ...getFloatingProps({
10227
10251
  ref: refs.setFloating,
10228
10252
  className: clsx$1("ds-modal-dialog", className)
@@ -10244,12 +10268,10 @@ function ModalDialog(props) {
10244
10268
  className: "ds-modal-dialog__content",
10245
10269
  children: [/* @__PURE__ */ jsx(Button, {
10246
10270
  variant: confirmButtonVariant,
10247
- "data-c13y-purpose": "accept",
10248
10271
  onClick: onConfirm,
10249
10272
  children: confirmButtonText
10250
10273
  }), /* @__PURE__ */ jsx(Button, {
10251
10274
  variant: "secondary",
10252
- "data-c13y-purpose": "cancel",
10253
10275
  onClick: onCancel,
10254
10276
  children: cancelButtonText
10255
10277
  })]
@@ -10496,6 +10518,7 @@ var Input$2 = forwardRef((props, ref) => {
10496
10518
  });
10497
10519
  var Popup$2 = forwardRef((props, ref) => {
10498
10520
  const { className, children, container, ...rest } = props;
10521
+ const { c13y, rest: positionerProps } = splitC13yProps(rest);
10499
10522
  const { containerRef } = useSearchableMultiSelectContext();
10500
10523
  return /* @__PURE__ */ jsx(Combobox.Portal, {
10501
10524
  container,
@@ -10503,8 +10526,9 @@ var Popup$2 = forwardRef((props, ref) => {
10503
10526
  ref,
10504
10527
  sideOffset: 4,
10505
10528
  anchor: containerRef,
10506
- ...rest,
10529
+ ...positionerProps,
10507
10530
  children: /* @__PURE__ */ jsx(Combobox.Popup, {
10531
+ ...c13y,
10508
10532
  "data-c13y-component": "searchable-multi-select-popover",
10509
10533
  className: clsx$1("ds-searchable-multi-select__popup", className),
10510
10534
  children,
@@ -10686,13 +10710,15 @@ var Input$1 = forwardRef((props, ref) => {
10686
10710
  });
10687
10711
  var Popup$1 = forwardRef((props, ref) => {
10688
10712
  const { className, children, container, ...rest } = props;
10713
+ const { c13y, rest: positionerProps } = splitC13yProps(rest);
10689
10714
  return /* @__PURE__ */ jsx(Combobox.Portal, {
10690
10715
  container,
10691
10716
  children: /* @__PURE__ */ jsx(Combobox.Positioner, {
10692
10717
  sideOffset: 5,
10693
10718
  ref,
10694
- ...rest,
10719
+ ...positionerProps,
10695
10720
  children: /* @__PURE__ */ jsx(Combobox.Popup, {
10721
+ ...c13y,
10696
10722
  "data-c13y-component": "searchable-single-select-popover",
10697
10723
  className: clsx$1("ds-searchable-single-select__popup", className),
10698
10724
  children,
@@ -10812,13 +10838,15 @@ var Trigger$2 = forwardRef((props, ref) => {
10812
10838
  });
10813
10839
  var Popup = forwardRef((props, ref) => {
10814
10840
  const { className, children, container, ...rest } = props;
10841
+ const { c13y, rest: positionerProps } = splitC13yProps(rest);
10815
10842
  return /* @__PURE__ */ jsx(Select$1.Portal, {
10816
10843
  container,
10817
10844
  children: /* @__PURE__ */ jsx(Select$1.Positioner, {
10818
10845
  alignItemWithTrigger: false,
10819
10846
  ref,
10820
- ...rest,
10847
+ ...positionerProps,
10821
10848
  children: /* @__PURE__ */ jsx(Select$1.Popup, {
10849
+ ...c13y,
10822
10850
  "data-c13y-component": "select-popover",
10823
10851
  className: clsx$1("ds-select__popup", className),
10824
10852
  children,
@@ -10978,12 +11006,10 @@ function SingleSelect(props) {
10978
11006
  const errorOrDescription = useMemo(() => {
10979
11007
  if (error !== void 0 && error !== "") return /* @__PURE__ */ jsxs("div", {
10980
11008
  className: "ds-single-select__error",
10981
- "data-c13y-component": "single-select-error",
10982
11009
  children: [/* @__PURE__ */ jsx(AlertIcon_default, {}), error]
10983
11010
  });
10984
11011
  if (description !== void 0 && description !== "") return /* @__PURE__ */ jsx("span", {
10985
11012
  className: "ds-single-select__description",
10986
- "data-c13y-component": "single-select-description",
10987
11013
  children: description
10988
11014
  });
10989
11015
  return null;
@@ -10994,7 +11020,6 @@ function SingleSelect(props) {
10994
11020
  const dropdownContent = useMemo(() => {
10995
11021
  if (loading) return /* @__PURE__ */ jsx("div", {
10996
11022
  className: "ds-single-select__loader",
10997
- "data-c13y-component": "single-select-loader",
10998
11023
  children: /* @__PURE__ */ jsx(LoadingSpinner, {
10999
11024
  size: 24,
11000
11025
  "aria-label": "Loading select options..."
@@ -11002,19 +11027,15 @@ function SingleSelect(props) {
11002
11027
  });
11003
11028
  if (options.length === 0 && emptyResultText !== void 0 && emptyResultText !== "") return /* @__PURE__ */ jsx("span", {
11004
11029
  className: "ds-single-select__no-results",
11005
- "data-c13y-component": "single-select-empty",
11006
11030
  children: emptyResultText
11007
11031
  });
11008
11032
  const getLabel = (option) => /* @__PURE__ */ jsxs("span", {
11009
11033
  className: "ds-single-select__option-text",
11010
- "data-c13y-component": "single-select-option-text",
11011
11034
  children: [/* @__PURE__ */ jsx("span", {
11012
- "data-c13y-component": "single-select-label",
11013
11035
  className: clsx$1("ds-single-select__option-label", value?.id === option.id && "ds-single-select__option-label--selected"),
11014
11036
  ...getItemProps({ id: `${listId}-option-${option.id}-label` }),
11015
11037
  children: optionLabel(option)
11016
11038
  }), typeof optionDescription === "function" && optionDescription(option) !== void 0 && /* @__PURE__ */ jsx("div", {
11017
- "data-c13y-component": "single-select-option-description",
11018
11039
  className: clsx$1("ds-single-select__option-description", value?.id === option.id && "ds-single-select__option-description--selected"),
11019
11040
  ...getItemProps({ id: `${listId}-option-${option.id}-description` }),
11020
11041
  "aria-hidden": true,
@@ -11022,7 +11043,6 @@ function SingleSelect(props) {
11022
11043
  })]
11023
11044
  });
11024
11045
  return options.map((option, index) => /* @__PURE__ */ jsx("div", {
11025
- "data-c13y-component": "single-select-option",
11026
11046
  ...getItemProps({
11027
11047
  onClick: () => {
11028
11048
  onChange(option);
@@ -11071,7 +11091,6 @@ function SingleSelect(props) {
11071
11091
  })]
11072
11092
  }),
11073
11093
  variantProps.searchable ? /* @__PURE__ */ jsxs("div", {
11074
- "data-c13y-component": "single-select",
11075
11094
  className: clsx$1("ds-single-select__input-wrapper", disabled && "ds-single-select__input-wrapper--disabled", error && "ds-single-select__input-wrapper--error"),
11076
11095
  ref: refs.setReference,
11077
11096
  onClick: handleWrapperClick,
@@ -11108,7 +11127,6 @@ function SingleSelect(props) {
11108
11127
  })
11109
11128
  ]
11110
11129
  }) : /* @__PURE__ */ jsxs("button", {
11111
- "data-c13y-component": "single-select",
11112
11130
  className: clsx$1("ds-single-select__trigger", error !== void 0 && error !== "" && "ds-single-select__trigger--error", disabled && "ds-single-select__trigger--disabled"),
11113
11131
  ...getReferenceProps({
11114
11132
  disabled,
@@ -11157,7 +11175,6 @@ function SingleSelect(props) {
11157
11175
  "aria-labelledby": ariaLabelledBy || labelId
11158
11176
  }),
11159
11177
  ref: floatingRef,
11160
- "data-c13y-component": "single-select-dropdown",
11161
11178
  className: clsx$1("ds-single-select__dropdown"),
11162
11179
  children: /* @__PURE__ */ jsx("div", { children: dropdownContent })
11163
11180
  }) }) : null] });
@@ -11306,13 +11323,11 @@ function TextAreaDeprecated(props) {
11306
11323
  if (handleValueChange) handleValueChange(event);
11307
11324
  }, [handleValueChange]);
11308
11325
  return /* @__PURE__ */ jsxs("div", {
11309
- "data-c13y-component": "text-area-deprecated",
11310
11326
  className: clsx$1("ds-text-area__container", className),
11311
11327
  children: [
11312
11328
  /* @__PURE__ */ jsxs("label", {
11313
11329
  className: "ds-text-area__label",
11314
11330
  htmlFor: id,
11315
- "data-c13y-component": "text-area-deprecated-label",
11316
11331
  children: [label, requiredLabel && /* @__PURE__ */ jsx("span", {
11317
11332
  className: "ds-text-area__label-required",
11318
11333
  "aria-hidden": true,
@@ -11321,7 +11336,6 @@ function TextAreaDeprecated(props) {
11321
11336
  }),
11322
11337
  /* @__PURE__ */ jsx("textarea", {
11323
11338
  className: clsx$1("ds-text-area__input", resizable && "resizable", errorMessage && "ds-text-area__input--error"),
11324
- "data-c13y-component": "text-area-deprecated-input",
11325
11339
  dir: "auto",
11326
11340
  id,
11327
11341
  name: inputId ?? label,
@@ -11336,24 +11350,20 @@ function TextAreaDeprecated(props) {
11336
11350
  }),
11337
11351
  /* @__PURE__ */ jsxs("div", {
11338
11352
  className: "ds-text-area__footer",
11339
- "data-c13y-component": "text-area-deprecated-footer",
11340
11353
  children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
11341
11354
  id: errorId,
11342
11355
  "aria-live": errorAriaLive,
11343
11356
  "aria-atomic": "true",
11344
11357
  children: errorMessage && /* @__PURE__ */ jsxs("span", {
11345
11358
  className: "ds-text-area__error",
11346
- "data-c13y-component": "text-area-deprecated-error",
11347
11359
  children: [/* @__PURE__ */ jsx(AlertIcon_default, {}), errorMessage]
11348
11360
  })
11349
11361
  }), description && /* @__PURE__ */ jsx("p", {
11350
11362
  className: "ds-text-area__description",
11351
11363
  id: descriptionId,
11352
- "data-c13y-component": "text-area-deprecated-description",
11353
11364
  children: description
11354
11365
  })] }), limit && /* @__PURE__ */ jsxs("span", {
11355
11366
  className: "ds-text-area__counter",
11356
- "data-c13y-component": "text-area-deprecated-counter",
11357
11367
  children: [
11358
11368
  count,
11359
11369
  "/",
@@ -11402,13 +11412,11 @@ var TextInput = forwardRef(function TextInput(props, ref) {
11402
11412
  const inputRef = useRef(null);
11403
11413
  if (!ref) ref = inputRef;
11404
11414
  return /* @__PURE__ */ jsxs("div", {
11405
- "data-c13y-component": "text-input",
11406
11415
  className: clsx$1("ds-text-input__container", errorMessage ? "ds-text-input__container--error" : `ds-text-input__container--${variant}`, restProps.disabled && "ds-text-input__container--disabled", className),
11407
11416
  children: [
11408
11417
  /* @__PURE__ */ jsxs("label", {
11409
11418
  className: "ds-text-input__label",
11410
11419
  htmlFor: inputId,
11411
- "data-c13y-component": "text-input-label",
11412
11420
  children: [label, requiredLabel && /* @__PURE__ */ jsx("span", {
11413
11421
  className: "ds-text-input__label-required",
11414
11422
  "aria-hidden": true,
@@ -11417,7 +11425,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
11417
11425
  }),
11418
11426
  /* @__PURE__ */ jsxs("div", {
11419
11427
  className: "ds-text-input__base-wrapper",
11420
- "data-c13y-component": "text-input-container",
11421
11428
  style: { width },
11422
11429
  onClick: () => ref && "current" in ref && ref.current?.focus(),
11423
11430
  role: "none",
@@ -11427,7 +11434,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
11427
11434
  children: icon
11428
11435
  }),
11429
11436
  /* @__PURE__ */ jsx("input", {
11430
- "data-c13y-component": "text-input-input",
11431
11437
  className: "ds-text-input__base-input",
11432
11438
  "aria-invalid": !!errorMessage,
11433
11439
  id: inputId,
@@ -11447,7 +11453,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
11447
11453
  errorMessage && /* @__PURE__ */ jsxs("div", {
11448
11454
  className: "ds-text-input__error",
11449
11455
  id: inputErrorId,
11450
- "data-c13y-component": "text-input-error",
11451
11456
  children: [/* @__PURE__ */ jsx("span", {
11452
11457
  className: "ds-text-input__error-icon",
11453
11458
  children: /* @__PURE__ */ jsx(AlertIcon_default, {})
@@ -11456,7 +11461,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
11456
11461
  description && /* @__PURE__ */ jsx("div", {
11457
11462
  className: clsx$1("ds-text-input__description"),
11458
11463
  id: inputDescriptionId,
11459
- "data-c13y-component": "text-input-description",
11460
11464
  children: description
11461
11465
  })
11462
11466
  ]
@@ -11472,7 +11476,6 @@ function Toggle(props) {
11472
11476
  const descriptionId = `toggle-${id}-descr`;
11473
11477
  const inputId = `toggle-${id}-label`;
11474
11478
  return /* @__PURE__ */ jsxs("div", {
11475
- "data-c13y-component": "toggle",
11476
11479
  className: clsx$1("ds-toggle__container", disabled && "ds-toggle__container--disabled", spaceBetween ? "ds-toggle__container--full-width" : "ds-toggle__container--content-width", className),
11477
11480
  children: [/* @__PURE__ */ jsxs("div", {
11478
11481
  className: clsx$1("ds-toggle__wrapper"),
@@ -11481,13 +11484,11 @@ function Toggle(props) {
11481
11484
  className: clsx$1("ds-toggle__label-container"),
11482
11485
  children: /* @__PURE__ */ jsx("label", {
11483
11486
  className: clsx$1("ds-toggle__label"),
11484
- "data-c13y-component": "toggle-label",
11485
11487
  htmlFor: inputId,
11486
11488
  children: label
11487
11489
  })
11488
11490
  }),
11489
11491
  /* @__PURE__ */ jsx("input", {
11490
- "data-c13y-component": "toggle-input",
11491
11492
  className: "ds-toggle",
11492
11493
  name,
11493
11494
  type: "checkbox",
@@ -11500,7 +11501,6 @@ function Toggle(props) {
11500
11501
  }),
11501
11502
  /* @__PURE__ */ jsxs("div", {
11502
11503
  className: clsx$1("ds-toggle__switch-wrapper"),
11503
- "data-c13y-component": "toggle-switch",
11504
11504
  children: [
11505
11505
  /* @__PURE__ */ jsx(CheckIcon_default, {
11506
11506
  "aria-hidden": "true",
@@ -11516,7 +11516,6 @@ function Toggle(props) {
11516
11516
  ]
11517
11517
  }), description && /* @__PURE__ */ jsx("p", {
11518
11518
  className: clsx$1("ds-toggle__description"),
11519
- "data-c13y-component": "toggle-description",
11520
11519
  id: descriptionId,
11521
11520
  children: description
11522
11521
  })]
@@ -11555,6 +11554,7 @@ var Tooltip = {
11555
11554
  Content: forwardRef((props, ref) => {
11556
11555
  const context = useContext(TooltipContext);
11557
11556
  const { className, children, variant = "default", is = "description", container, ...rest } = props;
11557
+ const { c13y, rest: positionerProps } = splitC13yProps(rest);
11558
11558
  useEffect(() => {
11559
11559
  if (context) context.setIs(is);
11560
11560
  }, [is, context]);
@@ -11562,8 +11562,9 @@ var Tooltip = {
11562
11562
  container,
11563
11563
  children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
11564
11564
  sideOffset: 4,
11565
- ...rest,
11565
+ ...positionerProps,
11566
11566
  children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
11567
+ ...c13y,
11567
11568
  "data-c13y-component": "tooltip-popover",
11568
11569
  className: clsx$1(`ds-tooltip--${variant}`, "ds-tooltip", className),
11569
11570
  id: context?.id,
@@ -11634,7 +11635,6 @@ function TooltipDeprecated(props) {
11634
11635
  ...styles
11635
11636
  }
11636
11637
  }),
11637
- "data-c13y-component": "tooltip-deprecated",
11638
11638
  className: clsx("ds-tooltip-deprecated", className),
11639
11639
  children: content
11640
11640
  }) : null] });