@code0-tech/pictor 0.1.1 → 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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/index.js CHANGED
@@ -1,6 +1,40 @@
1
1
  import React, { forwardRef, createElement, useState, useMemo, cloneElement, useRef, useEffect, useCallback, useContext, createContext } from 'react';
2
2
  import $k7QOs$reactdom, { flushSync } from 'react-dom';
3
3
 
4
+ /******************************************************************************
5
+ Copyright (c) Microsoft Corporation.
6
+
7
+ Permission to use, copy, modify, and/or distribute this software for any
8
+ purpose with or without fee is hereby granted.
9
+
10
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
11
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
12
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
13
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
14
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
15
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
16
+ PERFORMANCE OF THIS SOFTWARE.
17
+ ***************************************************************************** */
18
+
19
+ function __rest(s, e) {
20
+ var t = {};
21
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
22
+ t[p] = s[p];
23
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
24
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
25
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
26
+ t[p[i]] = s[p[i]];
27
+ }
28
+ return t;
29
+ }
30
+
31
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
32
+ var e = new Error(message);
33
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
34
+ };
35
+
36
+ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
37
+
4
38
  var propTypes = {exports: {}};
5
39
 
6
40
  var reactIs = {exports: {}};
@@ -1270,72 +1304,66 @@ function styleInject(css, ref) {
1270
1304
  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}";
1271
1305
  styleInject(css_248z$f);
1272
1306
 
1273
- const IconColors = {
1274
- "info": React.createElement(IconInfoCircle, null),
1275
- "primary": React.createElement(IconInfoCircle, null),
1276
- "secondary": React.createElement(IconInfoCircle, null),
1277
- "success": React.createElement(IconCircleCheck, null),
1278
- "warning": React.createElement(IconAlertCircle, null),
1279
- "error": React.createElement(IconCircleX, null)
1280
- };
1281
- const Alert = (props) => {
1282
- const { color = "primary", dismissible = false, icon = true, title, onClose = (event) => { }, children } = props;
1283
- return React.createElement("div", { className: `alert alert--${color}` },
1284
- React.createElement("div", { className: "alert__header" },
1285
- React.createElement("div", { className: "alert__header-wrapper" },
1286
- icon ? React.createElement(AlertIcon, { color: color }) : null,
1287
- React.createElement("span", { className: "alert__heading" }, title)),
1288
- dismissible ? React.createElement("span", { className: "alert__dismissible", onClick: onClose },
1289
- React.createElement(IconX, null)) : null),
1290
- children ? React.createElement("div", { className: "alert__content" }, children) : null);
1291
- };
1292
- const AlertIcon = ({ color }) => {
1293
- return React.createElement("span", { className: "alert__icon" }, IconColors[color]);
1307
+ var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
1308
+ __assign = Object.assign || function(t) {
1309
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
1310
+ s = arguments[i];
1311
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
1312
+ t[p] = s[p];
1313
+ }
1314
+ return t;
1315
+ };
1316
+ return __assign.apply(this, arguments);
1294
1317
  };
1295
-
1296
- /******************************************************************************
1297
- Copyright (c) Microsoft Corporation.
1298
-
1299
- Permission to use, copy, modify, and/or distribute this software for any
1300
- purpose with or without fee is hereby granted.
1301
-
1302
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
1303
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
1304
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
1305
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
1306
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
1307
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
1308
- PERFORMANCE OF THIS SOFTWARE.
1309
- ***************************************************************************** */
1310
-
1311
- function __rest(s, e) {
1312
- var t = {};
1313
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
1314
- t[p] = s[p];
1315
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
1316
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
1317
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
1318
- t[p[i]] = s[p[i]];
1319
- }
1320
- return t;
1318
+ function pushProp(target, key, value) {
1319
+ if (key === 'className') {
1320
+ target.className = [target.className, value].join(' ').trim();
1321
+ }
1322
+ else if (key === 'style') {
1323
+ target.style = __assign(__assign({}, target.style), value);
1324
+ }
1325
+ else if (typeof value === 'function') {
1326
+ var oldFn_1 = target[key];
1327
+ target[key] = oldFn_1 ? function () {
1328
+ var args = [];
1329
+ for (var _i = 0; _i < arguments.length; _i++) {
1330
+ args[_i] = arguments[_i];
1331
+ }
1332
+ oldFn_1.apply(void 0, args);
1333
+ value.apply(void 0, args);
1334
+ } : value;
1335
+ }
1336
+ else if (
1337
+ // skip merging undefined values
1338
+ value === undefined ||
1339
+ // skip if both value are the same primitive value
1340
+ (typeof value !== 'object' && value === target[key])) {
1341
+ return;
1342
+ }
1343
+ else if (!(key in target)) {
1344
+ target[key] = value;
1345
+ }
1346
+ else {
1347
+ throw new Error("Didn\u2019t know how to merge prop '".concat(key, "'. ") +
1348
+ "Only 'className', 'style', and event handlers are supported");
1349
+ }
1321
1350
  }
