@kaio-xyz/design-system 1.1.0 → 1.1.2
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/atoms/accordion/accordion-content/accordion-content.d.ts +6 -0
- package/dist/components/atoms/accordion/accordion-content/index.d.ts +1 -0
- package/dist/components/atoms/accordion/accordion-item/accordion-item.d.ts +11 -0
- package/dist/components/atoms/accordion/accordion-item/index.d.ts +1 -0
- package/dist/components/atoms/accordion/accordion-trigger/accordion-trigger.d.ts +6 -0
- package/dist/components/atoms/accordion/accordion-trigger/index.d.ts +1 -0
- package/dist/components/atoms/accordion/accordion.d.ts +5 -0
- package/dist/components/atoms/accordion/accordion.stories.d.ts +8 -0
- package/dist/components/atoms/accordion/index.d.ts +13 -0
- package/dist/index.cjs.js +74 -40
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +73 -41
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -1
package/dist/index.esm.js
CHANGED
|
@@ -4,6 +4,7 @@ import * as React from 'react';
|
|
|
4
4
|
import { useMemo, forwardRef, useState, useRef, useEffect, useCallback } from 'react';
|
|
5
5
|
import ReactSelect, { components } from 'react-select';
|
|
6
6
|
import { Controller } from 'react-hook-form';
|
|
7
|
+
import * as RAccordion from '@radix-ui/react-accordion';
|
|
7
8
|
|
|
8
9
|
/******************************************************************************
|
|
9
10
|
Copyright (c) Microsoft Corporation.
|
|
@@ -240,16 +241,16 @@ var SvgLoadingCircle = function SvgLoadingCircle(props) {
|
|
|
240
241
|
})));
|
|
241
242
|
};
|
|
242
243
|
|
|
243
|
-
var style$
|
|
244
|
+
var style$k = {"root":"stack-module__root__AqSLk"};
|
|
244
245
|
|
|
245
246
|
var Stack = function (_a) {
|
|
246
247
|
var children = _a.children, _b = _a.space, space = _b === void 0 ? "s" : _b, className = _a.className, _c = _a.position, position = _c === void 0 ? "vertical" : _c, _d = _a.fullHeight, fullHeight = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, dataTest = _a.dataTest, dataAlignItems = _a.dataAlignItems, dataCapitalize = _a.dataCapitalize, dataMarginTop = _a.dataMarginTop, dataMarginBottom = _a.dataMarginBottom, dataMarginLeft = _a.dataMarginLeft, dataPaddingBottom = _a.dataPaddingBottom, rest = __rest(_a, ["children", "space", "className", "position", "fullHeight", "fullWidth", "dataTest", "dataAlignItems", "dataCapitalize", "dataMarginTop", "dataMarginBottom", "dataMarginLeft", "dataPaddingBottom"]);
|
|
247
|
-
return (jsx("div", __assign({ className: clsx(style$
|
|
248
|
+
return (jsx("div", __assign({ className: clsx(style$k.root, className), "data-space": space, "data-position": position, "data-full-width": fullWidth, "data-full-height": fullHeight, "data-test": dataTest, "data-align-items": dataAlignItems, "data-capitalize": dataCapitalize, "data-margin-top": dataMarginTop, "data-margin-bottom": dataMarginBottom, "data-margin-left": dataMarginLeft, "data-padding-bottom": dataPaddingBottom }, rest, { children: children })));
|
|
248
249
|
};
|
|
249
250
|
|
|
250
251
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
251
252
|
|
|
252
|
-
var style$
|
|
253
|
+
var style$j = {"root":"badge-module__root__rXpaz"};
|
|
253
254
|
|
|
254
255
|
var BadgeStatuses = {
|
|
255
256
|
success: "success",
|
|
@@ -268,16 +269,16 @@ var Badge = function (_a) {
|
|
|
268
269
|
default: return jsx(SvgCircleDashed, {});
|
|
269
270
|
}
|
|
270
271
|
}, [status]);
|
|
271
|
-
return (jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
272
|
+
return (jsx("label", __assign({ className: clsx(baseStyle.root, style$j.root), title: text, "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size }, props, { children: jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, text] }) })));
|
|
272
273
|
};
|
|
273
274
|
|
|
274
|
-
var style$
|
|
275
|
+
var style$i = {"root":"button-module__root__CDCDX"};
|
|
275
276
|
|
|
276
|
-
var style$
|
|
277
|
+
var style$h = {"root":"spinned-icon-module__root__xchkj"};
|
|
277
278
|
|
|
278
279
|
var SpinnedIcon = function (_a) {
|
|
279
280
|
var _b = _a.size, size = _b === void 0 ? 22 : _b, _c = _a.duration, duration = _c === void 0 ? 1 : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.icon, Icon = _e === void 0 ? SvgLoader : _e, rest = __rest(_a, ["size", "duration", "className", "icon"]);
|
|
280
|
-
return (jsx("div", { className: clsx(style$
|
|
281
|
+
return (jsx("div", { className: clsx(style$h.root, className), style: {
|
|
281
282
|
width: size,
|
|
282
283
|
height: size,
|
|
283
284
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -291,19 +292,19 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
291
292
|
var baseIcon = Icon && jsx(Icon, __assign({}, iconProps));
|
|
292
293
|
var loadingIcon = isLoading && jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
293
294
|
var iconChild = loadingIcon || baseIcon || null;
|
|
294
|
-
var classes = clsx(style$
|
|
295
|
+
var classes = clsx(style$i.root, props.className);
|
|
295
296
|
return (isAnchor(props) ? (jsx("a", __assign({ "aria-disabled": props.disabled, ref: ref }, props, { className: classes, children: props.children }))) : (jsx("button", __assign({ "aria-disabled": props.disabled, ref: ref, type: "button" }, props, { className: classes, "data-type": variant, "data-size": size, "data-full-width": fullWidth, "data-inverted": isInverted, disabled: props.disabled || isLoading, "data-is-loading": isLoading, children: jsxs(Fragment, { children: [iconChild, isLoading ? "Loading" : props.children] }) }))));
|
|
296
297
|
});
|
|
297
298
|
Button.displayName = "Button";
|
|
298
299
|
|
|
299
|
-
var style$
|
|
300
|
+
var style$g = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
300
301
|
|
|
301
302
|
var Hint = function (_a) {
|
|
302
303
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
303
|
-
return (jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
304
|
+
return (jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$g.hint, className), "data-type": kind }, attributes, { children: [jsx(SvgInfo, {}), jsx("span", { className: style$g.children, children: children })] })));
|
|
304
305
|
};
|
|
305
306
|
|
|
306
|
-
var style$
|
|
307
|
+
var style$f = {"field":"text-field-module__field__iZ0TF","label":"text-field-module__label__ClJkz","container":"text-field-module__container__IKtNZ","fieldWrapper":"text-field-module__fieldWrapper__nQ7l8","textField":"text-field-module__textField__756eR","hint":"text-field-module__hint__Ad6VA"};
|
|
307
308
|
|
|
308
309
|
var TextField = forwardRef(function (_a, ref) {
|
|
309
310
|
var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, invalid = _a.invalid, button = _a.button, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, _d = _a.noPadding, noPadding = _d === void 0 ? false : _d, _e = _a.floatingLabel, floatingLabel = _e === void 0 ? true : _e, value = _a.value, defaultValue = _a.defaultValue, onFocus = _a.onFocus, onBlur = _a.onBlur, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "invalid", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur"]);
|
|
@@ -340,28 +341,28 @@ var TextField = forwardRef(function (_a, ref) {
|
|
|
340
341
|
setHasValue(e.target.value.length > 0);
|
|
341
342
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
342
343
|
};
|
|
343
|
-
return (jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
344
|
+
return (jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$f.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxs("div", { className: style$f.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsx("label", { className: style$f.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxs("div", { className: style$f.fieldWrapper, children: [jsx("input", __assign({ "aria-readonly": readOnly, className: style$f.field, readOnly: readOnly, "data-type": "single", "data-size": size, "data-floating-label": floatingLabel, id: id, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, "data-invalid": invalid, ref: inputRef, type: "text", value: value, defaultValue: defaultValue }, attributes)), button ? button : null] }), hint && jsx(Hint, { kind: "error", className: style$f.hint, children: hint })] }) }));
|
|
344
345
|
});
|
|
345
346
|
TextField.displayName = "TextField";
|
|
346
347
|
|
|
347
|
-
var style$
|
|
348
|
+
var style$e = {"container":"container-module__container__CAxQw"};
|
|
348
349
|
|
|
349
350
|
var Container = function (_a) {
|
|
350
351
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
351
|
-
return (jsx("div", __assign({ className: clsx(style$
|
|
352
|
+
return (jsx("div", __assign({ className: clsx(style$e.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
352
353
|
};
|
|
353
354
|
|
|
354
|
-
var style$
|
|
355
|
+
var style$d = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
355
356
|
|
|
356
357
|
var PasswordField = forwardRef(function (_a, ref) {
|
|
357
358
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
358
359
|
var _b = useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
359
|
-
var button = (jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
360
|
-
return (jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
360
|
+
var button = (jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$d.button, children: isPasswordVisible ? jsx(SvgEyeOpen, {}) : jsx(SvgEyeClosed, {}) }));
|
|
361
|
+
return (jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$d.field })));
|
|
361
362
|
});
|
|
362
363
|
PasswordField.displayName = "PasswordField";
|
|
363
364
|
|
|
364
|
-
var style$
|
|
365
|
+
var style$c = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
365
366
|
|
|
366
367
|
var rules = {
|
|
367
368
|
length: /^.{8,}$/,
|
|
@@ -386,19 +387,19 @@ var ValidatePasswordField = forwardRef(function (_a, ref) {
|
|
|
386
387
|
useEffect(function () {
|
|
387
388
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
388
389
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
389
|
-
var getValidator = function (isCheckOk, label) { return (jsxs(Stack, { position: "horizontal", className: style$
|
|
390
|
+
var getValidator = function (isCheckOk, label) { return (jsxs(Stack, { position: "horizontal", className: style$c.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsx(SvgCheck, {}) : jsx(SvgCircleDashed, {}), jsx("p", { children: label })] })); };
|
|
390
391
|
return (jsxs(Stack, { space: "m", children: [jsx(PasswordField, __assign({ onChange: onHandleChange, ref: ref }, rest)), jsxs(Stack, { children: [getValidator(isLenghtCheckOk, "At least 8 characters"), getValidator(isCaseCheckOk, "Include uppercase & lowercase letters"), getValidator(isNumberCheckOk, "Include at least one number"), getValidator(isSpecialCheckOk, "Include at least one special character (allowed: @ $ ! % * ? & _ #)")] })] }));
|
|
391
392
|
});
|
|
392
393
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
393
394
|
|
|
394
|
-
var style$
|
|
395
|
+
var style$b = {"root":"label-module__root__34bJr"};
|
|
395
396
|
|
|
396
397
|
var Label = function (_a) {
|
|
397
398
|
var id = _a.id, label = _a.label, className = _a.className, _b = _a.hasMargin, hasMargin = _b === void 0 ? true : _b, _c = _a.hasHalfMargin, hasHalfMargin = _c === void 0 ? false : _c, _d = _a.hasCursorPointer, hasCursorPointer = _d === void 0 ? false : _d;
|
|
398
|
-
return (jsx("label", { className: clsx(style$
|
|
399
|
+
return (jsx("label", { className: clsx(style$b.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
|
|
399
400
|
};
|
|
400
401
|
|
|
401
|
-
var style$
|
|
402
|
+
var style$a = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
402
403
|
|
|
403
404
|
var IconAndLabel = function (_a) {
|
|
404
405
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -419,7 +420,7 @@ var CustomSingleValue = function (_a) {
|
|
|
419
420
|
};
|
|
420
421
|
var Select = function (_a) {
|
|
421
422
|
var id = _a.id, label = _a.label, dataTest = _a.dataTest, isDisabled = _a.isDisabled, className = _a.className, error = _a.error, customComponents = _a.components, rest = __rest(_a, ["id", "label", "dataTest", "isDisabled", "className", "error", "components"]);
|
|
422
|
-
return (jsxs("div", { className: clsx(style$
|
|
423
|
+
return (jsxs("div", { className: clsx(style$a.root, className), children: [label && jsx(Label, { id: id, label: label, className: style$a.label }), jsxs("div", { "data-test": dataTest, className: style$a.selector, "data-error": !!error, children: [jsx(ReactSelect, __assign({ id: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { isDisabled: isDisabled })), error && jsx(Hint, { kind: "error", className: style$a.hint, children: error })] })] }));
|
|
423
424
|
};
|
|
424
425
|
Select.displayName = "Select";
|
|
425
426
|
|
|
@@ -432,14 +433,14 @@ var FormSelect = function (_a) {
|
|
|
432
433
|
};
|
|
433
434
|
FormSelect.displayName = "FormSelect";
|
|
434
435
|
|
|
435
|
-
var style$
|
|
436
|
+
var style$9 = {"root":"loader-module__root__qnInQ"};
|
|
436
437
|
|
|
437
438
|
var Loader = function (_a) {
|
|
438
439
|
var text = _a.text, _b = _a.fullPage, fullPage = _b === void 0 ? true : _b, _c = _a.isLightOverlay, isLightOverlay = _c === void 0 ? false : _c, children = _a.children;
|
|
439
|
-
return (jsx("div", { className: style$
|
|
440
|
+
return (jsx("div", { className: style$9.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxs(Stack, { dataAlignItems: "center", children: [jsx(SpinnedIcon, { size: 50 }), text && jsx("p", { children: text }), children] }) }));
|
|
440
441
|
};
|
|
441
442
|
|
|
442
|
-
var style$
|
|
443
|
+
var style$8 = {"root":"checkbox-module__root__W52jD","customCheckbox":"checkbox-module__customCheckbox__LACTE","label":"checkbox-module__label__ujd0G","frame":"checkbox-module__frame__njRTK","icon":"checkbox-module__icon__7kQzK"};
|
|
443
444
|
|
|
444
445
|
var Checkbox = function (_a) {
|
|
445
446
|
var className = _a.className, disabled = _a.disabled, id = _a.id, label = _a.label, _b = _a.verticalAlign, verticalAlign = _b === void 0 ? "center" : _b, onChange = _a.onChange, dataTest = _a.dataTest, _c = _a.size, size = _c === void 0 ? "medium" : _c, _d = _a.variant, variant = _d === void 0 ? "primary" : _d, _e = _a.indeterminate, indeterminate = _e === void 0 ? false : _e, checked = _a.checked, attributes = __rest(_a, ["className", "disabled", "id", "label", "verticalAlign", "onChange", "dataTest", "size", "variant", "indeterminate", "checked"]);
|
|
@@ -452,11 +453,11 @@ var Checkbox = function (_a) {
|
|
|
452
453
|
var dynamicStyle = {
|
|
453
454
|
"--vAlign": verticalAlign,
|
|
454
455
|
};
|
|
455
|
-
return (jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
456
|
+
return (jsxs("label", { style: dynamicStyle, className: clsx(style$8.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxs("span", { className: style$8.frame, children: [jsx("input", __assign({ "aria-disabled": disabled, disabled: disabled, onChange: onChange, type: "checkbox", ref: inputRef, checked: checked }, attributes, { id: id, "data-test": dataTest })), jsxs("span", { className: style$8.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsx(SvgCheck, { className: style$8.icon })), indeterminate && (jsx(SvgMinus, { className: style$8.icon }))] })] }), label && jsx("span", { className: style$8.label, children: label })] }));
|
|
456
457
|
};
|
|
457
458
|
Checkbox.displayName = "Checkbox";
|
|
458
459
|
|
|
459
|
-
var style$
|
|
460
|
+
var style$7 = {"root":"clipboard-module__root__wVZhy"};
|
|
460
461
|
|
|
461
462
|
var trimString = function (str, noOfChars) {
|
|
462
463
|
if (noOfChars === void 0) { noOfChars = 4; }
|
|
@@ -481,43 +482,74 @@ var Clipboard = function (_a) {
|
|
|
481
482
|
}, [value]);
|
|
482
483
|
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
483
484
|
var icon = isShowingCopy ? jsx(SvgCheck, {}) : jsx(SvgClipboard, {});
|
|
484
|
-
return (jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
485
|
+
return (jsx("button", { type: "button", onClick: handleClick, className: style$7.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxs(Stack, { position: "horizontal", children: [jsx("span", { children: text }), icon] }) }));
|
|
485
486
|
};
|
|
486
487
|
|
|
487
|
-
var style$
|
|
488
|
+
var style$6 = {"root":"stepper-module__root__hgDss"};
|
|
488
489
|
|
|
489
490
|
var Stepper = function (_a) {
|
|
490
491
|
var children = _a.children;
|
|
491
|
-
return (jsx("ul", { className: style$
|
|
492
|
+
return (jsx("ul", { className: style$6.root, children: children }));
|
|
492
493
|
};
|
|
493
494
|
|
|
494
|
-
var style$
|
|
495
|
+
var style$5 = {"root":"step-module__root__Tk1Yq","container":"step-module__container__XbQSB","label":"step-module__label__UNF3I","emptyIcon":"step-module__emptyIcon__-xNcB","checkIcon":"step-module__checkIcon__MWBUM","loadingIcon":"step-module__loadingIcon__-VoCZ"};
|
|
495
496
|
|
|
496
497
|
var Step = function (_a) {
|
|
497
498
|
var key = _a.key, label = _a.label, _b = _a.iconSize, iconSize = _b === void 0 ? 16 : _b, _c = _a.isCompleted, isCompleted = _c === void 0 ? false : _c, _d = _a.isCurrent, isCurrent = _d === void 0 ? false : _d;
|
|
498
499
|
var icon = useMemo(function () {
|
|
499
500
|
switch (true) {
|
|
500
|
-
case isCompleted: return jsx(SvgCheck, { className: style$
|
|
501
|
-
case isCurrent: return jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$
|
|
502
|
-
default: return jsx("span", { className: style$
|
|
501
|
+
case isCompleted: return jsx(SvgCheck, { className: style$5.checkIcon });
|
|
502
|
+
case isCurrent: return jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$5.loadingIcon });
|
|
503
|
+
default: return jsx("span", { className: style$5.emptyIcon });
|
|
503
504
|
}
|
|
504
505
|
}, [isCompleted, isCurrent]);
|
|
505
|
-
return (jsx("li", { className: style$
|
|
506
|
+
return (jsx("li", { className: style$5.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxs(Stack, { className: style$5.container, position: "horizontal", children: [icon, jsx("span", { className: style$5.label, children: label })] }) }, key));
|
|
506
507
|
};
|
|
507
508
|
|
|
508
|
-
var style$
|
|
509
|
+
var style$4 = {"root":"list-module__root__OXx93"};
|
|
509
510
|
|
|
510
511
|
var List = function (_a) {
|
|
511
512
|
var label = _a.label, children = _a.children;
|
|
512
|
-
return (jsxs(Stack, { className: style$
|
|
513
|
+
return (jsxs(Stack, { className: style$4.root, children: [label && jsx("p", { children: label }), jsx("ul", { children: children })] }));
|
|
513
514
|
};
|
|
514
515
|
|
|
515
|
-
var style = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
516
|
+
var style$3 = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
516
517
|
|
|
517
518
|
var ListItem = function (_a) {
|
|
518
519
|
var value = _a.value, label = _a.label, key = _a.key;
|
|
519
|
-
return (jsx("li", { children: jsxs(Stack, { position: "horizontal-space", space: "m", className: style.root, dataAlignItems: "flex-start", children: [jsx("span", { className: style.label, children: label }), jsx("span", { className: style.value, children: value })] }) }, key));
|
|
520
|
+
return (jsx("li", { children: jsxs(Stack, { position: "horizontal-space", space: "m", className: style$3.root, dataAlignItems: "flex-start", children: [jsx("span", { className: style$3.label, children: label }), jsx("span", { className: style$3.value, children: value })] }) }, key));
|
|
520
521
|
};
|
|
521
522
|
|
|
522
|
-
|
|
523
|
+
var AccordionRoot = function (_a) {
|
|
524
|
+
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
525
|
+
return (jsx(RAccordion.Root, __assign({}, rest, { children: children })));
|
|
526
|
+
};
|
|
527
|
+
|
|
528
|
+
var style$2 = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
529
|
+
|
|
530
|
+
var AccordionContent = forwardRef(function (_a, forwardedRef) {
|
|
531
|
+
var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
|
|
532
|
+
return (jsx(RAccordion.Content, __assign({ className: clsx(style$2.content, className), ref: forwardedRef }, rest, { children: jsx("div", { className: style$2.childrenContainer, children: jsx("div", { className: style$2.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
533
|
+
});
|
|
534
|
+
AccordionContent.displayName = "AccordionContent";
|
|
535
|
+
|
|
536
|
+
var style$1 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
537
|
+
|
|
538
|
+
var AccordionTrigger = forwardRef(function (_a, forwardedRef) {
|
|
539
|
+
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
|
|
540
|
+
return (jsx(RAccordion.Header, { className: style$1.header, children: jsx(RAccordion.Trigger, __assign({ className: clsx(style$1.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
|
|
541
|
+
});
|
|
542
|
+
AccordionTrigger.displayName = "AccordionTrigger";
|
|
543
|
+
|
|
544
|
+
var style = {"root":"accordion-item-module__root__1Yk4f"};
|
|
545
|
+
|
|
546
|
+
var AccordionItem = forwardRef(function (_a, forwardedRef) {
|
|
547
|
+
var value = _a.value, trigger = _a.trigger, triggerClassName = _a.triggerClassName, children = _a.children, dataTest = _a.dataTest, _b = _a.hasChildrenPadding, hasChildrenPadding = _b === void 0 ? true : _b;
|
|
548
|
+
return (jsxs(RAccordion.Item, { className: style.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
549
|
+
});
|
|
550
|
+
AccordionItem.displayName = "AccordionItem";
|
|
551
|
+
|
|
552
|
+
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
553
|
+
|
|
554
|
+
export { Accordion, Badge, Button, Checkbox, Clipboard, Container, FormSelect, List, ListItem, Loader, PasswordField, Select, SpinnedIcon, Stack, Step, Stepper, TextField, ValidatePasswordField };
|
|
523
555
|
//# sourceMappingURL=index.esm.js.map
|