@kaio-xyz/design-system 1.1.2 → 1.1.4
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/modal/index.d.ts +1 -0
- package/dist/components/atoms/modal/modal.d.ts +13 -0
- package/dist/components/atoms/modal/modal.stories.d.ts +6 -0
- package/dist/components/molecules/modal/confirm-modal/confirm-modal.d.ts +11 -0
- package/dist/components/molecules/modal/confirm-modal/confirm-modal.stories.d.ts +6 -0
- package/dist/components/molecules/modal/confirm-modal/index.d.ts +1 -0
- package/dist/components/molecules/modal/index.d.ts +3 -0
- package/dist/components/molecules/modal/info-modal/index.d.ts +1 -0
- package/dist/components/molecules/modal/info-modal/info-modal.d.ts +6 -0
- package/dist/components/molecules/modal/otp-modal/index.d.ts +1 -0
- package/dist/components/molecules/modal/otp-modal/otp-modal.d.ts +8 -0
- package/dist/index.cjs.js +115 -50
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +112 -51
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -5,6 +5,7 @@ import { useMemo, forwardRef, useState, useRef, useEffect, useCallback } from 'r
|
|
|
5
5
|
import ReactSelect, { components } from 'react-select';
|
|
6
6
|
import { Controller } from 'react-hook-form';
|
|
7
7
|
import * as RAccordion from '@radix-ui/react-accordion';
|
|
8
|
+
import { createPortal } from 'react-dom';
|
|
8
9
|
|
|
9
10
|
/******************************************************************************
|
|
10
11
|
Copyright (c) Microsoft Corporation.
|
|
@@ -46,35 +47,59 @@ function __rest(s, e) {
|
|
|
46
47
|
return t;
|
|
47
48
|
}
|
|
48
49
|
|
|
50
|
+
function __spreadArray(to, from, pack) {
|
|
51
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
52
|
+
if (ar || !(i in from)) {
|
|
53
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
54
|
+
ar[i] = from[i];
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
58
|
+
}
|
|
59
|
+
|
|
49
60
|
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
50
61
|
var e = new Error(message);
|
|
51
62
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
52
63
|
};
|
|
53
64
|
|
|
65
|
+
var _path$c;
|
|
66
|
+
function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
|
|
67
|
+
var SvgCheck = function SvgCheck(props) {
|
|
68
|
+
return /*#__PURE__*/React.createElement("svg", _extends$c({
|
|
69
|
+
width: "1em",
|
|
70
|
+
height: "1em",
|
|
71
|
+
fill: "none",
|
|
72
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
73
|
+
}, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
|
|
74
|
+
d: "M20.6474 3.30281C20.8943 2.97025 21.3647 2.90067 21.6972 3.14754C22.0298 3.39444 22.0994 3.86477 21.8525 4.19734L9.60251 20.6973C9.48001 20.8623 9.29478 20.9693 9.09079 20.9942C8.88673 21.0191 8.68101 20.959 8.52244 20.8282L2.27244 15.672C1.95326 15.4083 1.90836 14.9357 2.17185 14.6163C2.43551 14.2971 2.90813 14.2522 3.22751 14.5157L8.86716 19.169L20.6474 3.30281Z",
|
|
75
|
+
fill: "#98989D"
|
|
76
|
+
})));
|
|
77
|
+
};
|
|
78
|
+
|
|
54
79
|
var _path$b;
|
|
55
80
|
function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
|
|
56
|
-
var
|
|
81
|
+
var SvgCircleDashed = function SvgCircleDashed(props) {
|
|
57
82
|
return /*#__PURE__*/React.createElement("svg", _extends$b({
|
|
58
83
|
width: "1em",
|
|
59
84
|
height: "1em",
|
|
60
85
|
fill: "none",
|
|
61
86
|
xmlns: "http://www.w3.org/2000/svg"
|
|
62
87
|
}, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
|
|
63
|
-
d: "
|
|
88
|
+
d: "M13.4258 20.3809C13.8341 20.3122 14.2211 20.5878 14.29 20.9961C14.3588 21.4044 14.0832 21.7914 13.6748 21.8604C13.1298 21.9523 12.5702 22 12 22C11.4298 22 10.8702 21.9523 10.3252 21.8604C9.91684 21.7914 9.6412 21.4044 9.70996 20.9961C9.77886 20.5878 10.1659 20.3122 10.5742 20.3809C11.0372 20.459 11.5137 20.5 12 20.5C12.4863 20.5 12.9628 20.459 13.4258 20.3809ZM4.02051 16.7422C4.35812 16.5022 4.82643 16.5813 5.06641 16.9189C5.62015 17.6979 6.30206 18.3799 7.08105 18.9336C7.41867 19.1736 7.49779 19.6419 7.25781 19.9795C7.01785 20.3166 6.55031 20.3957 6.21289 20.1562C5.297 19.5052 4.49477 18.703 3.84375 17.7871C3.6043 17.4497 3.68345 16.9821 4.02051 16.7422ZM18.9336 16.9189C19.1736 16.5813 19.6419 16.5022 19.9795 16.7422C20.3165 16.9822 20.3957 17.4497 20.1562 17.7871C19.5052 18.703 18.703 19.5052 17.7871 20.1562C17.4497 20.3957 16.9822 20.3165 16.7422 19.9795C16.5022 19.6419 16.5813 19.1736 16.9189 18.9336C17.6979 18.3799 18.3799 17.6979 18.9336 16.9189ZM2 12C2 11.4298 2.04769 10.8702 2.13965 10.3252C2.20855 9.91684 2.59556 9.6412 3.00391 9.70996C3.41221 9.77886 3.68781 10.1659 3.61914 10.5742C3.54102 11.0372 3.5 11.5137 3.5 12C3.5 12.4863 3.54102 12.9628 3.61914 13.4258C3.68781 13.8341 3.41221 14.2211 3.00391 14.29C2.59556 14.3588 2.20855 14.0832 2.13965 13.6748C2.04769 13.1298 2 12.5702 2 12ZM20.5 12C20.5 11.5137 20.459 11.0372 20.3809 10.5742C20.3122 10.1659 20.5878 9.77886 20.9961 9.70996C21.4044 9.6412 21.7914 9.91684 21.8604 10.3252C21.9523 10.8702 22 11.4298 22 12C22 12.5702 21.9523 13.1298 21.8604 13.6748C21.7914 14.0832 21.4044 14.3588 20.9961 14.29C20.5878 14.2211 20.3122 13.8341 20.3809 13.4258C20.459 12.9628 20.5 12.4863 20.5 12ZM6.21289 3.84375C6.55032 3.6043 7.01785 3.68344 7.25781 4.02051C7.49779 4.35812 7.41867 4.82643 7.08105 5.06641C6.30206 5.62015 5.62015 6.30206 5.06641 7.08105C4.82643 7.41867 4.35812 7.49779 4.02051 7.25781C3.68344 7.01785 3.6043 6.55032 3.84375 6.21289C4.49478 5.297 5.297 4.49478 6.21289 3.84375ZM16.7422 4.02051C16.9821 3.68345 17.4497 3.60431 17.7871 3.84375C18.703 4.49477 19.5052 5.297 20.1562 6.21289C20.3957 6.55031 20.3166 7.01785 19.9795 7.25781C19.6419 7.49779 19.1736 7.41867 18.9336 7.08105C18.3799 6.30206 17.6979 5.62015 16.9189 5.06641C16.5813 4.82643 16.5022 4.35812 16.7422 4.02051ZM12 2C12.5702 2 13.1298 2.04769 13.6748 2.13965C14.0832 2.20855 14.3588 2.59556 14.29 3.00391C14.2211 3.41221 13.8341 3.68781 13.4258 3.61914C12.9628 3.54102 12.4863 3.5 12 3.5C11.5137 3.5 11.0372 3.54102 10.5742 3.61914C10.1659 3.68781 9.77886 3.41221 9.70996 3.00391C9.6412 2.59556 9.91684 2.20855 10.3252 2.13965C10.8702 2.04769 11.4298 2 12 2Z",
|
|
64
89
|
fill: "#98989D"
|
|
65
90
|
})));
|
|
66
91
|
};
|
|
67
92
|
|
|
68
93
|
var _path$a;
|
|
69
94
|
function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
|
|
70
|
-
var
|
|
95
|
+
var SvgCross = function SvgCross(props) {
|
|
71
96
|
return /*#__PURE__*/React.createElement("svg", _extends$a({
|
|
72
97
|
width: "1em",
|
|
73
98
|
height: "1em",
|
|
74
99
|
fill: "none",
|
|
75
100
|
xmlns: "http://www.w3.org/2000/svg"
|
|
76
101
|
}, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
|
|
77
|
-
d: "
|
|
102
|
+
d: "M18.7197 4.21967C19.0126 3.92678 19.4873 3.92678 19.7802 4.21967C20.0731 4.51256 20.0731 4.98732 19.7802 5.28022L13.0605 11.9999L19.7802 18.7197C20.0731 19.0126 20.0731 19.4873 19.7802 19.7802C19.4873 20.0731 19.0126 20.0731 18.7197 19.7802L11.9999 13.0605L5.28022 19.7802C4.98732 20.0731 4.51256 20.0731 4.21967 19.7802C3.92678 19.4873 3.92678 19.0126 4.21967 18.7197L10.9394 11.9999L4.21967 5.28022C3.92678 4.98732 3.92678 4.51256 4.21967 4.21967C4.51256 3.92678 4.98732 3.92678 5.28022 4.21967L11.9999 10.9394L18.7197 4.21967Z",
|
|
78
103
|
fill: "#98989D"
|
|
79
104
|
})));
|
|
80
105
|
};
|
|
@@ -241,16 +266,16 @@ var SvgLoadingCircle = function SvgLoadingCircle(props) {
|
|
|
241
266
|
})));
|
|
242
267
|
};
|
|
243
268
|
|
|
244
|
-
var style$
|
|
269
|
+
var style$l = {"root":"stack-module__root__AqSLk"};
|
|
245
270
|
|
|
246
271
|
var Stack = function (_a) {
|
|
247
272
|
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"]);
|
|
248
|
-
return (jsx("div", __assign({ className: clsx(style$
|
|
273
|
+
return (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 })));
|
|
249
274
|
};
|
|
250
275
|
|
|
251
276
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
252
277
|
|
|
253
|
-
var style$
|
|
278
|
+
var style$k = {"root":"badge-module__root__rXpaz"};
|
|
254
279
|
|
|
255
280
|
var BadgeStatuses = {
|
|
256
281
|
success: "success",
|
|
@@ -269,16 +294,16 @@ var Badge = function (_a) {
|
|
|
269
294
|
default: return jsx(SvgCircleDashed, {});
|
|
270
295
|
}
|
|
271
296
|
}, [status]);
|
|
272
|
-
return (jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
297
|
+
return (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: jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, text] }) })));
|
|
273
298
|
};
|
|
274
299
|
|
|
275
|
-
var style$
|
|
300
|
+
var style$j = {"root":"button-module__root__CDCDX"};
|
|
276
301
|
|
|
277
|
-
var style$
|
|
302
|
+
var style$i = {"root":"spinned-icon-module__root__xchkj"};
|
|
278
303
|
|
|
279
304
|
var SpinnedIcon = function (_a) {
|
|
280
305
|
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"]);
|
|
281
|
-
return (jsx("div", { className: clsx(style$
|
|
306
|
+
return (jsx("div", { className: clsx(style$i.root, className), style: {
|
|
282
307
|
width: size,
|
|
283
308
|
height: size,
|
|
284
309
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -292,19 +317,19 @@ var Button = forwardRef(function (_a, ref) {
|
|
|
292
317
|
var baseIcon = Icon && jsx(Icon, __assign({}, iconProps));
|
|
293
318
|
var loadingIcon = isLoading && jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
|
|
294
319
|
var iconChild = loadingIcon || baseIcon || null;
|
|
295
|
-
var classes = clsx(style$
|
|
320
|
+
var classes = clsx(style$j.root, props.className);
|
|
296
321
|
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] }) }))));
|
|
297
322
|
});
|
|
298
323
|
Button.displayName = "Button";
|
|
299
324
|
|
|
300
|
-
var style$
|
|
325
|
+
var style$h = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
301
326
|
|
|
302
327
|
var Hint = function (_a) {
|
|
303
328
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
304
|
-
return (jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
329
|
+
return (jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$h.hint, className), "data-type": kind }, attributes, { children: [jsx(SvgInfo, {}), jsx("span", { className: style$h.children, children: children })] })));
|
|
305
330
|
};
|
|
306
331
|
|
|
307
|
-
var style$
|
|
332
|
+
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"};
|
|
308
333
|
|
|
309
334
|
var TextField = forwardRef(function (_a, ref) {
|
|
310
335
|
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"]);
|
|
@@ -341,28 +366,28 @@ var TextField = forwardRef(function (_a, ref) {
|
|
|
341
366
|
setHasValue(e.target.value.length > 0);
|
|
342
367
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
343
368
|
};
|
|
344
|
-
return (jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
369
|
+
return (jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$g.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxs("div", { className: style$g.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsx("label", { className: style$g.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxs("div", { className: style$g.fieldWrapper, children: [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 && jsx(Hint, { kind: "error", className: style$g.hint, children: hint })] }) }));
|
|
345
370
|
});
|
|
346
371
|
TextField.displayName = "TextField";
|
|
347
372
|
|
|
348
|
-
var style$
|
|
373
|
+
var style$f = {"container":"container-module__container__CAxQw"};
|
|
349
374
|
|
|
350
375
|
var Container = function (_a) {
|
|
351
376
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
352
|
-
return (jsx("div", __assign({ className: clsx(style$
|
|
377
|
+
return (jsx("div", __assign({ className: clsx(style$f.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
353
378
|
};
|
|
354
379
|
|
|
355
|
-
var style$
|
|
380
|
+
var style$e = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
356
381
|
|
|
357
382
|
var PasswordField = forwardRef(function (_a, ref) {
|
|
358
383
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
359
384
|
var _b = useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
360
|
-
var button = (jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
361
|
-
return (jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
385
|
+
var button = (jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$e.button, children: isPasswordVisible ? jsx(SvgEyeOpen, {}) : jsx(SvgEyeClosed, {}) }));
|
|
386
|
+
return (jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$e.field })));
|
|
362
387
|
});
|
|
363
388
|
PasswordField.displayName = "PasswordField";
|
|
364
389
|
|
|
365
|
-
var style$
|
|
390
|
+
var style$d = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
366
391
|
|
|
367
392
|
var rules = {
|
|
368
393
|
length: /^.{8,}$/,
|
|
@@ -387,19 +412,19 @@ var ValidatePasswordField = forwardRef(function (_a, ref) {
|
|
|
387
412
|
useEffect(function () {
|
|
388
413
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
389
414
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
390
|
-
var getValidator = function (isCheckOk, label) { return (jsxs(Stack, { position: "horizontal", className: style$
|
|
415
|
+
var getValidator = function (isCheckOk, label) { return (jsxs(Stack, { position: "horizontal", className: style$d.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsx(SvgCheck, {}) : jsx(SvgCircleDashed, {}), jsx("p", { children: label })] })); };
|
|
391
416
|
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: @ $ ! % * ? & _ #)")] })] }));
|
|
392
417
|
});
|
|
393
418
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
394
419
|
|
|
395
|
-
var style$
|
|
420
|
+
var style$c = {"root":"label-module__root__34bJr"};
|
|
396
421
|
|
|
397
422
|
var Label = function (_a) {
|
|
398
423
|
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;
|
|
399
|
-
return (jsx("label", { className: clsx(style$
|
|
424
|
+
return (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 }));
|
|
400
425
|
};
|
|
401
426
|
|
|
402
|
-
var style$
|
|
427
|
+
var style$b = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
403
428
|
|
|
404
429
|
var IconAndLabel = function (_a) {
|
|
405
430
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -420,7 +445,7 @@ var CustomSingleValue = function (_a) {
|
|
|
420
445
|
};
|
|
421
446
|
var Select = function (_a) {
|
|
422
447
|
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"]);
|
|
423
|
-
return (jsxs("div", { className: clsx(style$
|
|
448
|
+
return (jsxs("div", { className: clsx(style$b.root, className), children: [label && jsx(Label, { id: id, label: label, className: style$b.label }), jsxs("div", { "data-test": dataTest, className: style$b.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$b.hint, children: error })] })] }));
|
|
424
449
|
};
|
|
425
450
|
Select.displayName = "Select";
|
|
426
451
|
|
|
@@ -433,14 +458,14 @@ var FormSelect = function (_a) {
|
|
|
433
458
|
};
|
|
434
459
|
FormSelect.displayName = "FormSelect";
|
|
435
460
|
|
|
436
|
-
var style$
|
|
461
|
+
var style$a = {"root":"loader-module__root__qnInQ"};
|
|
437
462
|
|
|
438
463
|
var Loader = function (_a) {
|
|
439
464
|
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;
|
|
440
|
-
return (jsx("div", { className: style$
|
|
465
|
+
return (jsx("div", { className: style$a.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] }) }));
|
|
441
466
|
};
|
|
442
467
|
|
|
443
|
-
var style$
|
|
468
|
+
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"};
|
|
444
469
|
|
|
445
470
|
var Checkbox = function (_a) {
|
|
446
471
|
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"]);
|
|
@@ -453,11 +478,11 @@ var Checkbox = function (_a) {
|
|
|
453
478
|
var dynamicStyle = {
|
|
454
479
|
"--vAlign": verticalAlign,
|
|
455
480
|
};
|
|
456
|
-
return (jsxs("label", { style: dynamicStyle, className: clsx(style$
|
|
481
|
+
return (jsxs("label", { style: dynamicStyle, className: clsx(style$9.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxs("span", { className: style$9.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$9.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsx(SvgCheck, { className: style$9.icon })), indeterminate && (jsx(SvgMinus, { className: style$9.icon }))] })] }), label && jsx("span", { className: style$9.label, children: label })] }));
|
|
457
482
|
};
|
|
458
483
|
Checkbox.displayName = "Checkbox";
|
|
459
484
|
|
|
460
|
-
var style$
|
|
485
|
+
var style$8 = {"root":"clipboard-module__root__wVZhy"};
|
|
461
486
|
|
|
462
487
|
var trimString = function (str, noOfChars) {
|
|
463
488
|
if (noOfChars === void 0) { noOfChars = 4; }
|
|
@@ -482,42 +507,42 @@ var Clipboard = function (_a) {
|
|
|
482
507
|
}, [value]);
|
|
483
508
|
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
484
509
|
var icon = isShowingCopy ? jsx(SvgCheck, {}) : jsx(SvgClipboard, {});
|
|
485
|
-
return (jsx("button", { type: "button", onClick: handleClick, className: style$
|
|
510
|
+
return (jsx("button", { type: "button", onClick: handleClick, className: style$8.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxs(Stack, { position: "horizontal", children: [jsx("span", { children: text }), icon] }) }));
|
|
486
511
|
};
|
|
487
512
|
|
|
488
|
-
var style$
|
|
513
|
+
var style$7 = {"root":"stepper-module__root__hgDss"};
|
|
489
514
|
|
|
490
515
|
var Stepper = function (_a) {
|
|
491
516
|
var children = _a.children;
|
|
492
|
-
return (jsx("ul", { className: style$
|
|
517
|
+
return (jsx("ul", { className: style$7.root, children: children }));
|
|
493
518
|
};
|
|
494
519
|
|
|
495
|
-
var style$
|
|
520
|
+
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"};
|
|
496
521
|
|
|
497
522
|
var Step = function (_a) {
|
|
498
523
|
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;
|
|
499
524
|
var icon = useMemo(function () {
|
|
500
525
|
switch (true) {
|
|
501
|
-
case isCompleted: return jsx(SvgCheck, { className: style$
|
|
502
|
-
case isCurrent: return jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$
|
|
503
|
-
default: return jsx("span", { className: style$
|
|
526
|
+
case isCompleted: return jsx(SvgCheck, { className: style$6.checkIcon });
|
|
527
|
+
case isCurrent: return jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$6.loadingIcon });
|
|
528
|
+
default: return jsx("span", { className: style$6.emptyIcon });
|
|
504
529
|
}
|
|
505
530
|
}, [isCompleted, isCurrent]);
|
|
506
|
-
return (jsx("li", { className: style$
|
|
531
|
+
return (jsx("li", { className: style$6.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxs(Stack, { className: style$6.container, position: "horizontal", children: [icon, jsx("span", { className: style$6.label, children: label })] }) }, key));
|
|
507
532
|
};
|
|
508
533
|
|
|
509
|
-
var style$
|
|
534
|
+
var style$5 = {"root":"list-module__root__OXx93"};
|
|
510
535
|
|
|
511
536
|
var List = function (_a) {
|
|
512
537
|
var label = _a.label, children = _a.children;
|
|
513
|
-
return (jsxs(Stack, { className: style$
|
|
538
|
+
return (jsxs(Stack, { className: style$5.root, children: [label && jsx("p", { children: label }), jsx("ul", { children: children })] }));
|
|
514
539
|
};
|
|
515
540
|
|
|
516
|
-
var style$
|
|
541
|
+
var style$4 = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
517
542
|
|
|
518
543
|
var ListItem = function (_a) {
|
|
519
544
|
var value = _a.value, label = _a.label, key = _a.key;
|
|
520
|
-
return (jsx("li", { children: jsxs(Stack, { position: "horizontal-space", space: "m", className: style$
|
|
545
|
+
return (jsx("li", { children: jsxs(Stack, { position: "horizontal-space", space: "m", className: style$4.root, dataAlignItems: "flex-start", children: [jsx("span", { className: style$4.label, children: label }), jsx("span", { className: style$4.value, children: value })] }) }, key));
|
|
521
546
|
};
|
|
522
547
|
|
|
523
548
|
var AccordionRoot = function (_a) {
|
|
@@ -525,31 +550,67 @@ var AccordionRoot = function (_a) {
|
|
|
525
550
|
return (jsx(RAccordion.Root, __assign({}, rest, { children: children })));
|
|
526
551
|
};
|
|
527
552
|
|
|
528
|
-
var style$
|
|
553
|
+
var style$3 = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
529
554
|
|
|
530
555
|
var AccordionContent = forwardRef(function (_a, forwardedRef) {
|
|
531
556
|
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$
|
|
557
|
+
return (jsx(RAccordion.Content, __assign({ className: clsx(style$3.content, className), ref: forwardedRef }, rest, { children: jsx("div", { className: style$3.childrenContainer, children: jsx("div", { className: style$3.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
533
558
|
});
|
|
534
559
|
AccordionContent.displayName = "AccordionContent";
|
|
535
560
|
|
|
536
|
-
var style$
|
|
561
|
+
var style$2 = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
537
562
|
|
|
538
563
|
var AccordionTrigger = forwardRef(function (_a, forwardedRef) {
|
|
539
564
|
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$
|
|
565
|
+
return (jsx(RAccordion.Header, { className: style$2.header, children: jsx(RAccordion.Trigger, __assign({ className: clsx(style$2.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
|
|
541
566
|
});
|
|
542
567
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
543
568
|
|
|
544
|
-
var style = {"root":"accordion-item-module__root__1Yk4f"};
|
|
569
|
+
var style$1 = {"root":"accordion-item-module__root__1Yk4f"};
|
|
545
570
|
|
|
546
571
|
var AccordionItem = forwardRef(function (_a, forwardedRef) {
|
|
547
572
|
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 })] }));
|
|
573
|
+
return (jsxs(RAccordion.Item, { className: style$1.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
549
574
|
});
|
|
550
575
|
AccordionItem.displayName = "AccordionItem";
|
|
551
576
|
|
|
552
577
|
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
553
578
|
|
|
554
|
-
|
|
579
|
+
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"};
|
|
580
|
+
|
|
581
|
+
var ModalElement = function (_a) {
|
|
582
|
+
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"]);
|
|
583
|
+
var modalRef = useRef(null);
|
|
584
|
+
return (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: [jsx("dialog", { className: style.backdrop }), jsx("div", { className: style.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxs("div", { className: style.bodyWrapper, children: __spreadArray([title && (jsxs("div", { className: style.header, children: [jsx("h2", { id: id, children: title }), jsx(SvgCross, { onClick: onClose })] })), jsx("div", { className: style.body, children: children })], actions.map(function (i, idx) { return jsx("div", { className: style.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
|
|
585
|
+
};
|
|
586
|
+
var Modal = function (_a) {
|
|
587
|
+
var visible = _a.visible, props = __rest(_a, ["visible"]);
|
|
588
|
+
var element = jsx(ModalElement, __assign({ visible: visible }, props));
|
|
589
|
+
return visible
|
|
590
|
+
? createPortal(element, document.body)
|
|
591
|
+
: null;
|
|
592
|
+
};
|
|
593
|
+
|
|
594
|
+
var ConfirmModal = function (_a) {
|
|
595
|
+
var children = _a.children, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, cancelDataTest = _a.cancelDataTest, confirmDataTest = _a.confirmDataTest, _c = _a.isConfirmDisabled, isConfirmDisabled = _c === void 0 ? false : _c, _d = _a.confirmText, confirmText = _d === void 0 ? "Confirm" : _d, _e = _a.cancelText, cancelText = _e === void 0 ? "Cancel" : _e, onClose = _a.onClose, onConfirmClick = _a.onConfirmClick, props = __rest(_a, ["children", "isLoading", "cancelDataTest", "confirmDataTest", "isConfirmDisabled", "confirmText", "cancelText", "onClose", "onConfirmClick"]);
|
|
596
|
+
var actions = [
|
|
597
|
+
jsxs(Fragment, { children: [jsx(Button, { variant: "secondary", onClick: onClose, "data-test": cancelDataTest, disabled: isLoading || !onClose, children: cancelText }, "cancel"), jsx(Button, { onClick: onConfirmClick, disabled: isConfirmDisabled || isLoading, "data-test": confirmDataTest, isLoading: isLoading, children: confirmText }, "confirm")] })
|
|
598
|
+
];
|
|
599
|
+
return (jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
600
|
+
};
|
|
601
|
+
|
|
602
|
+
var OtpModal = function (_a) {
|
|
603
|
+
var code = _a.code, setCode = _a.setCode, onConfirmClick = _a.onConfirmClick, isLoading = _a.isLoading, rest = __rest(_a, ["code", "setCode", "onConfirmClick", "isLoading"]);
|
|
604
|
+
return (jsx(ConfirmModal, __assign({}, rest, { title: "OTP", isFullWidth: false, onConfirmClick: onConfirmClick, isLoading: isLoading, cancelDataTest: "LoginWithMfa__Button__cancel", confirmDataTest: "LoginWithMfa__Button__submit", children: jsxs(Stack, { children: [jsx("p", { children: "Enter the code from the authenticator app" }), jsx(TextField, { value: code, onChange: function (e) { return setCode(e.target.value); }, id: "otp", label: "OTP*", "data-test": "ResetPassword__TextField__OTP", disabled: isLoading, fullWidth: true, type: "number" })] }) })));
|
|
605
|
+
};
|
|
606
|
+
|
|
607
|
+
var InfoModal = function (_a) {
|
|
608
|
+
var children = _a.children, acceptDataTest = _a.acceptDataTest, _b = _a.acceptText, acceptText = _b === void 0 ? "Close" : _b, onClose = _a.onClose, props = __rest(_a, ["children", "acceptDataTest", "acceptText", "onClose"]);
|
|
609
|
+
var actions = [
|
|
610
|
+
jsx(Button, { variant: "primary", onClick: onClose, "data-test": acceptDataTest, children: acceptText }, "accept")
|
|
611
|
+
];
|
|
612
|
+
return (jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
613
|
+
};
|
|
614
|
+
|
|
615
|
+
export { Accordion, Badge, Button, Checkbox, Clipboard, ConfirmModal, Container, FormSelect, InfoModal, List, ListItem, Loader, Modal, OtpModal, PasswordField, Select, SpinnedIcon, Stack, Step, Stepper, TextField, ValidatePasswordField };
|
|
555
616
|
//# sourceMappingURL=index.esm.js.map
|