@code0-tech/pictor 0.2.2 → 0.3.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.
- package/dist/cjs/components/flex/Flex.d.ts +8 -0
- package/dist/cjs/components/quote/Quote.d.ts +1 -1
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +45 -36
- package/dist/cjs/utils/types.d.ts +3 -0
- package/dist/esm/components/flex/Flex.d.ts +8 -0
- package/dist/esm/components/quote/Quote.d.ts +1 -1
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +45 -37
- package/dist/esm/utils/types.d.ts +3 -0
- package/dist/index.d.ts +10 -2
- package/package.json +1 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Code0Component } from "../../utils/types";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import "./Flex.style.scss";
|
|
4
|
+
interface FlexType extends Code0Component<HTMLDivElement> {
|
|
5
|
+
children: React.ReactNode | React.ReactNode[];
|
|
6
|
+
}
|
|
7
|
+
declare const Flex: React.FC<FlexType>;
|
|
8
|
+
export default Flex;
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -14,3 +14,4 @@ export { default as Popover } from "./components/popover/Popover";
|
|
|
14
14
|
export { default as Quote } from "./components/quote/Quote";
|
|
15
15
|
export { default as Row } from "./components/row/Row";
|
|
16
16
|
export { default as Tooltip } from "./components/tooltip/Tooltip";
|
|
17
|
+
export { default as Flex } from "./components/flex/Flex";
|
package/dist/cjs/index.js
CHANGED
|
@@ -1310,8 +1310,8 @@ function styleInject(css, ref) {
|
|
|
1310
1310
|
}
|
|
1311
1311
|
}
|
|
1312
1312
|
|
|
1313
|
-
var css_248z$
|
|
1314
|
-
styleInject(css_248z$
|
|
1313
|
+
var css_248z$g = ".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}";
|
|
1314
|
+
styleInject(css_248z$g);
|
|
1315
1315
|
|
|
1316
1316
|
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
|
|
1317
1317
|
__assign = Object.assign || function(t) {
|
|
@@ -1396,11 +1396,11 @@ const getContent = (children, ...child) => {
|
|
|
1396
1396
|
});
|
|
1397
1397
|
return array.length == 0 ? null : array;
|
|
1398
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 } : {})));
|
|
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(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 } : {})), (styles.align ? { alignItems: styles.align } : {})), (styles.justify ? { justifyContent: styles.justify } : {})), (styles.tf ? { transform: styles.tf } : {})));
|
|
1400
1400
|
const mergeCode0Props = (cn, rest) => {
|
|
1401
1401
|
const style = createStyle(rest);
|
|
1402
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"];
|
|
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", "align", "justify", "tf"];
|
|
1404
1404
|
keys.forEach(key => {
|
|
1405
1405
|
delete newProps[key];
|
|
1406
1406
|
});
|
|
@@ -1507,16 +1507,16 @@ const AlertIcon = ({ color }) => {
|
|
|
1507
1507
|
return React__default["default"].createElement("span", { className: "alert__icon" }, IconColors[color]);
|
|
1508
1508
|
};
|
|
1509
1509
|
|
|
1510
|
-
var css_248z$
|
|
1511
|
-
styleInject(css_248z$
|
|
1510
|
+
var css_248z$f = ".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$f);
|
|
1512
1512
|
|
|
1513
1513
|
const Badge = (props) => {
|
|
1514
1514
|
const { color = "primary", children } = props, args = __rest(props, ["color", "children"]);
|
|
1515
1515
|
return React__default["default"].createElement("span", Object.assign({}, mergeCode0Props(`badge badge--${color}`, args)), children);
|
|
1516
1516
|
};
|
|
1517
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$
|
|
1518
|
+
var css_248z$e = ".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$e);
|
|
1520
1520
|
|
|
1521
1521
|
const Button = (props) => {
|
|
1522
1522
|
const { children, variant = "normal", color = "primary", active = false, disabled = false } = props, args = __rest(props, ["children", "variant", "color", "active", "disabled"]);
|
|
@@ -1534,8 +1534,8 @@ var Button$1 = Object.assign(Button, {
|
|
|
1534
1534
|
Icon: ButtonIcon
|
|
1535
1535
|
});
|
|
1536
1536
|
|
|
1537
|
-
var css_248z$
|
|
1538
|
-
styleInject(css_248z$
|
|
1537
|
+
var css_248z$d = ".button-group {\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 border: none;\n width: fit-content;\n position: relative;\n display: flex;\n}\n.button-group * {\n margin-bottom: 0;\n}\n.button-group .button {\n margin-bottom: 0;\n border-radius: 0;\n display: inline-flex;\n}\n.button-group > div, .button-group .dropdown__trigger, .button-group .dropdown {\n display: inline-flex;\n margin-bottom: 0 !important;\n}\n.button-group__first .button {\n border-top-left-radius: 0.5rem !important;\n border-bottom-left-radius: 0.5rem !important;\n}\n.button-group__last .button {\n border-top-right-radius: 0.5rem !important;\n border-bottom-right-radius: 0.5rem !important;\n}";
|
|
1538
|
+
styleInject(css_248z$d);
|
|
1539
1539
|
|
|
1540
1540
|
const ButtonGroup = (props) => {
|
|
1541
1541
|
const { children } = props, args = __rest(props, ["children"]);
|
|
@@ -1544,8 +1544,8 @@ const ButtonGroup = (props) => {
|
|
|
1544
1544
|
}));
|
|
1545
1545
|
};
|
|
1546
1546
|
|
|
1547
|
-
var css_248z$
|
|
1548
|
-
styleInject(css_248z$
|
|
1547
|
+
var css_248z$c = ".card {\n padding: 0.5rem;\n position: relative;\n overflow: hidden;\n}\n.card *.card__section > img {\n border-radius: 0.5rem;\n}\n.card *:first-child.card__section {\n margin-top: 0;\n}\n.card *:first-child.card__section--border {\n padding-top: 0;\n border-top: none;\n}\n.card *:last-child.card__section {\n margin-bottom: 0;\n}\n.card *:last-child.card__section--border {\n padding-bottom: 0;\n border-bottom: none;\n}\n.card--outline {\n outline: 1px solid rgba(255, 255, 255, 0.1);\n outline-offset: 0.5rem;\n margin: 0.5rem;\n}\n.card__section {\n margin-bottom: 0.5rem;\n margin-top: 0.5rem;\n position: relative;\n}\n.card__section--border {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n padding: 0.5rem;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.card__section--border + .card__section--border {\n border-top: none;\n margin-top: -0.5em;\n}\n\n.card--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.card--primary.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--primary.card--filled {\n border-color: transparent;\n}\n.card--primary.card--outlined {\n background: transparent;\n}\n.card--primary.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--primary.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #1c1a2c 0%, transparent 50%);\n}\n.card--primary.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #1c1a2c 0%, transparent 50%);\n}\n.card--primary.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #1c1a2c 0%, transparent 50%);\n}\n.card--primary.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #1c1a2c 0%, transparent 50%);\n}\n\n.card--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.card--secondary.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--secondary.card--filled {\n border-color: transparent;\n}\n.card--secondary.card--outlined {\n background: transparent;\n}\n.card--secondary.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--secondary.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #353343 0%, transparent 50%);\n}\n.card--secondary.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #353343 0%, transparent 50%);\n}\n.card--secondary.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #353343 0%, transparent 50%);\n}\n.card--secondary.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #353343 0%, transparent 50%);\n}\n\n.card--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.card--success.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--success.card--filled {\n border-color: transparent;\n}\n.card--success.card--outlined {\n background: transparent;\n}\n.card--success.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--success.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #0b2614 0%, transparent 50%);\n}\n.card--success.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #0b2614 0%, transparent 50%);\n}\n.card--success.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #0b2614 0%, transparent 50%);\n}\n.card--success.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #0b2614 0%, transparent 50%);\n}\n\n.card--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.card--warning.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--warning.card--filled {\n border-color: transparent;\n}\n.card--warning.card--outlined {\n background: transparent;\n}\n.card--warning.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--warning.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #352612 0%, transparent 50%);\n}\n.card--warning.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #352612 0%, transparent 50%);\n}\n.card--warning.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #352612 0%, transparent 50%);\n}\n.card--warning.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #352612 0%, transparent 50%);\n}\n\n.card--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.card--error.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--error.card--filled {\n border-color: transparent;\n}\n.card--error.card--outlined {\n background: transparent;\n}\n.card--error.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--error.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #2e0118 0%, transparent 50%);\n}\n.card--error.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #2e0118 0%, transparent 50%);\n}\n.card--error.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #2e0118 0%, transparent 50%);\n}\n.card--error.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #2e0118 0%, transparent 50%);\n}\n\n.card--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.card--info.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--info.card--filled {\n border-color: transparent;\n}\n.card--info.card--outlined {\n background: transparent;\n}\n.card--info.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--info.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #193334 0%, transparent 50%);\n}\n.card--info.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #193334 0%, transparent 50%);\n}\n.card--info.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #193334 0%, transparent 50%);\n}\n.card--info.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #193334 0%, transparent 50%);\n}";
|
|
1548
|
+
styleInject(css_248z$c);
|
|
1549
1549
|
|
|
1550
1550
|
const Card = (props) => {
|
|
1551
1551
|
const { children, color = "secondary", variant = "normal", gradient = false, gradientPosition = "top-right", outline = false } = props, args = __rest(props, ["children", "color", "variant", "gradient", "gradientPosition", "outline"]);
|
|
@@ -1561,24 +1561,24 @@ var Card$1 = Object.assign(Card, {
|
|
|
1561
1561
|
Section: CardSection,
|
|
1562
1562
|
});
|
|
1563
1563
|
|
|
1564
|
-
var css_248z$
|
|
1565
|
-
styleInject(css_248z$
|
|
1564
|
+
var css_248z$b = ".col {\n flex: 1 0 0;\n}\n\n@media (min-width: 0) {\n .col-xs-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}";
|
|
1565
|
+
styleInject(css_248z$b);
|
|
1566
1566
|
|
|
1567
1567
|
const Col = (props) => {
|
|
1568
1568
|
const { children, xs, sm, md, lg, xl, xxl } = props, args = __rest(props, ["children", "xs", "sm", "md", "lg", "xl", "xxl"]);
|
|
1569
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);
|
|
1570
1570
|
};
|
|
1571
1571
|
|
|
1572
|
-
var css_248z$
|
|
1573
|
-
styleInject(css_248z$
|
|
1572
|
+
var css_248z$a = ".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}";
|
|
1573
|
+
styleInject(css_248z$a);
|
|
1574
1574
|
|
|
1575
1575
|
const Container = (props) => {
|
|
1576
1576
|
const { children } = props, args = __rest(props, ["children"]);
|
|
1577
1577
|
return React__default["default"].createElement("div", Object.assign({}, mergeCode0Props("container", args)), children);
|
|
1578
1578
|
};
|
|
1579
1579
|
|
|
1580
|
-
var css_248z$
|
|
1581
|
-
styleInject(css_248z$
|
|
1580
|
+
var css_248z$9 = ".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}";
|
|
1581
|
+
styleInject(css_248z$9);
|
|
1582
1582
|
|
|
1583
1583
|
/**
|
|
1584
1584
|
* Component creates a separate header with border bottom
|
|
@@ -1743,16 +1743,16 @@ var Dropdown$1 = Object.assign(Dropdown, {
|
|
|
1743
1743
|
})
|
|
1744
1744
|
});
|
|
1745
1745
|
|
|
1746
|
-
var css_248z$
|
|
1747
|
-
styleInject(css_248z$
|
|
1746
|
+
var css_248z$8 = ".text {\n font-family: Ubuntu, sans-serif;\n}\n\n.text--xs {\n font-size: 0.75rem;\n}\n\n.text--sm {\n font-size: 0.8rem;\n}\n\n.text--md {\n font-size: 1rem;\n}\n\n.text--lg {\n font-size: 1.2rem;\n}\n\n.text--xl {\n font-size: 1.25rem;\n}\n\n.text--primary {\n color: rgba(255, 255, 255, 0.75);\n}\n\n.text--secondary {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.text--tertiary {\n color: rgba(255, 255, 255, 0.25);\n}";
|
|
1747
|
+
styleInject(css_248z$8);
|
|
1748
1748
|
|
|
1749
1749
|
const Text = (_a) => {
|
|
1750
1750
|
var { size, children, hierarchy = "secondary" } = _a, rest = __rest(_a, ["size", "children", "hierarchy"]);
|
|
1751
1751
|
return React__default["default"].createElement("span", Object.assign({}, mergeCode0Props(`text text--${hierarchy} text--${size}`, rest)), children);
|
|
1752
1752
|
};
|
|
1753
1753
|
|
|
1754
|
-
var css_248z$
|
|
1755
|
-
styleInject(css_248z$
|
|
1754
|
+
var css_248z$7 = ".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}";
|
|
1755
|
+
styleInject(css_248z$7);
|
|
1756
1756
|
|
|
1757
1757
|
const Input = (props) => {
|
|
1758
1758
|
const { disabled = false, children, valid } = props;
|
|
@@ -1825,8 +1825,8 @@ var Input$1 = Object.assign(Input, {
|
|
|
1825
1825
|
})
|
|
1826
1826
|
});
|
|
1827
1827
|
|
|
1828
|
-
var css_248z$
|
|
1829
|
-
styleInject(css_248z$
|
|
1828
|
+
var css_248z$6 = ".list-group {\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n margin: 0 calc(-1 * var(--padding));\n padding: 0 var(--padding);\n}\n.list-group:last-of-type {\n border-bottom: 0;\n}\n.list-group__item {\n margin: 0 calc(-1 * var(--padding));\n padding: var(--padding);\n cursor: pointer;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.list-group__item:hover, .list-group__item:active, .list-group__item--active, .list-group__item:focus, .list-group__item:focus-visible {\n background: rgba(255, 255, 255, 0.1);\n outline: none;\n}\n.list-group__item:last-of-type {\n border-bottom: 0;\n}\n.list-group .dropdown__trigger {\n display: block;\n width: 100%;\n}\n.list-group .dropdown {\n width: calc(100% + var(--padding) * 2) !important;\n margin: 0 calc(-1 * var(--padding));\n}";
|
|
1829
|
+
styleInject(css_248z$6);
|
|
1830
1830
|
|
|
1831
1831
|
const ListGroup = (props) => {
|
|
1832
1832
|
const { children } = props; __rest(props, ["children"]);
|
|
@@ -8987,8 +8987,8 @@ function $875d6693e12af071$var$toggleKey(set, key) {
|
|
|
8987
8987
|
return res;
|
|
8988
8988
|
}
|
|
8989
8989
|
|
|
8990
|
-
var css_248z$
|
|
8991
|
-
styleInject(css_248z$
|
|
8990
|
+
var css_248z$5 = ".popover__content {\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 overflow-y: auto;\n}";
|
|
8991
|
+
styleInject(css_248z$5);
|
|
8992
8992
|
|
|
8993
8993
|
const InternalPopover = (props) => {
|
|
8994
8994
|
const { children, state, offset = 8, containerPadding = 24 } = props, args = __rest(props, ["children", "state", "offset", "containerPadding"]);
|
|
@@ -9000,8 +9000,8 @@ const InternalPopover = (props) => {
|
|
|
9000
9000
|
React__default["default"].createElement("div", Object.assign({}, popoverProps, { ref: popoverRef, className: "popover__content" }), children)));
|
|
9001
9001
|
};
|
|
9002
9002
|
|
|
9003
|
-
var css_248z$
|
|
9004
|
-
styleInject(css_248z$
|
|
9003
|
+
var css_248z$4 = ".menu {\n list-style: none;\n margin: -0.25rem 0;\n padding: 0;\n outline: none;\n}\n.menu > *:first-child.menu__section {\n border-top: none;\n margin-top: 0;\n padding-top: 0;\n}\n.menu > *:last-child.menu__section {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n}\n.menu__item {\n border: none !important;\n margin: 0 -0.25rem;\n border-radius: 0.5rem;\n padding: 0.5rem;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.menu__item--disabled {\n opacity: 50%;\n pointer-events: none;\n}\n.menu__item > div {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n}\n.menu__section {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n list-style: none;\n margin: 0.25rem -0.5rem;\n padding: 0.25rem 0.5rem;\n outline: none;\n}\n.menu__section + .menu__section {\n border-top: none;\n margin-top: -0.25rem;\n}\n.menu__section-title {\n font-size: 0.75rem;\n color: rgba(255, 255, 255, 0.25);\n display: block;\n margin: 0.25rem 0 0.25rem 0.25rem;\n}\n.menu__icon {\n margin-right: 0.5rem;\n}\n.menu__shortcut {\n margin-left: auto;\n padding-left: 0.5rem;\n}\n\n.menu__item--primary:hover, .menu__item--primary:active, .menu__item--primary--active, .menu__item--primary:focus, .menu__item--primary:focus-visible {\n background: rgba(3, 0, 20, 0.2);\n outline: none;\n}\n.menu__item--primary .menu__icon {\n color: rgba(3, 0, 20, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--secondary:hover, .menu__item--secondary:active, .menu__item--secondary--active, .menu__item--secondary:focus, .menu__item--secondary:focus-visible {\n background: rgba(255, 255, 255, 0.2);\n outline: none;\n}\n.menu__item--secondary .menu__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--success:hover, .menu__item--success:active, .menu__item--success--active, .menu__item--success:focus, .menu__item--success:focus-visible {\n background: rgba(41, 191, 18, 0.2);\n outline: none;\n}\n.menu__item--success .menu__icon {\n color: rgba(41, 191, 18, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--warning:hover, .menu__item--warning:active, .menu__item--warning--active, .menu__item--warning:focus, .menu__item--warning:focus-visible {\n background: rgba(255, 190, 11, 0.2);\n outline: none;\n}\n.menu__item--warning .menu__icon {\n color: rgba(255, 190, 11, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--error:hover, .menu__item--error:active, .menu__item--error--active, .menu__item--error:focus, .menu__item--error:focus-visible {\n background: rgba(217, 4, 41, 0.2);\n outline: none;\n}\n.menu__item--error .menu__icon {\n color: rgba(217, 4, 41, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--info:hover, .menu__item--info:active, .menu__item--info--active, .menu__item--info:focus, .menu__item--info:focus-visible {\n background: rgba(112, 255, 178, 0.2);\n outline: none;\n}\n.menu__item--info .menu__icon {\n color: rgba(112, 255, 178, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}";
|
|
9004
|
+
styleInject(css_248z$4);
|
|
9005
9005
|
|
|
9006
9006
|
function InternalMenu(props) {
|
|
9007
9007
|
const dummyState = $875d6693e12af071$export$728d6ba534403756(props);
|
|
@@ -9125,8 +9125,8 @@ var Popover$1 = Object.assign(Popover, {
|
|
|
9125
9125
|
Content: PopoverContent
|
|
9126
9126
|
});
|
|
9127
9127
|
|
|
9128
|
-
var css_248z$
|
|
9129
|
-
styleInject(css_248z$
|
|
9128
|
+
var css_248z$3 = "@charset \"UTF-8\";\n.quote {\n position: relative;\n}\n.quote__text:before, .quote__text:after {\n position: relative;\n content: \"”\";\n}\n.quote__img {\n width: 20%;\n max-width: 100px;\n filter: brightness(0) invert(1);\n}";
|
|
9129
|
+
styleInject(css_248z$3);
|
|
9130
9130
|
|
|
9131
9131
|
const Quote = (props) => {
|
|
9132
9132
|
const { logo, name, position, inlineBorder = true, children } = props, args = __rest(props, ["logo", "name", "position", "inlineBorder", "children"]);
|
|
@@ -9134,24 +9134,24 @@ const Quote = (props) => {
|
|
|
9134
9134
|
React__default["default"].createElement("div", { className: "quote" },
|
|
9135
9135
|
React__default["default"].createElement(Card$1.Section, { border: inlineBorder },
|
|
9136
9136
|
React__default["default"].createElement("div", { className: "quote__text" }, children)),
|
|
9137
|
-
React__default["default"].createElement(Card$1.Section, null,
|
|
9138
|
-
React__default["default"].createElement("img", { className: "quote__img", src: logo, alt: "logo of quote" })),
|
|
9137
|
+
!!logo ? React__default["default"].createElement(Card$1.Section, null,
|
|
9138
|
+
React__default["default"].createElement("img", { className: "quote__img", src: logo, alt: "logo of quote" })) : null,
|
|
9139
9139
|
React__default["default"].createElement(Card$1.Section, null,
|
|
9140
9140
|
React__default["default"].createElement(Text, { size: "md", hierarchy: "primary" }, name),
|
|
9141
9141
|
React__default["default"].createElement("br", null),
|
|
9142
9142
|
React__default["default"].createElement(Text, { size: "sm" }, position))));
|
|
9143
9143
|
};
|
|
9144
9144
|
|
|
9145
|
-
var css_248z$
|
|
9146
|
-
styleInject(css_248z$
|
|
9145
|
+
var css_248z$2 = ".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-left: 0.5rem;\n padding-right: 0.5rem;\n box-sizing: border-box;\n}";
|
|
9146
|
+
styleInject(css_248z$2);
|
|
9147
9147
|
|
|
9148
9148
|
const Row = (props) => {
|
|
9149
9149
|
const { children } = props, args = __rest(props, ["children"]);
|
|
9150
9150
|
return React__default["default"].createElement("div", Object.assign({}, mergeCode0Props("row", args)), children);
|
|
9151
9151
|
};
|
|
9152
9152
|
|
|
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}";
|
|
9154
|
-
styleInject(css_248z);
|
|
9153
|
+
var css_248z$1 = ".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}";
|
|
9154
|
+
styleInject(css_248z$1);
|
|
9155
9155
|
|
|
9156
9156
|
const Tooltip = (props) => {
|
|
9157
9157
|
const { position = "bottom", align = "start", children } = props, args = __rest(props, ["position", "align", "children"]);
|
|
@@ -9257,6 +9257,14 @@ var Tooltip$1 = Object.assign(Tooltip, {
|
|
|
9257
9257
|
Menu: TooltipMenu
|
|
9258
9258
|
});
|
|
9259
9259
|
|
|
9260
|
+
var css_248z = ".flex {\n display: flex;\n}";
|
|
9261
|
+
styleInject(css_248z);
|
|
9262
|
+
|
|
9263
|
+
const Flex = props => {
|
|
9264
|
+
const { children } = props, rest = __rest(props, ["children"]);
|
|
9265
|
+
return React__default["default"].createElement("div", Object.assign({}, mergeCode0Props("flex", rest)), children);
|
|
9266
|
+
};
|
|
9267
|
+
|
|
9260
9268
|
exports.Alert = Alert;
|
|
9261
9269
|
exports.Badge = Badge;
|
|
9262
9270
|
exports.Button = Button$1;
|
|
@@ -9265,6 +9273,7 @@ exports.Card = Card$1;
|
|
|
9265
9273
|
exports.Col = Col;
|
|
9266
9274
|
exports.Container = Container;
|
|
9267
9275
|
exports.Dropdown = Dropdown$1;
|
|
9276
|
+
exports.Flex = Flex;
|
|
9268
9277
|
exports.Input = Input$1;
|
|
9269
9278
|
exports.ListGroup = ListGroup$1;
|
|
9270
9279
|
exports.Menu = Menu$1;
|
|
@@ -49,6 +49,9 @@ export interface Code0ComponentProps {
|
|
|
49
49
|
inset?: StyleProp<React.CSSProperties['inset']>;
|
|
50
50
|
display?: StyleProp<React.CSSProperties['display']>;
|
|
51
51
|
flex?: StyleProp<React.CSSProperties['flex']>;
|
|
52
|
+
align?: StyleProp<React.CSSProperties['alignItems']>;
|
|
53
|
+
justify?: StyleProp<React.CSSProperties['justifyContent']>;
|
|
54
|
+
tf?: StyleProp<React.CSSProperties['transform']>;
|
|
52
55
|
}
|
|
53
56
|
export interface Code0Component<T> extends Code0ComponentProps, HTMLProps<T> {
|
|
54
57
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Code0Component } from "../../utils/types";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import "./Flex.style.scss";
|
|
4
|
+
interface FlexType extends Code0Component<HTMLDivElement> {
|
|
5
|
+
children: React.ReactNode | React.ReactNode[];
|
|
6
|
+
}
|
|
7
|
+
declare const Flex: React.FC<FlexType>;
|
|
8
|
+
export default Flex;
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -14,3 +14,4 @@ export { default as Popover } from "./components/popover/Popover";
|
|
|
14
14
|
export { default as Quote } from "./components/quote/Quote";
|
|
15
15
|
export { default as Row } from "./components/row/Row";
|
|
16
16
|
export { default as Tooltip } from "./components/tooltip/Tooltip";
|
|
17
|
+
export { default as Flex } from "./components/flex/Flex";
|
package/dist/esm/index.js
CHANGED
|
@@ -1301,8 +1301,8 @@ function styleInject(css, ref) {
|
|
|
1301
1301
|
}
|
|
1302
1302
|
}
|
|
1303
1303
|
|
|
1304
|
-
var css_248z$
|
|
1305
|
-
styleInject(css_248z$
|
|
1304
|
+
var css_248z$g = ".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}";
|
|
1305
|
+
styleInject(css_248z$g);
|
|
1306
1306
|
|
|
1307
1307
|
var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
|
|
1308
1308
|
__assign = Object.assign || function(t) {
|
|
@@ -1387,11 +1387,11 @@ const getContent = (children, ...child) => {
|
|
|
1387
1387
|
});
|
|
1388
1388
|
return array.length == 0 ? null : array;
|
|
1389
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 } : {})));
|
|
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(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 } : {})), (styles.align ? { alignItems: styles.align } : {})), (styles.justify ? { justifyContent: styles.justify } : {})), (styles.tf ? { transform: styles.tf } : {})));
|
|
1391
1391
|
const mergeCode0Props = (cn, rest) => {
|
|
1392
1392
|
const style = createStyle(rest);
|
|
1393
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"];
|
|
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", "align", "justify", "tf"];
|
|
1395
1395
|
keys.forEach(key => {
|
|
1396
1396
|
delete newProps[key];
|
|
1397
1397
|
});
|
|
@@ -1498,16 +1498,16 @@ const AlertIcon = ({ color }) => {
|
|
|
1498
1498
|
return React.createElement("span", { className: "alert__icon" }, IconColors[color]);
|
|
1499
1499
|
};
|
|
1500
1500
|
|
|
1501
|
-
var css_248z$
|
|
1502
|
-
styleInject(css_248z$
|
|
1501
|
+
var css_248z$f = ".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$f);
|
|
1503
1503
|
|
|
1504
1504
|
const Badge = (props) => {
|
|
1505
1505
|
const { color = "primary", children } = props, args = __rest(props, ["color", "children"]);
|
|
1506
1506
|
return React.createElement("span", Object.assign({}, mergeCode0Props(`badge badge--${color}`, args)), children);
|
|
1507
1507
|
};
|
|
1508
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$
|
|
1509
|
+
var css_248z$e = ".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$e);
|
|
1511
1511
|
|
|
1512
1512
|
const Button = (props) => {
|
|
1513
1513
|
const { children, variant = "normal", color = "primary", active = false, disabled = false } = props, args = __rest(props, ["children", "variant", "color", "active", "disabled"]);
|
|
@@ -1525,8 +1525,8 @@ var Button$1 = Object.assign(Button, {
|
|
|
1525
1525
|
Icon: ButtonIcon
|
|
1526
1526
|
});
|
|
1527
1527
|
|
|
1528
|
-
var css_248z$
|
|
1529
|
-
styleInject(css_248z$
|
|
1528
|
+
var css_248z$d = ".button-group {\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 border: none;\n width: fit-content;\n position: relative;\n display: flex;\n}\n.button-group * {\n margin-bottom: 0;\n}\n.button-group .button {\n margin-bottom: 0;\n border-radius: 0;\n display: inline-flex;\n}\n.button-group > div, .button-group .dropdown__trigger, .button-group .dropdown {\n display: inline-flex;\n margin-bottom: 0 !important;\n}\n.button-group__first .button {\n border-top-left-radius: 0.5rem !important;\n border-bottom-left-radius: 0.5rem !important;\n}\n.button-group__last .button {\n border-top-right-radius: 0.5rem !important;\n border-bottom-right-radius: 0.5rem !important;\n}";
|
|
1529
|
+
styleInject(css_248z$d);
|
|
1530
1530
|
|
|
1531
1531
|
const ButtonGroup = (props) => {
|
|
1532
1532
|
const { children } = props, args = __rest(props, ["children"]);
|
|
@@ -1535,8 +1535,8 @@ const ButtonGroup = (props) => {
|
|
|
1535
1535
|
}));
|
|
1536
1536
|
};
|
|
1537
1537
|
|
|
1538
|
-
var css_248z$
|
|
1539
|
-
styleInject(css_248z$
|
|
1538
|
+
var css_248z$c = ".card {\n padding: 0.5rem;\n position: relative;\n overflow: hidden;\n}\n.card *.card__section > img {\n border-radius: 0.5rem;\n}\n.card *:first-child.card__section {\n margin-top: 0;\n}\n.card *:first-child.card__section--border {\n padding-top: 0;\n border-top: none;\n}\n.card *:last-child.card__section {\n margin-bottom: 0;\n}\n.card *:last-child.card__section--border {\n padding-bottom: 0;\n border-bottom: none;\n}\n.card--outline {\n outline: 1px solid rgba(255, 255, 255, 0.1);\n outline-offset: 0.5rem;\n margin: 0.5rem;\n}\n.card__section {\n margin-bottom: 0.5rem;\n margin-top: 0.5rem;\n position: relative;\n}\n.card__section--border {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n padding: 0.5rem;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.card__section--border + .card__section--border {\n border-top: none;\n margin-top: -0.5em;\n}\n\n.card--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.card--primary.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--primary.card--filled {\n border-color: transparent;\n}\n.card--primary.card--outlined {\n background: transparent;\n}\n.card--primary.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--primary.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #1c1a2c 0%, transparent 50%);\n}\n.card--primary.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #1c1a2c 0%, transparent 50%);\n}\n.card--primary.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #1c1a2c 0%, transparent 50%);\n}\n.card--primary.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #1c1a2c 0%, transparent 50%);\n}\n\n.card--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.card--secondary.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--secondary.card--filled {\n border-color: transparent;\n}\n.card--secondary.card--outlined {\n background: transparent;\n}\n.card--secondary.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--secondary.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #353343 0%, transparent 50%);\n}\n.card--secondary.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #353343 0%, transparent 50%);\n}\n.card--secondary.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #353343 0%, transparent 50%);\n}\n.card--secondary.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #353343 0%, transparent 50%);\n}\n\n.card--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.card--success.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--success.card--filled {\n border-color: transparent;\n}\n.card--success.card--outlined {\n background: transparent;\n}\n.card--success.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--success.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #0b2614 0%, transparent 50%);\n}\n.card--success.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #0b2614 0%, transparent 50%);\n}\n.card--success.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #0b2614 0%, transparent 50%);\n}\n.card--success.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #0b2614 0%, transparent 50%);\n}\n\n.card--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.card--warning.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--warning.card--filled {\n border-color: transparent;\n}\n.card--warning.card--outlined {\n background: transparent;\n}\n.card--warning.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--warning.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #352612 0%, transparent 50%);\n}\n.card--warning.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #352612 0%, transparent 50%);\n}\n.card--warning.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #352612 0%, transparent 50%);\n}\n.card--warning.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #352612 0%, transparent 50%);\n}\n\n.card--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.card--error.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--error.card--filled {\n border-color: transparent;\n}\n.card--error.card--outlined {\n background: transparent;\n}\n.card--error.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--error.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #2e0118 0%, transparent 50%);\n}\n.card--error.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #2e0118 0%, transparent 50%);\n}\n.card--error.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #2e0118 0%, transparent 50%);\n}\n.card--error.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #2e0118 0%, transparent 50%);\n}\n\n.card--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.card--info.card--none {\n background: transparent;\n border-color: transparent;\n}\n.card--info.card--filled {\n border-color: transparent;\n}\n.card--info.card--outlined {\n background: transparent;\n}\n.card--info.card--gradient:before {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 75%;\n content: \"\";\n}\n.card--info.card--gradient.card--gradient-top-left:before {\n background: linear-gradient(135deg, #193334 0%, transparent 50%);\n}\n.card--info.card--gradient.card--gradient-bottom-left:before {\n background: linear-gradient(45deg, #193334 0%, transparent 50%);\n}\n.card--info.card--gradient.card--gradient-top-right:before {\n background: linear-gradient(225deg, #193334 0%, transparent 50%);\n}\n.card--info.card--gradient.card--gradient-bottom-right:before {\n background: linear-gradient(315deg, #193334 0%, transparent 50%);\n}";
|
|
1539
|
+
styleInject(css_248z$c);
|
|
1540
1540
|
|
|
1541
1541
|
const Card = (props) => {
|
|
1542
1542
|
const { children, color = "secondary", variant = "normal", gradient = false, gradientPosition = "top-right", outline = false } = props, args = __rest(props, ["children", "color", "variant", "gradient", "gradientPosition", "outline"]);
|
|
@@ -1552,24 +1552,24 @@ var Card$1 = Object.assign(Card, {
|
|
|
1552
1552
|
Section: CardSection,
|
|
1553
1553
|
});
|
|
1554
1554
|
|
|
1555
|
-
var css_248z$
|
|
1556
|
-
styleInject(css_248z$
|
|
1555
|
+
var css_248z$b = ".col {\n flex: 1 0 0;\n}\n\n@media (min-width: 0) {\n .col-xs-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 0) {\n .col-xs-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 576px) {\n .col-sm-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 992px) {\n .col-lg-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 1200px) {\n .col-xl-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-1 {\n flex: 0 0 auto;\n width: 8.3333333333%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-2 {\n flex: 0 0 auto;\n width: 16.6666666667%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-3 {\n flex: 0 0 auto;\n width: 25%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-4 {\n flex: 0 0 auto;\n width: 33.3333333333%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-5 {\n flex: 0 0 auto;\n width: 41.6666666667%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-6 {\n flex: 0 0 auto;\n width: 50%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-7 {\n flex: 0 0 auto;\n width: 58.3333333333%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-8 {\n flex: 0 0 auto;\n width: 66.6666666667%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-9 {\n flex: 0 0 auto;\n width: 75%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-10 {\n flex: 0 0 auto;\n width: 83.3333333333%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-11 {\n flex: 0 0 auto;\n width: 91.6666666667%;\n }\n}\n\n@media (min-width: 1400px) {\n .col-xxl-12 {\n flex: 0 0 auto;\n width: 100%;\n }\n}";
|
|
1556
|
+
styleInject(css_248z$b);
|
|
1557
1557
|
|
|
1558
1558
|
const Col = (props) => {
|
|
1559
1559
|
const { children, xs, sm, md, lg, xl, xxl } = props, args = __rest(props, ["children", "xs", "sm", "md", "lg", "xl", "xxl"]);
|
|
1560
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);
|
|
1561
1561
|
};
|
|
1562
1562
|
|
|
1563
|
-
var css_248z$
|
|
1564
|
-
styleInject(css_248z$
|
|
1563
|
+
var css_248z$a = ".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}";
|
|
1564
|
+
styleInject(css_248z$a);
|
|
1565
1565
|
|
|
1566
1566
|
const Container = (props) => {
|
|
1567
1567
|
const { children } = props, args = __rest(props, ["children"]);
|
|
1568
1568
|
return React.createElement("div", Object.assign({}, mergeCode0Props("container", args)), children);
|
|
1569
1569
|
};
|
|
1570
1570
|
|
|
1571
|
-
var css_248z$
|
|
1572
|
-
styleInject(css_248z$
|
|
1571
|
+
var css_248z$9 = ".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}";
|
|
1572
|
+
styleInject(css_248z$9);
|
|
1573
1573
|
|
|
1574
1574
|
/**
|
|
1575
1575
|
* Component creates a separate header with border bottom
|
|
@@ -1734,16 +1734,16 @@ var Dropdown$1 = Object.assign(Dropdown, {
|
|
|
1734
1734
|
})
|
|
1735
1735
|
});
|
|
1736
1736
|
|
|
1737
|
-
var css_248z$
|
|
1738
|
-
styleInject(css_248z$
|
|
1737
|
+
var css_248z$8 = ".text {\n font-family: Ubuntu, sans-serif;\n}\n\n.text--xs {\n font-size: 0.75rem;\n}\n\n.text--sm {\n font-size: 0.8rem;\n}\n\n.text--md {\n font-size: 1rem;\n}\n\n.text--lg {\n font-size: 1.2rem;\n}\n\n.text--xl {\n font-size: 1.25rem;\n}\n\n.text--primary {\n color: rgba(255, 255, 255, 0.75);\n}\n\n.text--secondary {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.text--tertiary {\n color: rgba(255, 255, 255, 0.25);\n}";
|
|
1738
|
+
styleInject(css_248z$8);
|
|
1739
1739
|
|
|
1740
1740
|
const Text = (_a) => {
|
|
1741
1741
|
var { size, children, hierarchy = "secondary" } = _a, rest = __rest(_a, ["size", "children", "hierarchy"]);
|
|
1742
1742
|
return React.createElement("span", Object.assign({}, mergeCode0Props(`text text--${hierarchy} text--${size}`, rest)), children);
|
|
1743
1743
|
};
|
|
1744
1744
|
|
|
1745
|
-
var css_248z$
|
|
1746
|
-
styleInject(css_248z$
|
|
1745
|
+
var css_248z$7 = ".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}";
|
|
1746
|
+
styleInject(css_248z$7);
|
|
1747
1747
|
|
|
1748
1748
|
const Input = (props) => {
|
|
1749
1749
|
const { disabled = false, children, valid } = props;
|
|
@@ -1816,8 +1816,8 @@ var Input$1 = Object.assign(Input, {
|
|
|
1816
1816
|
})
|
|
1817
1817
|
});
|
|
1818
1818
|
|
|
1819
|
-
var css_248z$
|
|
1820
|
-
styleInject(css_248z$
|
|
1819
|
+
var css_248z$6 = ".list-group {\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n margin: 0 calc(-1 * var(--padding));\n padding: 0 var(--padding);\n}\n.list-group:last-of-type {\n border-bottom: 0;\n}\n.list-group__item {\n margin: 0 calc(-1 * var(--padding));\n padding: var(--padding);\n cursor: pointer;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.list-group__item:hover, .list-group__item:active, .list-group__item--active, .list-group__item:focus, .list-group__item:focus-visible {\n background: rgba(255, 255, 255, 0.1);\n outline: none;\n}\n.list-group__item:last-of-type {\n border-bottom: 0;\n}\n.list-group .dropdown__trigger {\n display: block;\n width: 100%;\n}\n.list-group .dropdown {\n width: calc(100% + var(--padding) * 2) !important;\n margin: 0 calc(-1 * var(--padding));\n}";
|
|
1820
|
+
styleInject(css_248z$6);
|
|
1821
1821
|
|
|
1822
1822
|
const ListGroup = (props) => {
|
|
1823
1823
|
const { children } = props; __rest(props, ["children"]);
|
|
@@ -8978,8 +8978,8 @@ function $875d6693e12af071$var$toggleKey(set, key) {
|
|
|
8978
8978
|
return res;
|
|
8979
8979
|
}
|
|
8980
8980
|
|
|
8981
|
-
var css_248z$
|
|
8982
|
-
styleInject(css_248z$
|
|
8981
|
+
var css_248z$5 = ".popover__content {\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 overflow-y: auto;\n}";
|
|
8982
|
+
styleInject(css_248z$5);
|
|
8983
8983
|
|
|
8984
8984
|
const InternalPopover = (props) => {
|
|
8985
8985
|
const { children, state, offset = 8, containerPadding = 24 } = props, args = __rest(props, ["children", "state", "offset", "containerPadding"]);
|
|
@@ -8991,8 +8991,8 @@ const InternalPopover = (props) => {
|
|
|
8991
8991
|
React.createElement("div", Object.assign({}, popoverProps, { ref: popoverRef, className: "popover__content" }), children)));
|
|
8992
8992
|
};
|
|
8993
8993
|
|
|
8994
|
-
var css_248z$
|
|
8995
|
-
styleInject(css_248z$
|
|
8994
|
+
var css_248z$4 = ".menu {\n list-style: none;\n margin: -0.25rem 0;\n padding: 0;\n outline: none;\n}\n.menu > *:first-child.menu__section {\n border-top: none;\n margin-top: 0;\n padding-top: 0;\n}\n.menu > *:last-child.menu__section {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n}\n.menu__item {\n border: none !important;\n margin: 0 -0.25rem;\n border-radius: 0.5rem;\n padding: 0.5rem;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.menu__item--disabled {\n opacity: 50%;\n pointer-events: none;\n}\n.menu__item > div {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n}\n.menu__section {\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n list-style: none;\n margin: 0.25rem -0.5rem;\n padding: 0.25rem 0.5rem;\n outline: none;\n}\n.menu__section + .menu__section {\n border-top: none;\n margin-top: -0.25rem;\n}\n.menu__section-title {\n font-size: 0.75rem;\n color: rgba(255, 255, 255, 0.25);\n display: block;\n margin: 0.25rem 0 0.25rem 0.25rem;\n}\n.menu__icon {\n margin-right: 0.5rem;\n}\n.menu__shortcut {\n margin-left: auto;\n padding-left: 0.5rem;\n}\n\n.menu__item--primary:hover, .menu__item--primary:active, .menu__item--primary--active, .menu__item--primary:focus, .menu__item--primary:focus-visible {\n background: rgba(3, 0, 20, 0.2);\n outline: none;\n}\n.menu__item--primary .menu__icon {\n color: rgba(3, 0, 20, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--secondary:hover, .menu__item--secondary:active, .menu__item--secondary--active, .menu__item--secondary:focus, .menu__item--secondary:focus-visible {\n background: rgba(255, 255, 255, 0.2);\n outline: none;\n}\n.menu__item--secondary .menu__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--success:hover, .menu__item--success:active, .menu__item--success--active, .menu__item--success:focus, .menu__item--success:focus-visible {\n background: rgba(41, 191, 18, 0.2);\n outline: none;\n}\n.menu__item--success .menu__icon {\n color: rgba(41, 191, 18, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--warning:hover, .menu__item--warning:active, .menu__item--warning--active, .menu__item--warning:focus, .menu__item--warning:focus-visible {\n background: rgba(255, 190, 11, 0.2);\n outline: none;\n}\n.menu__item--warning .menu__icon {\n color: rgba(255, 190, 11, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--error:hover, .menu__item--error:active, .menu__item--error--active, .menu__item--error:focus, .menu__item--error:focus-visible {\n background: rgba(217, 4, 41, 0.2);\n outline: none;\n}\n.menu__item--error .menu__icon {\n color: rgba(217, 4, 41, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}\n\n.menu__item--info:hover, .menu__item--info:active, .menu__item--info--active, .menu__item--info:focus, .menu__item--info:focus-visible {\n background: rgba(112, 255, 178, 0.2);\n outline: none;\n}\n.menu__item--info .menu__icon {\n color: rgba(112, 255, 178, 0.5);\n}\n\n.menu__item--unselectable {\n background: transparent !important;\n pointer-events: none;\n}";
|
|
8995
|
+
styleInject(css_248z$4);
|
|
8996
8996
|
|
|
8997
8997
|
function InternalMenu(props) {
|
|
8998
8998
|
const dummyState = $875d6693e12af071$export$728d6ba534403756(props);
|
|
@@ -9116,8 +9116,8 @@ var Popover$1 = Object.assign(Popover, {
|
|
|
9116
9116
|
Content: PopoverContent
|
|
9117
9117
|
});
|
|
9118
9118
|
|
|
9119
|
-
var css_248z$
|
|
9120
|
-
styleInject(css_248z$
|
|
9119
|
+
var css_248z$3 = "@charset \"UTF-8\";\n.quote {\n position: relative;\n}\n.quote__text:before, .quote__text:after {\n position: relative;\n content: \"”\";\n}\n.quote__img {\n width: 20%;\n max-width: 100px;\n filter: brightness(0) invert(1);\n}";
|
|
9120
|
+
styleInject(css_248z$3);
|
|
9121
9121
|
|
|
9122
9122
|
const Quote = (props) => {
|
|
9123
9123
|
const { logo, name, position, inlineBorder = true, children } = props, args = __rest(props, ["logo", "name", "position", "inlineBorder", "children"]);
|
|
@@ -9125,24 +9125,24 @@ const Quote = (props) => {
|
|
|
9125
9125
|
React.createElement("div", { className: "quote" },
|
|
9126
9126
|
React.createElement(Card$1.Section, { border: inlineBorder },
|
|
9127
9127
|
React.createElement("div", { className: "quote__text" }, children)),
|
|
9128
|
-
React.createElement(Card$1.Section, null,
|
|
9129
|
-
React.createElement("img", { className: "quote__img", src: logo, alt: "logo of quote" })),
|
|
9128
|
+
!!logo ? React.createElement(Card$1.Section, null,
|
|
9129
|
+
React.createElement("img", { className: "quote__img", src: logo, alt: "logo of quote" })) : null,
|
|
9130
9130
|
React.createElement(Card$1.Section, null,
|
|
9131
9131
|
React.createElement(Text, { size: "md", hierarchy: "primary" }, name),
|
|
9132
9132
|
React.createElement("br", null),
|
|
9133
9133
|
React.createElement(Text, { size: "sm" }, position))));
|
|
9134
9134
|
};
|
|
9135
9135
|
|
|
9136
|
-
var css_248z$
|
|
9137
|
-
styleInject(css_248z$
|
|
9136
|
+
var css_248z$2 = ".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-left: 0.5rem;\n padding-right: 0.5rem;\n box-sizing: border-box;\n}";
|
|
9137
|
+
styleInject(css_248z$2);
|
|
9138
9138
|
|
|
9139
9139
|
const Row = (props) => {
|
|
9140
9140
|
const { children } = props, args = __rest(props, ["children"]);
|
|
9141
9141
|
return React.createElement("div", Object.assign({}, mergeCode0Props("row", args)), children);
|
|
9142
9142
|
};
|
|
9143
9143
|
|
|
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}";
|
|
9145
|
-
styleInject(css_248z);
|
|
9144
|
+
var css_248z$1 = ".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}";
|
|
9145
|
+
styleInject(css_248z$1);
|
|
9146
9146
|
|
|
9147
9147
|
const Tooltip = (props) => {
|
|
9148
9148
|
const { position = "bottom", align = "start", children } = props, args = __rest(props, ["position", "align", "children"]);
|
|
@@ -9248,4 +9248,12 @@ var Tooltip$1 = Object.assign(Tooltip, {
|
|
|
9248
9248
|
Menu: TooltipMenu
|
|
9249
9249
|
});
|
|
9250
9250
|
|
|
9251
|
-
|
|
9251
|
+
var css_248z = ".flex {\n display: flex;\n}";
|
|
9252
|
+
styleInject(css_248z);
|
|
9253
|
+
|
|
9254
|
+
const Flex = props => {
|
|
9255
|
+
const { children } = props, rest = __rest(props, ["children"]);
|
|
9256
|
+
return React.createElement("div", Object.assign({}, mergeCode0Props("flex", rest)), children);
|
|
9257
|
+
};
|
|
9258
|
+
|
|
9259
|
+
export { Alert, Badge, Button$1 as Button, ButtonGroup, Card$1 as Card, Col, Container, Dropdown$1 as Dropdown, Flex, Input$1 as Input, ListGroup$1 as ListGroup, Menu$1 as Menu, Popover$1 as Popover, Quote, Row, Text, Tooltip$1 as Tooltip };
|
|
@@ -49,6 +49,9 @@ export interface Code0ComponentProps {
|
|
|
49
49
|
inset?: StyleProp<React.CSSProperties['inset']>;
|
|
50
50
|
display?: StyleProp<React.CSSProperties['display']>;
|
|
51
51
|
flex?: StyleProp<React.CSSProperties['flex']>;
|
|
52
|
+
align?: StyleProp<React.CSSProperties['alignItems']>;
|
|
53
|
+
justify?: StyleProp<React.CSSProperties['justifyContent']>;
|
|
54
|
+
tf?: StyleProp<React.CSSProperties['transform']>;
|
|
52
55
|
}
|
|
53
56
|
export interface Code0Component<T> extends Code0ComponentProps, HTMLProps<T> {
|
|
54
57
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -52,6 +52,9 @@ interface Code0ComponentProps {
|
|
|
52
52
|
inset?: StyleProp<React.CSSProperties['inset']>;
|
|
53
53
|
display?: StyleProp<React.CSSProperties['display']>;
|
|
54
54
|
flex?: StyleProp<React.CSSProperties['flex']>;
|
|
55
|
+
align?: StyleProp<React.CSSProperties['alignItems']>;
|
|
56
|
+
justify?: StyleProp<React.CSSProperties['justifyContent']>;
|
|
57
|
+
tf?: StyleProp<React.CSSProperties['transform']>;
|
|
55
58
|
}
|
|
56
59
|
interface Code0Component<T> extends Code0ComponentProps, HTMLProps<T> {
|
|
57
60
|
}
|
|
@@ -266,7 +269,7 @@ declare const _default$1: React.FC<MenuType<any>> & {
|
|
|
266
269
|
|
|
267
270
|
interface QuoteType extends Omit<CardType, "children"> {
|
|
268
271
|
children: string;
|
|
269
|
-
logo
|
|
272
|
+
logo?: string;
|
|
270
273
|
name: string;
|
|
271
274
|
position: string;
|
|
272
275
|
inlineBorder?: boolean;
|
|
@@ -294,4 +297,9 @@ declare const _default: React.FC<DropdownType> & {
|
|
|
294
297
|
Menu: React.FC<TooltipMenuType>;
|
|
295
298
|
};
|
|
296
299
|
|
|
297
|
-
|
|
300
|
+
interface FlexType extends Code0Component<HTMLDivElement> {
|
|
301
|
+
children: React.ReactNode | React.ReactNode[];
|
|
302
|
+
}
|
|
303
|
+
declare const Flex: React.FC<FlexType>;
|
|
304
|
+
|
|
305
|
+
export { Alert, Badge, _default$7 as Button, ButtonGroup, _default$6 as Card, Col, Container, _default$5 as Dropdown, Flex, _default$4 as Input, _default$3 as ListGroup, _default$1 as Menu, _default$2 as Popover, Quote, Row, Text, _default as Tooltip };
|