@hope-ui/solid
Version:
The SolidJS component library you've hoped for.
1,928 lines • 468 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { isServer, createComponent, Dynamic, mergeProps as mergeProps$1, template, memo, effect, setAttribute, Portal, insert } from "solid-js/web";
import { createContext, mergeProps, createSignal, createEffect, useContext, splitProps, createMemo, onCleanup, createUniqueId, Show, children, createRenderEffect, Switch as Switch$1, Match, onMount, on, For, Index } from "solid-js";
import { createStore } from "solid-js/store";
import { createStitches, defaultThemeMap } from "@stitches/core";
import merge from "lodash.merge";
import { Transition, TransitionGroup } from "solid-transition-group";
import { createFocusTrap } from "focus-trap";
import { addScrollableSelector, disablePageScroll, removeScrollableSelector, clearQueueScrollLocks, enablePageScroll } from "scroll-lock";
import { autoUpdate, computePosition, offset, flip, shift, inline, arrow, hide as hide$1, size as size$1 } from "@floating-ui/dom";
const __DEV__ = false;
function isNumber(value) {
return typeof value === "number";
}
function isArray(value) {
return Array.isArray(value);
}
function isObject(value) {
const type = typeof value;
return value != null && (type === "object" || type === "function") && !isArray(value);
}
function isFunction(value) {
return typeof value === "function";
}
function isNull(value) {
return value == null;
}
function isString(value) {
return Object.prototype.toString.call(value) === "[object String]";
}
function isUndefined(value) {
return typeof value === "undefined" || value === void 0;
}
function noop() {
return;
}
function cast(value) {
return value;
}
function mapKeys(prop, mapper) {
if (isObject(prop)) {
return Object.keys(prop).reduce((result, key) => {
result[key] = mapper(prop[key]);
return result;
}, {});
}
if (prop !== null && prop !== void 0) {
return mapper(prop);
}
return null;
}
function callHandler(handler, event) {
if (handler) {
if (isFunction(handler)) {
handler(event);
} else {
handler[0](handler[1], event);
}
}
return event == null ? void 0 : event.defaultPrevented;
}
function chainHandlers(...fns) {
return function(event) {
fns.some((fn) => {
return callHandler(fn, event);
});
};
}
function range(count) {
return Array(count).fill(1).map((_, index) => index + 1);
}
const mockBody = {
classList: { add: noop, remove: noop }
};
const hasLocalStorageSupport = () => typeof Storage !== "undefined";
const COLOR_MODE_STORAGE_KEY = "hope-ui-color-mode";
const colorModeClassNames = {
light: "hope-ui-light",
dark: "hope-ui-dark"
};
function getColorModeFromLocalStorage() {
if (!hasLocalStorageSupport()) {
return null;
}
try {
return localStorage.getItem(COLOR_MODE_STORAGE_KEY);
} catch (error) {
return null;
}
}
function saveColorModeToLocalStorage(value) {
if (!hasLocalStorageSupport()) {
return;
}
try {
localStorage.setItem(COLOR_MODE_STORAGE_KEY, value);
} catch (error) {
}
}
function getDefaultColorMode(fallbackValue) {
const persistedPreference = getColorModeFromLocalStorage();
if (persistedPreference) {
return persistedPreference;
} else if (fallbackValue === "system") {
const isSystemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
return isSystemDark ? "dark" : "light";
} else {
return fallbackValue;
}
}
function getColorModeClassName(isDark) {
return isDark ? colorModeClassNames.dark : colorModeClassNames.light;
}
function syncBodyColorModeClassName(isDark) {
const body = isServer ? mockBody : document.body;
body.classList.add(getColorModeClassName(isDark));
body.classList.remove(isDark ? colorModeClassNames.light : colorModeClassNames.dark);
}
const space = {
px: "1px",
"0_5": "0.125rem",
"1": "0.25rem",
"1_5": "0.375rem",
"2": "0.5rem",
"2_5": "0.625rem",
"3": "0.75rem",
"3_5": "0.875rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"12": "3rem",
"14": "3.5rem",
"16": "4rem",
"20": "5rem",
"24": "6rem",
"28": "7rem",
"32": "8rem",
"36": "9rem",
"40": "10rem",
"44": "11rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"72": "18rem",
"80": "20rem",
"96": "24rem"
};
const sizes = __spreadProps(__spreadValues({}, space), {
prose: "65ch",
max: "max-content",
min: "min-content",
full: "100%",
screenW: "100vw",
screenH: "100vh",
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
"8xl": "90rem",
containerSm: "640px",
containerMd: "768px",
containerLg: "1024px",
containerXl: "1280px",
container2xl: "1536px"
});
const baseMedia = {
sm: `(min-width: ${sizes.containerSm})`,
md: `(min-width: ${sizes.containerMd})`,
lg: `(min-width: ${sizes.containerLg})`,
xl: `(min-width: ${sizes.containerXl})`,
"2xl": `(min-width: ${sizes.container2xl})`,
"reduce-motion": "(prefers-reduced-motion: reduce)",
light: "(prefers-color-scheme: light)",
dark: "(prefers-color-scheme: dark)"
};
const background = {
bg: (value) => ({ background: value }),
bgColor: (value) => ({ backgroundColor: value })
};
const border = {
borderX: (value) => ({
borderLeft: value,
borderRight: value
}),
borderY: (value) => ({
borderTop: value,
borderBottom: value
})
};
const display = {
d: (value) => ({ display: value })
};
const margin = {
m: (value) => ({ margin: value }),
mt: (value) => ({ marginTop: value }),
mr: (value) => ({ marginRight: value }),
marginStart: (value) => ({ marginInlineStart: value }),
ms: (value) => ({ marginInlineStart: value }),
mb: (value) => ({ marginBottom: value }),
ml: (value) => ({ marginLeft: value }),
marginEnd: (value) => ({ marginInlineEnd: value }),
me: (value) => ({ marginInlineEnd: value }),
mx: (value) => ({
marginInlineStart: value,
marginInlineEnd: value
}),
my: (value) => ({ marginTop: value, marginBottom: value }),
spaceX: (value) => ({
"& > * + *": {
marginLeft: value
}
}),
spaceY: (value) => ({
"& > * + *": {
marginTop: value
}
})
};
const padding = {
p: (value) => ({ padding: value }),
pt: (value) => ({ paddingTop: value }),
pr: (value) => ({ paddingRight: value }),
paddingStart: (value) => ({ paddingInlineStart: value }),
ps: (value) => ({ paddingInlineStart: value }),
pb: (value) => ({ paddingBottom: value }),
pl: (value) => ({ paddingLeft: value }),
pe: (value) => ({ paddingInlineEnd: value }),
paddingEnd: (value) => ({ paddingInlineEnd: value }),
px: (value) => ({
paddingInlineStart: value,
paddingInlineEnd: value
}),
py: (value) => ({ paddingTop: value, paddingBottom: value })
};
const position = {
pos: (value) => ({ position: value })
};
function createGroupSelector(...selectors) {
return selectors.map((item) => `[role=group]${item} &, [data-group]${item} &, .group${item} &`).join(", ");
}
function createPeerSelector(...selectors) {
return selectors.map((item) => `[data-peer]${item} ~ &, .peer${item} ~ &`).join(", ");
}
const pseudoSelectors = {
_hover: (value) => ({
"&:hover, &[data-hover]": value
}),
_active: (value) => ({
"&:active, &[data-active]": value
}),
_focus: (value) => ({
"&:focus, &[data-focus]": value
}),
_highlighted: (value) => ({
"&[data-highlighted]": value
}),
_focusWithin: (value) => ({
"&:focus-within": value
}),
_focusVisible: (value) => ({
"&:focus-visible": value
}),
_disabled: (value) => ({
"&[disabled], &[aria-disabled=true], &[data-disabled]": value
}),
_readOnly: (value) => ({
"&[aria-readonly=true], &[readonly], &[data-readonly]": value
}),
_before: (value) => ({
"&::before": value
}),
_after: (value) => ({
"&::after": value
}),
_empty: (value) => ({
"&:empty": value
}),
_expanded: (value) => ({
"&[aria-expanded=true], &[data-expanded]": value
}),
_checked: (value) => ({
"&[aria-checked=true], &[data-checked]": value
}),
_grabbed: (value) => ({
"&[aria-grabbed=true], &[data-grabbed]": value
}),
_pressed: (value) => ({
"&[aria-pressed=true], &[data-pressed]": value
}),
_invalid: (value) => ({
"&[aria-invalid=true], &[data-invalid]": value
}),
_valid: (value) => ({
"&[data-valid], &[data-state=valid]": value
}),
_loading: (value) => ({
"&[data-loading], &[aria-busy=true]": value
}),
_selected: (value) => ({
"&[aria-selected=true], &[data-selected]": value
}),
_hidden: (value) => ({
"&[hidden], &[data-hidden]": value
}),
_even: (value) => ({
"&:nth-of-type(even)": value
}),
_odd: (value) => ({
"&:nth-of-type(odd)": value
}),
_first: (value) => ({
"&:first-of-type": value
}),
_last: (value) => ({
"&:last-of-type": value
}),
_notFirst: (value) => ({
"&:not(:first-of-type)": value
}),
_notLast: (value) => ({
"&:not(:last-of-type)": value
}),
_visited: (value) => ({
"&:visited": value
}),
_activeLink: (value) => ({
"&[aria-current=page]": value
}),
_activeStep: (value) => ({
"&[aria-current=step]": value
}),
_indeterminate: (value) => ({
"&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]": value
}),
_groupHover: (value) => ({
[createGroupSelector(":hover", "[data-hover]")]: value
}),
_peerHover: (value) => ({
[createPeerSelector(":hover", "[data-hover]")]: value
}),
_groupFocus: (value) => ({
[createGroupSelector(":focus", "[data-focus]")]: value
}),
_peerFocus: (value) => ({
[createPeerSelector(":focus", "[data-focus]")]: value
}),
_groupFocusVisible: (value) => ({
[createGroupSelector(":focus-visible")]: value
}),
_peerFocusVisible: (value) => ({
[createPeerSelector(":focus-visible")]: value
}),
_groupActive: (value) => ({
[createGroupSelector(":active", "[data-active]")]: value
}),
_peerActive: (value) => ({
[createPeerSelector(":active", "[data-active]")]: value
}),
_groupSelected: (value) => ({
[createGroupSelector("[aria-selected=true]", "[data-selected]")]: value
}),
_peerSelected: (value) => ({
[createPeerSelector("[aria-selected=true]", "[data-selected]")]: value
}),
_groupDisabled: (value) => ({
[createGroupSelector(":disabled", "[data-disabled]")]: value
}),
_peerDisabled: (value) => ({
[createPeerSelector(":disabled", "[data-disabled]")]: value
}),
_groupInvalid: (value) => ({
[createGroupSelector(":invalid", "[data-invalid]")]: value
}),
_peerInvalid: (value) => ({
[createPeerSelector(":invalid", "[data-invalid]")]: value
}),
_groupChecked: (value) => ({
[createGroupSelector(":checked", "[data-checked]")]: value
}),
_peerChecked: (value) => ({
[createPeerSelector(":checked", "[data-checked]")]: value
}),
_groupFocusWithin: (value) => ({
[createGroupSelector(":focus-within")]: value
}),
_peerFocusWithin: (value) => ({
[createPeerSelector(":focus-within")]: value
}),
_peerPlaceholderShown: (value) => ({
[createPeerSelector(":placeholder-shown")]: value
}),
_placeholder: (value) => ({
"&::placeholder": value
}),
_placeholderShown: (value) => ({
"&:placeholder-shown": value
}),
_fullScreen: (value) => ({
"&:fullscreen": value
}),
_selection: (value) => ({
"&::selection": value
}),
_mediaDark: (value) => ({
"@media (prefers-color-scheme: dark)": value
}),
_mediaReduceMotion: (value) => ({
"@media (prefers-reduced-motion: reduce)": value
}),
_dark: (value) => ({
".hope-ui-dark &": value
}),
_light: (value) => ({
".hope-ui-light &": value
})
};
const radii$1 = {
borderTopRadius: (value) => ({
borderTopLeftRadius: value,
borderTopRightRadius: value
}),
borderRightRadius: (value) => ({
borderTopRightRadius: value,
borderBottomRightRadius: value
}),
borderStartRadius: (value) => ({
borderStartStartRadius: value,
borderEndStartRadius: value
}),
borderBottomRadius: (value) => ({
borderBottomLeftRadius: value,
borderBottomRightRadius: value
}),
borderLeftRadius: (value) => ({
borderTopLeftRadius: value,
borderBottomLeftRadius: value
}),
borderEndRadius: (value) => ({
borderStartEndRadius: value,
borderEndEndRadius: value
}),
rounded: (value) => ({
borderRadius: value
}),
roundedTop: (value) => ({
borderTopLeftRadius: value,
borderTopRightRadius: value
}),
roundedRight: (value) => ({
borderTopRightRadius: value,
borderBottomRightRadius: value
}),
roundedStart: (value) => ({
borderStartStartRadius: value,
borderEndStartRadius: value
}),
roundedBottom: (value) => ({
borderBottomLeftRadius: value,
borderBottomRightRadius: value
}),
roundedLeft: (value) => ({
borderTopLeftRadius: value,
borderBottomLeftRadius: value
}),
roundedEnd: (value) => ({
borderStartEndRadius: value,
borderEndEndRadius: value
})
};
const shadow = {
shadow: (value) => ({ boxShadow: value })
};
const size = {
w: (value) => ({ width: value }),
minW: (value) => ({ minWidth: value }),
maxW: (value) => ({ maxWidth: value }),
h: (value) => ({ height: value }),
minH: (value) => ({ minHeight: value }),
maxH: (value) => ({ maxHeight: value }),
boxSize: (value) => ({ width: value, height: value })
};
const typography = {
noOfLines: (value) => ({
overflow: "hidden",
display: "-webkit-box",
"-webkit-box-orient": "vertical",
"-webkit-line-clamp": value
})
};
const utils = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, background), border), display), position), pseudoSelectors), radii$1), margin), padding), shadow), size), typography);
const blackAlpha = {
blackAlpha1: "#00000003",
blackAlpha2: "#00000007",
blackAlpha3: "#0000000c",
blackAlpha4: "#00000012",
blackAlpha5: "#00000017",
blackAlpha6: "#0000001d",
blackAlpha7: "#00000024",
blackAlpha8: "#00000038",
blackAlpha9: "#00000070",
blackAlpha10: "#0000007a",
blackAlpha11: "#00000090",
blackAlpha12: "#000000e8"
};
const whiteAlpha = {
whiteAlpha1: "#ffffff00",
whiteAlpha2: "#ffffff03",
whiteAlpha3: "#ffffff09",
whiteAlpha4: "#ffffff0e",
whiteAlpha5: "#ffffff16",
whiteAlpha6: "#ffffff20",
whiteAlpha7: "#ffffff2d",
whiteAlpha8: "#ffffff3f",
whiteAlpha9: "#ffffff62",
whiteAlpha10: "#ffffff72",
whiteAlpha11: "#ffffff97",
whiteAlpha12: "#ffffffeb"
};
const commonColors = __spreadValues(__spreadValues({}, blackAlpha), whiteAlpha);
const primary = {
primary1: "#fafdfe",
primary2: "#f2fcfd",
primary3: "#e7f9fb",
primary4: "#d8f3f6",
primary5: "#c4eaef",
primary6: "#aadee6",
primary7: "#84cdda",
primary8: "#3db9cf",
primary9: "#05a2c2",
primary10: "#0894b3",
primary11: "#0c7792",
primary12: "#04313c"
};
const accent = {
accent1: "#fdfcfe",
accent2: "#fbfaff",
accent3: "#f5f2ff",
accent4: "#ede9fe",
accent5: "#e4defc",
accent6: "#d7cff9",
accent7: "#c4b8f3",
accent8: "#aa99ec",
accent9: "#6e56cf",
accent10: "#644fc1",
accent11: "#5746af",
accent12: "#20134b"
};
const neutral = {
neutral1: "#fbfcfd",
neutral2: "#f8f9fa",
neutral3: "#f1f3f5",
neutral4: "#eceef0",
neutral5: "#e6e8eb",
neutral6: "#dfe3e6",
neutral7: "#d7dbdf",
neutral8: "#c1c8cd",
neutral9: "#889096",
neutral10: "#7e868c",
neutral11: "#687076",
neutral12: "#11181c"
};
const success = {
success1: "#fbfefc",
success2: "#f2fcf5",
success3: "#e9f9ee",
success4: "#ddf3e4",
success5: "#ccebd7",
success6: "#b4dfc4",
success7: "#92ceac",
success8: "#5bb98c",
success9: "#30a46c",
success10: "#299764",
success11: "#18794e",
success12: "#153226"
};
const info = {
info1: "#fbfdff",
info2: "#f5faff",
info3: "#edf6ff",
info4: "#e1f0ff",
info5: "#cee7fe",
info6: "#b7d9f8",
info7: "#96c7f2",
info8: "#5eb0ef",
info9: "#0091ff",
info10: "#0081f1",
info11: "#006adc",
info12: "#00254d"
};
const warning = {
warning1: "#fefdfb",
warning2: "#fff9ed",
warning3: "#fff4d5",
warning4: "#ffecbc",
warning5: "#ffe3a2",
warning6: "#ffd386",
warning7: "#f3ba63",
warning8: "#ee9d2b",
warning9: "#ffb224",
warning10: "#ffa01c",
warning11: "#ad5700",
warning12: "#4e2009"
};
const danger = {
danger1: "#fffcfc",
danger2: "#fff8f8",
danger3: "#ffefef",
danger4: "#ffe5e5",
danger5: "#fdd8d8",
danger6: "#f9c6c6",
danger7: "#f3aeaf",
danger8: "#eb9091",
danger9: "#e5484d",
danger10: "#dc3d43",
danger11: "#cd2b31",
danger12: "#381316"
};
const semanticColors = {
loContrast: "white",
background: "$loContrast",
focusRing: "#96c7f2",
closeButtonHoverBackground: "$blackAlpha4",
closeButtonActiveBackground: "$blackAlpha5",
progressStripe: "$whiteAlpha6"
};
const lightColors = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, primary), accent), neutral), success), info), warning), danger), semanticColors);
const primaryDark = {
primary1: "#07191d",
primary2: "#061e24",
primary3: "#072830",
primary4: "#07303b",
primary5: "#073844",
primary6: "#064150",
primary7: "#045063",
primary8: "#00647d",
primary9: "#05a2c2",
primary10: "#00b1cc",
primary11: "#00c2d7",
primary12: "#e1f8fa"
};
const accentDark = {
accent1: "#17151f",
accent2: "#1c172b",
accent3: "#251e40",
accent4: "#2c2250",
accent5: "#32275f",
accent6: "#392c72",
accent7: "#443592",
accent8: "#5842c3",
accent9: "#6e56cf",
accent10: "#7c66dc",
accent11: "#9e8cfc",
accent12: "#f1eefe"
};
const neutralDark = {
neutral1: "#151718",
neutral2: "#1a1d1e",
neutral3: "#202425",
neutral4: "#26292b",
neutral5: "#2b2f31",
neutral6: "#313538",
neutral7: "#3a3f42",
neutral8: "#4c5155",
neutral9: "#697177",
neutral10: "#787f85",
neutral11: "#9ba1a6",
neutral12: "#ecedee"
};
const successDark = {
success1: "#0d1912",
success2: "#0c1f17",
success3: "#0f291e",
success4: "#113123",
success5: "#133929",
success6: "#164430",
success7: "#1b543a",
success8: "#236e4a",
success9: "#30a46c",
success10: "#3cb179",
success11: "#4cc38a",
success12: "#e5fbeb"
};
const infoDark = {
info1: "#0f1720",
info2: "#0f1b2d",
info3: "#10243e",
info4: "#102a4c",
info5: "#0f3058",
info6: "#0d3868",
info7: "#0a4481",
info8: "#0954a5",
info9: "#0091ff",
info10: "#369eff",
info11: "#52a9ff",
info12: "#eaf6ff"
};
const warningDark = {
warning1: "#1f1300",
warning2: "#271700",
warning3: "#341c00",
warning4: "#3f2200",
warning5: "#4a2900",
warning6: "#573300",
warning7: "#693f05",
warning8: "#824e00",
warning9: "#ffb224",
warning10: "#ffcb47",
warning11: "#f1a10d",
warning12: "#fef3dd"
};
const dangerDark = {
danger1: "#1f1315",
danger2: "#291415",
danger3: "#3c181a",
danger4: "#481a1d",
danger5: "#541b1f",
danger6: "#671e22",
danger7: "#822025",
danger8: "#aa2429",
danger9: "#e5484d",
danger10: "#f2555a",
danger11: "#ff6369",
danger12: "#feecee"
};
const semanticDarkColors = {
loContrast: "$neutral1",
background: "$loContrast",
focusRing: "#0a4481",
closeButtonHoverBackground: "$whiteAlpha4",
closeButtonActiveBackground: "$whiteAlpha5",
progressStripe: "$blackAlpha6"
};
const darkColors = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, primaryDark), accentDark), neutralDark), successDark), infoDark), warningDark), dangerDark), semanticDarkColors);
const radii = {
none: "0",
xs: "0.125rem",
sm: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
full: "9999px"
};
const shadows = {
none: "0 0 #0000",
xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
sm: "0 1px 3px 0 rgb(0 0 0 / 0.09), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.09), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.09), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.09), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.24)",
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.06)",
outline: "0 0 0 3px $colors$focusRing"
};
const darkShadows = {
lg: "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px"
};
const fonts = {
sans: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol","Noto Color Emoji"',
serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
};
const fontSizes = {
"2xs": "0.625rem",
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem"
};
const fontWeights = {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
};
const lineHeights = {
normal: "normal",
none: 1,
shorter: 1.25,
short: 1.375,
base: 1.5,
tall: 1.625,
taller: 2,
"3": ".75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem"
};
const letterSpacings = {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em"
};
const zIndices = {
hide: -1,
auto: "auto",
base: 0,
docked: 10,
sticky: 1e3,
banner: 1100,
overlay: 1200,
modal: 1300,
dropdown: 1400,
popover: 1500,
tooltip: 1600,
skipLink: 1700,
notification: 1800
};
const baseThemeTokens = {
colors: __spreadValues(__spreadValues({}, commonColors), lightColors),
space,
sizes,
fonts,
fontSizes,
fontWeights,
letterSpacings,
lineHeights,
radii,
shadows,
zIndices
};
const baseDarkThemeTokens = {
colors: darkColors,
shadows: darkShadows
};
const {
theme: baseTheme,
css,
globalCss,
config,
createTheme,
getCssText,
keyframes
} = createStitches({
prefix: "hope",
themeMap: __spreadProps(__spreadValues({}, defaultThemeMap), {
borderWidth: "sizes",
borderTopWidth: "sizes",
borderRightWidth: "sizes",
borderBottomWidth: "sizes",
borderLeftWidth: "sizes",
strokeWidth: "sizes"
}),
theme: baseThemeTokens,
media: baseMedia,
utils
});
const modalTransitionName = {
fade: "hope-modal-fade-transition",
fadeInBottom: "hope-modal-fade-in-bottom-transition",
scale: "hope-modal-scale-transition"
};
const modalTransitionStyles = globalCss({
[`.${modalTransitionName.fade}-enter, .${modalTransitionName.fade}-exit-to`]: {
opacity: 0
},
[`.${modalTransitionName.fade}-enter-to, .${modalTransitionName.fade}-exit`]: {
opacity: 1
},
[`.${modalTransitionName.fade}-enter-active`]: {
transition: "opacity 300ms ease-out"
},
[`.${modalTransitionName.fade}-exit-active`]: {
transition: "opacity 200ms ease-in"
},
[`.${modalTransitionName.fadeInBottom}-enter, .${modalTransitionName.fadeInBottom}-exit-to`]: {
opacity: 0,
transform: "translateY(16px)"
},
[`.${modalTransitionName.fadeInBottom}-enter-to, .${modalTransitionName.fadeInBottom}-exit`]: {
opacity: 1,
transform: "translateY(0)"
},
[`.${modalTransitionName.fadeInBottom}-enter-active`]: {
transitionProperty: "opacity, transform",
transitionDuration: "300ms",
transitionTimingFunction: "ease-out"
},
[`.${modalTransitionName.fadeInBottom}-exit-active`]: {
transitionProperty: "opacity, transform",
transitionDuration: "200ms",
transitionTimingFunction: "ease-in"
},
[`.${modalTransitionName.scale}-enter, .${modalTransitionName.scale}-exit-to`]: {
opacity: 0,
transform: "scale(0.95)"
},
[`.${modalTransitionName.scale}-enter-to, .${modalTransitionName.scale}-exit`]: {
opacity: 1,
transform: "scale(1)"
},
[`.${modalTransitionName.scale}-enter-active`]: {
transitionProperty: "opacity, transform",
transitionDuration: "300ms",
transitionTimingFunction: "ease-out"
},
[`.${modalTransitionName.scale}-exit-active`]: {
transitionProperty: "opacity, transform",
transitionDuration: "200ms",
transitionTimingFunction: "ease-in"
}
});
const modalOverlayStyles = css({
zIndex: "$overlay",
position: "fixed",
top: 0,
left: 0,
width: "100vw",
height: "100vh",
backgroundColor: "hsl(0 0% 0% / 65%)"
});
const baseModalContainerStyles = css({
zIndex: "$modal",
position: "fixed",
top: 0,
left: 0,
display: "flex",
width: "100vw",
height: "100vh",
"@supports(height: -webkit-fill-available)": {
height: "-webkit-fill-available"
},
outline: "none",
"&:focus": {
outline: "none"
}
});
const modalContainerStyles = css(baseModalContainerStyles, {
justifyContent: "center",
variants: {
centered: {
true: {
alignItems: "center"
},
false: {
alignItems: "flex-start"
}
},
scrollBehavior: {
inside: {
overflow: "hidden"
},
outside: {
overflow: "auto"
}
}
}
});
const baseDialogStyles = css({
zIndex: "$modal",
position: "relative",
display: "flex",
flexDirection: "column",
width: "100%",
outline: "none",
boxShadow: "$lg",
backgroundColor: "$loContrast",
color: "inherit",
"&:focus": {
outline: "none"
}
});
const modalDialogStyles = css(baseDialogStyles, {
justifyContent: "center",
my: "3.75rem",
borderRadius: "$sm",
variants: {
size: {
xs: {
maxWidth: "$xs"
},
sm: {
maxWidth: "$sm"
},
md: {
maxWidth: "$md"
},
lg: {
maxWidth: "$lg"
},
xl: {
maxWidth: "$xl"
},
"2xl": {
maxWidth: "$2xl"
},
"3xl": {
maxWidth: "$3xl"
},
"4xl": {
maxWidth: "$4xl"
},
"5xl": {
maxWidth: "$5xl"
},
"6xl": {
maxWidth: "$6xl"
},
"7xl": {
maxWidth: "$7xl"
},
"8xl": {
maxWidth: "$8xl"
},
full: {
maxWidth: "100vw",
minHeight: "100vh",
"@supports(min-height: -webkit-fill-available)": {
minHeight: "-webkit-fill-available"
},
my: 0,
borderRadius: "$none"
}
},
scrollBehavior: {
inside: {
maxHeight: "calc(100% - 7.5rem)"
},
outside: {
maxHeight: "none"
}
}
}
});
const modalHeaderStyles = css({
flex: 0,
pt: "$5",
px: "$5",
pb: "$3",
fontSize: "$lg",
fontWeight: "$medium"
});
const modalBodyStyles = css({
flex: 1,
px: "$5",
py: "$2",
variants: {
scrollBehavior: {
inside: {
overflow: "auto"
},
outside: {
overflow: void 0
}
}
}
});
const modalFooterStyles = css({
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
pt: "$3",
px: "$5",
pb: "$5"
});
const modalCloseButtonStyles = css({
position: "absolute",
top: "$4",
insetInlineEnd: "$4"
});
const drawerTransitionName = {
fade: "hope-drawer-fade-transition",
slideInTop: "hope-drawer-slide-in-top-transition",
slideInRight: "hope-drawer-slide-in-right-transition",
slideInBottom: "hope-drawer-slide-in-bottom-transition",
slideInLeft: "hope-drawer-slide-in-left-transition"
};
const drawerTransitionStyles = globalCss({
[`.${drawerTransitionName.fade}-enter, .${drawerTransitionName.fade}-exit-to`]: {
opacity: 0
},
[`.${drawerTransitionName.fade}-enter-to, .${drawerTransitionName.fade}-exit`]: {
opacity: 1
},
[`.${drawerTransitionName.fade}-enter-active, .${drawerTransitionName.fade}-exit-active`]: {
transition: "opacity 500ms ease-in-out"
},
[`.${drawerTransitionName.slideInTop}-enter-active, .${drawerTransitionName.slideInTop}-exit-active,
.${drawerTransitionName.slideInRight}-enter-active, .${drawerTransitionName.slideInRight}-exit-active,
.${drawerTransitionName.slideInBottom}-enter-active, .${drawerTransitionName.slideInBottom}-exit-active,
.${drawerTransitionName.slideInLeft}-enter-active, .${drawerTransitionName.slideInLeft}-exit-active`]: {
transition: "transform 500ms ease-in-out"
},
[`.${drawerTransitionName.slideInTop}-enter, .${drawerTransitionName.slideInTop}-exit-to`]: {
transform: "translateY(-100%)"
},
[`.${drawerTransitionName.slideInTop}-enter-to, .${drawerTransitionName.slideInTop}-exit`]: {
transform: "translateY(0)"
},
[`.${drawerTransitionName.slideInRight}-enter, .${drawerTransitionName.slideInRight}-exit-to`]: {
transform: "translateX(100%)"
},
[`.${drawerTransitionName.slideInRight}-enter-to, .${drawerTransitionName.slideInRight}-exit`]: {
transform: "translateX(0)"
},
[`.${drawerTransitionName.slideInBottom}-enter, .${drawerTransitionName.slideInBottom}-exit-to`]: {
transform: "translateY(100%)"
},
[`.${drawerTransitionName.slideInBottom}-enter-to, .${drawerTransitionName.slideInBottom}-exit`]: {
transform: "translateY(0)"
},
[`.${drawerTransitionName.slideInLeft}-enter, .${drawerTransitionName.slideInLeft}-exit-to`]: {
transform: "translateX(-100%)"
},
[`.${drawerTransitionName.slideInLeft}-enter-to, .${drawerTransitionName.slideInLeft}-exit`]: {
transform: "translateX(0)"
}
});
const drawerContainerStyles = css(baseModalContainerStyles, {
overflow: "hidden",
variants: {
placement: {
top: {
alignItems: "flex-start",
justifyContent: "stretch"
},
right: {
alignItems: "stretch",
justifyContent: "flex-end"
},
bottom: {
alignItems: "flex-end",
justifyContent: "stretch"
},
left: {
alignItems: "stretch",
justifyContent: "flex-start"
}
}
}
});
const drawerDialogStyles = css(baseDialogStyles, {
maxHeight: "100vh",
variants: {
size: {
xs: {
maxWidth: "$xs"
},
sm: {
maxWidth: "$md"
},
md: {
maxWidth: "$lg"
},
lg: {
maxWidth: "$2xl"
},
xl: {
maxWidth: "$4xl"
},
full: {
maxWidth: "100vw",
height: "100vh"
}
},
placement: {
top: {},
right: {},
bottom: {},
left: {}
},
fullHeight: {
true: {
height: "100vh"
},
false: {}
}
},
compoundVariants: [
{ placement: "top", size: "xs", css: { maxWidth: "100vw" } },
{ placement: "top", size: "sm", css: { maxWidth: "100vw" } },
{ placement: "top", size: "md", css: { maxWidth: "100vw" } },
{ placement: "top", size: "lg", css: { maxWidth: "100vw" } },
{ placement: "top", size: "xl", css: { maxWidth: "100vw" } },
{ placement: "bottom", size: "xs", css: { maxWidth: "100vw" } },
{ placement: "bottom", size: "sm", css: { maxWidth: "100vw" } },
{ placement: "bottom", size: "md", css: { maxWidth: "100vw" } },
{ placement: "bottom", size: "lg", css: { maxWidth: "100vw" } },
{ placement: "bottom", size: "xl", css: { maxWidth: "100vw" } }
]
});
const menuTransitionName = {
scaleTopLeft: "hope-menu-scale-top-left-transition",
scaleTopRight: "hope-menu-scale-top-right-transition",
scaleBottomLeft: "hope-menu-scale-bottom-left-transition",
scaleBottomRight: "hope-menu-scale-bottom-right-transition"
};
function createMenuScaleTransition(name, transformOrigin) {
return {
[`.${name}-enter, .${name}-exit-to`]: {
opacity: 0,
transform: "scale(0.8)"
},
[`.${name}-enter-to, .${name}-exit`]: {
opacity: 1,
transform: "scale(1)"
},
[`.${name}-enter-active`]: {
transformOrigin,
transitionProperty: "opacity, transform",
transitionDuration: "200ms",
transitionTimingFunction: "ease-out"
},
[`.${name}-exit-active`]: {
transformOrigin,
transitionProperty: "opacity, transform",
transitionDuration: "100ms",
transitionTimingFunction: "ease-in"
}
};
}
const menuTransitionStyles = globalCss(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, createMenuScaleTransition(menuTransitionName.scaleTopLeft, "top left")), createMenuScaleTransition(menuTransitionName.scaleTopRight, "top right")), createMenuScaleTransition(menuTransitionName.scaleBottomLeft, "bottom left")), createMenuScaleTransition(menuTransitionName.scaleBottomRight, "bottom right")));
const menuTriggerStyles = css({
appearance: "none",
display: "inline-flex",
alignItems: "center",
outline: "none"
});
const menuContentStyles = css({
zIndex: "$dropdown",
position: "absolute",
left: 0,
top: "100%",
display: "flex",
flexDirection: "column",
minWidth: "$56",
overflowY: "auto",
outline: "none",
margin: 0,
boxShadow: "$md",
border: "1px solid $colors$neutral7",
borderRadius: "$sm",
backgroundColor: "$loContrast",
px: 0,
py: "$1",
"&:focus": {
outline: "none"
}
});
const menuGroupStyles = css({});
const menuLabelStyles = css({
display: "flex",
alignItems: "center",
mx: "$1",
py: "$2",
px: "$3",
color: "$neutral11",
fontSize: "$xs",
fontWeight: "$medium",
lineHeight: "$4"
});
function createColorVariant$1(config2) {
return {
color: config2.color,
[`&[data-active]`]: {
backgroundColor: config2.bgColorActive
}
};
}
const menuItemStyles = css({
position: "relative",
display: "flex",
alignItems: "center",
mx: "$1",
borderRadius: "$sm",
py: "$2",
px: "$3",
fontSize: "$base",
fontWeight: "$normal",
lineHeight: "$6",
cursor: "pointer",
userSelect: "none",
transition: "color 250ms, background-color 250ms",
"&[data-disabled]": {
color: "$neutral8",
cursor: "not-allowed"
},
variants: {
colorScheme: {
primary: createColorVariant$1({ color: "$primary11", bgColorActive: "$primary3" }),
accent: createColorVariant$1({ color: "$accent11", bgColorActive: "$accent3" }),
neutral: createColorVariant$1({ color: "$neutral12", bgColorActive: "$neutral4" }),
success: createColorVariant$1({ color: "$success11", bgColorActive: "$success3" }),
info: createColorVariant$1({ color: "$info11", bgColorActive: "$info3" }),
warning: createColorVariant$1({ color: "$warning11", bgColorActive: "$warning3" }),
danger: createColorVariant$1({ color: "$danger11", bgColorActive: "$danger3" })
}
},
defaultVariants: {
colorScheme: "neutral"
}
});
const menuItemIconWrapperStyles = css({
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0
});
const menuItemTextStyles = css({
flexGrow: 1
});
const menuItemCommandStyles = css({
flexShrink: 0,
color: "$neutral11",
fontSize: "$sm",
lineHeight: "$none"
});
const spin = keyframes({
from: { transform: "rotate(0deg)" },
to: { transform: "rotate(360deg)" }
});
const fadeIn = keyframes({
from: { opacity: 0 },
to: { opacity: 1 }
});
const notificationTransitionName = {
slideInTop: "hope-notification-slide-in-top-transition",
slideInRight: "hope-notification-slide-in-right-transition",
slideInBottom: "hope-notification-slide-in-bottom-transition",
slideInLeft: "hope-notification-slide-in-left-transition"
};
function createNotificationSlideTransition(config2) {
return {
[`.${config2.name}-enter, .${config2.name}-exit-to`]: {
opacity: 0,
transform: config2.enterTransform
},
[`.${config2.name}-enter-to, .${config2.name}-exit`]: {
opacity: 1,
transform: config2.leaveTransform
},
[`.${config2.name}-enter-active`]: {
transitionProperty: "opacity, transform",
transitionTimingFunction: "cubic-bezier(.51,.3,0,1.21)",
transitionDuration: "300ms"
},
[`.${config2.name}-exit-active`]: {
transitionProperty: "opacity, transform",
transitionTimingFunction: "ease-in",
transitionDuration: "200ms"
}
};
}
const notificationTransitionStyles = globalCss(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, createNotificationSlideTransition({
name: notificationTransitionName.slideInTop,
enterTransform: "translateY(-100%)",
leaveTransform: "translateY(0)"
})), createNotificationSlideTransition({
name: notificationTransitionName.slideInRight,
enterTransform: "translateX(100%)",
leaveTransform: "translateX(0)"
})), createNotificationSlideTransition({
name: notificationTransitionName.slideInBottom,
enterTransform: "translateY(100%)",
leaveTransform: "translateY(0)"
})), createNotificationSlideTransition({
name: notificationTransitionName.slideInLeft,
enterTransform: "translateX(-100%)",
leaveTransform: "translateX(0)"
})));
const notificationListStyles = css({
position: "fixed",
zIndex: "$notification",
display: "flex",
flexDirection: "column",
alignItems: "flex-end",
gap: "$4",
width: "calc(100% - 32px)",
maxWidth: "$md",
variants: {
placement: {
"top-start": {
top: "$4",
left: "$4"
},
top: {
top: "$4",
left: "50%",
transform: "translateX(-50%)"
},
"top-end": {
top: "$4",
right: "$4"
},
"bottom-start": {
bottom: "$4",
left: "$4"
},
bottom: {
bottom: "$4",
left: "50%",
transform: "translateX(-50%)"
},
"bottom-end": {
bottom: "$4",
right: "$4"
}
}
},
defaultVariants: {
placement: "top-end"
}
});
const notificationStyles = css({
position: "relative",
display: "flex",
alignItems: "center",
width: "100%",
maxWidth: "$md",
borderRadius: "$sm",
border: "1px solid $colors$neutral5",
boxShadow: "$lg",
backgroundColor: "$loContrast",
padding: "$3",
fontSize: "$sm",
lineHeight: "$5",
variants: {
status: {
success: {},
info: {},
warning: {},
danger: {}
}
}
});
const notificationLoaderStyles = css({
animation: `1s linear infinite ${spin}`
});
const notificationIconStyles = css({
flexShrink: 0,
variants: {
status: {
success: { color: "$success9" },
info: { color: "$info9" },
warning: { color: "$warning9" },
danger: { color: "$danger9" }
}
}
});
const notificationTitleStyles = css({
fontWeight: "$medium"
});
const notificationDescriptionStyles = css({
display: "inline-block",
color: "$neutral11"
});
const popoverTransitionName = {
scale: "hope-popover-scale-transition"
};
const popoverTransitionStyles = globalCss({
[`.${popoverTransitionName.scale}-enter, .${popoverTransitionName.scale}-exit-to`]: {
opacity: 0,
transform: "scale(0.95)"
},
[`.${popoverTransitionName.scale}-enter-to, .${popoverTransitionName.scale}-exit`]: {
opacity: 1,
transform: "scale(1)"
},
[`.${popoverTransitionName.scale}-enter-active`]: {
transitionProperty: "opacity, transform",
transitionDuration: "300ms",
transitionTimingFunction: "ease"
},
[`.${popoverTransitionName.scale}-exit-active`]: {
transitionProperty: "opacity, transform",
transitionDuration: "200ms",
transitionTimingFunction: "ease-in-out"
}
});
const popoverContentStyles = css({
zIndex: "$popover",
position: "absolute",
display: "flex",
flexDirection: "column",
justifyContent: "center",
width: "100%",
maxWidth: "$xs",
outline: "none",
boxShadow: "$md",
border: "1px solid $colors$neutral7",
borderRadius: "$sm",
backgroundColor: "$loContrast",
color: "inherit",
"&:focus": {
outline: "none"
}
});
const popoverHeaderStyles = css({
display: "flex",
alignItems: "center",
flex: 0,
borderColor: "inherit",
borderBottomWidth: "1px",
px: "$3",
py: "$2",
fontSize: "$base",
fontWeight: "$medium"
});
const popoverBodyStyles = css({
flex: 1,
px: "$3",
py: "$2"
});
const popoverFooterStyles = css({
display: "flex",
alignItems: "center",
borderColor: "inherit",
borderTopWidth: "1px",
px: "$3",
py: "$2"
});
const popoverCloseButtonStyles = css({
position: "absolute",
top: "$2",
insetInlineEnd: "$2"
});
const popoverArrowStyles = css({
zIndex: "$popover",
position: "absolute",
boxSize: "8px",
borderWidth: "1px",
borderStyle: "solid",
borderColor: "inherit",
backgroundColor: "inherit",
transform: "rotate(45deg)",
variants: {
popoverPlacement: {
left: {
borderLeft: 0,
borderBottom: 0
},
top: {
borderLeft: 0,
borderTop: 0
},
right: {
borderTop: 0,
borderRight: 0
},
bottom: {
borderRight: 0,
borderBottom: 0
}
}
}
});
function createInputSizeVariant(config2) {
return {
minHeight: config2.minHeight,
fontSize: config2.fontSize,
lineHeight: config2.lineHeight
};
}
const inputSizes = {
xs: createInputSizeVariant({ fontSize: "$xs", lineHeight: "$4", minHeight: "$6" }),
sm: createInputSizeVariant({ fontSize: "$sm", lineHeight: "$5", minHeight: "$8" }),
md: createInputSizeVariant({ fontSize: "$base", lineHeight: "$6", minHeight: "$10" }),
lg: createInputSizeVariant({ fontSize: "$lg", lineHeight: "$7", minHeight: "$12" })
};
const commonOutlineAndFilledStyles = {
"&:disabled": {
opacity: 0.4,
cursor: "not-allowed"
},
"&:focus": {
boxShadow: "0 0 0 3px $colors$primary5",
borderColor: "$primary8"
},
"&[aria-invalid=true]": {
borderColor: "$danger8"
},
"&[aria-invalid=true]:focus": {
boxShadow: "0 0 0 3px $colors$danger5"
}
};
const baseInputResetStyles = css({
appearance: "none",
position: "relative",
width: "100%",
minWidth: 0,
outline: "none",
borderRadius: "$sm",
backgroundColor: "transparent",
padding: 0,
color: "$neutral12",
fontSize: "$base",
lineHeight: "$base",
transition: "color 250ms, border-color 250ms, background-color 250ms, box-shadow 250ms",
"&[readonly]": {
boxShadow: "none !important",
userSelect: "all",
cursor: "default"
},
"&::placeholder": {
color: "$neutral9",
opacity: 1
},
variants: {
variant: {
outline: __spreadValues({
border: "1px solid $neutral7",
backgroundColor: "transparent",
"&:hover": {
borderColor: "$neutral8"
}
}, commonOutlineAndFilledStyles),
filled: __spreadValues({
border: "1px solid transparent",
backgroundColor: "$neutral3",
"&:hover, &:focus": {
backgroundColor: "$neutral4"
}
}, commonOutlineAndFilledStyles),
unstyled: {
border: "1px solid transparent",
backgroundColor: "transparent"
}
},
size: __spreadValues({}, inputSizes)
}
});
function createVariantAndSizeCompoundVariant(config2) {
return [
{
variant: config2.variant,
size: config2.size,
css: { px: config2.paddingX }
},
{
withLeftElement: true,
variant: config2.variant,
size: config2.size,
css: { paddingInlineStart: config2.paddingWithElement }
},
{
withRightElement: true,
variant: config2.variant,
size: config2.size,
css: { paddingInlineEnd: config2.paddingWithElement }
}
];
}
const inputStyles = css(baseInputResetStyles, {
variants: {
withLeftElement: {
true: {}
},
withRightElement: {
true: {}
},
withLeftAddon: {
true: {
borderLeftRadius: 0
}
},
withRightAddon: {
true: {
borderRightRadius: 0
}
}
},
compoundVariants: [
...createVariantAndSizeCompoundVariant({
variant: "outline",
size: "xs",
paddingX: "$2",
paddingWithElement: "$6"
}),
...createVariantAndSizeCompoundVariant({
variant: "outline",
size: "sm",
paddingX: "$2_5",
paddingWithElement: "$8"
}),
...createVariantAndSizeCompoundVariant({
variant: "outline",
size: "md",
paddingX: "$3",
paddingWithElement: "$10"
}),
...createVariantAndSizeCompoundVariant({
variant: "outline",
size: "lg",
paddingX: "$4",
paddingWithElement: "$12"
}),
...createVariantAndSizeCompoundVariant({
variant: "filled",
size: "xs",
paddingX: "$2",
paddingWithElement: "$6"
}),
...createVariantAndSizeCompoundVariant({
variant: "filled",
size: "sm",
paddingX: "$2_5",
paddingWithElement: "$8"
}),
...createVariantAndSizeCompoundVariant({
variant: "filled",
size: "md",
paddingX: "$3",
paddingWithElement: "$10"
}),
...createVariantAndSizeCompoundVariant({
variant: "filled",
size: "lg",
paddingX: "$4",
paddingWithElement: "$12"
}),
...createVariantAndSizeCompoundVariant({
variant: "unstyled",
size: "xs",
paddingX: 0,
paddingWithElement: "$6"
}),
...createVariantAndSizeCompoundVariant({
variant: "unstyled",
size: "sm",
paddingX: 0,
paddingWithElement: "$8"
}),
...createVariantAndSizeCompoundVariant({
variant: "unstyled",
size: "md",
paddingX: 0,
paddingWithElement: "$10"
}),
...createVariantAndSizeCompoundVariant({
variant: "unstyled",
size: "lg",
paddingX: 0,
paddingWithElement: "$12"
})
]
});
const inputGroupStyles = css({
position: "relative",
display: "flex",
width: "100%"
});
const inputElementStyles = css({
position: "absolute",
top: "0",
zIndex: 2,
display: "flex",
alignItems: "center",
justifyContent: "center",
variants: {
placement: {
left: { insetInlineStart: "0" },
right: { insetInlineEnd: "0" }
},
size: {
xs: __spreadProps(__spreadValues({}, inputSizes.xs), {
width: inputSizes.xs.minHeight
}),
sm: __spreadProps(__spreadValues({}, inputSizes.sm), {
width: inputSizes.sm.minHeight
}),
md: __spreadProps(__spreadValues({}, inputSizes.md), {
width: inputSizes.md.minHeight
}),
lg: __spreadProps(__spreadValues({}, inputSizes.lg), {
width: inputSizes.lg.minHeight
})
}
}
});
function createInputAddonVariantAndSizeCompoundVariant(config2) {
return {
variant: config2.variant,
size: config2.size,
css: { px: config2.paddingX }
};
}
const inputAddonStyles = css({
display: "flex",
alignItems: "center",
flex: "0 0 auto",
width: "auto",
whiteSpace: "nowrap",
variants: {
placement: {
left: {
marginEnd: "-1px"
},
right: {
marginStart: "-1px"
}
},
variant: {
outline: {
borderRadius: "$sm",
border: "1px solid $neutral7",
backgroundColor: "$neutral3",
color: "$neutral12"
},
filled: {
borderRadius: "$sm",
border: "1px solid transparent",
backgroundColor: "$neutral3",
color: "$neutral12"
},
unstyled: {
border: "1px solid transparent",
backgroundColor: "transparent"
}
},
size: __spreadValues({}, inputSizes)
},
compoundVariants: [
{
variant: "outline",
placement: "left",
css: {
borderRightRadius: 0,
borderInlineEndColor: "transparent"
}
},
{
variant: "outline",
placement: "right",
css: {
borderLeftRadius: 0,
borderInlineStartColor: "transparent"
}
},
{
variant: "filled",
placement: "left",
css: {
borderStartEndRadius: 0,
borderEndEndRadius: 0,
borderInlineEndColor: "transparent"
}
},
{
variant: "filled",
placement: "right",
css: {
borderStartStartRadius: 0,
borderEndStartRadius: 0,
borderInlineStartColor: "transparent"
}
},
createInputAddonVariantAndSizeCompoundVariant({
variant: "outline",
size: "xs",
paddingX: "$2"
}),
createInputAddonVariantAndSizeCompoundVariant({
variant: "outline",
size: "sm",
paddingX: "$2_5"
}),
createInputAddonVariantAndSizeCompoundVariant({
variant: "outline",
size: "md",
paddingX: "$3"
}),
createInputAddonVariantAndSizeCompoundVariant({
variant: "outline",
size: "lg",
paddingX: "$4"
}),
createInputAddonVariantAndSizeCompoundVariant({
variant: "filled",
size: "xs",
paddingX: "$2"
}),
createInputAddonVariantAndSizeCompoundVariant({
variant: "filled",
size: "sm",
paddingX: "$2_