@zeushq/design-system
Version:
1,404 lines (1,388 loc) • 278 kB
JavaScript
import * as React from 'react';
import React__default from 'react';
import { createStitches } from '@stitches/react';
import { gray, mauve, slate, sage, olive, sand, tomato, red, crimson, pink, plum, purple, violet, indigo, blue, sky, mint, cyan, teal, green, grass, lime, yellow, amber, orange, brown, bronze, gold, grayA, mauveA, slateA, sageA, oliveA, sandA, tomatoA, redA, crimsonA, pinkA, plumA, purpleA, violetA, indigoA, blueA, skyA, mintA, cyanA, tealA, greenA, grassA, limeA, yellowA, amberA, orangeA, brownA, bronzeA, goldA, whiteA, blackA, grayDark, mauveDark, slateDark, sageDark, oliveDark, sandDark, tomatoDark, redDark, crimsonDark, pinkDark, plumDark, purpleDark, violetDark, indigoDark, blueDark, skyDark, mintDark, cyanDark, tealDark, greenDark, grassDark, limeDark, yellowDark, amberDark, orangeDark, brownDark, bronzeDark, goldDark, grayDarkA, mauveDarkA, slateDarkA, sageDarkA, oliveDarkA, sandDarkA, tomatoDarkA, redDarkA, crimsonDarkA, pinkDarkA, plumDarkA, purpleDarkA, violetDarkA, indigoDarkA, blueDarkA, skyDarkA, mintDarkA, cyanDarkA, tealDarkA, greenDarkA, grassDarkA, limeDarkA, yellowDarkA, amberDarkA, orangeDarkA, brownDarkA, bronzeDarkA, goldDarkA } from '@radix-ui/colors';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import { ChevronDownIcon, CheckIcon, CaretSortIcon, Cross1Icon } from '@radix-ui/react-icons';
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
export { AspectRatio } from '@radix-ui/react-aspect-ratio';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
import * as MenuPrimitive from '@radix-ui/react-menu';
import { IdProvider } from '@radix-ui/react-id';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import merge from 'lodash.merge';
import * as PopoverPrimitive from '@radix-ui/react-popover';
export { Portal } from '@radix-ui/react-portal';
import * as ProgressPrimitive from '@radix-ui/react-progress';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
import * as SeparatorPrimitive from '@radix-ui/react-separator';
import * as TogglePrimitive from '@radix-ui/react-toggle';
import * as SliderPrimitive from '@radix-ui/react-slider';
import * as SwitchPrimitive from '@radix-ui/react-switch';
import * as TabsPrimitive from '@radix-ui/react-tabs';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import Head from 'next/head';
import NextRouter, { useRouter } from 'next/router';
import { useTheme } from 'next-themes';
import NextLink from 'next/link';
import { HamburgerMenuIcon, ArrowRightIcon, ExternalLinkIcon, ArrowLeftIcon, ChevronDownIcon as ChevronDownIcon$1, Link2Icon } from '@modulz/radix-icons';
import hastToHtml from 'hast-util-to-html';
import rangeParser from 'parse-numeric-range';
import unified from 'unified';
import parse from 'rehype-parse';
import debounce from 'lodash.debounce';
import { elementScrollIntoViewPolyfill } from 'seamless-scroll-polyfill';
import { createContext } from '@radix-ui/react-context';
import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
import { composeEventHandlers } from '@radix-ui/primitive';
import { useComposedRefs } from '@radix-ui/react-compose-refs';
import * as LabelPrimitive from '@radix-ui/react-label';
import visit from 'unist-util-visit';
import nodeToString from 'hast-util-to-string';
import { refractor as refractor$1 } from 'refractor';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
const { styled, css: css$1, theme, createTheme, getCssText, globalCss, keyframes, config } = createStitches({
theme: {
colors: 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(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({ zeus1: '#ECFFEB', zeus2: '#DAFFD6', zeus3: '#C7FFC2', zeus4: '#B4FFAD', zeus5: '#A2FF99', zeus6: '#8FFF85', zeus7: '#7CFF70', zeus8: '#69FF5C', zeus9: '#57FF47', zeus10: '#15FF00', zeus11: '#032900', zeus12: '#032900', zeusA1: '#ECFFEB', zeusA2: '#DAFFD6', zeusA3: '#C7FFC2', zeusA4: '#B4FFAD', zeusA5: '#A2FF99', zeusA6: '#8FFF85', zeusA7: '#7CFF70', zeusA8: '#69FF5C', zeusA9: '#57FF47', zeusA10: '#15FF00', zeusA11: '#032900', zeusA12: '#032900' }, gray), mauve), slate), sage), olive), sand), tomato), red), crimson), pink), plum), purple), violet), indigo), blue), sky), mint), cyan), teal), green), grass), lime), yellow), amber), orange), brown), bronze), gold), grayA), mauveA), slateA), sageA), oliveA), sandA), tomatoA), redA), crimsonA), pinkA), plumA), purpleA), violetA), indigoA), blueA), skyA), mintA), cyanA), tealA), greenA), grassA), limeA), yellowA), amberA), orangeA), brownA), bronzeA), goldA), whiteA), blackA), {
// Semantic colors
hiContrast: '$slate12', loContrast: 'white', canvas: '#020F12', panel: 'white', transparentPanel: 'hsl(0 0% 0% / 97%)', shadowLight: 'hsl(206 22% 7% / 35%)', shadowDark: 'hsl(206 22% 7% / 20%)' }),
fonts: {
untitled: 'Untitled Sans, -apple-system, system-ui, sans-serif',
mono: 'Söhne Mono, menlo, monospace',
},
space: {
1: '5px',
2: '10px',
3: '15px',
4: '20px',
5: '25px',
6: '35px',
7: '45px',
8: '65px',
9: '80px',
},
sizes: {
1: '5px',
2: '10px',
3: '15px',
4: '20px',
5: '25px',
6: '35px',
7: '45px',
8: '65px',
9: '80px',
},
fontSizes: {
1: '12px',
2: '13px',
3: '15px',
4: '17px',
5: '19px',
6: '21px',
7: '27px',
8: '35px',
9: '59px',
},
radii: {
1: '4px',
2: '6px',
3: '8px',
4: '12px',
round: '50%',
pill: '9999px',
},
zIndices: {
1: '100',
2: '200',
3: '300',
4: '400',
max: '999',
},
},
media: {
bp1: '(min-width: 520px)',
bp2: '(min-width: 900px)',
bp3: '(min-width: 1200px)',
bp4: '(min-width: 1800px)',
motion: '(prefers-reduced-motion)',
hover: '(any-hover: hover)',
dark: '(prefers-color-scheme: dark)',
light: '(prefers-color-scheme: light)',
},
utils: {
p: (value) => ({
padding: value,
}),
pt: (value) => ({
paddingTop: value,
}),
pr: (value) => ({
paddingRight: value,
}),
pb: (value) => ({
paddingBottom: value,
}),
pl: (value) => ({
paddingLeft: value,
}),
px: (value) => ({
paddingLeft: value,
paddingRight: value,
}),
py: (value) => ({
paddingTop: value,
paddingBottom: value,
}),
m: (value) => ({
margin: value,
}),
mt: (value) => ({
marginTop: value,
}),
mr: (value) => ({
marginRight: value,
}),
mb: (value) => ({
marginBottom: value,
}),
ml: (value) => ({
marginLeft: value,
}),
mx: (value) => ({
marginLeft: value,
marginRight: value,
}),
my: (value) => ({
marginTop: value,
marginBottom: value,
}),
ta: (value) => ({ textAlign: value }),
fd: (value) => ({ flexDirection: value }),
fw: (value) => ({ flexWrap: value }),
ai: (value) => ({ alignItems: value }),
ac: (value) => ({ alignContent: value }),
jc: (value) => ({ justifyContent: value }),
as: (value) => ({ alignSelf: value }),
fg: (value) => ({ flexGrow: value }),
fs: (value) => ({ flexShrink: value }),
fb: (value) => ({ flexBasis: value }),
bc: (value) => ({
backgroundColor: value,
}),
br: (value) => ({
borderRadius: value,
}),
btrr: (value) => ({
borderTopRightRadius: value,
}),
bbrr: (value) => ({
borderBottomRightRadius: value,
}),
bblr: (value) => ({
borderBottomLeftRadius: value,
}),
btlr: (value) => ({
borderTopLeftRadius: value,
}),
bs: (value) => ({ boxShadow: value }),
lh: (value) => ({ lineHeight: value }),
ox: (value) => ({ overflowX: value }),
oy: (value) => ({ overflowY: value }),
pe: (value) => ({ pointerEvents: value }),
us: (value) => ({
WebkitUserSelect: value,
userSelect: value,
}),
userSelect: (value) => ({
WebkitUserSelect: value,
userSelect: value,
}),
size: (value) => ({
width: value,
height: value,
}),
appearance: (value) => ({
WebkitAppearance: value,
appearance: value,
}),
backgroundClip: (value) => ({
WebkitBackgroundClip: value,
backgroundClip: value,
}),
},
});
const darkTheme = createTheme('dark-theme', {
colors: 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(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({ zeus1: '#021400', zeus2: '#032900', zeus3: '#053D00', zeus4: '#075200', zeus5: '#096600', zeus6: '#0A7A00', zeus7: '#0C8F00', zeus8: '#0EA300', zeus9: '#0FB800', zeus10: '#11CC00', zeus11: '#15FF00', zeus12: '#FFFFFF', zeusA1: '#021400', zeusA2: '#032900', zeusA3: '#053D00', zeusA4: '#075200', zeusA5: '#096600', zeusA6: '#0A7A00', zeusA7: '#0C8F00', zeusA8: '#0EA300', zeusA9: '#0FB800', zeusA10: '#11CC00', zeusA11: '#15FF00', zeusA12: '#FFFFFF' }, grayDark), mauveDark), slateDark), sageDark), oliveDark), sandDark), tomatoDark), redDark), crimsonDark), pinkDark), plumDark), purpleDark), violetDark), indigoDark), blueDark), skyDark), mintDark), cyanDark), tealDark), greenDark), grassDark), limeDark), yellowDark), amberDark), orangeDark), brownDark), bronzeDark), goldDark), grayDarkA), mauveDarkA), slateDarkA), sageDarkA), oliveDarkA), sandDarkA), tomatoDarkA), redDarkA), crimsonDarkA), pinkDarkA), plumDarkA), purpleDarkA), violetDarkA), indigoDarkA), blueDarkA), skyDarkA), mintDarkA), cyanDarkA), tealDarkA), greenDarkA), grassDarkA), limeDarkA), yellowDarkA), amberDarkA), orangeDarkA), brownDarkA), bronzeDarkA), goldDarkA), {
// Semantic colors
hiContrast: '$slate12', loContrast: '$slate1', canvas: '#020F12', panel: '$slate3', transparentPanel: 'hsl(0 100% 100% / 97%)', shadowLight: 'hsl(206 22% 7% / 35%)', shadowDark: 'hsl(206 22% 7% / 20%)' }),
});
const StyledAccordion = styled(AccordionPrimitive.Root, {});
const Accordion = React__default.forwardRef((_a, forwardedRef) => {
var { children } = _a, props = __rest(_a, ["children"]);
return (React__default.createElement(StyledAccordion, Object.assign({ ref: forwardedRef }, props, (props.type === 'single' ? { collapsible: true } : {})), children));
});
const StyledItem = styled(AccordionPrimitive.Item, {
borderTop: '1px solid $colors$slate6',
'&:last-of-type': {
borderBottom: '1px solid $colors$slate6',
},
});
const StyledHeader = styled(AccordionPrimitive.Header, {
all: 'unset',
});
const StyledTrigger = styled(AccordionPrimitive.Trigger, {
all: 'unset',
boxSizing: 'border-box',
userSelect: 'none',
'&::before': {
boxSizing: 'border-box',
},
'&::after': {
boxSizing: 'border-box',
},
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
p: '$2',
color: '$hiContrast',
width: '100%',
'@hover': {
'&:hover': {
backgroundColor: '$slate2',
},
},
'&:focus': {
outline: 'none',
boxShadow: 'inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8',
},
svg: {
transition: 'transform 175ms cubic-bezier(0.65, 0, 0.35, 1)',
},
'&[data-state="open"]': {
svg: {
transform: 'rotate(180deg)',
},
},
});
const AccordionTrigger = React__default.forwardRef((_a, forwardedRef) => {
var { children } = _a, props = __rest(_a, ["children"]);
return (React__default.createElement(StyledHeader, null,
React__default.createElement(StyledTrigger, Object.assign({}, props, { ref: forwardedRef }),
children,
React__default.createElement(ChevronDownIcon, null))));
});
const StyledContent$3 = styled(AccordionPrimitive.Content, {
p: '$2',
});
const AccordionItem = StyledItem;
const AccordionContent = StyledContent$3;
const Alert = styled('div', {
// Reset
boxSizing: 'border-box',
'&::before': {
boxSizing: 'border-box',
},
'&::after': {
boxSizing: 'border-box',
},
border: '1px solid',
borderRadius: '$2',
variants: {
size: {
'1': {
p: '$3',
},
},
variant: {
zeus: {
backgroundColor: '$zeus1',
borderColor: '$zeus6',
},
loContrast: {
backgroundColor: '$loContrast',
borderColor: '$slate6',
},
gray: {
backgroundColor: '$slate2',
borderColor: '$slate6',
},
blue: {
backgroundColor: '$blue2',
borderColor: '$blue6',
},
green: {
backgroundColor: '$green2',
borderColor: '$green6',
},
red: {
backgroundColor: '$red2',
borderColor: '$red6',
},
},
},
defaultVariants: {
size: '1',
variant: 'gray',
},
});
const overlayStyles = css$1({
backgroundColor: 'rgba(0, 0, 0, .15)',
});
const Overlay = styled('div', overlayStyles);
const panelStyles = css$1({
backgroundColor: '$panel',
borderRadius: '$3',
boxShadow: '$colors$shadowLight 0px 10px 38px -10px, $colors$shadowDark 0px 10px 20px -15px',
});
const Panel = styled('div', panelStyles);
const StyledOverlay$2 = styled(AlertDialogPrimitive.Overlay, overlayStyles, {
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
});
function AlertDialog(_a) {
var { children } = _a, props = __rest(_a, ["children"]);
return (React__default.createElement(AlertDialogPrimitive.Root, Object.assign({}, props),
React__default.createElement(StyledOverlay$2, null),
children));
}
const AlertDialogContent = styled(AlertDialogPrimitive.Content, panelStyles, {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
minWidth: 200,
maxHeight: '85vh',
padding: '$4',
marginTop: '-5vh',
'&:focus': {
outline: 'none',
},
});
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
const AlertDialogTitle = AlertDialogPrimitive.Title;
const AlertDialogDescription = AlertDialogPrimitive.Description;
const AlertDialogAction = AlertDialogPrimitive.Action;
const AlertDialogCancel = AlertDialogPrimitive.Cancel;
const Box = styled('div', {
// Reset
boxSizing: 'border-box',
});
const Status = styled('div', {
borderRadius: '50%',
flexShrink: 0,
variants: {
size: {
'1': {
width: 5,
height: 5,
},
'2': {
width: 9,
height: 9,
},
},
variant: {
gray: {
backgroundColor: '$slate7',
},
zeus: {
backgroundColor: '$zeus9',
},
blue: {
backgroundColor: '$blue9',
},
green: {
backgroundColor: '$green9',
},
yellow: {
backgroundColor: '$yellow9',
},
red: {
backgroundColor: '$red9',
},
},
},
defaultVariants: {
size: '2',
variant: 'gray',
},
});
const StyledAvatar = styled(AvatarPrimitive.Root, {
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'middle',
overflow: 'hidden',
userSelect: 'none',
boxSizing: 'border-box',
display: 'flex',
flexShrink: 0,
position: 'relative',
border: 'none',
fontFamily: 'inherit',
lineHeight: '1',
margin: '0',
outline: 'none',
padding: '0',
fontWeight: '500',
color: '$hiContrast',
'&::before': {
content: '""',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
borderRadius: 'inherit',
boxShadow: 'inset 0px 0px 1px rgba(0, 0, 0, 0.12)',
},
variants: {
size: {
'1': {
width: '$3',
height: '$3',
},
'2': {
width: '$5',
height: '$5',
},
'3': {
width: '$6',
height: '$6',
},
'4': {
width: '$7',
height: '$7',
},
'5': {
width: '$8',
height: '$8',
},
'6': {
width: '$9',
height: '$9',
},
},
variant: {
hiContrast: {
backgroundColor: '$hiContrast',
color: '$loContrast',
},
gray: {
backgroundColor: '$slate5',
},
tomato: {
backgroundColor: '$tomato5',
},
zeus: {
backgroundColor: '$zeus5',
},
red: {
backgroundColor: '$red5',
},
crimson: {
backgroundColor: '$crimson5',
},
pink: {
backgroundColor: '$pink5',
},
plum: {
backgroundColor: '$plum5',
},
purple: {
backgroundColor: '$purple5',
},
violet: {
backgroundColor: '$violet5',
},
indigo: {
backgroundColor: '$indigo5',
},
blue: {
backgroundColor: '$blue5',
},
cyan: {
backgroundColor: '$cyan5',
},
teal: {
backgroundColor: '$teal5',
},
green: {
backgroundColor: '$green5',
},
grass: {
backgroundColor: '$grass5',
},
brown: {
backgroundColor: '$brown5',
},
bronze: {
backgroundColor: '$bronze5',
},
gold: {
backgroundColor: '$gold5',
},
sky: {
backgroundColor: '$sky5',
},
mint: {
backgroundColor: '$mint5',
},
lime: {
backgroundColor: '$lime5',
},
yellow: {
backgroundColor: '$yellow5',
},
amber: {
backgroundColor: '$amber5',
},
orange: {
backgroundColor: '$orange5',
},
},
shape: {
square: {
borderRadius: '$2',
},
circle: {
borderRadius: '50%',
},
},
inactive: {
true: {
opacity: '.3',
},
},
interactive: {
true: {
'&::after': {
content: '""',
position: 'absolute',
top: '0',
right: '0',
bottom: '0',
left: '0',
backgroundColor: 'rgba(0,0,0,.08)',
opacity: '0',
pointerEvents: 'none',
transition: 'opacity 25ms linear',
},
'@hover': {
'&:hover': {
'&::after': {
opacity: '1',
},
},
},
'&[data-state="open"]': {
'&::after': {
backgroundColor: 'rgba(0,0,0,.12)',
opacity: '1',
},
},
},
},
},
defaultVariants: {
size: '2',
variant: 'gray',
shape: 'circle',
},
});
const StyledAvatarImage = styled(AvatarPrimitive.Image, {
display: 'flex',
objectFit: 'cover',
boxSizing: 'border-box',
height: '100%',
verticalAlign: 'middle',
width: '100%',
});
const StyledAvatarFallback = styled(AvatarPrimitive.Fallback, {
textTransform: 'uppercase',
variants: {
size: {
'1': {
fontSize: '10px',
lineHeight: '15px',
},
'2': {
fontSize: '$3',
},
'3': {
fontSize: '$6',
},
'4': {
fontSize: '$7',
},
'5': {
fontSize: '$8',
},
'6': {
fontSize: '$9',
},
},
},
defaultVariants: {
size: '2',
},
});
const AvatarNestedItem = styled('div', {
boxShadow: '0 0 0 2px $colors$loContrast',
borderRadius: '50%',
});
const AvatarGroup = styled('div', {
display: 'flex',
flexDirection: 'row-reverse',
[`& ${AvatarNestedItem}:nth-child(n+2)`]: {
marginRight: '-$1',
},
});
const Avatar = React__default.forwardRef((_a, forwardedRef) => {
var { alt, src, fallback, size, variant, shape, css, status } = _a, props = __rest(_a, ["alt", "src", "fallback", "size", "variant", "shape", "css", "status"]);
return (React__default.createElement(Box, { css: Object.assign(Object.assign({}, css), { position: 'relative', height: 'fit-content', width: 'fit-content' }) },
React__default.createElement(StyledAvatar, Object.assign({}, props, { ref: forwardedRef, size: size, variant: variant, shape: shape }),
React__default.createElement(StyledAvatarImage, { alt: alt, src: src }),
React__default.createElement(StyledAvatarFallback, { size: size }, fallback)),
status && (React__default.createElement(Box, { css: {
position: 'absolute',
bottom: '0',
right: '0',
boxShadow: '0 0 0 3px $colors$loContrast',
borderRadius: '$round',
mr: '-3px',
mb: '-3px',
} },
React__default.createElement(Status, { size: size && size > 2 ? '2' : '1', variant: status })))));
});
const Badge = styled('span', {
// Reset
alignItems: 'center',
appearance: 'none',
borderWidth: '0',
boxSizing: 'border-box',
display: 'inline-flex',
flexShrink: 0,
fontFamily: 'inherit',
justifyContent: 'center',
lineHeight: '1',
verticalAlign: 'middle',
outline: 'none',
padding: '0',
textDecoration: 'none',
userSelect: 'none',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
'&:disabled': {
backgroundColor: '$slate3',
pointerEvents: 'none',
color: '$slate8',
},
'&::before': {
boxSizing: 'border-box',
content: '""',
},
'&::after': {
boxSizing: 'border-box',
content: '""',
},
// Custom
backgroundColor: '$slate3',
borderRadius: '$pill',
color: '$slate11',
whiteSpace: 'nowrap',
fontVariantNumeric: 'tabular-nums',
variants: {
size: {
'1': {
height: '$4',
px: '$1',
fontSize: '$1',
},
'2': {
height: '$5',
px: '$2',
fontSize: '$2',
},
},
variant: {
gray: {
backgroundColor: '$slate3',
color: '$slate11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8',
},
},
red: {
backgroundColor: '$red3',
color: '$red11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$red8, 0 0 0 1px $colors$red8',
},
},
crimson: {
backgroundColor: '$crimson3',
color: '$crimson11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$crimson8, 0 0 0 1px $colors$crimson8',
},
},
pink: {
backgroundColor: '$pink3',
color: '$pink11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$pink8, 0 0 0 1px $colors$pink8',
},
},
purple: {
backgroundColor: '$purple3',
color: '$purple11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$purple8, 0 0 0 1px $colors$purple8',
},
},
violet: {
backgroundColor: '$violet3',
color: '$violet11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$violet8, 0 0 0 1px $colors$violet8',
},
},
indigo: {
backgroundColor: '$indigo3',
color: '$indigo11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$indigo8, 0 0 0 1px $colors$indigo8',
},
},
zeus: {
backgroundColor: '$zeus3',
color: '$zeus11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$zeus8, 0 0 0 1px $colors$zeus8',
},
},
blue: {
backgroundColor: '$blue3',
color: '$blue11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8',
},
},
cyan: {
backgroundColor: '$cyan3',
color: '$cyan11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$cyan8, 0 0 0 1px $colors$cyan8',
},
},
teal: {
backgroundColor: '$teal3',
color: '$teal11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$teal8, 0 0 0 1px $colors$teal8',
},
},
green: {
backgroundColor: '$green3',
color: '$green11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$green8, 0 0 0 1px $colors$green8',
},
},
lime: {
backgroundColor: '$lime3',
color: '$lime11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$lime8, 0 0 0 1px $colors$lime8',
},
},
yellow: {
backgroundColor: '$yellow3',
color: '$yellow11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$yellow8, 0 0 0 1px $colors$yellow8',
},
},
orange: {
backgroundColor: '$orange3',
color: '$orange11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$orange8, 0 0 0 1px $colors$orange8',
},
},
gold: {
backgroundColor: '$gold3',
color: '$gold11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$gold8, 0 0 0 1px $colors$gold8',
},
},
bronze: {
backgroundColor: '$bronze3',
color: '$bronze11',
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$bronze8, 0 0 0 1px $colors$bronze8',
},
},
},
interactive: {
true: {},
},
},
compoundVariants: [
{
interactive: true,
variant: 'red',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$red4',
},
},
'&:active': {
backgroundColor: '$red5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$red5',
},
},
},
{
interactive: true,
variant: 'crimson',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$crimson4',
},
},
'&:active': {
backgroundColor: '$crimson5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$crimson5',
},
},
},
{
interactive: true,
variant: 'pink',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$pink4',
},
},
'&:active': {
backgroundColor: '$pink5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$pink5',
},
},
},
{
interactive: true,
variant: 'purple',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$purple4',
},
},
'&:active': {
backgroundColor: '$purple5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$purple5',
},
},
},
{
interactive: true,
variant: 'violet',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$violet4',
},
},
'&:active': {
backgroundColor: '$violet5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$violet5',
},
},
},
{
interactive: true,
variant: 'indigo',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$indigo4',
},
},
'&:active': {
backgroundColor: '$indigo5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$indigo5',
},
},
},
{
interactive: true,
variant: 'zeus',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$zeus4',
},
},
'&:active': {
backgroundColor: '$zeus5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$zeus5',
},
},
},
{
interactive: true,
variant: 'blue',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$blue4',
},
},
'&:active': {
backgroundColor: '$blue5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$blue5',
},
},
},
{
interactive: true,
variant: 'cyan',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$cyan4',
},
},
'&:active': {
backgroundColor: '$cyan5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$cyan5',
},
},
},
{
interactive: true,
variant: 'teal',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$teal4',
},
},
'&:active': {
backgroundColor: '$teal5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$teal5',
},
},
},
{
interactive: true,
variant: 'green',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$green4',
},
},
'&:active': {
backgroundColor: '$green5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$green5',
},
},
},
{
interactive: true,
variant: 'lime',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$lime4',
},
},
'&:active': {
backgroundColor: '$lime5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$lime5',
},
},
},
{
interactive: true,
variant: 'yellow',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$yellow4',
},
},
'&:active': {
backgroundColor: '$yellow5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$yellow5',
},
},
},
{
interactive: true,
variant: 'orange',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$orange4',
},
},
'&:active': {
backgroundColor: '$orange5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$orange5',
},
},
},
{
interactive: true,
variant: 'gold',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$gold4',
},
},
'&:active': {
backgroundColor: '$gold5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$gold5',
},
},
},
{
interactive: true,
variant: 'bronze',
css: {
'@hover': {
'&:hover': {
backgroundColor: '$bronze4',
},
},
'&:active': {
backgroundColor: '$bronze5',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$bronze5',
},
},
},
],
defaultVariants: {
size: '1',
variant: 'gray',
},
});
const Banner = styled('div', {
// Reset
boxSizing: 'border-box',
'&::before': {
boxSizing: 'border-box',
},
'&::after': {
boxSizing: 'border-box',
},
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '$3',
variants: {
size: {
'1': {
py: '$1',
px: '$4',
},
},
variant: {
loContrast: {
backgroundColor: '$loContrast',
},
gray: {
backgroundColor: '$slate3',
},
zeus: {
backgroundColor: '$zeus3',
},
blue: {
backgroundColor: '$blue3',
},
green: {
backgroundColor: '$green3',
},
red: {
backgroundColor: '$red3',
},
},
rounded: {
true: {
borderRadius: '$pill',
},
},
border: {
true: {
borderRadius: '$pill',
},
},
},
compoundVariants: [
{
border: 'true',
variant: 'gray',
css: {
borderColor: '$slate6',
},
},
{
border: 'true',
variant: 'zeus',
css: {
borderColor: '$zeus11',
},
},
{
border: 'true',
variant: 'blue',
css: {
borderColor: '$blue11',
},
},
{
border: 'true',
variant: 'loContrast',
css: {
borderColor: '$slate6',
},
},
],
defaultVariants: {
size: '1',
variant: 'gray',
},
});
const Button = styled('button', {
// Reset
all: 'unset',
alignItems: 'center',
boxSizing: 'border-box',
userSelect: 'none',
'&::before': {
boxSizing: 'border-box',
},
'&::after': {
boxSizing: 'border-box',
},
// Custom reset?
display: 'inline-flex',
flexShrink: 0,
justifyContent: 'center',
lineHeight: '1',
WebkitTapHighlightColor: 'rgba(0,0,0,0)',
// Custom
height: '$5',
px: '$2',
fontFamily: '$untitled',
fontSize: '$2',
fontWeight: 500,
fontVariantNumeric: 'tabular-nums',
'&:disabled': {
backgroundColor: '$slate2',
boxShadow: 'inset 0 0 0 1px $colors$slate7',
color: '$slate8',
pointerEvents: 'none',
},
variants: {
size: {
'1': {
borderRadius: '$1',
height: '$5',
px: '$2',
fontSize: '$1',
lineHeight: '$sizes$5',
},
'2': {
borderRadius: '$2',
height: '$6',
px: '$3',
fontSize: '$3',
lineHeight: '$sizes$6',
},
'3': {
borderRadius: '$2',
height: '$7',
px: '$4',
fontSize: '$4',
lineHeight: '$sizes$7',
},
},
variant: {
gray: {
backgroundColor: '$loContrast',
boxShadow: 'inset 0 0 0 1px $colors$slate7',
color: '$hiContrast',
'@hover': {
'&:hover': {
boxShadow: 'inset 0 0 0 1px $colors$slate8',
},
},
'&:active': {
backgroundColor: '$slate2',
boxShadow: 'inset 0 0 0 1px $colors$slate8',
},
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$slate8, 0 0 0 1px $colors$slate8',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$slate4',
boxShadow: 'inset 0 0 0 1px $colors$slate8',
},
},
blue: {
backgroundColor: '$blue2',
boxShadow: 'inset 0 0 0 1px $colors$blue7',
color: '$blue11',
'@hover': {
'&:hover': {
boxShadow: 'inset 0 0 0 1px $colors$blue8',
},
},
'&:active': {
backgroundColor: '$blue3',
boxShadow: 'inset 0 0 0 1px $colors$blue8',
},
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$blue8, 0 0 0 1px $colors$blue8',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$blue4',
boxShadow: 'inset 0 0 0 1px $colors$blue8',
},
},
zeus: {
backgroundColor: '$zeus1',
boxShadow: 'inset 0 0 0 1px $colors$zeus7',
color: '$zeus11',
'@hover': {
'&:hover': {
boxShadow: 'inset 0 0 0 1px $colors$zeus8',
},
},
'&:active': {
backgroundColor: '$zeus3',
boxShadow: 'inset 0 0 0 1px $colors$zeus8',
},
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$zeus8, 0 0 0 1px $colors$zeus8',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$zeus4',
boxShadow: 'inset 0 0 0 1px $colors$zeus8',
},
},
green: {
backgroundColor: '$green2',
boxShadow: 'inset 0 0 0 1px $colors$green7',
color: '$green11',
'@hover': {
'&:hover': {
boxShadow: 'inset 0 0 0 1px $colors$green8',
},
},
'&:active': {
backgroundColor: '$green3',
boxShadow: 'inset 0 0 0 1px $colors$green8',
},
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$green8, 0 0 0 1px $colors$green8',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$green4',
boxShadow: 'inset 0 0 0 1px $colors$green8',
},
},
red: {
backgroundColor: '$loContrast',
boxShadow: 'inset 0 0 0 1px $colors$slate7',
color: '$red11',
'@hover': {
'&:hover': {
boxShadow: 'inset 0 0 0 1px $colors$slate8',
},
},
'&:active': {
backgroundColor: '$red3',
boxShadow: 'inset 0 0 0 1px $colors$red8',
},
'&:focus': {
boxShadow: 'inset 0 0 0 1px $colors$red8, 0 0 0 1px $colors$red8',
},
'&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
backgroundColor: '$red4',
boxShadow: 'inset 0 0 0 1px $colors$red8',
},
},
transparentWhite: {
backgroundColor: 'hsla(0,100%,100%,.2)',
color: 'white',
'@hover