@zeushq/design-system
Version:
1,391 lines (1,369 loc) • 293 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var react = require('@stitches/react');
var colors = require('@radix-ui/colors');
var AccordionPrimitive = require('@radix-ui/react-accordion');
var reactIcons = require('@radix-ui/react-icons');
var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
var AvatarPrimitive = require('@radix-ui/react-avatar');
var reactAspectRatio = require('@radix-ui/react-aspect-ratio');
var CheckboxPrimitive = require('@radix-ui/react-checkbox');
var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
var MenuPrimitive = require('@radix-ui/react-menu');
var reactId = require('@radix-ui/react-id');
var DialogPrimitive = require('@radix-ui/react-dialog');
var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
var merge = require('lodash.merge');
var PopoverPrimitive = require('@radix-ui/react-popover');
var reactPortal = require('@radix-ui/react-portal');
var ProgressPrimitive = require('@radix-ui/react-progress');
var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
var SeparatorPrimitive = require('@radix-ui/react-separator');
var TogglePrimitive = require('@radix-ui/react-toggle');
var SliderPrimitive = require('@radix-ui/react-slider');
var SwitchPrimitive = require('@radix-ui/react-switch');
var TabsPrimitive = require('@radix-ui/react-tabs');
var TooltipPrimitive = require('@radix-ui/react-tooltip');
var Head = require('next/head');
var NextRouter = require('next/router');
var nextThemes = require('next-themes');
var NextLink = require('next/link');
var radixIcons = require('@modulz/radix-icons');
var hastToHtml = require('hast-util-to-html');
var rangeParser = require('parse-numeric-range');
var unified = require('unified');
var parse = require('rehype-parse');
var debounce = require('lodash.debounce');
var seamlessScrollPolyfill = require('seamless-scroll-polyfill');
var reactContext = require('@radix-ui/react-context');
var reactUseCallbackRef = require('@radix-ui/react-use-callback-ref');
var primitive = require('@radix-ui/primitive');
var reactComposeRefs = require('@radix-ui/react-compose-refs');
var LabelPrimitive = require('@radix-ui/react-label');
var visit = require('unist-util-visit');
var nodeToString = require('hast-util-to-string');
var refractor$1 = require('refractor');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
var MenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenuPrimitive);
var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
var NextRouter__default = /*#__PURE__*/_interopDefaultLegacy(NextRouter);
var NextLink__default = /*#__PURE__*/_interopDefaultLegacy(NextLink);
var hastToHtml__default = /*#__PURE__*/_interopDefaultLegacy(hastToHtml);
var rangeParser__default = /*#__PURE__*/_interopDefaultLegacy(rangeParser);
var unified__default = /*#__PURE__*/_interopDefaultLegacy(unified);
var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
var visit__default = /*#__PURE__*/_interopDefaultLegacy(visit);
var nodeToString__default = /*#__PURE__*/_interopDefaultLegacy(nodeToString);
/*! *****************************************************************************
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 } = react.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' }, colors.gray), colors.mauve), colors.slate), colors.sage), colors.olive), colors.sand), colors.tomato), colors.red), colors.crimson), colors.pink), colors.plum), colors.purple), colors.violet), colors.indigo), colors.blue), colors.sky), colors.mint), colors.cyan), colors.teal), colors.green), colors.grass), colors.lime), colors.yellow), colors.amber), colors.orange), colors.brown), colors.bronze), colors.gold), colors.grayA), colors.mauveA), colors.slateA), colors.sageA), colors.oliveA), colors.sandA), colors.tomatoA), colors.redA), colors.crimsonA), colors.pinkA), colors.plumA), colors.purpleA), colors.violetA), colors.indigoA), colors.blueA), colors.skyA), colors.mintA), colors.cyanA), colors.tealA), colors.greenA), colors.grassA), colors.limeA), colors.yellowA), colors.amberA), colors.orangeA), colors.brownA), colors.bronzeA), colors.goldA), colors.whiteA), colors.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' }, colors.grayDark), colors.mauveDark), colors.slateDark), colors.sageDark), colors.oliveDark), colors.sandDark), colors.tomatoDark), colors.redDark), colors.crimsonDark), colors.pinkDark), colors.plumDark), colors.purpleDark), colors.violetDark), colors.indigoDark), colors.blueDark), colors.skyDark), colors.mintDark), colors.cyanDark), colors.tealDark), colors.greenDark), colors.grassDark), colors.limeDark), colors.yellowDark), colors.amberDark), colors.orangeDark), colors.brownDark), colors.bronzeDark), colors.goldDark), colors.grayDarkA), colors.mauveDarkA), colors.slateDarkA), colors.sageDarkA), colors.oliveDarkA), colors.sandDarkA), colors.tomatoDarkA), colors.redDarkA), colors.crimsonDarkA), colors.pinkDarkA), colors.plumDarkA), colors.purpleDarkA), colors.violetDarkA), colors.indigoDarkA), colors.blueDarkA), colors.skyDarkA), colors.mintDarkA), colors.cyanDarkA), colors.tealDarkA), colors.greenDarkA), colors.grassDarkA), colors.limeDarkA), colors.yellowDarkA), colors.amberDarkA), colors.orangeDarkA), colors.brownDarkA), colors.bronzeDarkA), colors.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__namespace.Root, {});
const Accordion = React__default['default'].forwardRef((_a, forwardedRef) => {
var { children } = _a, props = __rest(_a, ["children"]);
return (React__default['default'].createElement(StyledAccordion, Object.assign({ ref: forwardedRef }, props, (props.type === 'single' ? { collapsible: true } : {})), children));
});
const StyledItem = styled(AccordionPrimitive__namespace.Item, {
borderTop: '1px solid $colors$slate6',
'&:last-of-type': {
borderBottom: '1px solid $colors$slate6',
},
});
const StyledHeader = styled(AccordionPrimitive__namespace.Header, {
all: 'unset',
});
const StyledTrigger = styled(AccordionPrimitive__namespace.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['default'].forwardRef((_a, forwardedRef) => {
var { children } = _a, props = __rest(_a, ["children"]);
return (React__default['default'].createElement(StyledHeader, null,
React__default['default'].createElement(StyledTrigger, Object.assign({}, props, { ref: forwardedRef }),
children,
React__default['default'].createElement(reactIcons.ChevronDownIcon, null))));
});
const StyledContent$3 = styled(AccordionPrimitive__namespace.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__namespace.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['default'].createElement(AlertDialogPrimitive__namespace.Root, Object.assign({}, props),
React__default['default'].createElement(StyledOverlay$2, null),
children));
}
const AlertDialogContent = styled(AlertDialogPrimitive__namespace.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__namespace.Trigger;
const AlertDialogTitle = AlertDialogPrimitive__namespace.Title;
const AlertDialogDescription = AlertDialogPrimitive__namespace.Description;
const AlertDialogAction = AlertDialogPrimitive__namespace.Action;
const AlertDialogCancel = AlertDialogPrimitive__namespace.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__namespace.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__namespace.Image, {
display: 'flex',
objectFit: 'cover',
boxSizing: 'border-box',
height: '100%',
verticalAlign: 'middle',
width: '100%',
});
const StyledAvatarFallback = styled(AvatarPrimitive__namespace.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['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['default'].createElement(Box, { css: Object.assign(Object.assign({}, css), { position: 'relative', height: 'fit-content', width: 'fit-content' }) },
React__default['default'].createElement(StyledAvatar, Object.assign({}, props, { ref: forwardedRef, size: size, variant: variant, shape: shape }),
React__default['default'].createElement(StyledAvatarImage, { alt: alt, src: src }),
React__default['default'].createElement(StyledAvatarFallback, { size: size }, fallback)),
status && (React__default['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['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"]': {