1322
-
1323
- typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
1324
- var e = new Error(message);
1325
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
1326
- };
1327
-
1328
- 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}";
1329
- styleInject(css_248z$e);
1330
-
1331
- const Badge = (props) => {
1332
- const { color = "primary", children } = props, args = __rest(props, ["color", "children"]);
1333
- return React.createElement("span", Object.assign({}, args, { className: `badge badge--${color}` }), children);
1351
+ var dist = function mergeProps() {
1352
+ var props = [];
1353
+ for (var _i = 0; _i < arguments.length; _i++) {
1354
+ props[_i] = arguments[_i];
1355
+ }
1356
+ if (props.length === 1) {
1357
+ return props[0];
1358
+ }
1359
+ return props.reduce(function (merged, ps) {
1360
+ for (var key in ps) {
1361
+ pushProp(merged, key, ps[key]);
1362
+ }
1363
+ return merged;
1364
+ }, {});
1334
1365
  };
1335
1366
 
1336
- 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}";
1337
- styleInject(css_248z$d);
1338
-
1339
1367
  const getChild = (children, child, required) => {
1340
1368
  const [childComponent, setChildComponent] = useState();
1341
1369
  useMemo(() => {
@@ -1359,6 +1387,16 @@ const getContent = (children, ...child) => {
1359
1387
  });
1360
1388
  return array.length == 0 ? null : array;
1361
1389
  };
1390
+ 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 } : {})));
1391
+ const mergeCode0Props = (cn, rest) => {
1392
+ const style = createStyle(rest);
1393
+ const newProps = rest;
1394
+ 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"];
1395
+ keys.forEach(key => {
1396
+ delete newProps[key];
1397
+ });
1398
+ return dist(newProps, Object.assign({ className: cn }, (Object.keys(style).length !== 0 ? { style: style } : {})));
1399
+ };
1362
1400
  const getWindowPositioning = () => {
1363
1401
  return {
1364
1402
  height: window.innerHeight,
@@ -1437,16 +1475,51 @@ const getPositionAroundTarget = (target, element, position = "bottom") => {
1437
1475
  };
1438
1476
  };
1439
1477
 
1478
+ const IconColors = {
1479
+ "info": React.createElement(IconInfoCircle, null),
1480
+ "primary": React.createElement(IconInfoCircle, null),
1481
+ "secondary": React.createElement(IconInfoCircle, null),
1482
+ "success": React.createElement(IconCircleCheck, null),
1483
+ "warning": React.createElement(IconAlertCircle, null),
1484
+ "error": React.createElement(IconCircleX, null)
1485
+ };
1486
+ const Alert = (props) => {
1487
+ const { color = "primary", dismissible = false, icon = true, title, onClose = (event) => { }, children } = props, rest = __rest(props, ["color", "dismissible", "icon", "title", "onClose", "children"]);
1488
+ return React.createElement("div", Object.assign({}, mergeCode0Props(`alert alert--${color}`, rest)),
1489
+ React.createElement("div", { className: "alert__header" },
1490
+ React.createElement("div", { className: "alert__header-wrapper" },
1491
+ icon ? React.createElement(AlertIcon, { color: color }) : null,
1492
+ React.createElement("span", { className: "alert__heading" }, title)),
1493
+ dismissible ? React.createElement("span", { className: "alert__dismissible", onClick: onClose },
1494
+ React.createElement(IconX, null)) : null),
1495
+ children ? React.createElement("div", { className: "alert__content" }, children) : null);
1496
+ };
1497
+ const AlertIcon = ({ color }) => {
1498
+ return React.createElement("span", { className: "alert__icon" }, IconColors[color]);
1499
+ };
1500
+
1501
+ 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}";
1502
+ styleInject(css_248z$e);
1503
+
1504
+ const Badge = (props) => {
1505
+ const { color = "primary", children } = props, args = __rest(props, ["color", "children"]);
1506
+ return React.createElement("span", Object.assign({}, mergeCode0Props(`badge badge--${color}`, args)), children);
1507
+ };
1508
+
1509
+ 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}";
1510
+ styleInject(css_248z$d);
1511
+
1440
1512
  const Button = (props) => {
1441
1513
  const { children, variant = "normal", color = "primary", active = false, disabled = false } = props, args = __rest(props, ["children", "variant", "color", "active", "disabled"]);
1442
1514
  const icon = getChild(children, ButtonIcon);
1443
1515
  const content = getContent(children, ButtonIcon);
1444
- return React.createElement("a", Object.assign({}, args, { className: `button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`, "aria-disabled": disabled ? "true" : "false" }),
1516
+ return React.createElement("a", Object.assign({}, mergeCode0Props(`button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""} button--${variant}`, args), { "aria-disabled": disabled ? "true" : "false" }),
1445
1517
  icon,
1446
1518
  content ? React.createElement("span", { className: "button__content" }, content) : null);
1447
1519
  };
1448
- const ButtonIcon = ({ children }) => {
1449
- return React.createElement("span", { className: "button__icon" }, children);
1520
+ const ButtonIcon = (props) => {
1521
+ const { children } = props, args = __rest(props, ["children"]);
1522
+ return React.createElement("span", Object.assign({}, mergeCode0Props("button__icon", args)), children);
1450
1523
  };
1451
1524
  var Button$1 = Object.assign(Button, {
1452
1525
  Icon: ButtonIcon
@@ -1456,8 +1529,8 @@ var css_248z$c = ".button-group {\n background: #030014;\n border: 1px solid r
1456
1529
  styleInject(css_248z$c);
1457
1530
 
1458
1531
  const ButtonGroup = (props) => {
1459
- const { children } = props;
1460
- return React.createElement("div", { className: "button-group" }, children.map((child, i) => {
1532
+ const { children } = props, args = __rest(props, ["children"]);
1533
+ return React.createElement("div", Object.assign({}, mergeCode0Props("button-group", args)), children.map((child, i) => {
1461
1534
  return React.createElement("div", { className: `${i == 0 || i == children.length - 1 ? i == 0 ? "button-group__first" : "button-group__last" : "button-group__item"}` }, child);
1462
1535
  }));
1463
1536
  };
@@ -1468,12 +1541,12 @@ styleInject(css_248z$b);
1468
1541
  const Card = (props) => {
1469
1542
  const { children, color = "secondary", variant = "normal", gradient = false, gradientPosition = "top-right", outline = false } = props, args = __rest(props, ["children", "color", "variant", "gradient", "gradientPosition", "outline"]);
1470
1543
  return React.createElement(React.Fragment, null,
1471
- React.createElement("div", Object.assign({}, args, { className: `card ${outline && "card--outline"} ${gradient && "card--gradient"} ${gradient && `card--gradient-${gradientPosition}`} card--${color} card--${variant}` }), children));
1544
+ React.createElement("div", Object.assign({}, mergeCode0Props(`card ${outline ? "card--outline" : ""} ${gradient ? "card--gradient" : ""} ${gradient ? `card--gradient-${gradientPosition}` : ""} card--${color} card--${variant}`, args)), children));
1472
1545
  };
1473
1546
  const CardSection = (props) => {
1474
- const { image = false, border = false, children } = props;
1547
+ const { image = false, border = false, children } = props, args = __rest(props, ["image", "border", "children"]);
1475
1548
  return React.createElement(React.Fragment, null,
1476
- React.createElement("div", { className: `card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}` }, children));
1549
+ React.createElement("div", Object.assign({}, mergeCode0Props(`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`, args)), children));
1477
1550
  };
1478
1551
  var Card$1 = Object.assign(Card, {
1479
1552
  Section: CardSection,
@@ -1484,7 +1557,7 @@ styleInject(css_248z$a);
1484
1557
 
1485
1558
  const Col = (props) => {
1486
1559
  const { children, xs, sm, md, lg, xl, xxl } = props, args = __rest(props, ["children", "xs", "sm", "md", "lg", "xl", "xxl"]);
1487
- return React.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);
1560
+ return React.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);
1488
1561
  };
1489
1562
 
1490
1563
  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}";
@@ -1492,7 +1565,7 @@ styleInject(css_248z$9);
1492
1565
 
1493
1566
  const Container = (props) => {
1494
1567
  const { children } = props, args = __rest(props, ["children"]);
1495
- return React.createElement("div", Object.assign({}, args, { className: "container" }), children);
1568
+ return React.createElement("div", Object.assign({}, mergeCode0Props("container", args)), children);
1496
1569
  };
1497
1570
 
1498
1571
  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}";
@@ -1666,7 +1739,7 @@ styleInject(css_248z$7);
1666
1739
 
1667
1740
  const Text = (_a) => {
1668
1741
  var { size, children, hierarchy = "secondary" } = _a, rest = __rest(_a, ["size", "children", "hierarchy"]);
1669
- return React.createElement("span", Object.assign({}, rest, { className: `text text--${hierarchy} text--${size}` }), children);
1742
+ return React.createElement("span", Object.assign({}, mergeCode0Props(`text text--${hierarchy} text--${size}`, rest)), children);
1670
1743
  };
1671
1744
 
1672
1745
  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}";
@@ -9060,12 +9133,12 @@ const Quote = (props) => {
9060
9133
  React.createElement(Text, { size: "sm" }, position))));
9061
9134
  };
9062
9135
 
9063
- 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 padding: 0 0.5rem;\n}";
9136
+ 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}";
9064
9137
  styleInject(css_248z$1);
9065
9138
 
9066
9139
  const Row = (props) => {
9067
9140
  const { children } = props, args = __rest(props, ["children"]);
9068
- return React.createElement("div", Object.assign({}, args, { className: "row" }), children);
9141
+ return React.createElement("div", Object.assign({}, mergeCode0Props("row", args)), children);
9069
9142
  };
9070
9143
 
9071
9144
  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/esm/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/esm/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') => {