@kaio-xyz/design-system 1.0.39 → 1.0.40

package/dist/components/atoms/list/index.d.ts

@@ -0,0 +1,2 @@
+export { List } from './list';
+export { ListItem } from './list-item';

package/dist/components/atoms/list/list-item/index.d.ts

@@ -0,0 +1 @@
+export { ListItem } from './list-item';

package/dist/components/atoms/list/list-item/list-item.d.ts

@@ -0,0 +1,6 @@
+type ListItem = {
+    value: string;
+    label: string;
+};
+export declare const ListItem: ({ value, label }: ListItem) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/list/list.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type ListProps = {
+    label?: string;
+    children?: ReactNode;
+};
+export declare const List: ({ label, children }: ListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/atoms/list/list.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { List } from './list';
+declare const meta: Meta<typeof List>;
+export default meta;
+type Story = StoryObj<typeof List>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const OrderSummary: Story;
+export declare const SingleItem: Story;
+export declare const Empty: Story;
+export declare const LongContent: Story;
+export declare const Overflow: Story;

package/dist/index.cjs.js

@@ -260,16 +260,16 @@ var SvgLoadingCircle = function SvgLoadingCircle(props) {
   })));
 };
 
-var style$f = {"root":"stack-module__root__AqSLk"};
+var style$h = {"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, rest = __rest(_a, ["children", "space", "className", "position", "fullHeight", "fullWidth", "dataTest", "dataAlignItems", "dataCapitalize", "dataMarginTop", "dataMarginBottom", "dataMarginLeft", "dataPaddingBottom"]);
-    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$f.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 })));
+    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$h.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 })));
 };
 
 var baseStyle = {"root":"badge-base-module__root__oUZlm"};
 
-var style$e = {"root":"badge-module__root__rXpaz"};
+var style$g = {"root":"badge-module__root__rXpaz"};
 
 var BadgeStatuses = {
     success: "success",
@@ -288,16 +288,16 @@ var Badge = function (_a) {
             default: return jsxRuntime.jsx(SvgCircleDashed, {});
         }
     }, [status]);
-    return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$e.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] }) })));
+    return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$g.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] }) })));
 };
 
-var style$d = {"root":"button-module__root__CDCDX"};
+var style$f = {"root":"button-module__root__CDCDX"};
 
-var style$c = {"root":"spinned-icon-module__root__xchkj"};
+var style$e = {"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$c.root, className), style: {
+    return (jsxRuntime.jsx("div", { className: clsx(style$e.root, className), style: {
             width: size,
             height: size,
             animationDuration: "".concat(duration, "s"),
@@ -311,19 +311,19 @@ var Button = React.forwardRef(function (_a, ref) {
     var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps));
     var loadingIcon = isLoading && jsxRuntime.jsx(SpinnedIcon, __assign({ size: iconSize }, iconProps));
     var iconChild = loadingIcon || baseIcon || null;
-    var classes = clsx(style$d.root, props.className);
+    var classes = clsx(style$f.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: [iconChild, isLoading ? "Loading" : props.children] }) }))));
 });
 Button.displayName = "Button";
 
-var style$b = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
+var style$d = {"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$b.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$b.children, children: children })] })));
+    return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$d.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$d.children, children: children })] })));
 };
 
-var style$a = {"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$c = {"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, 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"]);
@@ -360,28 +360,28 @@ var TextField = React.forwardRef(function (_a, ref) {
         setHasValue(e.target.value.length > 0);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     };
-    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$a.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$a.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$a.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$a.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$a.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$a.hint, children: hint })] }) }));
+    return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$c.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$c.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$c.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$c.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$c.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$c.hint, children: hint })] }) }));
 });
 TextField.displayName = "TextField";
 
-var style$9 = {"container":"container-module__container__CAxQw"};
+var style$b = {"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$9.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
+    return (jsxRuntime.jsx("div", __assign({ className: clsx(style$b.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
 };
 
-var style$8 = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
+var style$a = {"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$8.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$8.field })));
+    var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$a.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$a.field })));
 });
 PasswordField.displayName = "PasswordField";
 
-var style$7 = {"validator":"validate-password-field-module__validator__Do-6w"};
+var style$9 = {"validator":"validate-password-field-module__validator__Do-6w"};
 
 var rules = {
     length: /^.{8,}$/,
@@ -406,19 +406,19 @@ 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$7.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$9.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$6 = {"root":"label-module__root__34bJr"};
+var style$8 = {"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$6.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
+    return (jsxRuntime.jsx("label", { className: clsx(style$8.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
 };
 
-var style$5 = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
+var style$7 = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
 
 var IconAndLabel = function (_a) {
     var children = _a.children, Icon = _a.icon;
@@ -439,7 +439,7 @@ var CustomSingleValue = function (_a) {
 };
 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$5.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$5.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$5.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$5.hint, children: error })] })] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(style$7.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$7.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$7.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$7.hint, children: error })] })] }));
 };
 Select.displayName = "Select";
 
