@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/components.css +13 -1
- package/dist/fonts/epilogue-OFL.txt +93 -0
- package/dist/fonts/epilogue.css +12 -0
- package/dist/fonts/inter-OFL.txt +92 -0
- package/dist/fonts/inter.css +12 -0
- package/dist/hooks.cjs +12 -1
- package/dist/hooks.cjs.map +1 -1
- package/dist/hooks.js +12 -0
- package/dist/hooks.js.map +1 -1
- package/dist/main.cjs +51 -52
- package/dist/main.cjs.map +1 -1
- package/dist/main.d.ts +3 -3
- package/dist/main.js +51 -51
- package/dist/main.js.map +1 -1
- package/dist/theme.css +54 -42
- package/dist/tokens/component.css +12 -0
- package/dist/tokens/primitive.css +12 -0
- package/dist/tokens/semantic.css +13 -0
- package/package.json +28 -27
package/dist/main.cjs
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
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
14
|
//#region \0rolldown/runtime.js
|
|
3
15
|
var __create = Object.create;
|
|
@@ -149,7 +161,6 @@ var ActionMenuContent = react.default.forwardRef(function ActionMenuContent(prop
|
|
|
149
161
|
modal: false,
|
|
150
162
|
initialFocus: -1,
|
|
151
163
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
152
|
-
"data-c13y-component": "action-menu-content",
|
|
153
164
|
className: (0, clsx.default)("ds-action-menu", className),
|
|
154
165
|
ref: forkedRef,
|
|
155
166
|
style: {
|
|
@@ -184,7 +195,6 @@ var ActionMenuItem = react.default.forwardRef(function ActionMenuItem(props, ref
|
|
|
184
195
|
const itemRef = (0, _floating_ui_react.useMergeRefs)([ref, listItemRef]);
|
|
185
196
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
|
|
186
197
|
role: "menuitem",
|
|
187
|
-
"data-c13y-component": "action-menu-item",
|
|
188
198
|
className: (0, clsx.default)("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__basic-item", `ds-action-menu__basic-item--${variant}`, className),
|
|
189
199
|
...rest,
|
|
190
200
|
...context.getItemProps({
|
|
@@ -219,7 +229,6 @@ var ActionMenuLinkItem = react.default.forwardRef(function ActionMenuLinkItem(pr
|
|
|
219
229
|
const itemRef = (0, _floating_ui_react.useMergeRefs)([ref, listItemRef]);
|
|
220
230
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
|
|
221
231
|
role: "menuitem",
|
|
222
|
-
"data-c13y-component": "action-menu-link-item",
|
|
223
232
|
className: (0, clsx.default)("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__link-item", className),
|
|
224
233
|
...rest,
|
|
225
234
|
...context.getItemProps({
|
|
@@ -9099,7 +9108,6 @@ function getDividerStyles(props) {
|
|
|
9099
9108
|
function Divider(props) {
|
|
9100
9109
|
const { dividerPosition = "horizontal", className = "", fullWidth = false, ...otherProps } = props;
|
|
9101
9110
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
|
|
9102
|
-
"data-c13y-component": "divider",
|
|
9103
9111
|
className: (0, clsx.default)("ds-divider", `ds-divider--${dividerPosition}`, className),
|
|
9104
9112
|
style: getDividerStyles({
|
|
9105
9113
|
dividerPosition,
|
|
@@ -9853,6 +9861,30 @@ var HelpButton = (0, react.forwardRef)(function HelpButton(props, ref) {
|
|
|
9853
9861
|
});
|
|
9854
9862
|
HelpButton.displayName = "HelpButton";
|
|
9855
9863
|
//#endregion
|
|
9864
|
+
//#region src/utils/splitC13yProps.ts
|
|
9865
|
+
/**
|
|
9866
|
+
* Splits a props object into its `data-c13y-*` customizability attributes and
|
|
9867
|
+
* everything else.
|
|
9868
|
+
*
|
|
9869
|
+
* Portalled overlays render a positioner wrapper around the visible popup. The
|
|
9870
|
+
* public prop type extends the positioner's props, so a consumer-supplied
|
|
9871
|
+
* `data-c13y-region` / `data-c13y-purpose` / `data-c13y-id` would otherwise land
|
|
9872
|
+
* on the invisible positioner instead of the visible popup that carries
|
|
9873
|
+
* `data-c13y-component`. Use this to forward the customizability attributes onto
|
|
9874
|
+
* the popup while keeping positioner props (`align`, `sideOffset`, …) on the
|
|
9875
|
+
* positioner.
|
|
9876
|
+
*/
|
|
9877
|
+
function splitC13yProps(props) {
|
|
9878
|
+
const c13y = {};
|
|
9879
|
+
const rest = {};
|
|
9880
|
+
for (const key of Object.keys(props)) if (key.startsWith("data-c13y-")) c13y[key] = props[key];
|
|
9881
|
+
else rest[key] = props[key];
|
|
9882
|
+
return {
|
|
9883
|
+
c13y,
|
|
9884
|
+
rest
|
|
9885
|
+
};
|
|
9886
|
+
}
|
|
9887
|
+
//#endregion
|
|
9856
9888
|
//#region src/components/menu/Menu.tsx
|
|
9857
9889
|
var Root$6 = (props) => {
|
|
9858
9890
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Root, {
|
|
@@ -9870,14 +9902,16 @@ var Trigger$4 = (props) => {
|
|
|
9870
9902
|
};
|
|
9871
9903
|
var Popup$3 = (0, react.forwardRef)((props, ref) => {
|
|
9872
9904
|
const { className, children, container, ...rest } = props;
|
|
9905
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
9873
9906
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Portal, {
|
|
9874
9907
|
container,
|
|
9875
9908
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Positioner, {
|
|
9876
9909
|
align: "end",
|
|
9877
9910
|
sideOffset: 4,
|
|
9878
9911
|
ref,
|
|
9879
|
-
...
|
|
9912
|
+
...positionerProps,
|
|
9880
9913
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_menu.Menu.Popup, {
|
|
9914
|
+
...c13y,
|
|
9881
9915
|
"data-c13y-component": "menu-popover",
|
|
9882
9916
|
className: (0, clsx.default)("ds-menu__popup", className),
|
|
9883
9917
|
children,
|
|
@@ -10030,21 +10064,18 @@ var ModalHeader = (0, react.forwardRef)(function ModalHeader(props, ref) {
|
|
|
10030
10064
|
const { title, titleAddon, showCancelButton = false, cancelButtonText, onCancel, showHeaderButton = false, headerButtonIsGhost = true, onHeaderButtonClick, headerButtonText } = props;
|
|
10031
10065
|
let headerButton;
|
|
10032
10066
|
if (showHeaderButton && onHeaderButtonClick && headerButtonText) if (headerButtonIsGhost) headerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GhostButton, {
|
|
10033
|
-
"data-c13y-purpose": "accept",
|
|
10034
10067
|
className: (0, clsx.default)("ds-modal__ghost-button--accept"),
|
|
10035
10068
|
variant: "primary",
|
|
10036
10069
|
onClick: () => onHeaderButtonClick(),
|
|
10037
10070
|
children: headerButtonText
|
|
10038
10071
|
});
|
|
10039
10072
|
else headerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
|
|
10040
|
-
"data-c13y-purpose": "accept",
|
|
10041
10073
|
className: (0, clsx.default)("ds-modal__button--accept"),
|
|
10042
10074
|
variant: "primary",
|
|
10043
10075
|
onClick: () => onHeaderButtonClick(),
|
|
10044
10076
|
children: headerButtonText
|
|
10045
10077
|
});
|
|
10046
10078
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
10047
|
-
"data-c13y-component": "modal-header",
|
|
10048
10079
|
className: (0, clsx.default)("ds-modal__header"),
|
|
10049
10080
|
ref,
|
|
10050
10081
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
@@ -10058,7 +10089,6 @@ var ModalHeader = (0, react.forwardRef)(function ModalHeader(props, ref) {
|
|
|
10058
10089
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
10059
10090
|
className: "ds-modal__header-buttons",
|
|
10060
10091
|
children: [!!headerButton && headerButton, showCancelButton && cancelButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconGhostButton, {
|
|
10061
|
-
"data-c13y-purpose": "cancel",
|
|
10062
10092
|
className: (0, clsx.default)("ds-modal__ghost-button--cancel"),
|
|
10063
10093
|
variant: "secondary",
|
|
10064
10094
|
style: { padding: "10px" },
|
|
@@ -10072,7 +10102,6 @@ var ModalHeader = (0, react.forwardRef)(function ModalHeader(props, ref) {
|
|
|
10072
10102
|
fullWidth: true
|
|
10073
10103
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
10074
10104
|
className: "ds-modal__header-content",
|
|
10075
|
-
"data-c13y-component": "modal-header-content",
|
|
10076
10105
|
"data-testid": "header-content-wrapper",
|
|
10077
10106
|
children: props.children
|
|
10078
10107
|
})] })]
|
|
@@ -10138,7 +10167,6 @@ function ModalContent(props) {
|
|
|
10138
10167
|
setScrollShadows(scroll, scrollContent.current);
|
|
10139
10168
|
}, [scroll]);
|
|
10140
10169
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
10141
|
-
"data-c13y-component": "modal-content",
|
|
10142
10170
|
className: (0, clsx.default)("ds-modal__inner-content", scroll && "ds-modal__inner-content--scroll"),
|
|
10143
10171
|
"data-testid": "main-content-wrapper",
|
|
10144
10172
|
ref: scrollContent,
|
|
@@ -10149,20 +10177,17 @@ function ModalContent(props) {
|
|
|
10149
10177
|
var ModalFooter = (0, react.forwardRef)(function ModalFooter(props, ref) {
|
|
10150
10178
|
const { cancelButtonText, onCancel, footerButtonText, footerButtonVariant, onFooterButtonClick, disableFooterButton } = props;
|
|
10151
10179
|
return footerButtonText && onFooterButtonClick ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
10152
|
-
"data-c13y-component": "modal-footer",
|
|
10153
10180
|
className: (0, clsx.default)("ds-modal__footer"),
|
|
10154
10181
|
"data-testid": "footer",
|
|
10155
10182
|
ref,
|
|
10156
10183
|
children: [props.children, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
10157
10184
|
className: "ds-modal__footer-buttons",
|
|
10158
10185
|
children: [cancelButtonText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
|
|
10159
|
-
"data-c13y-purpose": "cancel",
|
|
10160
10186
|
className: (0, clsx.default)("ds-modal__button--cancel"),
|
|
10161
10187
|
variant: "secondary",
|
|
10162
10188
|
onClick: () => onCancel(),
|
|
10163
10189
|
children: cancelButtonText
|
|
10164
10190
|
}), footerButtonText && onFooterButtonClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
|
|
10165
|
-
"data-c13y-purpose": "accept",
|
|
10166
10191
|
className: (0, clsx.default)("ds-modal__button--accept"),
|
|
10167
10192
|
variant: footerButtonVariant,
|
|
10168
10193
|
disabled: disableFooterButton,
|
|
@@ -10249,7 +10274,6 @@ function ModalDialog(props) {
|
|
|
10249
10274
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingFocusManager, {
|
|
10250
10275
|
context,
|
|
10251
10276
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
10252
|
-
"data-c13y-component": "modal-dialog",
|
|
10253
10277
|
...getFloatingProps({
|
|
10254
10278
|
ref: refs.setFloating,
|
|
10255
10279
|
className: (0, clsx.default)("ds-modal-dialog", className)
|
|
@@ -10271,12 +10295,10 @@ function ModalDialog(props) {
|
|
|
10271
10295
|
className: "ds-modal-dialog__content",
|
|
10272
10296
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
|
|
10273
10297
|
variant: confirmButtonVariant,
|
|
10274
|
-
"data-c13y-purpose": "accept",
|
|
10275
10298
|
onClick: onConfirm,
|
|
10276
10299
|
children: confirmButtonText
|
|
10277
10300
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
|
|
10278
10301
|
variant: "secondary",
|
|
10279
|
-
"data-c13y-purpose": "cancel",
|
|
10280
10302
|
onClick: onCancel,
|
|
10281
10303
|
children: cancelButtonText
|
|
10282
10304
|
})]
|
|
@@ -10523,6 +10545,7 @@ var Input$1 = (0, react.forwardRef)((props, ref) => {
|
|
|
10523
10545
|
});
|
|
10524
10546
|
var Popup$2 = (0, react.forwardRef)((props, ref) => {
|
|
10525
10547
|
const { className, children, container, ...rest } = props;
|
|
10548
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
10526
10549
|
const { containerRef } = useSearchableMultiSelectContext();
|
|
10527
10550
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Portal, {
|
|
10528
10551
|
container,
|
|
@@ -10530,8 +10553,9 @@ var Popup$2 = (0, react.forwardRef)((props, ref) => {
|
|
|
10530
10553
|
ref,
|
|
10531
10554
|
sideOffset: 4,
|
|
10532
10555
|
anchor: containerRef,
|
|
10533
|
-
...
|
|
10556
|
+
...positionerProps,
|
|
10534
10557
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Popup, {
|
|
10558
|
+
...c13y,
|
|
10535
10559
|
"data-c13y-component": "searchable-multi-select-popover",
|
|
10536
10560
|
className: (0, clsx.default)("ds-searchable-multi-select__popup", className),
|
|
10537
10561
|
children,
|
|
@@ -10713,13 +10737,15 @@ var Input = (0, react.forwardRef)((props, ref) => {
|
|
|
10713
10737
|
});
|
|
10714
10738
|
var Popup$1 = (0, react.forwardRef)((props, ref) => {
|
|
10715
10739
|
const { className, children, container, ...rest } = props;
|
|
10740
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
10716
10741
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Portal, {
|
|
10717
10742
|
container,
|
|
10718
10743
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Positioner, {
|
|
10719
10744
|
sideOffset: 5,
|
|
10720
10745
|
ref,
|
|
10721
|
-
...
|
|
10746
|
+
...positionerProps,
|
|
10722
10747
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_combobox.Combobox.Popup, {
|
|
10748
|
+
...c13y,
|
|
10723
10749
|
"data-c13y-component": "searchable-single-select-popover",
|
|
10724
10750
|
className: (0, clsx.default)("ds-searchable-single-select__popup", className),
|
|
10725
10751
|
children,
|
|
@@ -10839,13 +10865,15 @@ var Trigger$2 = (0, react.forwardRef)((props, ref) => {
|
|
|
10839
10865
|
});
|
|
10840
10866
|
var Popup = (0, react.forwardRef)((props, ref) => {
|
|
10841
10867
|
const { className, children, container, ...rest } = props;
|
|
10868
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
10842
10869
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Portal, {
|
|
10843
10870
|
container,
|
|
10844
10871
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Positioner, {
|
|
10845
10872
|
alignItemWithTrigger: false,
|
|
10846
10873
|
ref,
|
|
10847
|
-
...
|
|
10874
|
+
...positionerProps,
|
|
10848
10875
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Popup, {
|
|
10876
|
+
...c13y,
|
|
10849
10877
|
"data-c13y-component": "select-popover",
|
|
10850
10878
|
className: (0, clsx.default)("ds-select__popup", className),
|
|
10851
10879
|
children,
|
|
@@ -11005,12 +11033,10 @@ function SingleSelect(props) {
|
|
|
11005
11033
|
const errorOrDescription = (0, react.useMemo)(() => {
|
|
11006
11034
|
if (error !== void 0 && error !== "") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11007
11035
|
className: "ds-single-select__error",
|
|
11008
|
-
"data-c13y-component": "single-select-error",
|
|
11009
11036
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon_default, {}), error]
|
|
11010
11037
|
});
|
|
11011
11038
|
if (description !== void 0 && description !== "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
11012
11039
|
className: "ds-single-select__description",
|
|
11013
|
-
"data-c13y-component": "single-select-description",
|
|
11014
11040
|
children: description
|
|
11015
11041
|
});
|
|
11016
11042
|
return null;
|
|
@@ -11021,7 +11047,6 @@ function SingleSelect(props) {
|
|
|
11021
11047
|
const dropdownContent = (0, react.useMemo)(() => {
|
|
11022
11048
|
if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
11023
11049
|
className: "ds-single-select__loader",
|
|
11024
|
-
"data-c13y-component": "single-select-loader",
|
|
11025
11050
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingSpinner, {
|
|
11026
11051
|
size: 24,
|
|
11027
11052
|
"aria-label": "Loading select options..."
|
|
@@ -11029,19 +11054,15 @@ function SingleSelect(props) {
|
|
|
11029
11054
|
});
|
|
11030
11055
|
if (options.length === 0 && emptyResultText !== void 0 && emptyResultText !== "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
11031
11056
|
className: "ds-single-select__no-results",
|
|
11032
|
-
"data-c13y-component": "single-select-empty",
|
|
11033
11057
|
children: emptyResultText
|
|
11034
11058
|
});
|
|
11035
11059
|
const getLabel = (option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
11036
11060
|
className: "ds-single-select__option-text",
|
|
11037
|
-
"data-c13y-component": "single-select-option-text",
|
|
11038
11061
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
11039
|
-
"data-c13y-component": "single-select-label",
|
|
11040
11062
|
className: (0, clsx.default)("ds-single-select__option-label", value?.id === option.id && "ds-single-select__option-label--selected"),
|
|
11041
11063
|
...getItemProps({ id: `${listId}-option-${option.id}-label` }),
|
|
11042
11064
|
children: optionLabel(option)
|
|
11043
11065
|
}), typeof optionDescription === "function" && optionDescription(option) !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
11044
|
-
"data-c13y-component": "single-select-option-description",
|
|
11045
11066
|
className: (0, clsx.default)("ds-single-select__option-description", value?.id === option.id && "ds-single-select__option-description--selected"),
|
|
11046
11067
|
...getItemProps({ id: `${listId}-option-${option.id}-description` }),
|
|
11047
11068
|
"aria-hidden": true,
|
|
@@ -11049,7 +11070,6 @@ function SingleSelect(props) {
|
|
|
11049
11070
|
})]
|
|
11050
11071
|
});
|
|
11051
11072
|
return options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
11052
|
-
"data-c13y-component": "single-select-option",
|
|
11053
11073
|
...getItemProps({
|
|
11054
11074
|
onClick: () => {
|
|
11055
11075
|
onChange(option);
|
|
@@ -11098,7 +11118,6 @@ function SingleSelect(props) {
|
|
|
11098
11118
|
})]
|
|
11099
11119
|
}),
|
|
11100
11120
|
variantProps.searchable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11101
|
-
"data-c13y-component": "single-select",
|
|
11102
11121
|
className: (0, clsx.default)("ds-single-select__input-wrapper", disabled && "ds-single-select__input-wrapper--disabled", error && "ds-single-select__input-wrapper--error"),
|
|
11103
11122
|
ref: refs.setReference,
|
|
11104
11123
|
onClick: handleWrapperClick,
|
|
@@ -11135,7 +11154,6 @@ function SingleSelect(props) {
|
|
|
11135
11154
|
})
|
|
11136
11155
|
]
|
|
11137
11156
|
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
|
|
11138
|
-
"data-c13y-component": "single-select",
|
|
11139
11157
|
className: (0, clsx.default)("ds-single-select__trigger", error !== void 0 && error !== "" && "ds-single-select__trigger--error", disabled && "ds-single-select__trigger--disabled"),
|
|
11140
11158
|
...getReferenceProps({
|
|
11141
11159
|
disabled,
|
|
@@ -11184,7 +11202,6 @@ function SingleSelect(props) {
|
|
|
11184
11202
|
"aria-labelledby": ariaLabelledBy || labelId
|
|
11185
11203
|
}),
|
|
11186
11204
|
ref: floatingRef,
|
|
11187
|
-
"data-c13y-component": "single-select-dropdown",
|
|
11188
11205
|
className: (0, clsx.default)("ds-single-select__dropdown"),
|
|
11189
11206
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: dropdownContent })
|
|
11190
11207
|
}) }) : null] });
|
|
@@ -11333,13 +11350,11 @@ function TextAreaDeprecated(props) {
|
|
|
11333
11350
|
if (handleValueChange) handleValueChange(event);
|
|
11334
11351
|
}, [handleValueChange]);
|
|
11335
11352
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11336
|
-
"data-c13y-component": "text-area-deprecated",
|
|
11337
11353
|
className: (0, clsx.default)("ds-text-area__container", className),
|
|
11338
11354
|
children: [
|
|
11339
11355
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
|
|
11340
11356
|
className: "ds-text-area__label",
|
|
11341
11357
|
htmlFor: id,
|
|
11342
|
-
"data-c13y-component": "text-area-deprecated-label",
|
|
11343
11358
|
children: [label, requiredLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
11344
11359
|
className: "ds-text-area__label-required",
|
|
11345
11360
|
"aria-hidden": true,
|
|
@@ -11348,7 +11363,6 @@ function TextAreaDeprecated(props) {
|
|
|
11348
11363
|
}),
|
|
11349
11364
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
|
|
11350
11365
|
className: (0, clsx.default)("ds-text-area__input", resizable && "resizable", errorMessage && "ds-text-area__input--error"),
|
|
11351
|
-
"data-c13y-component": "text-area-deprecated-input",
|
|
11352
11366
|
dir: "auto",
|
|
11353
11367
|
id,
|
|
11354
11368
|
name: inputId ?? label,
|
|
@@ -11363,24 +11377,20 @@ function TextAreaDeprecated(props) {
|
|
|
11363
11377
|
}),
|
|
11364
11378
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11365
11379
|
className: "ds-text-area__footer",
|
|
11366
|
-
"data-c13y-component": "text-area-deprecated-footer",
|
|
11367
11380
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
11368
11381
|
id: errorId,
|
|
11369
11382
|
"aria-live": errorAriaLive,
|
|
11370
11383
|
"aria-atomic": "true",
|
|
11371
11384
|
children: errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
11372
11385
|
className: "ds-text-area__error",
|
|
11373
|
-
"data-c13y-component": "text-area-deprecated-error",
|
|
11374
11386
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon_default, {}), errorMessage]
|
|
11375
11387
|
})
|
|
11376
11388
|
}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
11377
11389
|
className: "ds-text-area__description",
|
|
11378
11390
|
id: descriptionId,
|
|
11379
|
-
"data-c13y-component": "text-area-deprecated-description",
|
|
11380
11391
|
children: description
|
|
11381
11392
|
})] }), limit && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
|
|
11382
11393
|
className: "ds-text-area__counter",
|
|
11383
|
-
"data-c13y-component": "text-area-deprecated-counter",
|
|
11384
11394
|
children: [
|
|
11385
11395
|
count,
|
|
11386
11396
|
"/",
|
|
@@ -11429,13 +11439,11 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
|
|
|
11429
11439
|
const inputRef = (0, react.useRef)(null);
|
|
11430
11440
|
if (!ref) ref = inputRef;
|
|
11431
11441
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11432
|
-
"data-c13y-component": "text-input",
|
|
11433
11442
|
className: (0, clsx.default)("ds-text-input__container", errorMessage ? "ds-text-input__container--error" : `ds-text-input__container--${variant}`, restProps.disabled && "ds-text-input__container--disabled", className),
|
|
11434
11443
|
children: [
|
|
11435
11444
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
|
|
11436
11445
|
className: "ds-text-input__label",
|
|
11437
11446
|
htmlFor: inputId,
|
|
11438
|
-
"data-c13y-component": "text-input-label",
|
|
11439
11447
|
children: [label, requiredLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
11440
11448
|
className: "ds-text-input__label-required",
|
|
11441
11449
|
"aria-hidden": true,
|
|
@@ -11444,7 +11452,6 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
|
|
|
11444
11452
|
}),
|
|
11445
11453
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11446
11454
|
className: "ds-text-input__base-wrapper",
|
|
11447
|
-
"data-c13y-component": "text-input-container",
|
|
11448
11455
|
style: { width },
|
|
11449
11456
|
onClick: () => ref && "current" in ref && ref.current?.focus(),
|
|
11450
11457
|
role: "none",
|
|
@@ -11454,7 +11461,6 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
|
|
|
11454
11461
|
children: icon
|
|
11455
11462
|
}),
|
|
11456
11463
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
11457
|
-
"data-c13y-component": "text-input-input",
|
|
11458
11464
|
className: "ds-text-input__base-input",
|
|
11459
11465
|
"aria-invalid": !!errorMessage,
|
|
11460
11466
|
id: inputId,
|
|
@@ -11474,7 +11480,6 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
|
|
|
11474
11480
|
errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11475
11481
|
className: "ds-text-input__error",
|
|
11476
11482
|
id: inputErrorId,
|
|
11477
|
-
"data-c13y-component": "text-input-error",
|
|
11478
11483
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
11479
11484
|
className: "ds-text-input__error-icon",
|
|
11480
11485
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertIcon_default, {})
|
|
@@ -11483,7 +11488,6 @@ var TextInput = (0, react.forwardRef)(function TextInput(props, ref) {
|
|
|
11483
11488
|
description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
11484
11489
|
className: (0, clsx.default)("ds-text-input__description"),
|
|
11485
11490
|
id: inputDescriptionId,
|
|
11486
|
-
"data-c13y-component": "text-input-description",
|
|
11487
11491
|
children: description
|
|
11488
11492
|
})
|
|
11489
11493
|
]
|
|
@@ -11499,7 +11503,6 @@ function Toggle(props) {
|
|
|
11499
11503
|
const descriptionId = `toggle-${id}-descr`;
|
|
11500
11504
|
const inputId = `toggle-${id}-label`;
|
|
11501
11505
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11502
|
-
"data-c13y-component": "toggle",
|
|
11503
11506
|
className: (0, clsx.default)("ds-toggle__container", disabled && "ds-toggle__container--disabled", spaceBetween ? "ds-toggle__container--full-width" : "ds-toggle__container--content-width", className),
|
|
11504
11507
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11505
11508
|
className: (0, clsx.default)("ds-toggle__wrapper"),
|
|
@@ -11508,13 +11511,11 @@ function Toggle(props) {
|
|
|
11508
11511
|
className: (0, clsx.default)("ds-toggle__label-container"),
|
|
11509
11512
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
|
|
11510
11513
|
className: (0, clsx.default)("ds-toggle__label"),
|
|
11511
|
-
"data-c13y-component": "toggle-label",
|
|
11512
11514
|
htmlFor: inputId,
|
|
11513
11515
|
children: label
|
|
11514
11516
|
})
|
|
11515
11517
|
}),
|
|
11516
11518
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
|
|
11517
|
-
"data-c13y-component": "toggle-input",
|
|
11518
11519
|
className: "ds-toggle",
|
|
11519
11520
|
name,
|
|
11520
11521
|
type: "checkbox",
|
|
@@ -11527,7 +11528,6 @@ function Toggle(props) {
|
|
|
11527
11528
|
}),
|
|
11528
11529
|
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
11529
11530
|
className: (0, clsx.default)("ds-toggle__switch-wrapper"),
|
|
11530
|
-
"data-c13y-component": "toggle-switch",
|
|
11531
11531
|
children: [
|
|
11532
11532
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon_default, {
|
|
11533
11533
|
"aria-hidden": "true",
|
|
@@ -11543,7 +11543,6 @@ function Toggle(props) {
|
|
|
11543
11543
|
]
|
|
11544
11544
|
}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
11545
11545
|
className: (0, clsx.default)("ds-toggle__description"),
|
|
11546
|
-
"data-c13y-component": "toggle-description",
|
|
11547
11546
|
id: descriptionId,
|
|
11548
11547
|
children: description
|
|
11549
11548
|
})]
|
|
@@ -11582,6 +11581,7 @@ var Tooltip = {
|
|
|
11582
11581
|
Content: (0, react.forwardRef)((props, ref) => {
|
|
11583
11582
|
const context = (0, react.useContext)(TooltipContext);
|
|
11584
11583
|
const { className, children, variant = "default", is = "description", container, ...rest } = props;
|
|
11584
|
+
const { c13y, rest: positionerProps } = splitC13yProps(rest);
|
|
11585
11585
|
(0, react.useEffect)(() => {
|
|
11586
11586
|
if (context) context.setIs(is);
|
|
11587
11587
|
}, [is, context]);
|
|
@@ -11589,8 +11589,9 @@ var Tooltip = {
|
|
|
11589
11589
|
container,
|
|
11590
11590
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Positioner, {
|
|
11591
11591
|
sideOffset: 4,
|
|
11592
|
-
...
|
|
11592
|
+
...positionerProps,
|
|
11593
11593
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tooltip.Tooltip.Popup, {
|
|
11594
|
+
...c13y,
|
|
11594
11595
|
"data-c13y-component": "tooltip-popover",
|
|
11595
11596
|
className: (0, clsx.default)(`ds-tooltip--${variant}`, "ds-tooltip", className),
|
|
11596
11597
|
id: context?.id,
|
|
@@ -11661,7 +11662,6 @@ function TooltipDeprecated(props) {
|
|
|
11661
11662
|
...styles
|
|
11662
11663
|
}
|
|
11663
11664
|
}),
|
|
11664
|
-
"data-c13y-component": "tooltip-deprecated",
|
|
11665
11665
|
className: (0, clsx.clsx)("ds-tooltip-deprecated", className),
|
|
11666
11666
|
children: content
|
|
11667
11667
|
}) : null] });
|
|
@@ -11987,7 +11987,6 @@ exports.ViewAltIcon = ViewAltIcon_default;
|
|
|
11987
11987
|
exports.ViewIcon = ViewIcon_default;
|
|
11988
11988
|
exports.WarningIcon = WarningIcon_default;
|
|
11989
11989
|
exports.WatchIcon = WatchIcon_default;
|
|
11990
|
-
exports.__toESM = __toESM;
|
|
11991
11990
|
exports.iconNames = iconNames;
|
|
11992
11991
|
|
|
11993
11992
|
//# sourceMappingURL=main.cjs.map
|