@kaio-xyz/design-system 1.1.121 → 1.1.123

package/dist/index.cjs.js

@@ -324,17 +324,17 @@ var SvgArrowUpRight = function SvgArrowUpRight(props) {
   })));
 };
 
-var style$w = {"root":"stack-module__root__AqSLk"};
+var style$v = {"root":"stack-module__root__AqSLk"};
 
 var Stack = function (_a) {
     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, _f = _a.wrap, wrap = _f === void 0 ? false : _f, as = _a.as, rest = __rest(_a, ["children", "space", "className", "position", "fullHeight", "fullWidth", "dataTest", "dataAlignItems", "dataCapitalize", "dataMarginTop", "dataMarginBottom", "dataMarginLeft", "dataPaddingBottom", "wrap", "as"]);
     var Tag = as || "div";
-    return (jsxRuntime.jsx(Tag, __assign({ className: clsx(style$w.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, "data-wrap": wrap }, rest, { children: children })));
+    return (jsxRuntime.jsx(Tag, __assign({ className: clsx(style$v.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, "data-wrap": wrap }, rest, { children: children })));
 };
 
 var baseStyle = {"root":"badge-base-module__root__oUZlm"};
 
-var style$v = {"root":"badge-module__root__rXpaz"};
+var style$u = {"root":"badge-module__root__rXpaz"};
 
 var BadgeStatuses = {
     success: "success",
@@ -356,16 +356,16 @@ var Badge = function (_a) {
             default: return jsxRuntime.jsx(SvgCircleDashed, {});
         }
     }, [status]);
-    return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$v.root, className), "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, children] }) })));
+    return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$u.root, className), "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, children] }) })));
 };
 
-var style$u = {"root":"button-module__root__CDCDX"};
+var style$t = {"root":"button-module__root__CDCDX"};
 
-var style$t = {"root":"spinned-icon-module__root__xchkj"};
+var style$s = {"root":"spinned-icon-module__root__xchkj"};
 
 var SpinnedIcon = function (_a) {
     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"]);
-    return (jsxRuntime.jsx("div", { className: clsx(style$t.root, className), style: {
+    return (jsxRuntime.jsx("div", { className: clsx(style$s.root, className), style: {
             width: size,
             height: size,
             animationDuration: "".concat(duration, "s"),
@@ -379,7 +379,7 @@ var Button = React.forwardRef(function (_a, ref) {
     var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps, { viewBox: "0 0 24 24" }));
     var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
     var iconChild = loadingIcon || baseIcon || null;
-    var classes = clsx(style$u.root, props.className);
+    var classes = clsx(style$t.root, props.className);
     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: [iconPosition === "left" && iconChild, isLoading ? "Loading" : props.children, iconPosition === "right" && iconChild] }) }))));
 });
 Button.displayName = "Button";
@@ -404,41 +404,41 @@ var useFieldAutofill = function () {
     return { isAutofilled: isAutofilled, internalRef: internalRef };
 };
 
-var style$s = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
+var style$r = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
 
 var Hint = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
-    return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$s.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$s.children, children: children })] })));
+    return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$r.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$r.children, children: children })] })));
 };
 
-var style$r = {"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"};
+var style$q = {"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"};
 
 var TextField = React.forwardRef(function (_a, ref) {
     var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, 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, _f = _a.type, type = _f === void 0 ? "text" : _f, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "button", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur", "type"]);
     var _g = useFieldAutofill(), isAutofilled = _g.isAutofilled, internalRef = _g.internalRef;
     React.useImperativeHandle(ref, function () { return internalRef.current; });
-    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$r.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$r.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$r.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({}, attributes, { id: id, ref: internalRef, type: type, value: value, defaultValue: defaultValue, placeholder: " ", className: style$r.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly })), label && (jsxRuntime.jsx("label", { className: style$r.label, htmlFor: id, "data-floating": floatingLabel, children: label })), button ? button : null, hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$r.hint, children: hint })] }) }) }));
+    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$q.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$q.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$q.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({}, attributes, { id: id, ref: internalRef, type: type, value: value, defaultValue: defaultValue, placeholder: " ", className: style$q.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly })), label && (jsxRuntime.jsx("label", { className: style$q.label, htmlFor: id, "data-floating": floatingLabel, children: label })), button ? button : null, hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$q.hint, children: hint })] }) }) }));
 });
 TextField.displayName = "TextField";
 
-var style$q = {"container":"container-module__container__CAxQw"};
+var style$p = {"container":"container-module__container__CAxQw"};
 
 var Container = function (_a) {
     var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
-    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$q.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
+    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$p.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
 };
 
-var style$p = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
+var style$o = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
 
 var PasswordField = React.forwardRef(function (_a, ref) {
     var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
     var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
-    var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$p.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
-    return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$p.field })));
+    var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$o.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
+    return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$o.field })));
 });
 PasswordField.displayName = "PasswordField";
 
-var style$o = {"validator":"validate-password-field-module__validator__Do-6w"};
+var style$n = {"validator":"validate-password-field-module__validator__Do-6w"};
 
 var rules = {
     length: /^.{8,}$/,
@@ -463,18 +463,11 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
     }, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