@@ -452,14 +452,14 @@ var FormSelect = function (_a) {
 };
 FormSelect.displayName = "FormSelect";
 
-var style$4 = {"root":"loader-module__root__qnInQ"};
+var style$6 = {"root":"loader-module__root__qnInQ"};
 
 var Loader = function (_a) {
     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;
-    return (jsxRuntime.jsx("div", { className: style$4.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] }) }));
+    return (jsxRuntime.jsx("div", { className: style$6.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] }) }));
 };
 
-var style$3 = {"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"};
+var style$5 = {"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"};
 
 var Checkbox = function (_a) {
     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"]);
@@ -472,11 +472,11 @@ var Checkbox = function (_a) {
     var dynamicStyle = {
         "--vAlign": verticalAlign,
     };
-    return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$3.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$3.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$3.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$3.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$3.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$3.label, children: label })] }));
+    return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$5.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$5.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$5.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$5.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$5.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$5.label, children: label })] }));
 };
 Checkbox.displayName = "Checkbox";
 
-var style$2 = {"root":"clipboard-module__root__wVZhy"};
+var style$4 = {"root":"clipboard-module__root__wVZhy"};
 
 var trimString = function (str, noOfChars) {
     if (noOfChars === void 0) { noOfChars = 4; }
@@ -501,28 +501,42 @@ var Clipboard = function (_a) {
     }, [value]);
     var text = isShowingCopy ? 'Copied!' : displayValue;
     var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgClipboard, {});
-    return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$2.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
+    return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style$4.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
 };
 
-var style$1 = {"root":"stepper-module__root__hgDss"};
+var style$3 = {"root":"stepper-module__root__hgDss"};
 
 var Stepper = function (_a) {
     var children = _a.children;
-    return (jsxRuntime.jsx("ul", { className: style$1.root, children: children }));
+    return (jsxRuntime.jsx("ul", { className: style$3.root, children: children }));
 };
 
-var style = {"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"};
+var style$2 = {"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"};
 
 var Step = function (_a) {
     var 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;
     var icon = React.useMemo(function () {
         switch (true) {
-            case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style.checkIcon });
-            case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style.loadingIcon });
-            default: return jsxRuntime.jsx("span", { className: style.emptyIcon });
+            case isCompleted: return jsxRuntime.jsx(SvgCheck, { className: style$2.checkIcon });
+            case isCurrent: return jsxRuntime.jsx(SpinnedIcon, { icon: SvgLoadingCircle, size: iconSize, className: style$2.loadingIcon });
+            default: return jsxRuntime.jsx("span", { className: style$2.emptyIcon });
         }
     }, [isCompleted, isCurrent]);
-    return (jsxRuntime.jsx("li", { className: style.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style.label, children: label })] }) }));
+    return (jsxRuntime.jsx("li", { className: style$2.root, "data-is-current": isCurrent, style: { '--icon-size': "".concat(iconSize, "px") }, children: jsxRuntime.jsxs(Stack, { className: style$2.container, position: "horizontal", children: [icon, jsxRuntime.jsx("span", { className: style$2.label, children: label })] }) }));
+};
+
+var style$1 = {"root":"list-module__root__OXx93"};
+
+var List = function (_a) {
+    var label = _a.label, children = _a.children;
+    return (jsxRuntime.jsxs(Stack, { className: style$1.root, children: [label && jsxRuntime.jsx("p", { children: label }), jsxRuntime.jsx("ul", { children: children })] }));
+};
+
+var style = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
+
+var ListItem = function (_a) {
+    var value = _a.value, label = _a.label;
+    return (jsxRuntime.jsxs(Stack, { position: "horizontal-space", space: "m", className: style.root, dataAlignItems: "flex-start", children: [jsxRuntime.jsx("span", { className: style.label, children: label }), jsxRuntime.jsx("span", { className: style.value, children: value })] }));
 };
 
 exports.Badge = Badge;
@@ -531,6 +545,8 @@ exports.Checkbox = Checkbox;
 exports.Clipboard = Clipboard;
 exports.Container = Container;
 exports.FormSelect = FormSelect;
+exports.List = List;
+exports.ListItem = ListItem;
 exports.Loader = Loader;
 exports.PasswordField = PasswordField;
 exports.Select = Select;