@kaio-xyz/design-system 1.0.37 → 1.0.38
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 +1 -0
- package/dist/components/atoms/clipboard/clipboard.d.ts +7 -0
- package/dist/components/atoms/clipboard/clipboard.stories.d.ts +11 -0
- package/dist/components/atoms/clipboard/index.d.ts +1 -0
- package/dist/index.cjs.js +106 -63
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +107 -65
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -9,3 +9,4 @@ export { default as EyeClosedIcon } from "./eye-closed.svg";
|
|
|
9
9
|
export { default as EyeOpenIcon } from "./eye-open.svg";
|
|
10
10
|
export { default as ChevronGrabberIcon } from "./chevron-grabber.svg";
|
|
11
11
|
export { default as MinusIcon } from "./minus.svg";
|
|
12
|
+
export { default as ClipBoardIcon } from "./clipboard.svg";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { Clipboard } from "./clipboard";
|
|
3
|
+
declare const meta: Meta<typeof Clipboard>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Trimmed: Story;
|
|
8
|
+
export declare const TrimmedCustomLength: Story;
|
|
9
|
+
export declare const ShortValue: Story;
|
|
10
|
+
export declare const LongText: Story;
|
|
11
|
+
export declare const LongUntrimmed: Story;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Clipboard } from "./clipboard";
|
package/dist/index.cjs.js
CHANGED
|
@@ -70,57 +70,57 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
70
70
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
71
71
|
};
|
|
72
72
|
|
|
73
|
-
var _path$
|
|
74
|
-
function _extends$
|
|
73
|
+
var _path$a;
|
|
74
|
+
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); }
|
|
75
75
|
var SvgCheck = function SvgCheck(props) {
|
|
76
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
76
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
|
|
77
77
|
width: "1em",
|
|
78
78
|
height: "1em",
|
|
79
79
|
fill: "none",
|
|
80
80
|
xmlns: "http://www.w3.org/2000/svg"
|
|
81
|
-
}, props), _path$
|
|
81
|
+
}, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
|
|
82
82
|
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",
|
|
83
83
|
fill: "#98989D"
|
|
84
84
|
})));
|
|
85
85
|
};
|
|
86
86
|
|
|
87
|
-
var _path$
|
|
88
|
-
function _extends$
|
|
87
|
+
var _path$9;
|
|
88
|
+
function _extends$9() { return _extends$9 = 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$9.apply(null, arguments); }
|
|
89
89
|
var SvgCircleDashed = function SvgCircleDashed(props) {
|
|
90
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
90
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
|
|
91
91
|
width: "1em",
|
|
92
92
|
height: "1em",
|
|
93
93
|
fill: "none",
|
|
94
94
|
xmlns: "http://www.w3.org/2000/svg"
|
|
95
|
-
}, props), _path$
|
|
95
|
+
}, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
96
96
|
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",
|
|
97
97
|
fill: "#98989D"
|
|
98
98
|
})));
|
|
99
99
|
};
|
|
100
100
|
|
|
101
|
-
var _path$
|
|
102
|
-
function _extends$
|
|
101
|
+
var _path$8;
|
|
102
|
+
function _extends$8() { return _extends$8 = 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$8.apply(null, arguments); }
|
|
103
103
|
var SvgDeny = function SvgDeny(props) {
|
|
104
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
104
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
|
|
105
105
|
width: "1em",
|
|
106
106
|
height: "1em",
|
|
107
107
|
fill: "none",
|
|
108
108
|
xmlns: "http://www.w3.org/2000/svg"
|
|
109
|
-
}, props), _path$
|
|
109
|
+
}, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
110
110
|
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",
|
|
111
111
|
fill: "#98989D"
|
|
112
112
|
})));
|
|
113
113
|
};
|
|
114
114
|
|
|
115
|
-
var _path$
|
|
116
|
-
function _extends$
|
|
115
|
+
var _path$7, _path2$2, _path3$1;
|
|
116
|
+
function _extends$7() { return _extends$7 = 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$7.apply(null, arguments); }
|
|
117
117
|
var SvgInfo = function SvgInfo(props) {
|
|
118
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
118
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
|
|
119
119
|
width: "1em",
|
|
120
120
|
height: "1em",
|
|
121
121
|
fill: "none",
|
|
122
122
|
xmlns: "http://www.w3.org/2000/svg"
|
|
123
|
-
}, props), _path$
|
|
123
|
+
}, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
124
124
|
d: "M20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12ZM11.25 16.25V11.75H10.75C10.3358 11.75 10 11.4142 10 11C10 10.5858 10.3358 10.25 10.75 10.25H12C12.4142 10.25 12.75 10.5858 12.75 11V16.25C12.75 16.6642 12.4142 17 12 17C11.5858 17 11.25 16.6642 11.25 16.25ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47716 6.47716 2 12 2C17.5228 2 22 6.47715 22 12Z",
|
|
125
125
|
fill: "#98989D"
|
|
126
126
|
})), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -132,43 +132,43 @@ var SvgInfo = function SvgInfo(props) {
|
|
|
132
132
|
})));
|
|
133
133
|
};
|
|
134
134
|
|
|
135
|
-
var _path$
|
|
136
|
-
function _extends$
|
|
135
|
+
var _path$6;
|
|
136
|
+
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); }
|
|
137
137
|
var SvgLoader = function SvgLoader(props) {
|
|
138
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
138
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
|
|
139
139
|
width: "1em",
|
|
140
140
|
height: "1em",
|
|
141
141
|
fill: "none",
|
|
142
142
|
xmlns: "http://www.w3.org/2000/svg"
|
|
143
|
-
}, props), _path$
|
|
143
|
+
}, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
144
144
|
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",
|
|
145
145
|
fill: "#98989D"
|
|
146
146
|
})));
|
|
147
147
|
};
|
|
148
148
|
|
|
149
|
-
var _path$
|
|
150
|
-
function _extends$
|
|
149
|
+
var _path$5;
|
|
150
|
+
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); }
|
|
151
151
|
var SvgWarning = function SvgWarning(props) {
|
|
152
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
152
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
|
|
153
153
|
width: "1em",
|
|
154
154
|
height: "1em",
|
|
155
155
|
fill: "none",
|
|
156
156
|
xmlns: "http://www.w3.org/2000/svg"
|
|
157
|
-
}, props), _path$
|
|
157
|
+
}, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
158
158
|
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",
|
|
159
159
|
fill: "#98989D"
|
|
160
160
|
})));
|
|
161
161
|
};
|
|
162
162
|
|
|
163
|
-
var _path$
|
|
164
|
-
function _extends$
|
|
163
|
+
var _path$4, _path2$1, _path3, _path4;
|
|
164
|
+
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); }
|
|
165
165
|
var SvgEyeClosed = function SvgEyeClosed(props) {
|
|
166
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
166
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
|
|
167
167
|
width: "1em",
|
|
168
168
|
height: "1em",
|
|
169
169
|
fill: "none",
|
|
170
170
|
xmlns: "http://www.w3.org/2000/svg"
|
|
171
|
-
}, props), _path$
|
|
171
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
172
172
|
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",
|
|
173
173
|
fill: "#98989D"
|
|
174
174
|
})), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -183,15 +183,15 @@ var SvgEyeClosed = function SvgEyeClosed(props) {
|
|
|
183
183
|
})));
|
|
184
184
|
};
|
|
185
185
|
|
|
186
|
-
var _path$
|
|
187
|
-
function _extends$
|
|
186
|
+
var _path$3, _path2;
|
|
187
|
+
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); }
|
|
188
188
|
var SvgEyeOpen = function SvgEyeOpen(props) {
|
|
189
|
-
return /*#__PURE__*/React__namespace.createElement("svg", _extends$
|
|
189
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
|
|
190
190
|
width: "1em",
|
|
191
191
|
height: "1em",
|
|
192
192
|
fill: "none",
|
|
193
193
|
xmlns: "http://www.w3.org/2000/svg"
|
|
194
|
-
}, props), _path$
|
|
194
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
195
195
|
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",
|
|
196
196
|
fill: "#98989D"
|
|
197
197
|
})), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -200,44 +200,58 @@ var SvgEyeOpen = function SvgEyeOpen(props) {
|
|
|
200
200
|
})));
|
|
201
201
|
};
|
|
202
202
|
|
|
203
|
+
var _path$2;
|
|
204
|
+
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); }
|
|
205
|
+
var SvgChevronGrabber = function SvgChevronGrabber(props) {
|
|
206
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
|
|
207
|
+
width: "1em",
|
|
208
|
+
height: "1em",
|
|
209
|
+
fill: "none",
|
|
210
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
211
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
212
|
+
d: "M15.4696 14.4696C15.7625 14.1767 16.2373 14.1767 16.5302 14.4696C16.823 14.7625 16.8231 15.2373 16.5302 15.5302L13.0605 18.9999C12.4747 19.5856 11.5251 19.5856 10.9394 18.9999L7.46965 15.5302C7.17677 15.2373 7.1768 14.7625 7.46965 14.4696C7.76254 14.1767 8.2373 14.1767 8.53019 14.4696L11.9999 17.9393L15.4696 14.4696ZM10.9394 4.99989C11.5252 4.4141 12.4747 4.4141 13.0605 4.99989L16.5302 8.46962C16.823 8.76252 16.8231 9.23729 16.5302 9.53017C16.2373 9.82299 15.7625 9.82299 15.4696 9.53017L11.9999 6.06044L8.53019 9.53017C8.23731 9.82299 7.76252 9.82299 7.46965 9.53017C7.17677 9.23729 7.17681 8.76252 7.46965 8.46962L10.9394 4.99989Z",
|
|
213
|
+
fill: "#98989D"
|
|
214
|
+
})));
|
|
215
|
+
};
|
|
216
|
+
|
|
203
217
|
var _path$1;
|
|
204
218
|
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); }
|
|
205
|
-
var
|
|
219
|
+
var SvgMinus = function SvgMinus(props) {
|
|
206
220
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
207
221
|
width: "1em",
|
|
208
222
|
height: "1em",
|
|
209
223
|
fill: "none",
|
|
210
224
|
xmlns: "http://www.w3.org/2000/svg"
|
|
211
225
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
212
|
-
d: "
|
|
226
|
+
d: "M20.25 11.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H3.75C3.33579 12.75 3 12.4142 3 12C3 11.5858 3.33579 11.25 3.75 11.25H20.25Z",
|
|
213
227
|
fill: "#98989D"
|
|
214
228
|
})));
|
|
215
229
|
};
|
|
216
230
|
|
|
217
231
|
var _path;
|
|
218
232
|
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); }
|
|
219
|
-
var
|
|
233
|
+
var SvgClipboard = function SvgClipboard(props) {
|
|
220
234
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
221
235
|
width: "1em",
|
|
222
236
|
height: "1em",
|
|
223
237
|
fill: "none",
|
|
224
238
|
xmlns: "http://www.w3.org/2000/svg"
|
|
225
239
|
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
226
|
-
d: "
|
|
240
|
+
d: "M18.5 5.75C18.5 5.61192 18.3881 5.5 18.25 5.5H16V6.25C16 7.21648 15.2165 8 14.25 8H9.75C8.78351 8 8 7.21649 8 6.25V5.5H5.75C5.61193 5.5 5.5 5.61193 5.5 5.75V20.25C5.5 20.3881 5.61192 20.5 5.75 20.5H18.25C18.3881 20.5 18.5 20.3881 18.5 20.25V5.75ZM14.5 3.75C14.5 3.61192 14.3881 3.5 14.25 3.5H9.75C9.61193 3.5 9.5 3.61193 9.5 3.75V6.25C9.5 6.38807 9.61193 6.5 9.75 6.5H14.25C14.3881 6.5 14.5 6.38808 14.5 6.25V3.75ZM16 4H18.25C19.2165 4 20 4.78352 20 5.75V20.25C20 21.2165 19.2165 22 18.25 22H5.75C4.7835 22 4 21.2165 4 20.25V5.75C4 4.78351 4.78351 4 5.75 4H8V3.75C8 2.78351 8.78351 2 9.75 2H14.25C15.2165 2 16 2.78352 16 3.75V4Z",
|
|
227
241
|
fill: "#98989D"
|
|
228
242
|
})));
|
|
229
243
|
};
|
|
230
244
|
|
|
231
|
-
var style$
|
|
245
|
+
var style$d = {"root":"stack-module__root__AqSLk"};
|
|
232
246
|
|
|
233
247
|
var Stack = function (_a) {
|
|
234
248
|
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"]);
|
|
235
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
249
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$d.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 })));
|
|
236
250
|
};
|
|
237
251
|
|
|
238
252
|
var baseStyle = {"root":"badge-base-module__root__oUZlm"};
|
|
239
253
|
|
|
240
|
-
var style$
|
|
254
|
+
var style$c = {"root":"badge-module__root__rXpaz"};
|
|
241
255
|
|
|
242
256
|
var BadgeStatuses = {
|
|
243
257
|
success: "success",
|
|
@@ -256,16 +270,16 @@ var Badge = function (_a) {
|
|
|
256
270
|
default: return jsxRuntime.jsx(SvgCircleDashed, {});
|
|
257
271
|
}
|
|
258
272
|
}, [status]);
|
|
259
|
-
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$
|
|
273
|
+
return (jsxRuntime.jsx("label", __assign({ className: clsx(baseStyle.root, style$c.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] }) })));
|
|
260
274
|
};
|
|
261
275
|
|
|
262
|
-
var style$
|
|
276
|
+
var style$b = {"root":"button-module__root__CDCDX"};
|
|
263
277
|
|
|
264
|
-
var style$
|
|
278
|
+
var style$a = {"spinner":"spinner-module__spinner__VzZj2"};
|
|
265
279
|
|
|
266
280
|
var Spinner = function (_a) {
|
|
267
281
|
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, rest = __rest(_a, ["size", "duration", "className"]);
|
|
268
|
-
return (jsxRuntime.jsx("div", { className: clsx(style$
|
|
282
|
+
return (jsxRuntime.jsx("div", { className: clsx(style$a.spinner, className), style: {
|
|
269
283
|
width: size,
|
|
270
284
|
height: size,
|
|
271
285
|
animationDuration: "".concat(duration, "s"),
|
|
@@ -279,19 +293,19 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
279
293
|
var baseIcon = Icon && jsxRuntime.jsx(Icon, __assign({}, iconProps));
|
|
280
294
|
var loadingIcon = isLoading && jsxRuntime.jsx(Spinner, __assign({ size: iconSize }, iconProps));
|
|
281
295
|
var iconChild = loadingIcon || baseIcon || null;
|
|
282
|
-
var classes = clsx(style$
|
|
296
|
+
var classes = clsx(style$b.root, props.className);
|
|
283
297
|
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] }) }))));
|
|
284
298
|
});
|
|
285
299
|
Button.displayName = "Button";
|
|
286
300
|
|
|
287
|
-
var style$
|
|
301
|
+
var style$9 = {"hint":"hint-module__hint__0cpje","children":"hint-module__children__GSZxg"};
|
|
288
302
|
|
|
289
303
|
var Hint = function (_a) {
|
|
290
304
|
var children = _a.children, className = _a.className, _b = _a.kind, kind = _b === void 0 ? "info" : _b, attributes = __rest(_a, ["children", "className", "kind"]);
|
|
291
|
-
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$
|
|
305
|
+
return (jsxRuntime.jsxs(Stack, __assign({ space: "xs", position: "horizontal", className: clsx(style$9.hint, className), "data-type": kind }, attributes, { children: [jsxRuntime.jsx(SvgInfo, {}), jsxRuntime.jsx("span", { className: style$9.children, children: children })] })));
|
|
292
306
|
};
|
|
293
307
|
|
|
294
|
-
var style$
|
|
308
|
+
var style$8 = {"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"};
|
|
295
309
|
|
|
296
310
|
var TextField = React.forwardRef(function (_a, ref) {
|
|
297
311
|
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"]);
|
|
@@ -328,28 +342,28 @@ var TextField = React.forwardRef(function (_a, ref) {
|
|
|
328
342
|
setHasValue(e.target.value.length > 0);
|
|
329
343
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
330
344
|
};
|
|
331
|
-
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$
|
|
345
|
+
return (jsxRuntime.jsx("fieldset", { "aria-disabled": disabled, disabled: disabled, className: clsx(style$8.textField, className), "data-no-padding": noPadding, "data-full-width": fullWidth, children: jsxRuntime.jsxs("div", { className: style$8.container, "data-has-label": !!label, "data-has-hint": !!hint, "data-has-button": !!button, "data-floating-label": floatingLabel, children: [label && (jsxRuntime.jsx("label", { className: style$8.label, htmlFor: id, "data-floating": floatingLabel, "data-active": isLabelFloating, children: label })), jsxRuntime.jsxs("div", { className: style$8.fieldWrapper, children: [jsxRuntime.jsx("input", __assign({ "aria-readonly": readOnly, className: style$8.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$8.hint, children: hint })] }) }));
|
|
332
346
|
});
|
|
333
347
|
TextField.displayName = "TextField";
|
|
334
348
|
|
|
335
|
-
var style$
|
|
349
|
+
var style$7 = {"container":"container-module__container__CAxQw"};
|
|
336
350
|
|
|
337
351
|
var Container = function (_a) {
|
|
338
352
|
var children = _a.children, className = _a.className, size = _a.size, noPadding = _a.noPadding, attributes = __rest(_a, ["children", "className", "size", "noPadding"]);
|
|
339
|
-
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$
|
|
353
|
+
return (jsxRuntime.jsx("div", __assign({ className: clsx(style$7.container, className) }, size ? { "data-size": size } : {}, { "data-nopadding": noPadding }, attributes, { children: children })));
|
|
340
354
|
};
|
|
341
355
|
|
|
342
|
-
var style$
|
|
356
|
+
var style$6 = {"field":"password-field-module__field__-sFqA","button":"password-field-module__button__FtG9V"};
|
|
343
357
|
|
|
344
358
|
var PasswordField = React.forwardRef(function (_a, ref) {
|
|
345
359
|
var disabled = _a.disabled, rest = __rest(_a, ["disabled"]);
|
|
346
360
|
var _b = React.useState(false), isPasswordVisible = _b[0], setIsPasswordVisible = _b[1];
|
|
347
|
-
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$
|
|
348
|
-
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$
|
|
361
|
+
var button = (jsxRuntime.jsx("button", { onClick: function () { return setIsPasswordVisible(function (prev) { return !prev; }); }, type: "button", disabled: disabled, className: style$6.button, children: isPasswordVisible ? jsxRuntime.jsx(SvgEyeOpen, {}) : jsxRuntime.jsx(SvgEyeClosed, {}) }));
|
|
362
|
+
return (jsxRuntime.jsx(TextField, __assign({ disabled: disabled }, rest, { ref: ref, type: isPasswordVisible ? "text" : "password", button: button, className: style$6.field })));
|
|
349
363
|
});
|
|
350
364
|
PasswordField.displayName = "PasswordField";
|
|
351
365
|
|
|
352
|
-
var style$
|
|
366
|
+
var style$5 = {"validator":"validate-password-field-module__validator__Do-6w"};
|
|
353
367
|
|
|
354
368
|
var rules = {
|
|
355
369
|
length: /^.{8,}$/,
|
|
@@ -374,19 +388,19 @@ var ValidatePasswordField = React.forwardRef(function (_a, ref) {
|
|
|
374
388
|
React.useEffect(function () {
|
|
375
389
|
setIsPasswordValid === null || setIsPasswordValid === void 0 ? void 0 : setIsPasswordValid(isLenghtCheckOk && isCaseCheckOk && isNumberCheckOk && isSpecialCheckOk);
|
|
376
390
|
}, [isLenghtCheckOk, isCaseCheckOk, isNumberCheckOk, isSpecialCheckOk, setIsPasswordValid]);
|
|
377
|
-
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$
|
|
391
|
+
var getValidator = function (isCheckOk, label) { return (jsxRuntime.jsxs(Stack, { position: "horizontal", className: style$5.validator, "data-is-valid": isCheckOk, children: [isCheckOk ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgCircleDashed, {}), jsxRuntime.jsx("p", { children: label })] })); };
|
|
378
392
|
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: @ $ ! % * ? & _ #)")] })] }));
|
|
379
393
|
});
|
|
380
394
|
ValidatePasswordField.displayName = "ValidatePasswordField";
|
|
381
395
|
|
|
382
|
-
var style$
|
|
396
|
+
var style$4 = {"root":"label-module__root__34bJr"};
|
|
383
397
|
|
|
384
398
|
var Label = function (_a) {
|
|
385
399
|
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;
|
|
386
|
-
return (jsxRuntime.jsx("label", { className: clsx(style$
|
|
400
|
+
return (jsxRuntime.jsx("label", { className: clsx(style$4.root, className), htmlFor: id, "data-margin-bottom": hasMargin, "data-half-margin-bottom": hasHalfMargin, "data-has-cursor-pointer": hasCursorPointer, children: label }));
|
|
387
401
|
};
|
|
388
402
|
|
|
389
|
-
var style$
|
|
403
|
+
var style$3 = {"label":"select-module__label__EWUYF","selector":"select-module__selector__55oxp","hint":"select-module__hint__SPtu-"};
|
|
390
404
|
|
|
391
405
|
var IconAndLabel = function (_a) {
|
|
392
406
|
var children = _a.children, Icon = _a.icon;
|
|
@@ -407,7 +421,7 @@ var CustomSingleValue = function (_a) {
|
|
|
407
421
|
};
|
|
408
422
|
var Select = function (_a) {
|
|
409
423
|
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"]);
|
|
410
|
-
return (jsxRuntime.jsxs("div", { className: clsx(style$
|
|
424
|
+
return (jsxRuntime.jsxs("div", { className: clsx(style$3.root, className), children: [label && jsxRuntime.jsx(Label, { id: id, label: label, className: style$3.label }), jsxRuntime.jsxs("div", { "data-test": dataTest, className: style$3.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$3.hint, children: error })] })] }));
|
|
411
425
|
};
|
|
412
426
|
Select.displayName = "Select";
|
|
413
427
|
|
|
@@ -420,14 +434,14 @@ var FormSelect = function (_a) {
|
|
|
420
434
|
};
|
|
421
435
|
FormSelect.displayName = "FormSelect";
|
|
422
436
|
|
|
423
|
-
var style$
|
|
437
|
+
var style$2 = {"root":"loader-module__root__qnInQ"};
|
|
424
438
|
|
|
425
439
|
var Loader = function (_a) {
|
|
426
440
|
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;
|
|
427
|
-
return (jsxRuntime.jsx("div", { className: style$
|
|
441
|
+
return (jsxRuntime.jsx("div", { className: style$2.root, "data-full-page": fullPage, "data-is-light-overlay": isLightOverlay, children: jsxRuntime.jsxs(Stack, { dataAlignItems: "center", children: [jsxRuntime.jsx(Spinner, { size: 50 }), text && jsxRuntime.jsx("p", { children: text }), children] }) }));
|
|
428
442
|
};
|
|
429
443
|
|
|
430
|
-
var style = {"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
|
+
var style$1 = {"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"};
|
|
431
445
|
|
|
432
446
|
var Checkbox = function (_a) {
|
|
433
447
|
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"]);
|
|
@@ -440,13 +454,42 @@ var Checkbox = function (_a) {
|
|
|
440
454
|
var dynamicStyle = {
|
|
441
455
|
"--vAlign": verticalAlign,
|
|
442
456
|
};
|
|
443
|
-
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style.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.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style.label, children: label })] }));
|
|
457
|
+
return (jsxRuntime.jsxs("label", { style: dynamicStyle, className: clsx(style$1.root, className), "data-disabled": disabled, "data-size": size, "data-variant": variant, children: [jsxRuntime.jsxs("span", { className: style$1.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$1.customCheckbox, "aria-hidden": "true", children: [checked && !indeterminate && (jsxRuntime.jsx(SvgCheck, { className: style$1.icon })), indeterminate && (jsxRuntime.jsx(SvgMinus, { className: style$1.icon }))] })] }), label && jsxRuntime.jsx("span", { className: style$1.label, children: label })] }));
|
|
444
458
|
};
|
|
445
459
|
Checkbox.displayName = "Checkbox";
|
|
446
460
|
|
|
461
|
+
var style = {"root":"clipboard-module__root__wVZhy"};
|
|
462
|
+
|
|
463
|
+
var trimString = function (str, noOfChars) {
|
|
464
|
+
if (noOfChars === void 0) { noOfChars = 4; }
|
|
465
|
+
var minLength = noOfChars * 2 + 3;
|
|
466
|
+
if (str.length <= minLength)
|
|
467
|
+
return str;
|
|
468
|
+
return "".concat(str.slice(0, noOfChars), "...").concat(str.slice(-noOfChars));
|
|
469
|
+
};
|
|
470
|
+
var Clipboard = function (_a) {
|
|
471
|
+
var value = _a.value, _b = _a.trim, trim = _b === void 0 ? false : _b, _c = _a.trimLength, trimLength = _c === void 0 ? 4 : _c;
|
|
472
|
+
var _d = React.useState(false), isCopied = _d[0], setIsCopied = _d[1];
|
|
473
|
+
var _e = React.useState(false), isShowingCopy = _e[0], setIsShowingCopy = _e[1];
|
|
474
|
+
var _f = React.useState(false); _f[0]; _f[1];
|
|
475
|
+
var displayValue = trim ? trimString(value, trimLength) : value;
|
|
476
|
+
var handleClick = React.useCallback(function () {
|
|
477
|
+
navigator.clipboard.writeText(value);
|
|
478
|
+
setIsCopied(true);
|
|
479
|
+
setIsShowingCopy(true);
|
|
480
|
+
setTimeout(function () {
|
|
481
|
+
setIsShowingCopy(false);
|
|
482
|
+
}, 2000);
|
|
483
|
+
}, [value]);
|
|
484
|
+
var text = isShowingCopy ? 'Copied!' : displayValue;
|
|
485
|
+
var icon = isShowingCopy ? jsxRuntime.jsx(SvgCheck, {}) : jsxRuntime.jsx(SvgClipboard, {});
|
|
486
|
+
return (jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: style.root, "data-is-copied": isCopied, "data-is-showing-copy": isShowingCopy, children: jsxRuntime.jsxs(Stack, { position: "horizontal", children: [jsxRuntime.jsx("span", { children: text }), icon] }) }));
|
|
487
|
+
};
|
|
488
|
+
|
|
447
489
|
exports.Badge = Badge;
|
|
448
490
|
exports.Button = Button;
|
|
449
491
|
exports.Checkbox = Checkbox;
|
|
492
|
+
exports.Clipboard = Clipboard;
|
|
450
493
|
exports.Container = Container;
|
|
451
494
|
exports.FormSelect = FormSelect;
|
|
452
495
|
exports.Loader = Loader;
|