-    var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$o.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
+    var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$n.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
     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: @ $ ! % * ? & _ #)")] })] }));
 });
 ValidatePasswordField.displayName = "ValidatePasswordField";
 
-var style$n = {"root":"label-module__root__34bJr"};
-
-var Label = function (_a) {
-    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;
-    return (jsxRuntime.jsx("label", { className: clsx(style$n.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
-};
-
 var style$m = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
 
 var IconAndLabel = function (_a) {
@@ -495,8 +488,22 @@ var CustomSingleValue = function (_a) {
     return (jsxRuntime.jsx(ReactSelect.components.SingleValue, __assign({ data: data }, rest, { children: jsxRuntime.jsx(IconAndLabel, { icon: data.icon, children: children }) })));
 };
 var Select = function (_a) {
-    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"]);
-    return (jsxRuntime.jsxs("div", { className: clsx(style$m.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$m.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$m.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$m.hint, children: error })] })] }));
+    var id = _a.id, label = _a.label, dataTest = _a.dataTest, isDisabled = _a.isDisabled, className = _a.className, error = _a.error, customComponents = _a.components, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, value = _a.value, defaultValue = _a.defaultValue, placeholder = _a.placeholder, rest = __rest(_a, ["id", "label", "dataTest", "isDisabled", "className", "error", "components", "onChange", "onFocus", "onBlur", "value", "defaultValue", "placeholder"]);
+    var _b = React.useState(false), isFocused = _b[0], setIsFocused = _b[1];
+    var _c = React.useState(function () {
+        var v = defaultValue;
+        return v != null && (!Array.isArray(v) || v.length > 0);
+    }), uncontrolledHasValue = _c[0], setUncontrolledHasValue = _c[1];
+    var controlledHasValue = value !== undefined
+        ? (value != null && (!Array.isArray(value) || value.length > 0))
+        : uncontrolledHasValue;
+    var isFloating = isFocused || controlledHasValue;
+    var handleChange = function (newValue, actionMeta) {
+        var v = newValue;
+        setUncontrolledHasValue(v != null && (!Array.isArray(v) || v.length > 0));
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, actionMeta);
+    };
+    return (jsxRuntime.jsx("div", { className: clsx(style$m.root, className), children: jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$m.selector, "data-error": !!error, "data-has-floating-label": !!label, "data-floating-active": isFloating, children: [label && (jsxRuntime.jsx("label", { className: style$m.label, htmlFor: id, "data-floating": isFloating, children: label })), jsxRuntime.jsx(ReactSelect, __assign({ inputId: id, classNamePrefix: "select", components: __assign(__assign({}, customComponents), { IndicatorSeparator: function () { return null; }, Option: CustomOption, SingleValue: CustomSingleValue, DropdownIndicator: CustomDropdownIndicator, MultiValueLabel: CustomMultiValueLabel }) }, rest, { placeholder: label ? (placeholder !== null && placeholder !== void 0 ? placeholder : "") : placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: function (e) { setIsFocused(true); onFocus === null || onFocus === void 0 ? void 0 : onFocus(e); }, onBlur: function (e) { setIsFocused(false); onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); }, isDisabled: isDisabled })), error && jsxRuntime.jsx(Hint, { kind: "error", className: style$m.hint, children: error })] }) }));
 };
 Select.displayName = "Select";
 
@@ -1152,7 +1159,7 @@ var TextArea = React.forwardRef(function (_a, ref) {
     var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id, label = _a.label, onChange = _a.onChange, readOnly = _a.readOnly, _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, _f = _a.rows, rows = _f === void 0 ? 3 : _f, attributes = __rest(_a, ["className", "disabled", "hint", "id", "label", "onChange", "readOnly", "fullWidth", "size", "noPadding", "floatingLabel", "value", "defaultValue", "onFocus", "onBlur", "rows"]);
     var _g = useFieldAutofill(), isAutofilled = _g.isAutofilled, internalRef = _g.internalRef;
     React.useImperativeHandle(ref, function () { return internalRef.current; });
-    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$r.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$r.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$r.fieldWrapper, children: [jsxRuntime.jsx("textarea", __assign({}, attributes, { id: id, ref: internalRef, value: value, defaultValue: defaultValue, placeholder: " ", className: style$r.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly, rows: rows })), label && (jsxRuntime.jsx("label", { className: style$r.label, htmlFor: id, "data-floating": floatingLabel, children: label })), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$r.hint, children: hint })] }) }) }));
+    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$q.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsx("div", { className: style$q.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-floating-label": floatingLabel, children: jsxRuntime.jsxs("div", { className: style$q.fieldWrapper, children: [jsxRuntime.jsx("textarea", __assign({}, attributes, { id: id, ref: internalRef, value: value, defaultValue: defaultValue, placeholder: " ", className: style$q.field, "data-size": size, "data-autofilled": isAutofilled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, readOnly: readOnly, rows: rows })), label && (jsxRuntime.jsx("label", { className: style$q.label, htmlFor: id, "data-floating": floatingLabel, children: label })), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$q.hint, children: hint })] }) }) }));
 });
 TextArea.displayName = "TextArea";