@kaio-xyz/design-system 1.1.5 → 1.1.7

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.
Files changed (7) hide show
  1. package/dist/index.cjs.js +68 -48
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.esm.js +67 -49
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/styles.css +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -7,6 +7,7 @@ var ReactSelect = require('react-select');
7
7
  var reactHookForm = require('react-hook-form');
8
8
  var RAccordion = require('@radix-ui/react-accordion');
9
9
  var reactDom = require('react-dom');
10
+ var RDropdownMenu = require('@radix-ui/react-dropdown-menu');
10
11
 
11
12
  function _interopNamespaceDefault(e) {
12
13
  var n = Object.create(null);
@@ -27,6 +28,7 @@ function _interopNamespaceDefault(e) {
27
28
 
28
29
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
29
30
  var RAccordion__namespace = /*#__PURE__*/_interopNamespaceDefault(RAccordion);
31
+ var RDropdownMenu__namespace = /*#__PURE__*/_interopNamespaceDefault(RDropdownMenu);
30
32
 
31
33
  /******************************************************************************
32
34
  Copyright (c) Microsoft Corporation.
@@ -287,16 +289,16 @@ var SvgLoadingCircle = function SvgLoadingCircle(props) {
287
289
  })));
288
290
  };
289
291
 
290
- var style$l = {"root":"stack-module__root__AqSLk"};
292
+ var style$n = {"root":"stack-module__root__AqSLk"};
291
293
 
292
294
  var Stack = function (_a) {
293
295
  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"]);
294
- return (jsxRuntime.jsx("div", __assign({ className: clsx(style$l.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 })));
296
+ return (jsxRuntime.jsx("div", __assign({ className: clsx(style$n.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 })));
295
297
  };
296
298
 
297
299
  var baseStyle = {"root":"badge-base-module__root__oUZlm"};
298
300
 
299
- var style$k = {"root":"badge-module__root__rXpaz"};
301
+ var style$m = {"root":"badge-module__root__rXpaz"};
300
302
 
301
303
  var BadgeStatuses = {
302
304
  success: "success",
@@ -315,16 +317,16 @@ var Badge = function (_a) {
315
317
  default: return jsxRuntime.jsx(SvgCircleDashed, {});
316
318
  }
317
319
  }, [status]);
318
- return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$k.root), title: text, "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size }, props, { children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, text] }) })));
320
+ return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$m.root), title: text, "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size }, props, { children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, text] }) })));
319
321
  };
320
322
 
321
- var style$j = {"root":"button-module__root__CDCDX"};
323
+ var style$l = {"root":"button-module__root__CDCDX"};
322
324
 
323
- var style$i = {"root":"spinned-icon-module__root__xchkj"};
325
+ var style$k = {"root":"spinned-icon-module__root__xchkj"};
324
326
 
325
327
  var SpinnedIcon = function (_a) {
326
328
  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"]);
327
- return (jsxRuntime.jsx("div", { className: clsx(style$i.root, className), style: {
329
+ return (jsxRuntime.jsx("div", { className: clsx(style$k.root, className), style: {
328
330
  width: size,
329
331
  height: size,
330
332
  animationDuration: "".concat(duration, "s"),
@@ -338,19 +340,19 @@ var Button = React.forwardRef(function (_a, ref) {
338
340
  var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps));
339
341
  var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
340
342
  var iconChild = loadingIcon || baseIcon || null;
341
- var classes = clsx(style$j.root, props.className);
343
+ var classes = clsx(style$l.root, props.className);
342
344
  return (isAnchor(props) ? (jsxRuntime.jsx("a", __assign({ "aria-disabled": props.disabled, ref: ref }, props, { className: classes, children: props.children }))) : (jsxRuntime.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: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconChild, isLoading ? "Loading" : props.children] }) }))));
343
345
  });
344
346
  Button.displayName = "Button";
345
347
 
346
- var style$h = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
348
+ var style$j = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
347
349
 
348
350
  var Hint = function (_a) {
349
351
  var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
350
- return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$h.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$h.children, children: children })] })));
352
+ return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$j.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$j.children, children: children })] })));
351
353
  };
352
354
 
353
- var style$g = {"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"};
355
+ var style$i = {"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"};
354
356
 
355
357
  var TextField = React.forwardRef(function (_a, ref) {
356
358
  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"]);
@@ -387,28 +389,28 @@ var TextField = React.forwardRef(function (_a, ref) {
387
389
  setHasValue(e.target.value.length > 0);
388
390
  onChange === null || onChange === void 0 ? void 0 : onChange(e);
389
391
  };
390
- return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$g.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$g.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$g.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$g.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$g.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 && jsxRuntime.jsx(Hint, { kind: "error", className: style$g.hint, children: hint })] }) }));
392
+ return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$i.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$i.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$i.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$i.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$i.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 && jsxRuntime.jsx(Hint, { kind: "error", className: style$i.hint, children: hint })] }) }));
391
393
  });
392
394
  TextField.displayName = "TextField";
393
395
 
394
- var style$f = {"container":"container-module__container__CAxQw"};
396
+ var style$h = {"container":"container-module__container__CAxQw"};
395
397
 
396
398
  var Container = function (_a) {
397
399
  var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
398
- return (jsxRuntime.jsx("div", __assign({ className: clsx(style$f.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
400
+ return (jsxRuntime.jsx("div", __assign({ className: clsx(style$h.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
399
401
  };
400
402
 
401
- var style$e = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
403
+ var style$g = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
402
404
 
403
405
  var PasswordField = React.forwardRef(function (_a, ref) {
404
406
  var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
405
407
  var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
406
- var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$e.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
407
- return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$e.field })));
408
+ var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$g.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
409
+ return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$g.field })));
408
410
  });
409
411
  PasswordField.displayName = "PasswordField";
410
412
 
411
- var style$d = {"validator":"validate-password-field-module__validator__Do-6w"};
413
+ var style$f = {"validator":"validate-password-field-module__validator__Do-6w"};
412
414
 
413
415
  var rules = {
414
416
  length: /^.{8,}$/,
@@ -433,19 +435,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
433
435
  React.useEffect(function () {
434
436
  setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
435
437
  }, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
436
- var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$d.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
438
+ var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$f.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
437
439
  return (jsxRuntime.jsxs(Stack, { space: "m", children: [jsxRuntime.jsx(PasswordField, __assign({ onChange: onHandleChange, ref: ref }, rest)), jsxRuntime.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: @ $ ! % * ? & _ #)")] })] }));
438
440
  });
439
441
  ValidatePasswordField.displayName = "ValidatePasswordField";
440
442
 
441
- var style$c = {"root":"label-module__root__34bJr"};
443
+ var style$e = {"root":"label-module__root__34bJr"};
442
444
 
443
445
  var Label = function (_a) {
444
446
  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;
445
- return (jsxRuntime.jsx("label", { className: clsx(style$c.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
447
+ return (jsxRuntime.jsx("label", { className: clsx(style$e.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
446
448
  };
447
449
 
448
- var style$b = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
450
+ var style$d = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
449
451
 
450
452
  var IconAndLabel = function (_a) {
451
453
  var children = _a.children, Icon = _a.icon;
@@ -466,7 +468,7 @@ var CustomSingleValue = function (_a) {
466
468
  };
467
469
  var Select = function (_a) {
468
470
  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"]);
469
- return (jsxRuntime.jsxs("div", { className: clsx(style$b.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$b.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$b.selector, "data-error": !!error, children: [jsxRuntime.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 && jsxRuntime.jsx(Hint, { kind: "error", className: style$b.hint, children: error })] })] }));
471
+ return (jsxRuntime.jsxs("div", { className: clsx(style$d.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$d.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$d.selector, "data-error": !!error, children: [jsxRuntime.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 && jsxRuntime.jsx(Hint, { kind: "error", className: style$d.hint, children: error })] })] }));
470
472
  };
471
473
  Select.displayName = "Select";
472
474
 
@@ -479,14 +481,14 @@ var FormSelect = function (_a) {
479
481
  };
480
482
  FormSelect.displayName = "FormSelect";
481
483
 
482
- var style$a = {"root":"loader-module__root__qnInQ"};
484
+ var style$c = {"root":"loader-module__root__qnInQ"};
483
485
 
484
486
  var Loader = function (_a) {
485
487
  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;
486
- return (jsxRuntime.jsx("div", { className: style$a.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx(SpinnedIcon, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
488
+ return (jsxRuntime.jsx("div", { className: style$c.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx(SpinnedIcon, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
487
489
  };
488
490
 
489
- var style$9 = {"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"};
491
+ var style$b = {"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"};
490
492
 
491
493
  var Checkbox = function (_a) {
492
494
  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"]);
@@ -499,11 +501,11 @@ var Checkbox = function (_a) {
499
501
  var dynamicStyle = {
500
502
  "--vAlign": verticalAlign,
501
503
  };
502
- return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$9.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$9.frame, children: [jsxRuntime.jsx("input", __assign({ "aria-disabled": disabled, disabled: disabled, onChange: onChange, type: "checkbox", ref: inputRef, checked: checked }, attributes, { id: id, "data-test": dataTest })), jsxRuntime.jsxs("span", { className: style$9.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$9.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$9.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$9.label, children: label })] }));
504
+ return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$b.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$b.frame, children: [jsxRuntime.jsx("input", __assign({ "aria-disabled": disabled, disabled: disabled, onChange: onChange, type: "checkbox", ref: inputRef, checked: checked }, attributes, { id: id, "data-test": dataTest })), jsxRuntime.jsxs("span", { className: style$b.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$b.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$b.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$b.label, children: label })] }));
503
505
  };
504
506
  Checkbox.displayName = "Checkbox";
505
507
 
506
- var style$8 = {"root":"clipboard-module__root__wVZhy"};
508
+ var style$a = {"root":"clipboard-module__root__wVZhy"};
507
509
 
508
510
  var trimString = function (str, noOfChars) {
509
511
  if (noOfChars === void 0) { noOfChars = 4; }
@@ -528,42 +530,42 @@ var Clipboard = function (_a) {
528
530
  }, [value]);
529
531
  var text = isShowingCopy ? 'Copied!' : displayValue;
530
532
  var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgClipboard, {});
531
- return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$8.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
533
+ return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$a.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
532
534
  };
533
535
 
534
- var style$7 = {"root":"stepper-module__root__hgDss"};
536
+ var style$9 = {"root":"stepper-module__root__hgDss"};
535
537
 
536
538
  var Stepper = function (_a) {
537
539
  var children = _a.children;
538
- return (jsxRuntime.jsx("ul", { className: style$7.root, children: children }));
540
+ return (jsxRuntime.jsx("ul", { className: style$9.root, children: children }));
539
541
  };
540
542
 
541
- var style$6 = {"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"};
543
+ var style$8 = {"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"};
542
544
 
543
545
  var Step = function (_a) {
544
546
  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;
545
547
  var icon = React.useMemo(function () {
546
548
  switch (true) {
547
- case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$6.checkIcon });
548
- case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$6.loadingIcon });
549
- default: return jsxRuntime.jsx("span", { className: style$6.emptyIcon });
549
+ case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$8.checkIcon });
550
+ case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$8.loadingIcon });
551
+ default: return jsxRuntime.jsx("span", { className: style$8.emptyIcon });
550
552
  }
551
553
  }, [isCompleted, isCurrent]);
552
- return (jsxRuntime.jsx("li", { className: style$6.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$6.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$6.label, children: label })] }) }, key));
554
+ return (jsxRuntime.jsx("li", { className: style$8.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$8.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$8.label, children: label })] }) }, key));
553
555
  };
554
556
 
555
- var style$5 = {"root":"list-module__root__OXx93"};
557
+ var style$7 = {"root":"list-module__root__OXx93"};
556
558
 
557
559
  var List = function (_a) {
558
560
  var label = _a.label, children = _a.children;
559
- return (jsxRuntime.jsxs(Stack, { className: style$5.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
561
+ return (jsxRuntime.jsxs(Stack, { className: style$7.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
560
562
  };
561
563
 
562
- var style$4 = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
564
+ var style$6 = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
563
565
 
564
566
  var ListItem = function (_a) {
565
567
  var value = _a.value, label = _a.label, key = _a.key;
566
- return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style$4.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style$4.label, children: label }), jsxRuntime.jsx("span", { className: style$4.value, children: value })] }) }, key));
568
+ return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style$6.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style$6.label, children: label }), jsxRuntime.jsx("span", { className: style$6.value, children: value })] }) }, key));
567
569
  };
568
570
 
569
571
  var AccordionRoot = function (_a) {
@@ -571,38 +573,38 @@ var AccordionRoot = function (_a) {
571
573
  return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
572
574
  };
573
575
 
574
- var style$3 = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
576
+ var style$5 = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
575
577
 
576
578
  var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
577
579
  var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
578
- return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$3.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$3.childrenContainer, children: jsxRuntime.jsx("div", { className: style$3.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
580
+ return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$5.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$5.childrenContainer, children: jsxRuntime.jsx("div", { className: style$5.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
579
581
  });
580
582
  AccordionContent.displayName = "AccordionContent";
581
583
 
582
- var style$2 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
584
+ var style$4 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
583
585
 
584
586
  var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
585
587
  var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
586
- return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$2.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$2.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
588
+ return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$4.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$4.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
587
589
  });
588
590
  AccordionTrigger.displayName = "AccordionTrigger";
589
591
 
590
- var style$1 = {"root":"accordion-item-module__root__1Yk4f"};
592
+ var style$3 = {"root":"accordion-item-module__root__1Yk4f"};
591
593
 
592
594
  var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
593
595
  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;
594
- return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$1.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
596
+ return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$3.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
595
597
  });
596
598
  AccordionItem.displayName = "AccordionItem";
597
599
 
598
600
  var Accordion = { Root: AccordionRoot, Item: AccordionItem };
599
601
 
600
- var style = {"modal":"modal-module__modal__X2VmM","content":"modal-module__content__Hrybc","header":"modal-module__header__vvu8s","backdrop":"modal-module__backdrop__yqE8l","body":"modal-module__body__ax2L0","bodyWrapper":"modal-module__bodyWrapper__uj88Q","actions":"modal-module__actions__uueCa"};
602
+ var style$2 = {"modal":"modal-module__modal__X2VmM","content":"modal-module__content__Hrybc","header":"modal-module__header__vvu8s","backdrop":"modal-module__backdrop__yqE8l","body":"modal-module__body__ax2L0","bodyWrapper":"modal-module__bodyWrapper__uj88Q","actions":"modal-module__actions__uueCa"};
601
603
 
602
604
  var ModalElement = function (_a) {
603
605
  var id = _a.id, children = _a.children, className = _a.className, _b = _a.title, title = _b === void 0 ? "No title" : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, onClose = _a.onClose, _d = _a.actions, actions = _d === void 0 ? [] : _d, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? true : _e, _f = _a.isScrollable, isScrollable = _f === void 0 ? false : _f, visible = _a.visible, attributes = __rest(_a, ["id", "children", "className", "title", "size", "onClose", "actions", "isFullWidth", "isScrollable", "visible"]);
604
606
  var modalRef = React.useRef(null);
605
- return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsxRuntime.jsx("dialog", { className: style.backdrop }), jsxRuntime.jsx("div", { className: style.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { onClick: onClose })] })), jsxRuntime.jsx("div", { className: style.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
607
+ return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$2.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsxRuntime.jsx("dialog", { className: style$2.backdrop }), jsxRuntime.jsx("div", { className: style$2.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style$2.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style$2.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { onClick: onClose })] })), jsxRuntime.jsx("div", { className: style$2.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style$2.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
606
608
  };
607
609
  var Modal = function (_a) {
608
610
  var visible = _a.visible, props = __rest(_a, ["visible"]);
@@ -633,6 +635,23 @@ var InfoModal = function (_a) {
633
635
  return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
634
636
  };
635
637
 
638
+ var style$1 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
639
+
640
+ var DropdownMenu$1 = function (_a) {
641
+ var text = _a.text, children = _a.children, Icon = _a.icon, disabled = _a.disabled, body = _a.body, variant = _a.variant, rest = __rest(_a, ["text", "children", "icon", "disabled", "body", "variant"]);
642
+ var defaultBody = !text ? Icon && jsxRuntime.jsx(Icon, {}) : jsxRuntime.jsx(Button, { icon: Icon, variant: variant, children: text });
643
+ return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$1.trigger, disabled: disabled, children: body ? body : defaultBody })), jsxRuntime.jsx(RDropdownMenu__namespace.Portal, { children: jsxRuntime.jsxs(RDropdownMenu__namespace.Content, { className: style$1.content, sideOffset: 5, children: [children, jsxRuntime.jsx(RDropdownMenu__namespace.Arrow, { className: style$1.arrow })] }) })] }));
644
+ };
645
+
646
+ var style = {"root":"dropdown-menu-item-module__root__zs510"};
647
+
648
+ var DropdownMenuItem = function (_a) {
649
+ var children = _a.children, disabled = _a.disabled, rest = __rest(_a, ["children", "disabled"]);
650
+ return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style.root, disabled: disabled }, rest, { children: children })));
651
+ };
652
+
653
+ var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
654
+
636
655
  exports.Accordion = Accordion;
637
656
  exports.Badge = Badge;
638
657
  exports.Button = Button;
@@ -640,6 +659,7 @@ exports.Checkbox = Checkbox;
640
659
  exports.Clipboard = Clipboard;
641
660
  exports.ConfirmModal = ConfirmModal;
642
661
  exports.Container = Container;
662
+ exports.DropdownMenu = DropdownMenu;
643
663
  exports.FormSelect = FormSelect;
644
664
  exports.InfoModal = InfoModal;
645
665
  exports.List = List;