@blockadegames/pizza-juice
Version:
Pizza Juice Design System
2,064 lines (1,992 loc) • 158 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// index.ts
var pizza_juice_exports = {};
__export(pizza_juice_exports, {
Accordion: () => Accordion2,
AccordionItem: () => AccordionItem2,
Alert: () => Alert,
ArrowDown: () => ArrowDown,
ArrowLeft: () => ArrowLeft,
ArrowRight: () => ArrowRight,
ArrowUp: () => ArrowUp,
Avatar: () => Avatar2,
Badge: () => Badge2,
BaseRadioGroup: () => BaseRadioGroup,
BaseRadioItem: () => BaseRadioItem,
Box: () => Box,
Button: () => Button2,
CSSReset: () => CSSReset,
CaretDown: () => CaretDown,
CaretLeft: () => CaretLeft,
CaretRight: () => CaretRight,
CaretUp: () => CaretUp,
Center: () => Center2,
Character: () => Character,
Check: () => Check,
CheckSolid: () => CheckSolid,
Checkbox: () => Checkbox,
ChevronDown: () => ChevronDown,
ChevronLeft: () => ChevronLeft,
ChevronRight: () => ChevronRight,
ChevronUp: () => ChevronUp,
CircularProgress: () => CircularProgress,
ClickAwayListener: () => ClickAwayListener,
Close: () => Close,
CloseSolid: () => CloseSolid,
Col: () => Col,
Container: () => Container,
ContentHeading: () => ContentHeading,
Copy: () => Copy,
Countdown: () => Countdown,
Divider: () => Divider,
Expand: () => Expand,
ExternalLink: () => ExternalLink,
Eye: () => Eye,
EyeSlash: () => EyeSlash,
FaceSad: () => FaceSad,
FadeIn: () => FadeIn,
FadeInWhenVisible: () => FadeInWhenVisible,
FlagSolid: () => FlagSolid,
Flex: () => Flex,
Grid: () => Grid,
Icon: () => Icon,
IconButton: () => IconButton,
Image: () => Image2,
InfoOutline: () => InfoOutline,
InfoSolid: () => InfoSolid,
Input: () => Input2,
Label: () => Label4,
Lock: () => Lock,
LogOut: () => LogOut,
Logo: () => Logo,
Modal: () => Modal,
ModalDescription: () => ModalDescription,
ModalTitle: () => ModalTitle,
PageHeading: () => PageHeading,
PageInfo: () => PageInfo,
Pagination: () => Pagination,
Pause: () => Pause,
PizzaJuiceProvider: () => PizzaJuiceProvider,
Play: () => Play,
Progress: () => Progress,
RadioGroup: () => RadioGroup2,
RadioItem: () => RadioItem,
Rate: () => Rate,
Root: () => Root11,
Row: () => Row,
Select: () => Select2,
Settings: () => Settings,
Shrink: () => Shrink,
Skeleton: () => Skeleton,
SkipNext: () => SkipNext,
SkipPrevious: () => SkipPrevious,
Slide: () => Slide,
Slider: () => Slider,
Spacer: () => Spacer,
Spinner: () => Spinner2,
Stack: () => Stack,
Star: () => Star,
Status: () => Status,
Stepper: () => Stepper,
Tab: () => Tab,
TabContent: () => TabContent,
TabItem: () => TabItem,
TabList: () => TabList,
Tag: () => Tag,
Text: () => Text,
Textarea: () => Textarea2,
ToastBase: () => ToastBase,
ToastContainer: () => ToastContainer2,
Toggle: () => Toggle,
Tooltip: () => Tooltip,
User: () => User,
VisuallyHidden: () => VisuallyHidden,
VolumeDown: () => VolumeDown,
VolumeMute: () => VolumeMute,
VolumeUp: () => VolumeUp,
_DAY: () => _DAY,
_HOUR: () => _HOUR,
_MINUTE: () => _MINUTE,
_SECOND: () => _SECOND,
assignRef: () => assignRef,
config: () => config,
createIcon: () => createIcon,
css: () => css,
cx: () => cx,
forwardRef: () => forwardRef2,
getCssText: () => getCssText,
globalCss: () => globalCss,
isUndefined: () => isUndefined,
keyframes: () => keyframes,
pxToRem: () => pxToRem,
styled: () => styled,
theme: () => theme,
toast: () => toast2,
useBreakpoint: () => useBreakpoint,
useClipboard: () => useClipboard,
useCountdown: () => useCountdown,
useDisclosure: () => useDisclosure,
useId: () => useId,
useMediaQuery: () => useMediaQuery,
useMergeRefs: () => useMergeRefs,
valueToPercent: () => valueToPercent
});
module.exports = __toCommonJS(pizza_juice_exports);
// src/components/button/index.tsx
var import_react2 = __toESM(require("react"));
// src/utils/forwardRef.ts
var React = __toESM(require("react"));
function forwardRef2(component) {
return React.forwardRef(component);
}
// src/utils/pxToRem.ts
var pxToRem = (px, base = 16) => `${px / base}rem`;
// src/utils/convert.ts
function valueToPercent(value, min, max) {
return (value - min) * 100 / (max - min);
}
// src/utils/assertion.ts
var isUndefined = (value) => {
return typeof value === "undefined" || value === void 0;
};
// src/utils/className.ts
var cx = (...classNames) => {
return classNames.filter(Boolean).join(" ");
};
// src/system/index.ts
var import_react = require("@stitches/react");
// src/theme/foundations/colors.ts
var colors = {
white: "#ffffff",
black: "#000000",
"pink-500": "#f571ab",
"pink-600": "#c9427d",
"pink-700": "#a43f6b",
"grey-400": "#a5a5a5",
"grey-600": "#747474",
"grey-700": "#393939",
"grey-800": "#1c1c1c",
"grey-850": "#0e0e0e",
"grey-900": "#0d0d0d",
"red-500": "#ff5e7c",
"red-550": "#cc4b63",
"red-600": "#99384a",
"red-650": "#802f3e",
"red-900": "#19090c",
"teal-500": "#0fb4b6",
"yellow-500": "#f4d360",
"yellow-550": "#c2a74c",
"yellow-600": "#8f7b38",
"yellow-700": "#5c4f24",
"yellow-900": "#18150a",
"green-500": "#8cbe72",
"green-550": "#678c54",
"green-600": "#425936",
"green-700": "#26331f",
"green-900": "#0e130b",
common: "#ffffff",
uncommon: "#19E378",
rare: "#1EEBFD",
"ultra-rare": "#FD4292",
legendary: "#FFCD1B",
"ability-100": "#CCFFE7",
"ability-200": "#99FFCE",
"ability-300": "#66FFB6",
"ability-400": "#33FF9D",
"ability-500": "#00FF85",
"ability-550": "#00E578",
"ability-600": "#00CC6A",
"ability-650": "#00B35D",
"ability-700": "#009950",
"ability-750": "#008042",
"ability-800": "#006635",
"ability-850": "#004C28",
"ability-900": "#00331B",
"ability-950": "#001A0D",
"ability-975": "#000D07",
"interact-100": "#FBCCFF",
"interact-200": "#F799FF",
"interact-300": "#F466FF",
"interact-400": "#F033FF",
"interact-500": "#EC00FF",
"interact-550": "#D400E5",
"interact-600": "#BD00CC",
"interact-650": "#A500B3",
"interact-700": "#8E0099",
"interact-750": "#760080",
"interact-800": "#5E0066",
"interact-850": "#47004C",
"interact-900": "#2F0033",
"interact-950": "#18001A",
"interact-975": "#0D0100",
"attack-100": "#FFD0CC",
"attack-200": "#FFA299",
"attack-300": "#FF7366",
"attack-400": "#FF4533",
"attack-500": "#FF1600",
"attack-550": "#E51400",
"attack-600": "#CC1200",
"attack-650": "#B30F00",
"attack-700": "#990D00",
"attack-750": "#800B00",
"attack-800": "#660900",
"attack-850": "#4C0700",
"attack-900": "#330400",
"attack-950": "#1A0200",
"attack-975": "#0D0100",
"effect-100": "#FFF4CC",
"effect-200": "#FFE899",
"effect-300": "#FFDD66",
"effect-400": "#FFD133",
"effect-500": "#FFC600",
"effect-550": "#E5B200",
"effect-600": "#CC9E00",
"effect-650": "#B38B00",
"effect-700": "#997700",
"effect-750": "#806300",
"effect-800": "#664F00",
"effect-850": "#4C3B00",
"effect-900": "#332800",
"effect-950": "#1A1400",
"effect-975": "#0D0A00",
taunt: "#0AF5F7",
"counter-attack": "#38C591",
poison: "#C24EFF",
regeneration: "#F4D360",
shield: "#FF5E7C",
"neon-pink-100": "#FFCCE1",
"neon-pink-200": "#FF99C4",
"neon-pink-300": "#FF66A6",
"neon-pink-400": "#FF3389",
"neon-pink-500": "#FF006B",
"neon-pink-550": "#E50060",
"neon-pink-600": "#CC0056",
"neon-pink-650": "#B3004B",
"neon-pink-700": "#990040",
"neon-pink-750": "#800036",
"neon-pink-800": "#66002B",
"neon-pink-850": "#4C0020",
"neon-pink-900": "#330015",
"neon-pink-950": "#1A000B",
"neon-pink-975": "#0D0005",
"neon-blue-100": "#D1FAFC",
"neon-blue-200": "#A3F5F9",
"neon-blue-300": "#76F1F6",
"neon-blue-400": "#48ECF3",
"neon-blue-500": "#1AE7F0",
"neon-blue-550": "#17D0D8",
"neon-blue-600": "#15B9C0",
"neon-blue-650": "#12A2A8",
"neon-blue-700": "#108B90",
"neon-blue-750": "#0D7378",
"neon-blue-800": "#0A5C60",
"neon-blue-850": "#084548",
"neon-blue-900": "#052E30",
"neon-blue-950": "#031718",
"neon-blue-975": "#010C0C"
};
var colors_default = colors;
// src/theme/foundations/transitions.ts
var transitions = {
fast: "all 0.2s ease"
};
var transitions_default = transitions;
// src/theme/foundations/fonts.ts
var fonts = {
system: '"Titillium Web", system-ui'
};
var fonts_default = fonts;
// src/theme/foundations/fontSizes.ts
var fontSizes = {
"3xs": pxToRem(8),
"2xs": pxToRem(10),
xs: pxToRem(12),
sm: pxToRem(14),
md: pxToRem(16),
lg: pxToRem(20),
xl: pxToRem(22),
"2xl": pxToRem(24),
"3xl": pxToRem(26),
"4xl": pxToRem(28)
};
var fontSizes_default = fontSizes;
// src/theme/foundations/fontWeights.ts
var fontWeights = {
thin: 300,
normal: 400,
medium: 600,
bold: 700,
extrabold: 900
};
var fontWeights_default = fontWeights;
// src/theme/foundations/radii.ts
var radii = {
full: pxToRem(9999),
half: "50%",
sm: pxToRem(5),
md: pxToRem(12)
};
var radii_default = radii;
// src/theme/foundations/sizes.ts
var sizes = {
full: "100%",
sm: pxToRem(576),
md: pxToRem(768),
lg: pxToRem(992),
xl: pxToRem(1200),
"2xl": pxToRem(1400)
};
var sizes_default = sizes;
// src/theme/foundations/space.ts
var space = {
0: pxToRem(0),
1: pxToRem(4),
2: pxToRem(8),
3: pxToRem(12),
4: pxToRem(16),
5: pxToRem(20),
6: pxToRem(24),
7: pxToRem(28),
8: pxToRem(32),
9: pxToRem(36),
10: pxToRem(40),
11: pxToRem(44),
12: pxToRem(48),
13: pxToRem(52),
14: pxToRem(56),
15: pxToRem(60),
16: pxToRem(64),
17: pxToRem(68),
18: pxToRem(72),
19: pxToRem(76),
20: pxToRem(80)
};
var space_default = space;
// src/theme/foundations/z-index.ts
var zIndices = {
hide: -1,
auto: "auto",
base: 0,
docked: 10,
dropdown: 1e3,
sticky: 1100,
banner: 1200,
overlay: 1300,
modal: 1400,
popover: 1500,
skipLink: 1600,
toast: 1700,
tooltip: 1800
};
var z_index_default = zIndices;
// src/theme/foundations/breakpoints.ts
var breakpoints = {
sm: pxToRem(576),
md: pxToRem(768),
lg: pxToRem(992),
xl: pxToRem(1200),
"2xl": pxToRem(1400)
};
var breakpoints_default = breakpoints;
// src/theme/foundations/shadows.ts
var shadows = {};
var shadows_default = shadows;
// src/theme/foundations/blurs.ts
var blurs = {
sm: "3px",
md: "6px",
lg: "12px"
};
var blurs_default = blurs;
// src/theme/index.ts
var theme = {
colors: colors_default,
transitions: transitions_default,
fonts: fonts_default,
fontSizes: fontSizes_default,
fontWeights: fontWeights_default,
radii: radii_default,
sizes: sizes_default,
space: space_default,
zIndices: z_index_default,
breakpoints: breakpoints_default,
shadows: shadows_default,
blurs: blurs_default
};
var theme_default = theme;
// src/system/index.ts
var { config, css, globalCss, styled, getCssText, keyframes } = (0, import_react.createStitches)({
theme: theme_default,
utils: {
m: (v) => ({
margin: v
}),
mt: (v) => ({
marginTop: v
}),
mr: (v) => ({
marginRight: v
}),
mb: (v) => ({
marginBottom: v
}),
ml: (v) => ({
marginLeft: v
}),
mx: (v) => ({
marginLeft: v,
marginRight: v
}),
my: (v) => ({
marginTop: v,
marginBottom: v
}),
p: (v) => ({
padding: v
}),
pt: (v) => ({
paddingTop: v
}),
pr: (v) => ({
paddingRight: v
}),
pb: (v) => ({
paddingBottom: v
}),
pl: (v) => ({
paddingLeft: v
}),
px: (v) => ({
paddingLeft: v,
paddingRight: v
}),
py: (v) => ({
paddingTop: v,
paddingBottom: v
}),
bg: (v) => ({
background: v
}),
size: (v) => ({
width: v,
height: v
}),
maxSize: (v) => ({
maxWidth: v,
maxHeight: v
}),
minSize: (v) => ({
minWidth: v,
minHeight: v
}),
br: (v) => ({
borderRadius: v
}),
bs: (v) => ({
boxShadow: v
}),
justify: (v) => ({
justifyContent: v
}),
align: (v) => ({
alignItems: v
}),
h: (v) => ({
height: v
}),
maxH: (v) => ({
maxHeight: v
}),
minH: (v) => ({
minHeight: v
}),
w: (v) => ({
width: v
}),
maxW: (v) => ({
maxWidth: v
}),
minW: (v) => ({
minWidth: v
}),
d: (v) => ({
display: v
}),
columns: (v) => ({
gridTemplateColumns: v
}),
rows: (v) => ({
gridTemplateRows: v
}),
blur: (v) => ({
filter: `blur(${v})`
}),
textGradient: (v) => ({
backgroundImage: `linear-gradient(${v})`,
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
"&::selection": {
WebkitTextFillColor: "$colors$text"
}
})
},
media: {
sm: "(min-width: 576px)",
md: "(min-width: 768px)",
lg: "(min-width: 992px)",
xl: "(min-width: 1200px)",
"2xl": "(min-width: 1400px)",
motion: "(prefers-reduced-motion: reduce)",
hover: "(any-hover: hover)",
dark: "(prefers-color-scheme: dark)",
light: "(prefers-color-scheme: light)"
},
themeMap: {
...import_react.defaultThemeMap
}
});
// src/components/visually-hidden/index.tsx
var RVisuallyHidden = __toESM(require("@radix-ui/react-visually-hidden"));
var import_jsx_runtime = require("react/jsx-runtime");
var VisuallyHidden = forwardRef2(
(props, ref) => {
const { className, children } = props;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
RVisuallyHidden.Root,
{
ref,
className: cx("visually-hidden", className),
children
}
);
}
);
// src/components/spinner/styles.ts
var spin = keyframes({
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" }
});
var Spinner = styled("div", {
$$color: "currentColor",
$$size: "16px",
$$thickness: 1.5,
$$speed: "0.4s",
d: "inline-block",
color: "$$color",
size: "$$size",
borderTopColor: "currentcolor",
borderRightColor: "currentcolor",
borderStyle: "solid",
br: "$full",
borderWidth: "$$thickness",
borderBottomColor: "transparent",
borderLeftColor: "transparent",
animation: `${spin} $$speed linear infinite`
});
// src/components/spinner/index.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Spinner2 = forwardRef2((props, ref) => {
const { className, ...rest } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { ref, className: cx("spinner", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VisuallyHidden, { children: "Loading" }) });
});
// src/components/button/styles.ts
var Button = styled("button", {
appearance: "none",
bg: "transparent",
fontFamily: "inherit",
border: "1px solid",
borderColor: "transparent",
whiteSpace: "nowrap",
outline: 0,
minW: 40,
h: 40,
d: "flex",
align: "center",
justify: "center",
px: "$6",
gap: "$2",
color: "$white",
fontSize: "$sm",
fontWeight: 600,
textTransform: "uppercase",
userSelect: "none",
transition: "$fast",
"&:not(:disabled)": {
cursor: "pointer"
},
"&:focus": {
borderColor: "$teal-500"
},
"&:disabled": {
$$disabledBg: "$colors$grey-600",
cursor: "not-allowed",
color: "$grey-700",
"&:hover": {
color: "$grey-700"
},
"&:active": {
color: "$grey-700"
}
},
variants: {
color: {
primary: {
$$bgSolid: "$colors$pink-500",
$$bgHover: "$colors$pink-600",
$$bgActive: "$colors$pink-700"
},
secondary: {
$$bgSolid: "$colors$grey-700",
$$bgHover: "$colors$grey-800",
$$bgActive: "$colors$grey-850"
},
destructive: {
color: "$black",
$$bgSolid: "$colors$red-500",
$$bgHover: "$colors$red-550",
$$bgActive: "$colors$red-600"
},
warning: {
color: "$black",
$$bgSolid: "$colors$yellow-500",
$$bgHover: "$colors$yellow-550",
$$bgActive: "$colors$yellow-600"
},
success: {
color: "$black",
$$bgSolid: "$colors$green-500",
$$bgHover: "$colors$green-550",
$$bgActive: "$colors$green-600"
}
},
shape: {
rounded: {
br: "$full"
},
squared: {
br: 0
}
},
variant: {
solid: {
"&:disabled": {
bg: "$$disabledBg",
"&:hover": {
bg: "$$disabledBg"
},
"&:active": {
bg: "$$disabledBg"
}
},
bg: "$$bgSolid",
"&:hover": {
bg: "$$bgHover"
},
"&:active": {
bg: "$$bgActive"
}
},
naked: {
bg: "transparent",
"&:disabled": {
borderColor: "transparent",
"&:hover": {
borderColor: "transparent",
bg: "transparent"
},
"&:active": {
borderColor: "transparent",
bg: "transparent"
}
},
"&:hover": {
bg: "$$bgHover"
},
"&:active": {
bg: "$$bgActive"
}
},
outlined: {
"&:disabled": {
borderColor: "$$disabledBg",
"&:hover": {
borderColor: "$$disabledBg"
},
"&:active": {
borderColor: "$$disabledBg"
}
},
bg: "transparent",
borderColor: "$$bgSolid",
"&:hover": {
bg: "transparent",
borderColor: "$$bgHover"
},
"&:active": {
borderColor: "$$bgActive"
}
},
unstyled: {
bg: "transparent",
color: "$white"
}
},
loading: {
true: {
"span, svg": {
opacity: 0
},
svg: {
opacity: 0
}
}
},
fluid: {
true: {
w: "$full"
},
false: {
w: "auto"
}
},
onlyIcon: {
true: {
p: "$3"
}
}
},
compoundVariants: [
{
color: "primary",
variant: "outlined",
css: {}
},
{
color: "primary",
variant: "naked",
css: {
color: "$pink-500",
"&:hover": {
color: "$pink-600",
$$bgHover: "#280D19"
},
"&:active": {
color: "$pink-600",
$$bgActive: "#280D19"
}
}
},
{
color: "secondary",
variant: "outlined",
css: {}
},
{
color: "secondary",
variant: "naked",
css: {}
},
{
color: "destructive",
variant: "outlined",
css: {
color: "$$bgSolid",
"&:hover": {
color: "$$bgHover"
},
"&:active": {
color: "$$bgActive"
}
}
},
{
color: "destructive",
variant: "naked",
css: {
color: "$red-500",
"&:hover": {
color: "$black"
},
"&:active": {
color: "$black"
}
}
},
{
color: "warning",
variant: "outlined",
css: {
color: "$$bgSolid",
"&:hover": {
color: "$$bgHover"
},
"&:active": {
color: "$$bgActive"
}
}
},
{
color: "warning",
variant: "naked",
css: {
color: "$yellow-500",
"&:hover": {
color: "$black"
},
"&:active": {
color: "$black"
}
}
},
{
color: "success",
variant: "outlined",
css: {
color: "$$bgSolid",
"&:hover": {
color: "$$bgHover"
},
"&:active": {
color: "$$bgActive"
}
}
},
{
color: "success",
variant: "naked",
css: {
color: "$green-500",
"&:hover": {
color: "$black"
},
"&:active": {
color: "$black"
}
}
}
],
defaultVariants: {
color: "primary",
shape: "squared",
variant: "solid",
loading: false
}
});
var Spinner3 = styled(Spinner2, {
d: "flex",
align: "center",
position: "absolute",
marginInlineEnd: 0
});
// src/components/button/index.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Button2 = forwardRef2((props, ref) => {
const {
type = "button",
icon,
iconPosition = "left",
loading,
className,
children,
...rest
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
Button,
{
ref,
className: cx("button", className),
type,
onlyIcon: !!icon && !children,
loading,
...rest,
children: [
icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: import_react2.default.cloneElement(icon, {
className: "button-icon__left"
}) }),
children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children }),
loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner3, {}),
icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: import_react2.default.cloneElement(icon, {
className: "button-icon__right"
}) })
]
}
);
});
// src/components/alert/index.tsx
var import_react8 = __toESM(require("react"));
// src/components/flex/index.tsx
var Flex = styled("div", {
d: "flex",
variants: {
direction: {
row: {
flexDirection: "row"
},
"row-reverse": {
flexDirection: "row-reverse"
},
column: {
flexDirection: "column"
},
"column-reverse": {
flexDirection: "column-reverse"
}
},
align: {
start: {
alignItems: "flex-start"
},
center: {
alignItems: "center"
},
end: {
alignItems: "flex-end"
},
stretch: {
alignItems: "stretch"
},
baseline: {
alignItems: "baseline"
}
},
justify: {
start: {
justifyContent: "flex-start"
},
center: {
justifyContent: "center"
},
end: {
justifyContent: "flex-end"
},
between: {
justifyContent: "space-between"
},
around: {
justifyContent: "space-around"
}
},
wrap: {
noWrap: {
flexWrap: "nowrap"
},
wrap: {
flexWrap: "wrap"
},
wrapReverse: {
flexWrap: "wrap-reverse"
}
},
gap: {
0: {
gap: "$0"
},
1: {
gap: "$1"
},
2: {
gap: "$2"
},
3: {
gap: "$3"
},
4: {
gap: "$4"
},
5: {
gap: "$5"
},
6: {
gap: "$6"
},
7: {
gap: "$7"
},
8: {
gap: "$8"
},
9: {
gap: "$9"
},
10: {
gap: "$10"
},
11: {
gap: "$11"
},
12: {
gap: "$12"
},
13: {
gap: "$13"
},
14: {
gap: "$14"
},
15: {
gap: "$15"
},
16: {
gap: "$16"
},
17: {
gap: "$17"
},
18: {
gap: "$18"
},
19: {
gap: "$19"
},
20: {
gap: "$20"
}
}
}
});
// src/components/text/index.ts
var Text = styled("p", {
$$lineColor: "$colors$white",
$$lineSpacing: "$space$4",
lineHeight: 1,
variants: {
size: {
xs: {
fontSize: "$xs"
},
sm: {
fontSize: "$sm"
},
md: {
fontSize: "$md"
},
lg: {
fontSize: "$lg"
},
xl: {
fontSize: "$xl"
},
"2xl": {
fontSize: "$2xl"
},
"3xl": {
fontSize: "$3xl"
},
"4xl": {
fontSize: "$4xl"
}
},
weight: {
thin: {
fontWeight: "$thin"
},
normal: {
fontWeight: "$normal"
},
medium: {
fontWeight: "$medium"
},
bold: {
fontWeight: "$bold"
},
extrabold: {
fontWeight: "$extrabold"
}
},
textAlign: {
left: {
textAlign: "left"
},
center: {
textAlign: "center"
},
right: {
textAlign: "right"
}
},
transform: {
normal: {
textTransform: "none"
},
uppercase: {
textTransform: "uppercase"
},
lowercase: {
textTransform: "lowercase"
}
},
leftLine: {
true: {
pl: "$$lineSpacing",
borderLeft: "2px solid $$lineColor"
}
}
}
});
// src/components/spacer/index.tsx
var Spacer = styled(Flex, {
flex: 1
});
// src/components/alert/icons/destructive.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var DestructiveIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 24 24",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"path",
{
d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM11 15V17H13V15H11ZM11 7V13H13V7H11Z",
fill: "currentColor"
}
)
}
);
// src/components/alert/icons/success.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var SuccessIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 24 24",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"path",
{
d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM11.984 20H12C16.4167 19.9956 19.9942 16.4127 19.992 11.996C19.9898 7.57929 16.4087 4 11.992 4C7.57528 4 3.99421 7.57929 3.992 11.996C3.98979 16.4127 7.56729 19.9956 11.984 20ZM10 17L6 13L7.41 11.59L10 14.17L16.59 7.58L18 9L10 17Z",
fill: "currentColor"
}
)
}
);
// src/components/alert/icons/warning.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var WarningIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 24 24",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"path",
{
d: "M21.266 20.998H2.73301C2.37575 20.998 2.04563 20.8074 1.867 20.498C1.68837 20.1886 1.68838 19.8074 1.86701 19.498L11.133 3.49799C11.3118 3.1891 11.6416 2.9989 11.9985 2.9989C12.3554 2.9989 12.6852 3.1891 12.864 3.49799L22.13 19.498C22.3085 19.8072 22.3086 20.1882 22.1303 20.4975C21.9519 20.8069 21.6221 20.9976 21.265 20.998H21.266ZM12 5.99799L4.46901 18.998H19.533L12 5.99799ZM12.995 14.999H10.995V9.99799H12.995V14.999Z",
fill: "currentColor"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M11 16H13V18H11V16Z", fill: "currentColor" })
]
}
);
// src/components/alert/icons/close.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var CloseIcon = ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 24 24",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"path",
{
d: "M11.7267 3.33333L8.00001 7.06L4.27334 3.33333L3.33334 4.27333L7.06001 8L3.33334 11.7267L4.27334 12.6667L8.00001 8.93999L11.7267 12.6667L12.6667 11.7267L8.94001 8L12.6667 4.27333L11.7267 3.33333Z",
fill: "currentColor"
}
)
}
);
// src/components/alert/styles.ts
var Wrapper = styled(Flex, {
p: "$4",
border: "1px solid",
textTransform: "uppercase",
position: "relative",
variants: {
variant: {
primary: {
bg: "$black",
borderColor: "$grey-700"
},
warning: {
bg: "$yellow-900",
borderColor: "$yellow-500"
},
success: {
bg: "$green-900",
borderColor: "$green-500"
},
destructive: {
bg: "$red-900",
borderColor: "$red-500"
}
}
},
defaultVariants: {
variant: "primary"
}
});
var Title = styled(Text, {
variants: {
variant: {
primary: {
color: "$pink-500"
},
warning: {
color: "$yellow-500"
},
success: {
color: "$green-500"
},
destructive: {
color: "$red-500"
}
}
},
defaultVariants: {
variant: "primary"
}
});
var Subtitle = styled(Text, {
variants: {
variant: {
primary: {
color: "$white"
},
warning: {
color: "$yellow-500"
},
success: {
color: "$green-500"
},
destructive: {
color: "$red-500"
}
}
},
defaultVariants: {
variant: "primary"
}
});
var IconWrapper = styled("div", {
variants: {
variant: {
primary: {
color: "$white"
},
warning: {
color: "$yellow-500"
},
success: {
color: "$green-500"
},
destructive: {
color: "$red-500"
}
}
},
defaultVariants: {
variant: "primary"
}
});
// src/hooks/use-media-query.ts
var import_react3 = require("react");
var useMediaQuery = (query) => {
const [matches, setMatches] = (0, import_react3.useState)(false);
(0, import_react3.useEffect)(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => setMatches(media.matches);
window.addEventListener("resize", listener);
return () => window.removeEventListener("resize", listener);
}, [matches, query]);
return matches;
};
// src/hooks/use-breakpoint.ts
var import_react4 = require("react");
var useBreakpoint = (query = "md") => {
const breakpoints2 = (0, import_react4.useMemo)(
() => ({
xs: "(max-width: 575px)",
sm: "(min-width: 576px)",
md: "(min-width: 768px)",
lg: "(min-width: 992px)",
xl: "(min-width: 1200px)",
"2xl": "(min-width: 1400px)"
}),
[]
);
return useMediaQuery(breakpoints2[query]);
};
// src/hooks/use-id.ts
var useId = (prefix) => {
const randomNumber = Math.random().toString(36).substring(2, 9);
return `${prefix}-${randomNumber}`;
};
// src/hooks/use-countdown.ts
var import_react5 = require("react");
var _SECOND = 1e3;
var _MINUTE = _SECOND * 60;
var _HOUR = _MINUTE * 60;
var _DAY = _HOUR * 24;
var padLeft = (value) => {
return String(value || 0).padStart(2, "0");
};
var useCountdown = (endDate) => {
const [days, setDays] = (0, import_react5.useState)();
const [hours, setHours] = (0, import_react5.useState)();
const [minutes, setMinutes] = (0, import_react5.useState)();
const [seconds, setSeconds] = (0, import_react5.useState)();
const [secondsRemaining, setSecondsRemaining] = (0, import_react5.useState)(99);
const [isTimerDone, setIsTimerDone] = (0, import_react5.useState)(false);
const shouldStopTimer = secondsRemaining <= 1;
(0, import_react5.useEffect)(() => {
const interval = setInterval(() => {
if (shouldStopTimer) {
setIsTimerDone(true);
return clearInterval(interval);
}
const now = new Date().getTime();
const diff = endDate - now;
const DAYS = Math.floor(diff / _DAY);
const HOURS = Math.floor(diff % _DAY / _HOUR);
const MINUTES = Math.floor(diff % _HOUR / _MINUTE);
const SECONDS = Math.floor(diff % _MINUTE / _SECOND);
const SECONDS_REMAINING = diff / 1e3;
setDays(DAYS < 0 ? 0 : DAYS);
setHours(HOURS < 0 ? 0 : HOURS);
setMinutes(MINUTES < 0 ? 0 : MINUTES);
setSeconds(SECONDS < 0 ? 0 : SECONDS);
setSecondsRemaining(SECONDS_REMAINING);
}, 1e3);
return () => {
clearInterval(interval);
};
}, [endDate, shouldStopTimer]);
return {
days: padLeft(days),
hours: padLeft(hours),
minutes: padLeft(minutes),
seconds: padLeft(seconds),
daysAsNumber: days,
hoursAsNumber: hours,
minutesAsNumber: minutes,
secondsAsNumber: seconds,
secondsRemaining,
isTimerDone
};
};
// src/hooks/use-disclosure.ts
var import_react6 = __toESM(require("react"));
var useDisclosure = (props = {}) => {
const [isOpenState, setIsOpen] = (0, import_react6.useState)(props.defaultIsOpen || false);
const onClose = (0, import_react6.useCallback)(() => {
setIsOpen(false);
}, []);
const onOpen = import_react6.default.useCallback(() => {
setIsOpen(true);
}, []);
const onToggle = (0, import_react6.useCallback)(() => {
setIsOpen((e) => !e);
}, []);
return {
isOpen: !!isOpenState,
onOpen,
onClose,
onToggle
};
};
// src/hooks/use-merge-refs.ts
var React4 = __toESM(require("react"));
function assignRef(ref, value) {
if (ref == null)
return;
if (typeof ref === "function") {
ref(value);
return;
}
try {
ref.current = value;
} catch (error) {
throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
}
}
function useMergeRefs(...refs) {
return React4.useMemo(() => {
if (refs.every((ref) => ref == null)) {
return null;
}
return (node) => {
refs.forEach((ref) => {
if (ref)
assignRef(ref, node);
});
};
}, refs);
}
// src/hooks/use-clipboard.ts
var import_react7 = require("react");
var import_copy_to_clipboard = __toESM(require("copy-to-clipboard"));
function useClipboard(text, optionsOrTimeout = {}) {
const [hasCopied, setHasCopied] = (0, import_react7.useState)(false);
const { timeout = 1500, ...copyOptions } = typeof optionsOrTimeout === "number" ? { timeout: optionsOrTimeout } : optionsOrTimeout;
const onCopy = (0, import_react7.useCallback)(() => {
const didCopy = (0, import_copy_to_clipboard.default)(text, copyOptions);
setHasCopied(didCopy);
}, [text, copyOptions]);
(0, import_react7.useEffect)(() => {
let timeoutId = null;
if (hasCopied) {
timeoutId = window.setTimeout(() => {
setHasCopied(false);
}, timeout);
}
return () => {
if (timeoutId) {
window.clearTimeout(timeoutId);
}
};
}, [timeout, hasCopied]);
return { value: text, onCopy, hasCopied };
}
// src/components/alert/index.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var icons = {
destructive: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DestructiveIcon, {}),
success: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SuccessIcon, {}),
warning: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(WarningIcon, {})
};
var Alert = forwardRef2((props, ref) => {
const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true });
const isDesktop = useBreakpoint("sm");
const {
title,
subtitle,
description,
children,
dismissible = true,
variant,
banner,
align = "end",
className,
...rest
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
Wrapper,
{
ref,
className: cx("alert", className),
variant,
wrap: "wrap",
gap: 3,
...rest,
children: [
dismissible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
IconWrapper,
{
variant,
onClick: onClose,
css: {
fontSize: "$lg",
position: "absolute",
top: "16px",
right: "16px",
cursor: "pointer"
},
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {})
}
),
!banner && variant && variant !== "primary" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { css: { width: "100%", "@sm": { width: "auto" } }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconWrapper, { variant, css: { fontSize: "$lg" }, children: icons[variant] }) }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
Flex,
{
direction: "column",
gap: 1,
css: { flex: "auto", "@sm": { flex: 1 } },
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title, { size: "xl", transform: "uppercase", variant, children: title }) }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
Flex,
{
gap: 1,
direction: "column",
css: { width: "100%", "@sm": { width: "auto" } },
children: [
subtitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Subtitle, { transform: "uppercase", variant, children: subtitle }),
description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { transform: "normal", size: "sm", css: { color: "$white" }, children: description })
]
}
)
]
}
),
isDesktop && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spacer, {}),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
Flex,
{
align,
gap: 2,
wrap: "wrap",
css: { flexGrow: 1, "@sm": { flexGrow: "unset" } },
children: import_react8.default.Children.map(
children,
(child) => import_react8.default.cloneElement(child, {
fluid: { "@initial": true, "@sm": false }
})
)
}
)
]
}
) });
});
// src/components/image/styles.tsx
var Image = styled("img", {
size: "$full",
variants: {
objectFit: {
true: {
objectFit: "cover"
},
false: {
objectFit: "contain"
}
},
cover: {
true: {
backgroundSize: "cover"
},
false: {
backgroundSize: "contain"
}
}
},
defaultVariants: {
objectFit: "true",
cover: "true"
}
});
// src/components/image/index.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var Image2 = forwardRef2((props, ref) => {
const { fallbackSrc, className, ...rest } = props;
const onError = (e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = fallbackSrc || "";
};
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Image,
{
ref,
className: cx("image", className),
loading: "lazy",
onError,
...rest
}
);
});
// src/components/avatar/styles.ts
var Avatar = styled(Image2, {
variants: {
size: {
"24": {
size: 24,
br: "$full"
},
"32": {
size: 32
},
"40": {
size: 40
},
"64": {
size: 64
},
"80": {
size: 80
},
"88": {
size: 88
},
"160": {
size: 160
},
"192": {
size: 192
},
"240": {
size: 240
}
}
},
defaultVariants: {
size: "80"
}
});
// src/components/avatar/index.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var Avatar2 = forwardRef2((props, ref) => {
const { className, ...rest } = props;
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Avatar, { ref, className: cx("avatar", className), ...rest });
});
// src/components/badge/styles.ts
var Wrapper2 = styled("div", {
d: "inline-flex",
color: "$white",
fontSize: "$xs",
fontWeight: "$bold",
textTransform: "uppercase",
lineHeight: "150%",
variants: {
rarity: {
rare: {
bg: "$pink-600"
},
common: {
bg: "$pink-500"
},
uncommon: {
bg: "$pink-600"
},
ultraRare: {
bg: "$pink-600"
},
legendary: {
bg: "$pink-600"
}
}
},
defaultVariants: {
rarity: "common"
}
});
var Tail = styled("div", {
w: 2
});
var Space = styled("div", {
w: 2,
bg: "black"
});
var Badge = styled("label", {
h: 16,
px: "$1",
d: "inline-flex",
align: "center",
justify: "center",
userSelect: "none"
});
// src/components/badge/index.tsx
var import_jsx_runtime11 = require("react/jsx-runtime");
var spaceOnCamelCase = (str) => typeof str === "string" && str.replace(/([a-z])([A-Z])/g, "$1 $2");
var Badge2 = forwardRef2((props, ref) => {
const { rarity, className, ...rest } = props;
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
Wrapper2,
{
ref,
className: cx("badge", className),
rarity,
...rest,
children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Tail, {}),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Space, {}),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Badge, { children: spaceOnCamelCase(rarity) })
]
}
);
});
// src/components/box/index.tsx
var Box = styled("div");
// src/components/character/styles.ts
var Wrapper3 = styled("div", {
position: "relative",
variants: {
size: {
"80": {
size: 80
},
"160": {
size: 160
}
},
active: {
true: {
bs: "0 0 0 1px $colors$pink-500"
}
}
}
});
var Overlay = styled("div", {
position: "absolute",
top: 0,
size: "$full",
d: "flex",
flexDirection: "column",
justify: "space-between"
});
var Top = styled("div", {
d: "flex",
flexDirection: "column",
variants: {
size: {
"80": {
p: "$1",
pb: "0"
},
"160": {
p: "$3",
pb: "0"
}
}
}
});
var Center = styled("div", {
d: "flex",
justify: "center",
align: "center",
px: "$3"
});
var Bottom = styled("div", {
d: "flex",
justify: "flex-end",
variants: {
size: {
"80": {
size: "$1"
},
"160": {
p: "$3",
pt: "0"
}
}
}
});
var Typename = styled("div", {
fontWeight: "$medium",
color: "$pink-500",
letterSpacing: "0.05em",
textTransform: "uppercase",
textShadow: "0px 0px 20px rgba(0, 0, 0, 1)",
variants: {
empty: {
true: {
color: "$white"
}
},
size: {
"80": {
fontSize: "$sm",
lineHeight: "20px"
},
"160": {
fontSize: "$md",
lineHeight: "24px"
}
}
}
});
var Info = styled("span", {
fontSize: "$sm",
fontWeight: "$medium",
color: "$white",
lineHeight: "24px",
letterSpacing: "0.05em",
textTransform: "uppercase"
});
var Index = styled("div", {
d: "flex",
justify: "center",
align: "center",
bg: "$pink-500",
color: "$white",
fontWeight: "$medium",
userSelect: "none",
variants: {
size: {
"80": {
fontSize: "$sm",
lineHeight: 20,
size: 20
},
"160": {
fontSize: "$md",
lineHeight: 24,
size: 32
}
}
}
});
// src/components/character/index.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
var Character = forwardRef2((props, ref) => {
const isMobile = useMediaQuery("(max-width: 768px)");
const { active, currentIndex, type, src, alt, className, ...rest } = props;
const size = isMobile ? "80" : "160";
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
Wrapper3,
{
ref,
className: cx("character", className),
active,
size,
...rest,
children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar2, { size, src, alt }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Overlay, { children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Top, { size, children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Typename, { size, empty: !!type, children: type || "Empty" }),
!isMobile && !type && !active && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Info, { children: "Select a character to assign" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Center, { children: !isMobile && !type && active && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button2, { css: { w: "100%" }, children: "Assign" }) }),
currentIndex && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Bottom, { size, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Index, { size, children: currentIndex }) })
] })
]
}
);
});
// src/components/icon/icon.tsx
var import_jsx_runtime13 = require("react/jsx-runtime");
var Icon = forwardRef2((props, ref) => {
const { focusable = false, className, children, ...rest } = props;
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
Box,
{
as: "svg",
ref,
focusable,
className: cx("icon", className),
...rest,
children
}
);
});
// src/components/icon/create-icon.tsx
var import_jsx_runtime14 = require("react/jsx-runtime");
var createIcon = ({
viewBox = "0 0 24 24",
path,
d: pathDefinition,
defaultProps
}) => {
const defaults = {
width: "1em",
height: "1em",
...defaultProps
};
const Comp = forwardRef2((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { ref, viewBox, ...defaults, ...props, children: path ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { fill: "currentColor", d: pathDefinition }) }));
return Comp;
};
// src/icons/arrow-down.tsx
var ArrowDown = createIcon({
d: "M11 16.17L7.41 12.59L6 14L12 20L18 14L16.59 12.59L13 16.17V4H11V16.17Z"
});
// src/icons/arrow-left.tsx
var ArrowLeft = createIcon({
d: "M7.83 11L11.41 7.41L10 6L4 12L10 18L11.41 16.59L7.83 13H20V11H7.83Z"
});
// src/icons/arrow-right.tsx
var ArrowRight = createIcon({
d: "M16.17 13L12.59 16.59L14 18L20 12L14 6L12.59 7.41L16.17 11H4V13H16.17Z"
});
// src/icons/arrow-up.tsx
var ArrowUp = createIcon({
d: "M13 7.83L16.59 11.41L18 10L12 4L6 10L7.41 11.41L11 7.83V20H13V7.83Z"
});
// src/icons/caret-down.tsx
var CaretDown = createIcon({
d: "M12 14.5L17 9.5H7L12 14.5Z"
});
// src/icons/caret-left.tsx
var CaretLeft = createIcon({
d: "M9.5 12L14.5 17V7L9.5 12Z"
});
// src/icons/caret-right.tsx
var CaretRight = createIcon({
d: "M14.5 12L9.5 7V17L14.5 12Z"
});
// src/icons/caret-up.tsx
var CaretUp = createIcon({
d: "M12 9.5L7 14.5H17L12 9.5Z"
});
// src/icons/check-solid.tsx
var CheckSolid = createIcon({
d: "M12 22C6.47967 21.9939 2.00606 17.5203 2 12V11.8C2.10993 6.30453 6.63459 1.92796 12.1307 2.00088C17.6268 2.07381 22.0337 6.56889 21.9978 12.0653C21.9619 17.5618 17.4966 21.9989 12 22ZM7.41 11.59L6 13L10 17L18 9L16.59 7.58L10 14.17L7.41 11.59Z"
});
// src/icons/check.tsx
var Check = createIcon({
d: "M9.52495 17.657L4.57495 12.707L5.98895 11.293L9.52645 14.8265L9.52495 14.828L18.01 6.343L19.424 7.757L10.939 16.243L9.52595 17.656L9.52495 17.657Z"
});
// src/icons/chevron-down.tsx
var ChevronDown = createIcon({
d: "M3.51489 8.465L11.9999 16.95L20.4849 8.465L19.0709 7.05L11.9999 14.122L4.92889 7.05L3.51489 8.465Z"
});
// src/icons/chevron-left.tsx
var ChevronLeft = createIcon({
d: "M15.535 3.515L7.05005 12L15.535 20.485L16.95 19.071L9.87805 12L16.95 4.929L15.535 3.515Z"
});
// src/icons/chevron-right.tsx
var ChevronRight = createIcon({
d: "M8.46495 20.485L16.95 12L8.46495 3.515L7.04995 4.929L14.122 12L7.04995 19.071L8.46495 20.485Z"
});
// src/icons/chevron-up.tsx
var ChevronUp = createIcon({
d: "M20.4851 15.535L12.0001 7.05L3.51511 15.535L4.92911 16.95L12.0001 9.878L19.0711 16.95L20.4851 15.535Z"
});
// src/icons/close-solid.tsx
var CloseSolid = createIcon({
d: "M12 22C9.34711 22.0024 6.80218 20.9496 4.9263 19.0737C3.05042 17.1978 1.99762 14.6529 2 12V11.8C2.08179 7.79223 4.5478 4.22016 8.26637 2.72307C11.9849 1.22597 16.2381 2.0929 19.074 4.92601C21.9365 7.78609 22.7932 12.0893 21.2443 15.8276C19.6955 19.5659 16.0465 22.0024 12 22ZM12 13.41L14.59 16L16 14.59L13.41 12L16 9.41001L14.59 8.00001L12 10.59L9.41001 8.00001L8.00001 9.41001L10.59 12L8.00001 14.59L9.41001 16L12 13.411V13.41Z"
});
// src/icons/close.tsx
var Close = createIcon({
d: "M17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41L17.59 5Z"
});
// src/icons/copy.tsx
var Copy = createIcon({
d: "M14.0002 22H4.00019C3.46427 22.0186 2.94467 21.8139 2.56548 21.4347C2.1863 21.0555 1.98157 20