@kaio-xyz/design-system 1.0.6 → 1.0.8
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/asset/icons/index.d.ts +2 -0
- package/dist/components/atoms/text-field/text-field.d.ts +6 -10
- package/dist/components/atoms/text-field/text-field.stories.d.ts +12 -0
- package/dist/components/molecules/password-field/index.d.ts +1 -0
- package/dist/components/molecules/password-field/password-field.d.ts +3 -0
- package/dist/components/molecules/password-field/password-field.stories.d.ts +12 -0
- package/dist/components/molecules/password-field/validate-password-field/index.d.ts +1 -0
- package/dist/components/molecules/password-field/validate-password-field/validate-password-field.d.ts +5 -0
- package/dist/index.cjs.js +91 -27
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +92 -29
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +6 -2
|
@@ -5,3 +5,5 @@ export { default as DenyIcon } from "./deny.svg";
|
|
|
5
5
|
export { default as InfoIcon } from "./info.svg";
|
|
6
6
|
export { default as LoaderIcon } from "./loader.svg";
|
|
7
7
|
export { default as WarningIcon } from "./warning.svg";
|
|
8
|
+
export { default as EyeClosedIcon } from "./eye-closed.svg";
|
|
9
|
+
export { default as EyeOpenIcon } from "./eye-open.svg";
|
|
@@ -1,27 +1,23 @@
|
|
|
1
|
-
import { InputHTMLAttributes, JSX, ReactNode
|
|
2
|
-
type TextFieldAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "size"
|
|
1
|
+
import { InputHTMLAttributes, JSX, ReactNode } from 'react';
|
|
2
|
+
type TextFieldAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "placeholder">;
|
|
3
3
|
export type TextFieldProps = TextFieldAttributes & {
|
|
4
4
|
hint?: string | ReactNode;
|
|
5
|
-
kind?: "single" | "textarea" | "textarea-small";
|
|
6
5
|
label?: ReactNode;
|
|
7
6
|
invalid?: boolean;
|
|
8
7
|
fullWidth?: boolean;
|
|
9
8
|
button?: JSX.Element;
|
|
10
9
|
size?: "default" | "small";
|
|
11
10
|
noPadding?: boolean;
|
|
12
|
-
|
|
13
|
-
uploadLabel?: string;
|
|
11
|
+
floatingLabel?: boolean;
|
|
14
12
|
};
|
|
15
|
-
export declare const TextField: import("react").ForwardRefExoticComponent<
|
|
13
|
+
export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldAttributes & {
|
|
16
14
|
hint?: string | ReactNode;
|
|
17
|
-
kind?: "single" | "textarea" | "textarea-small";
|
|
18
15
|
label?: ReactNode;
|
|
19
16
|
invalid?: boolean;
|
|
20
17
|
fullWidth?: boolean;
|
|
21
18
|
button?: JSX.Element;
|
|
22
19
|
size?: "default" | "small";
|
|
23
20
|
noPadding?: boolean;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
} & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
|
|
21
|
+
floatingLabel?: boolean;
|
|
22
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
27
23
|
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { TextField } from './text-field';
|
|
3
|
+
declare const meta: Meta<typeof TextField>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof TextField>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithValue: Story;
|
|
8
|
+
export declare const Invalid: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
10
|
+
export declare const ReadOnly: Story;
|
|
11
|
+
export declare const FullWidth: Story;
|
|
12
|
+
export declare const Controlled: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PasswordField } from "./password-field";
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { TextFieldProps } from "@/components/atoms/text-field";
|
|
2
|
+
export type PasswordFieldProps = Omit<TextFieldProps, "type" | "button">;
|
|
3
|
+
export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { PasswordField } from './password-field';
|
|
3
|
+
declare const meta: Meta<typeof PasswordField>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof PasswordField>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithValue: Story;
|
|
8
|
+
export declare const Invalid: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
10
|
+
export declare const ReadOnly: Story;
|
|
11
|
+
export declare const FullWidth: Story;
|
|
12
|
+
export declare const Controlled: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ValidatePasswordField } from "./validate-password-field";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
import { PasswordFieldProps } from '../password-field';
|
|
3
|
+
export declare const ValidatePasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & {
|
|
4
|
+
setIsPasswordValid: Dispatch<SetStateAction<boolean>>;
|
|
5
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
package/dist/index.cjs.js
CHANGED
|
@@ -23,72 +23,112 @@ function _interopNamespaceDefault(e) {
|
|
|
23
23
|
|
|
24
24
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
25
|
|
|
26
|
+
var _path$6;
|
|
27
|
+
function _extends$6() { return _extends$6 = 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$6.apply(null, arguments); }
|
|
28
|
+
var SvgCheck = function SvgCheck(props) {
|
|
29
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
30
|
+
width: "1em",
|
|
31
|
+
height: "1em",
|
|
32
|
+
fill: "none",
|
|
33
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
34
|
+
}, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
35
|
+
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",
|
|
36
|
+
fill: "#98989D"
|
|
37
|
+
})));
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
var _path$5;
|
|
41
|
+
function _extends$5() { return _extends$5 = 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$5.apply(null, arguments); }
|
|
42
|
+
var SvgCircleDashed = function SvgCircleDashed(props) {
|
|
43
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
44
|
+
width: "1em",
|
|
45
|
+
height: "1em",
|
|
46
|
+
fill: "none",
|
|
47
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
48
|
+
}, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
49
|
+
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",
|
|
50
|
+
fill: "#98989D"
|
|
51
|
+
})));
|
|
52
|
+
};
|
|
53
|
+
|
|
26
54
|
var _path$4;
|
|
27
55
|
function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
|
|
28
|
-
var
|
|
56
|
+
var SvgDeny = function SvgDeny(props) {
|
|
29
57
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
|
|
30
58
|
width: "1em",
|
|
31
59
|
height: "1em",
|
|
32
60
|
fill: "none",
|
|
33
61
|
xmlns: "http://www.w3.org/2000/svg"
|
|
34
62
|
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
35
|
-
d: "M20.
|
|
63
|
+
d: "M20.5 12C20.5 9.9223 19.7539 8.02087 18.5156 6.54395L6.54395 18.5156C8.02087 19.7539 9.9223 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12ZM3.5 12C3.5 14.0772 4.24566 15.9783 5.4834 17.4551L17.4551 5.4834C15.9783 4.24566 14.0772 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12ZM22 12C22 17.5228 17.5228 22 12 22C9.2388 22 6.73754 20.8802 4.92871 19.0713C3.11989 17.2625 2 14.7612 2 12C2 6.47716 6.47716 2 12 2C14.7612 2 17.2625 3.11989 19.0713 4.92871C20.8802 6.73754 22 9.2388 22 12Z",
|
|
36
64
|
fill: "#98989D"
|
|
37
65
|
})));
|
|
38
66
|
};
|
|
39
67
|
|
|
40
68
|
var _path$3;
|
|
41
69
|
function _extends$3() { return _extends$3 = 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$3.apply(null, arguments); }
|
|
42
|
-
var
|
|
70
|
+
var SvgLoader = function SvgLoader(props) {
|
|
43
71
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
|
|
44
72
|
width: "1em",
|
|
45
73
|
height: "1em",
|
|
46
74
|
fill: "none",
|
|
47
75
|
xmlns: "http://www.w3.org/2000/svg"
|
|
48
76
|
}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
49
|
-
d: "
|
|
77
|
+
d: "M11.25 21.25V17.75C11.25 17.3359 11.5859 17.0002 12 17C12.4142 17 12.75 17.3358 12.75 17.75V21.25C12.75 21.6642 12.4142 22 12 22C11.5859 21.9998 11.25 21.6641 11.25 21.25ZM7.4043 15.5361C7.69718 15.2433 8.17195 15.2433 8.46484 15.5361C8.75773 15.829 8.75774 16.3038 8.46484 16.5967L5.99023 19.0713C5.69734 19.3642 5.22258 19.3642 4.92969 19.0713C4.6368 18.7784 4.63679 18.3036 4.92969 18.0107L7.4043 15.5361ZM15.5361 15.5352C15.829 15.2425 16.3039 15.2423 16.5967 15.5352L19.0713 18.0098C19.3642 18.3027 19.3642 18.7784 19.0713 19.0713C18.7785 19.3638 18.3036 19.3638 18.0107 19.0713L15.5361 16.5957C15.2432 16.3028 15.2432 15.828 15.5361 15.5352ZM6.25 11.251C6.66421 11.251 7 11.5868 7 12.001C6.99985 12.4151 6.66412 12.751 6.25 12.751H2.75C2.33588 12.751 2.00015 12.4151 2 12.001C2 11.5868 2.33579 11.251 2.75 11.251H6.25ZM21.25 11.251C21.6642 11.251 22 11.5868 22 12.001C21.9999 12.4151 21.6641 12.751 21.25 12.751H17.75C17.3359 12.751 17.0001 12.4151 17 12.001C17 11.5868 17.3358 11.251 17.75 11.251H21.25ZM4.92871 4.92871C5.22163 4.63584 5.69737 4.63579 5.99023 4.92871L8.46484 7.4043C8.75731 7.69723 8.75759 8.1721 8.46484 8.46484C8.17193 8.75771 7.69619 8.75776 7.40332 8.46484L4.92871 5.98926C4.63616 5.69641 4.63613 5.22152 4.92871 4.92871ZM18.0107 4.92969C18.3036 4.63679 18.7784 4.6368 19.0713 4.92969C19.3642 5.22258 19.3642 5.69734 19.0713 5.99023L16.5967 8.46484C16.3038 8.75774 15.829 8.75773 15.5361 8.46484C15.2433 8.17195 15.2433 7.69718 15.5361 7.4043L18.0107 4.92969ZM11.25 6.25V2.75C11.25 2.33591 11.586 2.00016 12 2C12.4142 2.00004 12.75 2.33582 12.75 2.75V6.25C12.75 6.66419 12.4142 7 12 7C11.5858 6.99996 11.25 6.66418 11.25 6.25Z",
|
|
50
78
|
fill: "#98989D"
|
|
51
79
|
})));
|
|
52
80
|
};
|
|
53
81
|
|
|
54
82
|
var _path$2;
|
|
55
83
|
function _extends$2() { return _extends$2 = 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$2.apply(null, arguments); }
|
|
56
|
-
var
|
|
84
|
+
var SvgWarning = function SvgWarning(props) {
|
|
57
85
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
58
86
|
width: "1em",
|
|
59
87
|
height: "1em",
|
|
60
88
|
fill: "none",
|
|
61
89
|
xmlns: "http://www.w3.org/2000/svg"
|
|
62
90
|
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
63
|
-
d: "
|
|
91
|
+
d: "M10.4901 2.8437C11.1661 1.6901 12.8335 1.69014 13.5096 2.8437L22.0155 17.3652L22.075 17.4755C22.6455 18.6221 21.8153 19.9997 20.5057 19.9999H3.49494C2.14292 19.9999 1.30087 18.5318 1.9842 17.3652L10.4901 2.8437ZM12.2156 3.60249C12.119 3.43758 11.8806 3.43758 11.784 3.60249L3.27912 18.124C3.18173 18.2906 3.30188 18.4999 3.49494 18.4999H20.5057C20.6985 18.4997 20.8181 18.2896 20.7205 18.123V18.122L12.2156 3.60249ZM11.2498 13.2499V9.74995C11.2498 9.33576 11.5856 8.99998 11.9998 8.99995C12.414 8.99995 12.7498 9.33574 12.7498 9.74995V13.2499C12.7498 13.6641 12.414 13.9999 11.9998 13.9999C11.5857 13.9999 11.2499 13.6641 11.2498 13.2499ZM12.9998 15.7499C12.9998 16.3022 12.5521 16.7499 11.9998 16.7499C11.4822 16.7499 11.0561 16.3566 11.0047 15.8525L10.9998 15.7499L11.0047 15.6474C11.056 15.1432 11.4821 14.75 11.9998 14.7499L12.1024 14.7548C12.6065 14.8061 12.9998 15.2322 12.9998 15.7499Z",
|
|
64
92
|
fill: "#98989D"
|
|
65
93
|
})));
|
|
66
94
|
};
|
|
67
95
|
|
|
68
|
-
var _path$1;
|
|
96
|
+
var _path$1, _path2$1, _path3, _path4;
|
|
69
97
|
function _extends$1() { return _extends$1 = 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$1.apply(null, arguments); }
|
|
70
|
-
var
|
|
98
|
+
var SvgEyeClosed = function SvgEyeClosed(props) {
|
|
71
99
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
72
100
|
width: "1em",
|
|
73
101
|
height: "1em",
|
|
74
102
|
fill: "none",
|
|
75
103
|
xmlns: "http://www.w3.org/2000/svg"
|
|
76
104
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
77
|
-
d: "
|
|
105
|
+
d: "M9.16582 4.42078C13.8206 3.01988 18.8177 5.12744 21.9822 10.4071L22.283 10.9276L22.4578 11.2587C22.5129 11.3768 22.5612 11.5047 22.5906 11.6473C22.6359 11.8681 22.6358 12.1307 22.5906 12.3514V12.3524C22.5318 12.6378 22.399 12.864 22.284 13.0712C21.6809 14.1579 21.0031 15.1203 20.2674 15.9569C19.9939 16.2677 19.5208 16.2984 19.2098 16.0253C18.8988 15.7518 18.868 15.2777 19.1414 14.9667C19.8015 14.2161 20.417 13.3419 20.9715 12.3427H20.9725C21.0425 12.2165 21.0776 12.1518 21.1014 12.1014C21.118 12.066 21.1201 12.0546 21.1209 12.0507L21.1228 12.036C21.1238 12.0259 21.1248 12.0133 21.1248 11.9999C21.1248 11.9865 21.1238 11.9738 21.1228 11.9637C21.122 11.9542 21.1209 11.9491 21.1209 11.9491C21.1202 11.9453 21.1184 11.9335 21.1014 11.8973C21.0775 11.8466 21.0418 11.7818 20.9715 11.6552V11.6561C18.0916 6.46801 13.5809 4.65835 9.59746 5.8573C9.20111 5.97635 8.7834 5.75154 8.66386 5.35535C8.54448 4.95871 8.76918 4.54016 9.16582 4.42078Z",
|
|
106
|
+
fill: "#98989D"
|
|
107
|
+
})), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
108
|
+
d: "M8 12.0004C8 11.0291 8.34764 10.1366 8.92383 9.44372C9.18871 9.12543 9.66108 9.08225 9.97949 9.34704C10.2978 9.61192 10.341 10.0843 10.0762 10.4027C9.71578 10.8362 9.5 11.3924 9.5 12.0004C9.5002 13.3809 10.6194 14.5004 12 14.5004C12.6187 14.5004 13.1835 14.2765 13.6201 13.9047C13.9353 13.6362 14.4081 13.6736 14.6768 13.9886C14.9453 14.3039 14.9079 14.7776 14.5928 15.0463C13.895 15.6406 12.9883 16.0004 12 16.0004C9.79101 16.0004 8.0002 14.2093 8 12.0004Z",
|
|
109
|
+
fill: "#98989D"
|
|
110
|
+
})), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
111
|
+
d: "M5.77575 6.14839C6.10808 5.9013 6.57739 5.9704 6.82458 6.30269C7.07166 6.63502 7.00257 7.10433 6.67028 7.35151C5.31638 8.35871 4.06561 9.78804 3.02868 11.6562C2.95846 11.7828 2.92258 11.8479 2.8988 11.8984C2.88125 11.9357 2.87892 11.9459 2.87829 11.9492C2.8783 11.9492 2.87821 11.9542 2.87731 11.9638C2.87639 11.9739 2.87536 11.9866 2.87536 12C2.87536 12.0131 2.87641 12.0251 2.87731 12.0351C2.87805 12.0431 2.87804 12.0483 2.87829 12.0498V12.0507C2.87893 12.054 2.88136 12.0645 2.8988 12.1015C2.92263 12.1521 2.95835 12.2169 3.02868 12.3437C4.7566 15.4568 7.07667 17.3485 9.48864 18.1093C11.8939 18.8679 14.4579 18.5251 16.7513 17.0488C17.0995 16.8248 17.5633 16.9253 17.7875 17.2734C18.0117 17.6217 17.9111 18.0863 17.5629 18.3105C14.9108 20.0176 11.8859 20.4384 9.03747 19.54C6.19541 18.6435 3.59609 16.4565 1.71716 13.0712C1.60222 12.8641 1.46828 12.638 1.40954 12.3525C1.3641 12.1315 1.36418 11.8683 1.40954 11.6474C1.46824 11.362 1.60132 11.1357 1.71618 10.9287L1.93102 10.5527C3.01817 8.69857 4.32745 7.22577 5.77575 6.14839Z",
|
|
112
|
+
fill: "#98989D"
|
|
113
|
+
})), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
114
|
+
d: "M2.21967 2.21967C2.51256 1.92678 2.98732 1.92678 3.28022 2.21967L21.7802 20.7197C22.0731 21.0126 22.0731 21.4873 21.7802 21.7802C21.4873 22.0731 21.0126 22.0731 20.7197 21.7802L2.21967 3.28022C1.92678 2.98732 1.92678 2.51256 2.21967 2.21967Z",
|
|
78
115
|
fill: "#98989D"
|
|
79
116
|
})));
|
|
80
117
|
};
|
|
81
118
|
|
|
82
|
-
var _path;
|
|
119
|
+
var _path, _path2;
|
|
83
120
|
function _extends() { return _extends = 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.apply(null, arguments); }
|
|
84
|
-
var
|
|
121
|
+
var SvgEyeOpen = function SvgEyeOpen(props) {
|
|
85
122
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
86
123
|
width: "1em",
|
|
87
124
|
height: "1em",
|
|
88
125
|
fill: "none",
|
|
89
126
|
xmlns: "http://www.w3.org/2000/svg"
|
|
90
127
|
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
91
|
-
d: "
|
|
128
|
+
d: "M12.0001 4C16.0105 4.00003 19.9104 6.47732 22.4308 11.1992C22.6966 11.6972 22.6966 12.3028 22.4308 12.8008C19.9104 17.5227 16.0105 20 12.0001 20C7.98972 20 4.08981 17.5227 1.56944 12.8008C1.30365 12.3028 1.3037 11.6973 1.56944 11.1992C4.08981 6.47731 7.98972 3.99997 12.0001 4ZM12.0001 5.5C8.66218 5.49998 5.21336 7.5575 2.89268 11.9053C2.86244 11.962 2.86243 12.038 2.89268 12.0947C5.21336 16.4424 8.66221 18.5 12.0001 18.5C15.338 18.5 18.7869 16.4425 21.1075 12.0947C21.1378 12.0381 21.1378 11.9619 21.1075 11.9053C18.7869 7.55753 15.338 5.50003 12.0001 5.5Z",
|
|
129
|
+
fill: "#98989D"
|
|
130
|
+
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
131
|
+
d: "M14.5 12C14.5 10.6193 13.3807 9.5 12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79089 16 8 14.2091 8 12C8 9.79089 9.79089 8 12 8C14.2091 8 16 9.79089 16 12Z",
|
|
92
132
|
fill: "#98989D"
|
|
93
133
|
})));
|
|
94
134
|
};
|
|
@@ -138,16 +178,16 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
138
178
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
139
179
|
};
|
|
140
180
|
|
|
141
|
-
var style$
|
|
181
|
+
var style$6 = {"root":"stack-module__root__AqSLk"};
|
|
142
182
|
|
|
143
183
|
var Stack = function (_a) {
|
|
144
184
|
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"]);
|
|
145
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
185
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$6.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 })));
|
|
146
186
|
};
|
|
147
187
|
|
|
148
188
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
149
189
|
|
|
150
|
-
var style$
|
|
190
|
+
var style$5 = {"root":"badge-module__root__rXpaz"};
|
|
151
191
|
|
|
152
192
|
var BadgeStatuses = {
|
|
153
193
|
success: "success",
|
|
@@ -166,46 +206,70 @@ var Badge = function (_a) {
|
|
|
166
206
|
default: return jsxRuntime.jsx(SvgCircleDashed, {});
|
|
167
207
|
}
|
|
168
208
|
}, [status]);
|
|
169
|
-
return (jsxRuntime.jsx("label", { className: clsx(baseStyle.root, style$
|
|
209
|
+
return (jsxRuntime.jsx("label", { className: clsx(baseStyle.root, style$5.root), title: text, "data-status": status, "data-full-width": fullWidth, "data-test": dataTest, "data-reverted": reverted, "data-size": size, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [hasIcon && icon, text] }) }));
|
|
170
210
|
};
|
|
171
211
|
|
|
172
|
-
var style$
|
|
212
|
+
var style$4 = {"root":"button-module__root__CDCDX"};
|
|
173
213
|
|
|
174
214
|
var isAnchor = function (props) { return props.href !== undefined; };
|
|
175
215
|
var Button = React.forwardRef(function (_a, ref) {
|
|
176
216
|
var _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, _c = _a.variant, variant = _c === void 0 ? "primary" : _c, _d = _a.size, size = _d === void 0 ? "normal" : _d, _e = _a.isInverted, isInverted = _e === void 0 ? false : _e, props = __rest(_a, ["fullWidth", "variant", "size", "isInverted"]);
|
|
177
|
-
var classes = clsx(style$
|
|
217
|
+
var classes = clsx(style$4.root, props.className);
|
|
178
218
|
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, children: props.children }))));
|
|
179
219
|
});
|
|
180
220
|
Button.displayName = "Button";
|
|
181
221
|
|
|
182
|
-
var style$
|
|
222
|
+
var style$3 = {"hint":"hint-module__hint__0cpje"};
|
|
183
223
|
|
|
184
224
|
var Hint = function (_a) {
|
|
185
225
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
186
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
226
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$3.hint, className), "data-type": kind }, attributes, { children: children })));
|
|
187
227
|
};
|
|
188
228
|
|
|
189
|
-
var style$
|
|
229
|
+
var style$2 = {"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"};
|
|
190
230
|
|
|
191
231
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
192
|
-
var className = _a.className, disabled = _a.disabled, hint = _a.hint, id = _a.id,
|
|
193
|
-
var
|
|
194
|
-
|
|
195
|
-
|
|
232
|
+
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"]);
|
|
233
|
+
var _f = React.useState(false), isFocused = _f[0], setIsFocused = _f[1];
|
|
234
|
+
var _g = React.useState(!!value || !!defaultValue), hasValue = _g[0], setHasValue = _g[1];
|
|
235
|
+
var isLabelFloating = floatingLabel && (isFocused || hasValue);
|
|
236
|
+
var handleFocus = function (e) {
|
|
237
|
+
setIsFocused(true);
|
|
238
|
+
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
|
|
239
|
+
};
|
|
240
|
+
var handleBlur = function (e) {
|
|
241
|
+
setIsFocused(false);
|
|
242
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
243
|
+
};
|
|
244
|
+
var handleChange = function (e) {
|
|
245
|
+
setHasValue(e.target.value.length > 0);
|
|
246
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
247
|
+
};
|
|
248
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$2.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$2.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$2.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$2.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$2.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: ref, type: "text", value: value, defaultValue: defaultValue }, attributes)), button ? button : null] }), hint && jsxRuntime.jsx(Hint, { kind: "error", className: style$2.hint, children: hint })] }) }));
|
|
196
249
|
});
|
|
197
250
|
TextField.displayName = "TextField";
|
|
198
251
|
|
|
199
|
-
var style = {"container":"container-module__container__CAxQw"};
|
|
252
|
+
var style$1 = {"container":"container-module__container__CAxQw"};
|
|
200
253
|
|
|
201
254
|
var Container = function (_a) {
|
|
202
255
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
203
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
256
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$1.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
204
257
|
};
|
|
205
258
|
|
|
259
|
+
var style = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
260
|
+
|
|
261
|
+
var PasswordField = React.forwardRef(function (_a, ref) {
|
|
262
|
+
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
263
|
+
var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
264
|
+
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
|
|
265
|
+
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style.field })));
|
|
266
|
+
});
|
|
267
|
+
PasswordField.displayName = "PasswordField";
|
|
268
|
+
|
|
206
269
|
exports.Badge = Badge;
|
|
207
270
|
exports.Button = Button;
|
|
208
271
|
exports.Container = Container;
|
|
272
|
+
exports.PasswordField = PasswordField;
|
|
209
273
|
exports.Stack = Stack;
|
|
210
274
|
exports.TextField = TextField;
|
|
211
275
|
//# sourceMappingURL=index.cjs.js.map
|