@code0-tech/pictor 0.1.0 → 0.2.0

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.
Files changed (26) hide show
  1. package/dist/cjs/components/FontSizes/Text.d.ts +4 -4
  2. package/dist/cjs/components/alert/Alert.d.ts +2 -5
  3. package/dist/cjs/components/badge/Badge.d.ts +3 -3
  4. package/dist/cjs/components/button/Button.d.ts +4 -4
  5. package/dist/cjs/components/button-group/ButtonGroup.d.ts +2 -1
  6. package/dist/cjs/components/card/Card.d.ts +4 -4
  7. package/dist/cjs/components/col/Col.d.ts +3 -2
  8. package/dist/cjs/components/container/Container.d.ts +3 -2
  9. package/dist/cjs/components/row/Row.d.ts +3 -2
  10. package/dist/cjs/index.js +148 -75
  11. package/dist/cjs/utils/types.d.ts +52 -2
  12. package/dist/cjs/utils/utils.d.ts +3 -1
  13. package/dist/esm/components/FontSizes/Text.d.ts +4 -4
  14. package/dist/esm/components/alert/Alert.d.ts +2 -5
  15. package/dist/esm/components/badge/Badge.d.ts +3 -3
  16. package/dist/esm/components/button/Button.d.ts +4 -4
  17. package/dist/esm/components/button-group/ButtonGroup.d.ts +2 -1
  18. package/dist/esm/components/card/Card.d.ts +4 -4
  19. package/dist/esm/components/col/Col.d.ts +3 -2
  20. package/dist/esm/components/container/Container.d.ts +3 -2
  21. package/dist/esm/components/row/Row.d.ts +3 -2
  22. package/dist/esm/index.js +148 -75
  23. package/dist/esm/utils/types.d.ts +52 -2
  24. package/dist/esm/utils/utils.d.ts +3 -1
  25. package/dist/index.d.ts +64 -14
  26. package/package.json +2 -1
package/dist/cjs/components/FontSizes/Text.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import React, { HTMLProps } from "react";
2
- import { Size } from "../../utils/types";
1
+ import React from "react";
2
+ import { Code0Component, Code0Sizes } from "../../utils/types";
3
3
  import "./Text.style.scss";
4
- export interface FontType extends Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "size"> {
4
+ export interface FontType extends Omit<Omit<Code0Component<HTMLSpanElement>, "children">, "size"> {
5
5
  children: string;
6
- size: Size;
6
+ size: Code0Sizes;
7
7
  hierarchy?: "primary" | "secondary" | "tertiary";
8
8
  }
9
9
  declare const Text: React.FC<FontType>;
package/dist/cjs/components/alert/Alert.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { ReactNode } from "react";
2
2
  import "./Alert.style.scss";
3
- import { Color } from "../../utils/types";
4
- export interface AlertType {
3
+ import { Code0Component, Color } from "../../utils/types";
4
+ export interface AlertType extends Omit<Code0Component<HTMLDivElement>, "title"> {
5
5
  children?: ReactNode | ReactNode[];
6
6
  title: ReactNode;
7
7
  color?: Color;
@@ -10,9 +10,6 @@ export interface AlertType {
10
10
  onClose?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
11
11
  }
12
12
  declare const Alert: React.FC<AlertType>;
13
- export interface AlertHeadingType {
14
- children: ReactNode;
15
- }
16
13
  export interface AlertIconType {
17
14
  color: Color;
18
15
  }
package/dist/cjs/components/badge/Badge.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import React, { HTMLProps } from "react";
1
+ import React from "react";
2
2
  import "./Badge.style.scss";
3
- import { Color } from "../../utils/types";
4
- export interface BadgeType extends HTMLProps<HTMLSpanElement> {
3
+ import { Code0Component, Color } from "../../utils/types";
4
+ export interface BadgeType extends Code0Component<HTMLSpanElement> {
5
5
  children: string;
6
6
  color?: Color;
7
7
  }
package/dist/cjs/components/button/Button.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import "./Button.style.scss";
2
- import React, { AnchorHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
3
- import { Color } from "../../utils/types";
4
- export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
2
+ import React, { ReactNode } from "react";
3
+ import { Code0Component, Color } from "../../utils/types";
4
+ export interface ButtonType extends Code0Component<HTMLAnchorElement> {
5
5
  children: ReactNode | ReactNode[];
6
6
  color?: Color;
7
7
  variant?: "none" | "normal" | "outlined" | "filled";
8
8
  active?: boolean;
9
9
  disabled?: boolean;
10
10
  }
11
- export interface ButtonIconType {
11
+ export interface ButtonIconType extends Code0Component<HTMLSpanElement> {
12
12
  children: ReactNode;
13
13
  }
14
14
  declare const _default: React.FC<ButtonType> & {
package/dist/cjs/components/button-group/ButtonGroup.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React, { ReactElement } from "react";
2
2
  import { ButtonType } from "../button/Button";
3
3
  import "./ButtonGroup.style.scss";
4
- export interface ButtonGroupType {
4
+ import { Code0Component } from "../../utils/types";
5
+ export interface ButtonGroupType extends Code0Component<HTMLDivElement> {
5
6
  children: ReactElement<ButtonType>[];
6
7
  }
7
8
  declare const ButtonGroup: React.FC<ButtonGroupType>;
package/dist/cjs/components/card/Card.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import React, { HTMLProps, ReactNode } from "react";
1
+ import React, { ReactNode } from "react";
2
2
  import "./Card.style.scss";
3
- import { Color } from "../../utils/types";
4
- export interface CardType extends HTMLProps<HTMLDivElement> {
3
+ import { Code0Component, Color } from "../../utils/types";
4
+ export interface CardType extends Code0Component<HTMLDivElement> {
5
5
  children: ReactNode | ReactNode[];
6
6
  color?: Color;
7
7
  variant?: "none" | "normal" | "outlined" | "filled";
@@ -9,7 +9,7 @@ export interface CardType extends HTMLProps<HTMLDivElement> {
9
9
  gradientPosition?: "top-left" | "top-right" | "bottom-right" | "bottom-left";
10
10
  outline?: boolean;
11
11
  }
12
- export interface SectionType {
12
+ export interface SectionType extends Code0Component<HTMLDivElement> {
13
13
  children: ReactNode | ReactNode[];
14
14
  image?: boolean;
15
15
  border?: boolean;
package/dist/cjs/components/col/Col.d.ts CHANGED
@@ -1,7 +1,8 @@
1
- import React, { HTMLProps, ReactNode } from "react";
1
+ import React, { ReactNode } from "react";
2
2
  import "./Col.style.scss";
3
+ import { Code0Component } from "../../utils/types";
3
4
  export type ColBreakPointRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
4
- export interface ColType extends HTMLProps<HTMLDivElement> {
5
+ export interface ColType extends Code0Component<HTMLDivElement> {
5
6
  children: ReactNode | ReactNode[];
6
7
  xs?: ColBreakPointRange;
7
8
  sm?: ColBreakPointRange;
package/dist/cjs/components/container/Container.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import React, { HTMLProps, ReactNode } from "react";
1
+ import React, { ReactNode } from "react";
2
2
  import "./Container.style.scss";
3
- export interface ContainerType extends HTMLProps<HTMLDivElement> {
3
+ import { Code0Component } from "../../utils/types";
4
+ export interface ContainerType extends Code0Component<HTMLDivElement> {
4
5
  children: ReactNode | ReactNode[];
5
6
  }
6
7
  declare const Container: React.FC<ContainerType>;
package/dist/cjs/components/row/Row.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import React, { HTMLProps, ReactNode } from "react";
1
+ import React, { ReactNode } from "react";
2
2
  import "./Row.style.scss";
3
- export interface RowType extends HTMLProps<HTMLDivElement> {
3
+ import { Code0Component } from "../../utils/types";
4
+ export interface RowType extends Code0Component<HTMLDivElement> {
4
5
  children: ReactNode | ReactNode[];
5
6
  }
6
7
  declare const Row: React.FC<RowType>;
package/dist/cjs/index.js CHANGED
@@ -10,6 +10,40 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
  var $k7QOs$reactdom__default = /*#__PURE__*/_interopDefaultLegacy($k7QOs$reactdom);
12
12
 
13
+ /******************************************************************************
14
+ Copyright (c) Microsoft Corporation.
15
+
16
+ Permission to use, copy, modify, and/or distribute this software for any
17
+ purpose with or without fee is hereby granted.
18
+
19
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
20
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
21
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
22
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
23
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
24
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
25
+ PERFORMANCE OF THIS SOFTWARE.
26
+ ***************************************************************************** */
27
+
28
+ function __rest(s, e) {
29
+ var t = {};
30
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
31
+ t[p] = s[p];
32
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
33
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
34
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
35
+ t[p[i]] = s[p[i]];
36
+ }
37
+ return t;
38
+ }
39
+
40
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
41
+ var e = new Error(message);
42
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
43
+ };
44
+
45
+ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
46
+
13
47
  var propTypes = {exports: {}};
14
48
 
15
49
  var reactIs = {exports: {}};
@@ -1279,72 +1313,66 @@ function styleInject(css, ref) {
1279
1313
  var css_248z$f = ".alert {\n background: #1c1a2c;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n padding: 0.5rem;\n margin-bottom: 1rem;\n}\n.alert__heading {\n font-weight: 500;\n}\n.alert__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.alert__content {\n margin: 0.5rem -0.5rem -0.5rem -0.5rem;\n padding: 0.5rem;\n}\n.alert__header-wrapper {\n display: flex;\n align-items: center;\n}\n.alert__icon {\n color: rgba(255, 255, 255, 0.5);\n width: 1.25rem;\n height: 1.25rem;\n margin-right: 0.5rem;\n}\n.alert__icon > * {\n width: 1.25rem;\n height: 1.25rem;\n}\n.alert__dismissible {\n background: #1c1a2c;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n width: 1rem;\n height: 1rem;\n padding: 0.25rem;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.alert__dismissible:active, .alert__dismissible--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.alert__dismissible:hover, .alert__dismissible:active, .alert__dismissible--active, .alert__dismissible:focus, .alert__dismissible:focus-visible {\n background: #353343;\n outline: none;\n}\n.alert__dismissible > * {\n width: 1rem;\n height: 1rem;\n}\n\n.alert--primary {\n background: #030014;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--primary .alert__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n.alert--primary .alert__content {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.alert--primary .alert__dismissible {\n background: #030014;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--primary .alert__dismissible:active, .alert--primary .alert__dismissible--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.alert--primary .alert__dismissible:hover, .alert--primary .alert__dismissible:active, .alert--primary .alert__dismissible--active, .alert--primary .alert__dismissible:focus, .alert--primary .alert__dismissible:focus-visible {\n background: #1c1a2c;\n outline: none;\n}\n\n.alert--secondary {\n background: #1c1a2c;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--secondary .alert__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n.alert--secondary .alert__content {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.alert--secondary .alert__dismissible {\n background: #1c1a2c;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--secondary .alert__dismissible:active, .alert--secondary .alert__dismissible--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.alert--secondary .alert__dismissible:hover, .alert--secondary .alert__dismissible:active, .alert--secondary .alert__dismissible--active, .alert--secondary .alert__dismissible:focus, .alert--secondary .alert__dismissible:focus-visible {\n background: #353343;\n outline: none;\n}\n\n.alert--success {\n background: #071314;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--success .alert__icon {\n color: rgba(41, 191, 18, 0.5);\n}\n.alert--success .alert__content {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.alert--success .alert__dismissible {\n background: #071314;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--success .alert__dismissible:active, .alert--success .alert__dismissible--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.alert--success .alert__dismissible:hover, .alert--success .alert__dismissible:active, .alert--success .alert__dismissible--active, .alert--success .alert__dismissible:focus, .alert--success .alert__dismissible:focus-visible {\n background: #0b2614;\n outline: none;\n}\n\n.alert--warning {\n background: #1c1313;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--warning .alert__icon {\n color: rgba(255, 190, 11, 0.5);\n}\n.alert--warning .alert__content {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.alert--warning .alert__dismissible {\n background: #1c1313;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--warning .alert__dismissible:active, .alert--warning .alert__dismissible--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.alert--warning .alert__dismissible:hover, .alert--warning .alert__dismissible:active, .alert--warning .alert__dismissible--active, .alert--warning .alert__dismissible:focus, .alert--warning .alert__dismissible:focus-visible {\n background: #352612;\n outline: none;\n}\n\n.alert--error {\n background: #180016;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--error .alert__icon {\n color: rgba(217, 4, 41, 0.5);\n}\n.alert--error .alert__content {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.alert--error .alert__dismissible {\n background: #180016;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--error .alert__dismissible:active, .alert--error .alert__dismissible--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.alert--error .alert__dismissible:hover, .alert--error .alert__dismissible:active, .alert--error .alert__dismissible--active, .alert--error .alert__dismissible:focus, .alert--error .alert__dismissible:focus-visible {\n background: #2e0118;\n outline: none;\n}\n\n.alert--info {\n background: #0e1a24;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--info .alert__icon {\n color: rgba(112, 255, 178, 0.5);\n}\n.alert--info .alert__content {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.alert--info .alert__dismissible {\n background: #0e1a24;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.alert--info .alert__dismissible:active, .alert--info .alert__dismissible--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.alert--info .alert__dismissible:hover, .alert--info .alert__dismissible:active, .alert--info .alert__dismissible--active, .alert--info .alert__dismissible:focus, .alert--info .alert__dismissible:focus-visible {\n background: #193334;\n outline: none;\n}";
1280
1314
  styleInject(css_248z$f);
1281
1315
 
1282
- const IconColors = {
1283
- "info": React__default["default"].createElement(IconInfoCircle, null),
1284
- "primary": React__default["default"].createElement(IconInfoCircle, null),
1285
- "secondary": React__default["default"].createElement(IconInfoCircle, null),
1286
- "success": React__default["default"].createElement(IconCircleCheck, null),
1287
- "warning": React__default["default"].createElement(IconAlertCircle, null),
1288
- "error": React__default["default"].createElement(IconCircleX, null)
1289
- };
1290
- const Alert = (props) => {
1291
- const { color = "primary", dismissible = false, icon = true, title, onClose = (event) => { }, children } = props;
1292
- return React__default["default"].createElement("div", { className: `alert alert--${color}` },
1293
- React__default["default"].createElement("div", { className: "alert__header" },
1294
- React__default["default"].createElement("div", { className: "alert__header-wrapper" },
1295
- icon ? React__default["default"].createElement(AlertIcon, { color: color }) : null,
1296
- React__default["default"].createElement("span", { className: "alert__heading" }, title)),
1297
- dismissible ? React__default["default"].createElement("span", { className: "alert__dismissible", onClick: onClose },
1298
- React__default["default"].createElement(IconX, null)) : null),
1299
- children ? React__default["default"].createElement("div", { className: "alert__content" }, children) : null);
1300
- };
1301
- const AlertIcon = ({ color }) => {
1302
- return React__default["default"].createElement("span", { className: "alert__icon" }, IconColors[color]);
1316
+ var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
1317
+ __assign = Object.assign || function(t) {
1318
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
1319
+ s = arguments[i];
1320
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
1321
+ t[p] = s[p];
1322
+ }
1323
+ return t;
1324
+ };
1325
+ return __assign.apply(this, arguments);
1303
1326
  };
1304
-
1305
- /******************************************************************************
1306
- Copyright (c) Microsoft Corporation.
1307
-
1308
- Permission to use, copy, modify, and/or distribute this software for any
1309
- purpose with or without fee is hereby granted.
1310
-
1311
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
1312
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
1313
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
1314
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
1315
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
1316
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
1317
- PERFORMANCE OF THIS SOFTWARE.
1318
- ***************************************************************************** */
1319
-
1320
- function __rest(s, e) {
1321
- var t = {};
1322
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
1323
- t[p] = s[p];
1324
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
1325
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
1326
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
1327
- t[p[i]] = s[p[i]];
1328
- }
1329
- return t;
1327
+ function pushProp(target, key, value) {
1328
+ if (key === 'className') {
1329
+ target.className = [target.className, value].join(' ').trim();
1330
+ }
1331
+ else if (key === 'style') {
1332
+ target.style = __assign(__assign({}, target.style), value);
1333
+ }
1334
+ else if (typeof value === 'function') {
1335
+ var oldFn_1 = target[key];
1336
+ target[key] = oldFn_1 ? function () {
1337
+ var args = [];
1338
+ for (var _i = 0; _i < arguments.length; _i++) {
1339
+ args[_i] = arguments[_i];
1340
+ }
1341
+ oldFn_1.apply(void 0, args);
1342
+ value.apply(void 0, args);
1343
+ } : value;
1344
+ }
1345
+ else if (
1346
+ // skip merging undefined values
1347
+ value === undefined ||
1348
+ // skip if both value are the same primitive value
1349
+ (typeof value !== 'object' && value === target[key])) {
1350
+ return;
1351
+ }
1352
+ else if (!(key in target)) {
1353
+ target[key] = value;
1354
+ }
1355
+ else {
1356
+ throw new Error("Didn\u2019t know how to merge prop '".concat(key, "'. ") +
1357
+ "Only 'className', 'style', and event handlers are supported");
1358
+ }
1330
1359
  }
1331
-
1332
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
1333
- var e = new Error(message);
1334
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
1335
- };
1336
-
1337
- var css_248z$e = ".badge {\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n padding: 0.25rem;\n display: inline-flex;\n font-size: 0.75rem;\n width: fit-content;\n}\n\n.badge--primary {\n background: rgba(3, 0, 20, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--secondary {\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--success {\n background: rgba(41, 191, 18, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--warning {\n background: rgba(255, 190, 11, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--error {\n background: rgba(217, 4, 41, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--info {\n background: rgba(112, 255, 178, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}";
1338
- styleInject(css_248z$e);
1339
-
1340
- const Badge = (props) => {
1341
- const { color = "primary", children } = props, args = __rest(props, ["color", "children"]);
1342
- return React__default["default"].createElement("span", Object.assign({}, args, { className: `badge badge--${color}` }), children);
1360
+ var dist = function mergeProps() {
1361
+ var props = [];
1362
+ for (var _i = 0; _i < arguments.length; _i++) {
1363
+ props[_i] = arguments[_i];
1364
+ }
1365
+ if (props.length === 1) {
1366
+ return props[0];
1367
+ }
1368
+ return props.reduce(function (merged, ps) {
1369
+ for (var key in ps) {
1370
+ pushProp(merged, key, ps[key]);
1371
+ }
1372
+ return merged;
1373
+ }, {});
1343
1374
  };
1344
1375
 
1345
- var css_248z$d = ".button {\n padding: 0.5rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-bottom: 1rem;\n width: fit-content;\n}\n.button--disabled {\n opacity: 50%;\n pointer-events: none;\n}\n.button__icon + .button__content {\n margin-left: 0.5rem;\n display: inline-block;\n position: relative;\n}\n.button__icon {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 1.25rem;\n height: 1.25rem;\n color: rgba(255, 255, 255, 0.5);\n cursor: pointer;\n}\n.button__icon > * {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.button--primary {\n background: #030014;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--primary:active, .button--primary--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--primary:hover, .button--primary:active, .button--primary--active, .button--primary:focus, .button--primary:focus-visible {\n background: #1c1a2c;\n outline: none;\n}\n.button--primary.button--filled {\n border-color: transparent;\n}\n.button--primary.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--primary.button--filled:active:active, .button--primary.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--primary.button--outlined {\n background: transparent;\n border-color: #1c1a2c;\n}\n.button--primary.button--outlined:hover, .button--primary.button--outlined.button--none:hover {\n background: #1c1a2c;\n}\n.button--primary.button--outlined:active, .button--primary.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--primary.button--outlined:active:active, .button--primary.button--outlined:active--active, .button--primary.button--outlined.button--none:active:active, .button--primary.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--primary.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--primary.button--none:hover {\n background: #1c1a2c;\n}\n.button--primary.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--primary.button--none:active:active, .button--primary.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--primary .button__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.button--secondary {\n background: #1c1a2c;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--secondary:active, .button--secondary--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--secondary:hover, .button--secondary:active, .button--secondary--active, .button--secondary:focus, .button--secondary:focus-visible {\n background: #353343;\n outline: none;\n}\n.button--secondary.button--filled {\n border-color: transparent;\n}\n.button--secondary.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--secondary.button--filled:active:active, .button--secondary.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--secondary.button--outlined {\n background: transparent;\n border-color: #353343;\n}\n.button--secondary.button--outlined:hover, .button--secondary.button--outlined.button--none:hover {\n background: #353343;\n}\n.button--secondary.button--outlined:active, .button--secondary.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--secondary.button--outlined:active:active, .button--secondary.button--outlined:active--active, .button--secondary.button--outlined.button--none:active:active, .button--secondary.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--secondary.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--secondary.button--none:hover {\n background: #353343;\n}\n.button--secondary.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--secondary.button--none:active:active, .button--secondary.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--secondary .button__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.button--success {\n background: #071314;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--success:active, .button--success--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--success:hover, .button--success:active, .button--success--active, .button--success:focus, .button--success:focus-visible {\n background: #0b2614;\n outline: none;\n}\n.button--success.button--filled {\n border-color: transparent;\n}\n.button--success.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--success.button--filled:active:active, .button--success.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--success.button--outlined {\n background: transparent;\n border-color: #0b2614;\n}\n.button--success.button--outlined:hover, .button--success.button--outlined.button--none:hover {\n background: #0b2614;\n}\n.button--success.button--outlined:active, .button--success.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--success.button--outlined:active:active, .button--success.button--outlined:active--active, .button--success.button--outlined.button--none:active:active, .button--success.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--success.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--success.button--none:hover {\n background: #0b2614;\n}\n.button--success.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--success.button--none:active:active, .button--success.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--success .button__icon {\n color: rgba(41, 191, 18, 0.5);\n}\n\n.button--warning {\n background: #1c1313;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--warning:active, .button--warning--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--warning:hover, .button--warning:active, .button--warning--active, .button--warning:focus, .button--warning:focus-visible {\n background: #352612;\n outline: none;\n}\n.button--warning.button--filled {\n border-color: transparent;\n}\n.button--warning.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--warning.button--filled:active:active, .button--warning.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--warning.button--outlined {\n background: transparent;\n border-color: #352612;\n}\n.button--warning.button--outlined:hover, .button--warning.button--outlined.button--none:hover {\n background: #352612;\n}\n.button--warning.button--outlined:active, .button--warning.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--warning.button--outlined:active:active, .button--warning.button--outlined:active--active, .button--warning.button--outlined.button--none:active:active, .button--warning.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--warning.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--warning.button--none:hover {\n background: #352612;\n}\n.button--warning.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--warning.button--none:active:active, .button--warning.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--warning .button__icon {\n color: rgba(255, 190, 11, 0.5);\n}\n\n.button--error {\n background: #180016;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--error:active, .button--error--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--error:hover, .button--error:active, .button--error--active, .button--error:focus, .button--error:focus-visible {\n background: #2e0118;\n outline: none;\n}\n.button--error.button--filled {\n border-color: transparent;\n}\n.button--error.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--error.button--filled:active:active, .button--error.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--error.button--outlined {\n background: transparent;\n border-color: #2e0118;\n}\n.button--error.button--outlined:hover, .button--error.button--outlined.button--none:hover {\n background: #2e0118;\n}\n.button--error.button--outlined:active, .button--error.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--error.button--outlined:active:active, .button--error.button--outlined:active--active, .button--error.button--outlined.button--none:active:active, .button--error.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--error.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--error.button--none:hover {\n background: #2e0118;\n}\n.button--error.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--error.button--none:active:active, .button--error.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--error .button__icon {\n color: rgba(217, 4, 41, 0.5);\n}\n\n.button--info {\n background: #0e1a24;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--info:active, .button--info--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--info:hover, .button--info:active, .button--info--active, .button--info:focus, .button--info:focus-visible {\n background: #193334;\n outline: none;\n}\n.button--info.button--filled {\n border-color: transparent;\n}\n.button--info.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--info.button--filled:active:active, .button--info.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--info.button--outlined {\n background: transparent;\n border-color: #193334;\n}\n.button--info.button--outlined:hover, .button--info.button--outlined.button--none:hover {\n background: #193334;\n}\n.button--info.button--outlined:active, .button--info.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--info.button--outlined:active:active, .button--info.button--outlined:active--active, .button--info.button--outlined.button--none:active:active, .button--info.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--info.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--info.button--none:hover {\n background: #193334;\n}\n.button--info.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--info.button--none:active:active, .button--info.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--info .button__icon {\n color: rgba(112, 255, 178, 0.5);\n}";
1346
- styleInject(css_248z$d);
1347
-
1348
1376
  const getChild = (children, child, required) => {
1349
1377
  const [childComponent, setChildComponent] = React.useState();
1350
1378
  React.useMemo(() => {
@@ -1368,6 +1396,16 @@ const getContent = (children, ...child) => {
1368
1396
  });
1369
1397
  return array.length == 0 ? null : array;
1370
1398
  };
1399
+ const createStyle = (styles) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (styles.m ? { margin: `${styles.m}rem` } : {})), (styles.my ? { marginTop: `${styles.my}rem`, marginBottom: `${styles.my}rem` } : {})), (styles.mx ? { marginLeft: `${styles.mx}rem`, marginRight: `${styles.mx}rem` } : {})), (styles.mt ? { marginTop: `${styles.mt}rem` } : {})), (styles.mb ? { marginBottom: `${styles.mb}rem` } : {})), (styles.ml ? { marginLeft: `${styles.ml}rem` } : {})), (styles.mr ? { marginRight: `${styles.mr}rem` } : {})), (styles.p ? { padding: `${styles.p}rem` } : {})), (styles.py ? { paddingTop: `${styles.py}rem`, paddingBottom: `${styles.py}rem` } : {})), (styles.px ? { paddingLeft: `${styles.px}rem`, paddingRight: `${styles.px}rem` } : {})), (styles.pt ? { paddingTop: `${styles.pt}rem` } : {})), (styles.pb ? { paddingBottom: `${styles.pb}rem` } : {})), (styles.pl ? { paddingLeft: `${styles.pl}rem` } : {})), (styles.pr ? { paddingRight: `${styles.pr}rem` } : {})), (styles.bg ? { backgroundColor: styles.bg } : {})), (styles.c ? { color: styles.c } : {})), (styles.opacity ? { opacity: styles.opacity } : {})), (styles.ff ? { fontFamily: styles.ff } : {})), (styles.fz ? { fontSize: `${styles.fz}rem` } : {})), (styles.ta ? { textAlign: styles.ta } : {})), (styles.w ? { width: styles.w } : {})), (styles.miw ? { minWidth: styles.miw } : {})), (styles.maw ? { maxWidth: styles.maw } : {})), (styles.h ? { height: styles.h } : {})), (styles.mih ? { minHeight: styles.mih } : {})), (styles.mah ? { maxHeight: styles.mah } : {})), (styles.pos ? { position: styles.pos } : {})), (styles.top ? { top: styles.top } : {})), (styles.left ? { left: styles.left } : {})), (styles.bottom ? { bottom: styles.bottom } : {})), (styles.right ? { right: styles.right } : {})), (styles.display ? { display: styles.display } : {})), (styles.flex ? { flex: styles.flex } : {})));
1400
+ const mergeCode0Props = (cn, rest) => {
1401
+ const style = createStyle(rest);
1402
+ const newProps = rest;
1403
+ const keys = ["m", "my", "mx", "mt", "mb", "ml", "mr", "p", "py", "px", "pt", "pb", "pl", "pr", "bg", "c", "opacity", "ff", "fz", "fw", "lts", "ta", "lh", "fs", "tt", "td", "w", "miw", "maw", "h", "mih", "mah", "bgsz", "bgp", "bgr", "bga", "pos", "top", "left", "bottom", "right", "inset", "display", "flex"];
1404
+ keys.forEach(key => {
1405
+ delete newProps[key];
1406
+ });
1407
+ return dist(newProps, Object.assign({ className: cn }, (Object.keys(style).length !== 0 ? { style: style } : {})));
1408
+ };
1371
1409
  const getWindowPositioning = () => {
1372
1410
  return {
1373
1411
  height: window.innerHeight,
@@ -1446,16 +1484,51 @@ const getPositionAroundTarget = (target, element, position = "bottom") => {
1446
1484
  };
1447
1485
  };
1448
1486
 
1487
+ const IconColors = {
1488
+ "info": React__default["default"].createElement(IconInfoCircle, null),
1489
+ "primary": React__default["default"].createElement(IconInfoCircle, null),
1490
+ "secondary": React__default["default"].createElement(IconInfoCircle, null),
1491
+ "success": React__default["default"].createElement(IconCircleCheck, null),
1492
+ "warning": React__default["default"].createElement(IconAlertCircle, null),
1493
+ "error": React__default["default"].createElement(IconCircleX, null)
1494
+ };
1495
+ const Alert = (props) => {
1496
+ const { color = "primary", dismissible = false, icon = true, title, onClose = (event) => { }, children } = props, rest = __rest(props, ["color", "dismissible", "icon", "title", "onClose", "children"]);
1497
+ return React__default["default"].createElement("div", Object.assign({}, mergeCode0Props(`alert alert--${color}`, rest)),
1498
+ React__default["default"].createElement("div", { className: "alert__header" },
1499
+ React__default["default"].createElement("div", { className: "alert__header-wrapper" },
1500
+ icon ? React__default["default"].createElement(AlertIcon, { color: color }) : null,
1501
+ React__default["default"].createElement("span", { className: "alert__heading" }, title)),
1502
+ dismissible ? React__default["default"].createElement("span", { className: "alert__dismissible", onClick: onClose },
1503
+ React__default["default"].createElement(IconX, null)) : null),
1504
+ children ? React__default["default"].createElement("div", { className: "alert__content" }, children) : null);
1505
+ };
1506
+ const AlertIcon = ({ color }) => {
1507
+ return React__default["default"].createElement("span", { className: "alert__icon" }, IconColors[color]);
1508
+ };
1509
+
1510
+ var css_248z$e = ".badge {\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n padding: 0.25rem;\n display: inline-flex;\n font-size: 0.75rem;\n width: fit-content;\n}\n\n.badge--primary {\n background: rgba(3, 0, 20, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--secondary {\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--success {\n background: rgba(41, 191, 18, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--warning {\n background: rgba(255, 190, 11, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--error {\n background: rgba(217, 4, 41, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}\n\n.badge--info {\n background: rgba(112, 255, 178, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n font-size: 0.75rem;\n}";
1511
+ styleInject(css_248z$e);
1512
+
1513
+ const Badge = (props) => {
1514
+ const { color = "primary", children } = props, args = __rest(props, ["color", "children"]);
1515
+ return React__default["default"].createElement("span", Object.assign({}, mergeCode0Props(`badge badge--${color}`, args)), children);
1516
+ };
1517
+
1518
+ var css_248z$d = ".button {\n padding: 0.5rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-bottom: 1rem;\n width: fit-content;\n}\n.button--disabled {\n opacity: 50%;\n pointer-events: none;\n}\n.button__icon + .button__content {\n margin-left: 0.5rem;\n display: inline-block;\n position: relative;\n}\n.button__icon {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: 1.25rem;\n height: 1.25rem;\n color: rgba(255, 255, 255, 0.5);\n cursor: pointer;\n}\n.button__icon > * {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.button--primary {\n background: #030014;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--primary:active, .button--primary--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--primary:hover, .button--primary:active, .button--primary--active, .button--primary:focus, .button--primary:focus-visible {\n background: #1c1a2c;\n outline: none;\n}\n.button--primary.button--filled {\n border-color: transparent;\n}\n.button--primary.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--primary.button--filled:active:active, .button--primary.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--primary.button--outlined {\n background: transparent;\n border-color: #1c1a2c;\n}\n.button--primary.button--outlined:hover, .button--primary.button--outlined.button--none:hover {\n background: #1c1a2c;\n}\n.button--primary.button--outlined:active, .button--primary.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--primary.button--outlined:active:active, .button--primary.button--outlined:active--active, .button--primary.button--outlined.button--none:active:active, .button--primary.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--primary.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--primary.button--none:hover {\n background: #1c1a2c;\n}\n.button--primary.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--primary.button--none:active:active, .button--primary.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--primary .button__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.button--secondary {\n background: #1c1a2c;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--secondary:active, .button--secondary--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--secondary:hover, .button--secondary:active, .button--secondary--active, .button--secondary:focus, .button--secondary:focus-visible {\n background: #353343;\n outline: none;\n}\n.button--secondary.button--filled {\n border-color: transparent;\n}\n.button--secondary.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--secondary.button--filled:active:active, .button--secondary.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--secondary.button--outlined {\n background: transparent;\n border-color: #353343;\n}\n.button--secondary.button--outlined:hover, .button--secondary.button--outlined.button--none:hover {\n background: #353343;\n}\n.button--secondary.button--outlined:active, .button--secondary.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--secondary.button--outlined:active:active, .button--secondary.button--outlined:active--active, .button--secondary.button--outlined.button--none:active:active, .button--secondary.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--secondary.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--secondary.button--none:hover {\n background: #353343;\n}\n.button--secondary.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--secondary.button--none:active:active, .button--secondary.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--secondary .button__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.button--success {\n background: #071314;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--success:active, .button--success--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--success:hover, .button--success:active, .button--success--active, .button--success:focus, .button--success:focus-visible {\n background: #0b2614;\n outline: none;\n}\n.button--success.button--filled {\n border-color: transparent;\n}\n.button--success.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--success.button--filled:active:active, .button--success.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--success.button--outlined {\n background: transparent;\n border-color: #0b2614;\n}\n.button--success.button--outlined:hover, .button--success.button--outlined.button--none:hover {\n background: #0b2614;\n}\n.button--success.button--outlined:active, .button--success.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--success.button--outlined:active:active, .button--success.button--outlined:active--active, .button--success.button--outlined.button--none:active:active, .button--success.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--success.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--success.button--none:hover {\n background: #0b2614;\n}\n.button--success.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--success.button--none:active:active, .button--success.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--success .button__icon {\n color: rgba(41, 191, 18, 0.5);\n}\n\n.button--warning {\n background: #1c1313;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--warning:active, .button--warning--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--warning:hover, .button--warning:active, .button--warning--active, .button--warning:focus, .button--warning:focus-visible {\n background: #352612;\n outline: none;\n}\n.button--warning.button--filled {\n border-color: transparent;\n}\n.button--warning.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--warning.button--filled:active:active, .button--warning.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--warning.button--outlined {\n background: transparent;\n border-color: #352612;\n}\n.button--warning.button--outlined:hover, .button--warning.button--outlined.button--none:hover {\n background: #352612;\n}\n.button--warning.button--outlined:active, .button--warning.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--warning.button--outlined:active:active, .button--warning.button--outlined:active--active, .button--warning.button--outlined.button--none:active:active, .button--warning.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--warning.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--warning.button--none:hover {\n background: #352612;\n}\n.button--warning.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--warning.button--none:active:active, .button--warning.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--warning .button__icon {\n color: rgba(255, 190, 11, 0.5);\n}\n\n.button--error {\n background: #180016;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--error:active, .button--error--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--error:hover, .button--error:active, .button--error--active, .button--error:focus, .button--error:focus-visible {\n background: #2e0118;\n outline: none;\n}\n.button--error.button--filled {\n border-color: transparent;\n}\n.button--error.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--error.button--filled:active:active, .button--error.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--error.button--outlined {\n background: transparent;\n border-color: #2e0118;\n}\n.button--error.button--outlined:hover, .button--error.button--outlined.button--none:hover {\n background: #2e0118;\n}\n.button--error.button--outlined:active, .button--error.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--error.button--outlined:active:active, .button--error.button--outlined:active--active, .button--error.button--outlined.button--none:active:active, .button--error.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--error.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--error.button--none:hover {\n background: #2e0118;\n}\n.button--error.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--error.button--none:active:active, .button--error.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--error .button__icon {\n color: rgba(217, 4, 41, 0.5);\n}\n\n.button--info {\n background: #0e1a24;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.button--info:active, .button--info--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--info:hover, .button--info:active, .button--info--active, .button--info:focus, .button--info:focus-visible {\n background: #193334;\n outline: none;\n}\n.button--info.button--filled {\n border-color: transparent;\n}\n.button--info.button--filled:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--info.button--filled:active:active, .button--info.button--filled:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--info.button--outlined {\n background: transparent;\n border-color: #193334;\n}\n.button--info.button--outlined:hover, .button--info.button--outlined.button--none:hover {\n background: #193334;\n}\n.button--info.button--outlined:active, .button--info.button--outlined.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--info.button--outlined:active:active, .button--info.button--outlined:active--active, .button--info.button--outlined.button--none:active:active, .button--info.button--outlined.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--info.button--none {\n background: transparent;\n border-color: transparent;\n}\n.button--info.button--none:hover {\n background: #193334;\n}\n.button--info.button--none:active {\n border: 1px solid rgba(255, 255, 255, 0.1);\n}\n.button--info.button--none:active:active, .button--info.button--none:active--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.button--info .button__icon {\n color: rgba(112, 255, 178, 0.5);\n}";
1519
+ styleInject(css_248z$d);
1520
+
1449
1521
  const Button = (props) => {
1450
1522
  const { children, variant = "normal", color = "primary", active = false, disabled = false } = props, args = __rest(props, ["children", "variant", "color", "active", "disabled"]);
1451
1523
  const icon = getChild(children, ButtonIcon);
1452
1524
  const content = getContent(children, ButtonIcon);
1453
- return React__default["default"].createElement("a", Object.assign({}, args, { className: `button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`, "aria-disabled": disabled ? "true" : "false" }),
1525
+ return React__default["default"].createElement("a", Object.assign({}, mergeCode0Props(`button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`, args), { "aria-disabled": disabled ? "true" : "false" }),
1454
1526
  icon,
1455
1527
  content ? React__default["default"].createElement("span", { className: "button__content" }, content) : null);
1456
1528
  };
1457
- const ButtonIcon = ({ children }) => {
1458
- return React__default["default"].createElement("span", { className: "button__icon" }, children);
1529
+ const ButtonIcon = (props) => {
1530
+ const { children } = props, args = __rest(props, ["children"]);
1531
+ return React__default["default"].createElement("span", Object.assign({}, mergeCode0Props("button__icon", args)), children);
1459
1532
  };
1460
1533
  var Button$1 = Object.assign(Button, {
1461
1534
  Icon: ButtonIcon
@@ -1465,8 +1538,8 @@ var css_248z$c = ".button-group {\n background: #030014;\n border: 1px solid r
1465
1538
  styleInject(css_248z$c);
1466
1539
 
1467
1540
  const ButtonGroup = (props) => {
1468
- const { children } = props;
1469
- return React__default["default"].createElement("div", { className: "button-group" }, children.map((child, i) => {
1541
+ const { children } = props, args = __rest(props, ["children"]);
1542
+ return React__default["default"].createElement("div", Object.assign({}, mergeCode0Props("button-group", args)), children.map((child, i) => {
1470
1543
  return React__default["default"].createElement("div", { className: `${i == 0 || i == children.length - 1 ? i == 0 ? "button-group__first" : "button-group__last" : "button-group__item"}` }, child);
1471
1544
  }));
1472
1545
  };
@@ -1477,12 +1550,12 @@ styleInject(css_248z$b);
1477
1550
  const Card = (props) => {
1478
1551
  const { children, color = "secondary", variant = "normal", gradient = false, gradientPosition = "top-right", outline = false } = props, args = __rest(props, ["children", "color", "variant", "gradient", "gradientPosition", "outline"]);
1479
1552
  return React__default["default"].createElement(React__default["default"].Fragment, null,
1480
- React__default["default"].createElement("div", Object.assign({}, args, { className: `card ${outline && "card--outline"} ${gradient && "card--gradient"} ${gradient && `card--gradient-${gradientPosition}`} card--${color} card--${variant}` }), children));
1553
+ React__default["default"].createElement("div", Object.assign({}, mergeCode0Props(`card ${outline ? "card--outline" : ""} ${gradient ? "card--gradient" : ""} ${gradient ? `card--gradient-${gradientPosition}` : ""} card--${color} card--${variant}`, args)), children));
1481
1554
  };
1482
1555
  const CardSection = (props) => {
1483
- const { image = false, border = false, children } = props;
1556
+ const { image = false, border = false, children } = props, args = __rest(props, ["image", "border", "children"]);
1484
1557
  return React__default["default"].createElement(React__default["default"].Fragment, null,
1485
- React__default["default"].createElement("div", { className: `card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}` }, children));
1558
+ React__default["default"].createElement("div", Object.assign({}, mergeCode0Props(`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`, args)), children));
1486
1559
  };
1487
1560
  var Card$1 = Object.assign(Card, {
1488
1561
  Section: CardSection,
@@ -1493,7 +1566,7 @@ styleInject(css_248z$a);
1493
1566
 
1494
1567
  const Col = (props) => {
1495
1568
  const { children, xs, sm, md, lg, xl, xxl } = props, args = __rest(props, ["children", "xs", "sm", "md", "lg", "xl", "xxl"]);
1496
- return React__default["default"].createElement("div", Object.assign({}, args, { className: `col ${xs ? `col-xs-${xs}` : ""} ${sm ? `col-sm-${sm}` : ""} ${md ? `col-md-${md}` : ""} ${lg ? `col-lg-${lg}` : ""} ${xl ? `col-lg-${xl}` : ""} ${xxl ? `col-xxl-${xxl}` : ""}` }), children);
1569
+ return React__default["default"].createElement("div", Object.assign({}, mergeCode0Props(`col ${xs ? `col-xs-${xs}` : ""} ${sm ? `col-sm-${sm}` : ""} ${md ? `col-md-${md}` : ""} ${lg ? `col-lg-${lg}` : ""} ${xl ? `col-lg-${xl}` : ""} ${xxl ? `col-xxl-${xxl}` : ""}`, args)), children);
1497
1570
  };
1498
1571
 
1499
1572
  var css_248z$9 = ".container {\n margin-right: auto;\n margin-left: auto;\n max-width: 1320px;\n min-width: 1320px;\n padding-left: 1rem;\n padding-right: 1rem;\n position: relative;\n z-index: 1;\n}\n.container > *:first-child {\n margin-top: 0;\n}\n.container > *:last-child {\n margin-bottom: 0;\n}\n@media (max-width: 1399px) {\n .container {\n max-width: 1140px;\n min-width: 1140px;\n }\n}\n@media (max-width: 1199px) {\n .container {\n max-width: 960px;\n min-width: 960px;\n }\n}\n@media (max-width: 991px) {\n .container {\n max-width: 720px;\n min-width: 720px;\n }\n}\n@media (max-width: 767px) {\n .container {\n max-width: 540px;\n min-width: 540px;\n }\n}\n@media (max-width: 575px) {\n .container {\n max-width: 100%;\n min-width: auto;\n }\n}";
@@ -1501,7 +1574,7 @@ styleInject(css_248z$9);
1501
1574
 
1502
1575
  const Container = (props) => {
1503
1576
  const { children } = props, args = __rest(props, ["children"]);
1504
- return React__default["default"].createElement("div", Object.assign({}, args, { className: "container" }), children);
1577
+ return React__default["default"].createElement("div", Object.assign({}, mergeCode0Props("container", args)), children);
1505
1578
  };
1506
1579
 
1507
1580
  var css_248z$8 = ".dropdown {\n position: relative;\n width: fit-content;\n}\n.dropdown__trigger {\n width: fit-content;\n position: relative;\n}\n.dropdown__trigger > * {\n margin: 0 !important;\n}\n.dropdown__header {\n margin: -0.5rem -0.5rem 0.5rem -0.5rem;\n padding: 0.5rem;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.dropdown__header > *:first-child {\n margin-top: 0;\n}\n.dropdown__header > *:last-child {\n margin-bottom: 0;\n}\n.dropdown__footer {\n margin: 0.5rem -0.5rem -0.5rem -0.5rem;\n padding: 0.5rem;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.dropdown__footer > *:first-child {\n margin-top: 0;\n}\n.dropdown__footer > *:last-child {\n margin-bottom: 0;\n}\n.dropdown__item {\n position: relative;\n margin: -0.5rem;\n padding: 0.5rem;\n margin-top: 0;\n margin-bottom: 0;\n cursor: pointer;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n background: #1c1a2c;\n}\n.dropdown__item:hover, .dropdown__item:active, .dropdown__item--active {\n background: #292637;\n}\n.dropdown__item:first-of-type {\n border-top: none;\n margin-top: -0.5rem;\n}\n.dropdown__item:last-of-type {\n border-top: none;\n border-bottom: none;\n margin-bottom: -0.5rem;\n}\n.dropdown__menu {\n background: #1c1a2c;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n box-shadow: 0 0 2rem 0.5rem #030014;\n position: fixed;\n top: 0;\n word-break: break-word;\n left: 0;\n display: none;\n z-index: 99999;\n padding: 0.5rem;\n}\n.dropdown__menu--active {\n display: block;\n}";
@@ -1675,7 +1748,7 @@ styleInject(css_248z$7);
1675
1748
 
1676
1749
  const Text = (_a) => {
1677
1750
  var { size, children, hierarchy = "secondary" } = _a, rest = __rest(_a, ["size", "children", "hierarchy"]);
1678
- return React__default["default"].createElement("span", Object.assign({}, rest, { className: `text text--${hierarchy} text--${size}` }), children);
1751
+ return React__default["default"].createElement("span", Object.assign({}, mergeCode0Props(`text text--${hierarchy} text--${size}`, rest)), children);
1679
1752
  };
1680
1753
 
1681
1754
  var css_248z$6 = ".input {\n margin-bottom: 1rem;\n}\n.input:last-child, .input:last-of-type {\n margin-bottom: 0;\n}\n.input--disabled {\n opacity: 50%;\n pointer-events: none;\n}\n.input__control {\n display: flex;\n align-items: center;\n margin-bottom: 0.5rem;\n background: #1c1a2c;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n}\n.input__control:active, .input__control--active {\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n.input__control:hover, .input__control:active, .input__control--active, .input__control:focus, .input__control:focus-visible {\n background: #353343;\n outline: none;\n}\n.input__label {\n color: rgba(255, 255, 255, 0.5);\n font-size: 0.75rem;\n font-family: Ubuntu, sans-serif;\n margin-bottom: 0.5rem;\n display: block;\n text-transform: uppercase;\n}\n.input__field {\n position: relative;\n display: inline-block;\n background: none;\n width: 100%;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n border: none;\n outline: none;\n padding: 0.75rem 0.5rem;\n box-shadow: none;\n font-size: 1rem;\n}\n.input__field::placeholder {\n color: rgba(255, 255, 255, 0.25);\n}\n.input__icon {\n display: flex;\n width: 1.25rem;\n height: 1.25rem;\n justify-content: center;\n align-items: center;\n aspect-ratio: 50/50;\n margin-left: 0.5rem;\n pointer-events: none;\n}\n.input__icon > * {\n width: 1.25rem;\n height: 1.25rem;\n}\n.input__desc {\n padding-left: 1rem;\n color: rgba(255, 255, 255, 0.5);\n font-size: 0.75rem;\n font-family: Ubuntu, sans-serif;\n margin: 0.5rem 0;\n}\n.input__desc:before {\n content: url('data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMin slice\" width=\"12\" height=\"12\" viewBox=\"0 -2 24 24\" stroke-width=\"2\" stroke=\"rgba(255, 255, 255, 0.5)\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\" /><path d=\"M12 9h.01\" /><path d=\"M11 12h1v4h1\" /></svg>');\n height: 0.75rem;\n width: 0.75rem;\n padding: 0.25rem 0;\n margin-right: 0.25rem;\n}\n.input__message {\n display: none;\n position: relative;\n color: rgba(255, 255, 255, 0.5);\n border-radius: 0.5rem;\n font-size: 0.75rem;\n z-index: -1;\n font-family: Ubuntu, sans-serif;\n}\n.input__message > p {\n margin: 0;\n padding: 0.5rem 0.5rem 0.5rem 1rem;\n}\n.input__message > p:before {\n content: url('data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"xMidYMin slice\" width=\"12\" height=\"12\" viewBox=\"0 -2 24 24\" stroke-width=\"2\" stroke=\"rgba(255, 255, 255, 0.5)\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\" /><path d=\"M12 9h.01\" /><path d=\"M11 12h1v4h1\" /></svg>');\n height: 0.75rem;\n width: 0.75rem;\n padding: 0.25rem 0;\n margin-right: 0.25rem;\n}\n.input--not-valid .input__message {\n display: block;\n background: rgba(217, 4, 41, 0.1);\n}\n.input--valid .input__message {\n display: block;\n background: rgba(41, 191, 18, 0.1);\n}";
@@ -9069,12 +9142,12 @@ const Quote = (props) => {
9069
9142
  React__default["default"].createElement(Text, { size: "sm" }, position))));
9070
9143
  };
9071
9144
 
9072
- var css_248z$1 = ".row {\n display: flex;\n flex-wrap: wrap;\n}\n.row + .row {\n margin-top: 1rem;\n}\n.row > * {\n flex-shrink: 0;\n max-width: 100%;\n width: 100%;\n}";
9145
+ var css_248z$1 = ".row {\n display: flex;\n flex-wrap: wrap;\n margin-left: -0.5rem;\n margin-right: -0.5rem;\n}\n.row + .row {\n margin-top: 1rem;\n}\n.row > * {\n flex-shrink: 0;\n max-width: 100%;\n width: 100%;\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n box-sizing: border-box;\n}";
9073
9146
  styleInject(css_248z$1);
9074
9147
 
9075
9148
  const Row = (props) => {
9076
9149
  const { children } = props, args = __rest(props, ["children"]);
9077
- return React__default["default"].createElement("div", Object.assign({}, args, { className: "row" }), children);
9150
+ return React__default["default"].createElement("div", Object.assign({}, mergeCode0Props("row", args)), children);
9078
9151
  };
9079
9152
 
9080
9153
  var css_248z = ".tooltip {\n width: fit-content;\n}\n.tooltip__trigger {\n width: fit-content;\n position: relative;\n}\n.tooltip__trigger > * {\n margin: 0 !important;\n}\n.tooltip__trigger:hover + .tooltip__menu {\n display: block;\n}\n.tooltip__menu {\n background: #1c1a2c;\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n color: rgba(255, 255, 255, 0.5);\n font-family: Ubuntu, sans-serif;\n font-size: 1rem;\n position: relative;\n box-shadow: 0 0 2rem 0.5rem #030014;\n position: fixed;\n top: 0;\n word-break: break-word;\n left: 0;\n display: none;\n z-index: 99999;\n padding: 0.5rem;\n}\n.tooltip__menu:hover {\n display: block;\n}\n.tooltip__menu[data-position=left]:before {\n position: absolute;\n content: \"\";\n top: 0;\n right: -0.5rem;\n background: transparent;\n width: 0.5rem;\n height: 100%;\n}\n.tooltip__menu[data-position=right]:before {\n position: absolute;\n content: \"\";\n top: 0;\n left: -0.5rem;\n background: transparent;\n width: 0.5rem;\n height: 100%;\n}\n.tooltip__menu[data-position=bottom]:before {\n position: absolute;\n content: \"\";\n top: -0.5rem;\n left: 0;\n background: transparent;\n width: 100%;\n height: 0.5rem;\n}\n.tooltip__menu[data-position=top]:before {\n position: absolute;\n content: \"\";\n bottom: calc(-0.5rem - 1px);\n left: 0;\n background: transparent;\n width: calc(100% + 2px);\n height: 0.5rem;\n}";
package/dist/cjs/utils/types.d.ts CHANGED
@@ -1,4 +1,54 @@
1
+ import React, { HTMLProps } from "react";
1
2
  export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
2
3
  export declare const Colors: Color[];
3
- export type Size = "xs" | "sm" | "md" | "lg" | "xl";
4
- export declare const Sizes: Size[];
4
+ export type Code0Sizes = "xs" | "sm" | "md" | "lg" | "xl";
5
+ export type Code0FontSizes = "0.75" | "0.8" | "1" | "1.2" | "1.25";
6
+ export type StyleProp<Value> = Value;
7
+ export interface Code0ComponentProps {
8
+ m?: StyleProp<number | `${number}`>;
9
+ my?: StyleProp<number | `${number}`>;
10
+ mx?: StyleProp<number | `${number}`>;
11
+ mt?: StyleProp<number | `${number}`>;
12
+ mb?: StyleProp<number | `${number}`>;
13
+ ml?: StyleProp<number | `${number}`>;
14
+ mr?: StyleProp<number | `${number}`>;
15
+ p?: StyleProp<number | `${number}`>;
16
+ py?: StyleProp<number | `${number}`>;
17
+ px?: StyleProp<number | `${number}`>;
18
+ pt?: StyleProp<number | `${number}`>;
19
+ pb?: StyleProp<number | `${number}`>;
20
+ pl?: StyleProp<number | `${number}`>;
21
+ pr?: StyleProp<number | `${number}`>;
22
+ bg?: React.CSSProperties['backgroundColor'];
23
+ c?: React.CSSProperties['color'];
24
+ opacity?: React.CSSProperties['opacity'];
25
+ ff?: StyleProp<'mono' | 'text' | 'heading' | (string & {})>;
26
+ fz?: StyleProp<Code0FontSizes | number | `${number}`>;
27
+ fw?: StyleProp<React.CSSProperties['fontWeight']>;
28
+ lts?: StyleProp<React.CSSProperties['letterSpacing']>;
29
+ ta?: StyleProp<React.CSSProperties['textAlign']>;
30
+ lh?: StyleProp<number | (string & {})>;
31
+ fs?: StyleProp<React.CSSProperties['fontStyle']>;
32
+ tt?: StyleProp<React.CSSProperties['textTransform']>;
33
+ td?: StyleProp<React.CSSProperties['textDecoration']>;
34
+ w?: StyleProp<React.CSSProperties['width']>;
35
+ miw?: StyleProp<React.CSSProperties['minWidth']>;
36
+ maw?: StyleProp<React.CSSProperties['maxWidth']>;
37
+ h?: StyleProp<React.CSSProperties['height']>;
38
+ mih?: StyleProp<React.CSSProperties['minHeight']>;
39
+ mah?: StyleProp<React.CSSProperties['maxHeight']>;
40
+ bgsz?: StyleProp<React.CSSProperties['backgroundSize']>;
41
+ bgp?: StyleProp<React.CSSProperties['backgroundPosition']>;
42
+ bgr?: StyleProp<React.CSSProperties['backgroundRepeat']>;
43
+ bga?: StyleProp<React.CSSProperties['backgroundAttachment']>;
44
+ pos?: StyleProp<React.CSSProperties['position']>;
45
+ top?: StyleProp<React.CSSProperties['top']>;
46
+ left?: StyleProp<React.CSSProperties['left']>;
47
+ bottom?: StyleProp<React.CSSProperties['bottom']>;
48
+ right?: StyleProp<React.CSSProperties['right']>;
49
+ inset?: StyleProp<React.CSSProperties['inset']>;
50
+ display?: StyleProp<React.CSSProperties['display']>;
51
+ flex?: StyleProp<React.CSSProperties['flex']>;
52
+ }
53
+ export interface Code0Component<T> extends Code0ComponentProps, HTMLProps<T> {
54
+ }
package/dist/cjs/utils/utils.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import React, { ReactNode } from "react";
1
+ import React, { HTMLProps, ReactNode } from "react";
2
+ import { Code0Component } from "./types";
2
3
  export declare const getChild: (children: ReactNode | ReactNode[], child: React.FC<any>, required?: boolean) => React.ReactElement | undefined;
3
4
  export declare const getContent: (children: ReactNode | ReactNode[], ...child: React.FC<any>[]) => ReactNode[] | null;
4
5
  export interface Positioning {
@@ -7,6 +8,7 @@ export interface Positioning {
7
8
  x: number;
8
9
  y: number;
9
10
  }
11
+ export declare const mergeCode0Props: <T extends HTMLElement>(cn: string, rest: Code0Component<T>) => React.HTMLProps<T>;
10
12
  export declare const getWindowPositioning: () => Omit<Omit<Positioning, "x">, "y">;
11
13
  export declare const getPositioning: (node: HTMLElement) => Positioning;
12
14
  export declare const getPositionAroundTarget: (target: HTMLElement, element: HTMLElement, position?: 'top' | 'bottom' | 'left' | 'right') => {