50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Te07,'use client'; import {mergeProps} from 'react-aria/mergeProps'; import {useFocusRing} from 'react-aria/useFocusRing'; import {useNumberFormatter} from 'react-aria/useNumberFormatter'; import { useSlider, useSliderThumb, type AriaSliderProps, type AriaSliderThumbOptions } from 'react-aria/useSlider'; import {useSliderState, type SliderState} from 'react-stately/useSliderState'; import {VisuallyHidden} from 'react-aria/VisuallyHidden'; import {useRef} from 'react'; import type {CSSProperties} from 'react'; import './Slider.css'; import './Form.css'; export interface SliderProps extends AriaSliderProps { /** Label for the slider. */ label?: string; /** Aria labels for each thumb. */ thumbLabels?: string[]; /** * The offset from which to start the fill. * * @default 0 */ fillOffset?: number; /** Formatting options for the value label. */ formatOptions?: Intl.NumberFormatOptions; /** Styles for the root element. */ style?: CSSProperties; } export function Slider({ label, thumbLabels, fillOffset, formatOptions, style, ...props }: SliderProps) { let trackRef = useRef(null); let numberFormatter = useNumberFormatter(formatOptions); let state = useSliderState({...props, numberFormatter}); /*- begin highlight -*/ let {groupProps, trackProps, labelProps, outputProps} = useSlider(props, state, trackRef); /*- end highlight -*/ // The fill spans from fillOffset (or the min) to the last thumb. let start = state.values.length > 1 ? state.getThumbPercent(0) * 100 : state.getValuePercent(fillOffset ?? state.getThumbMinValue(0)) * 100; let end = state.getThumbPercent(state.values.length - 1) * 100; let startPercent = Math.min(start, end); let sizePercent = Math.max(0, Math.max(start, end) - startPercent); return (

{label && ( {label} )} {state.getFormattedValue()}

{state.values.map((_, i) => ( ))}

); } function Thumb({ state, trackRef, index, ...props }: Omit & {state: SliderState}) { let inputRef = useRef(null); let {thumbProps, inputProps, isDragging} = useSliderThumb( {...props, index, trackRef, inputRef}, state ); let {focusProps, isFocusVisible} = useFocusRing(); return (

); } 53:Tdb2,@import './theme.css'; @import './utilities.css'; .react-aria-Slider { display: grid; grid-template-areas: 'label output' 'track track'; grid-template-columns: 1fr auto; max-width: min(calc(100% - 12px), 300px); font: var(--font-size) system-ui; color: var(--text-color); .react-aria-Label { grid-area: label; } .react-aria-SliderOutput { grid-area: output; font-size: var(--font-size); } .react-aria-SliderTrack { grid-area: track; position: relative; .track { display: block; position: absolute; border-radius: 9999px; } .react-aria-SliderFill { border-radius: inherit; background: var(--tint-900); @media (forced-colors: active) { background: Highlight; } } } .react-aria-SliderThumb { width: calc(var(--spacing) * 5.5); height: calc(var(--spacing) * 5.5); border-radius: 50%; forced-color-adjust: none; --indicator-color: var(--tint); --indicator-drop-shadow: 0 1px 4px rgb(0 0 0 / 0.3); &[data-dragging] { background: var(--button-background-pressed); } } &[data-orientation='horizontal'] { flex-direction: column; width: 100%; .react-aria-SliderTrack { height: var(--spacing-5); width: 100%; .track { height: var(--spacing-2); width: 100%; top: 50%; transform: translateY(-50%); } .react-aria-SliderFill { box-shadow: inset 0 -1px 0 lch(from var(--tint) 42% c h), inset 0 0 0 1px var(--tint-900), inset 0 2px 0 rgb(255 255 255 / 0.3), inset 0 3px 2px rgb(255 255 255 / 0.2); @media (prefers-color-scheme: dark) { box-shadow: inset 0 -1px 0 lch(from var(--tint) 42% c h), inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 0 0 1px var(--tint-900), inset 0 3px 2px rgb(255 255 255 / 0.2); } @media (forced-colors: active) { box-shadow: none; } } } .react-aria-SliderThumb { top: 50%; } } &[data-orientation='vertical'] { height: 150px; display: block; margin: var(--spacing-3) 0; .react-aria-Label, .react-aria-SliderOutput { display: none; } .react-aria-SliderTrack { width: var(--spacing-5); height: 100%; .track { width: var(--spacing-2); height: 100%; left: 50%; transform: translateX(-50%); } .react-aria-SliderFill { box-shadow: inset -1px 0 0 lch(from var(--tint) 42% c h), inset 0 0 0 1px var(--tint-900), inset 2px 0 0 rgb(255 255 255 / 0.3), inset 3px 0 2px rgb(255 255 255 / 0.2); @media (prefers-color-scheme: dark) { box-shadow: inset -1px 0 0 lch(from var(--tint) 42% c h), inset 1px 0 0 rgb(255 255 255 / 0.6), inset 0 0 0 1px var(--tint-900), inset 3px 0 2px rgb(255 255 255 / 0.2); } @media (forced-colors: active) { box-shadow: none; } } } .react-aria-SliderThumb { left: 50%; } } &[data-disabled] { .react-aria-SliderTrack { .track { background: var(--field-background); --border-color: var(--border-color-disabled); } .react-aria-SliderFill { background: var(--border-color-disabled); box-shadow: none; } } } } 54:T2028,/* colors */ :root { /* Change this variable to set the theme color for all components. */ /* You can use the below presets, or choose a custom color. */ --tint: var(--indigo); /* theme colors */ /* lightness channel is only used as a multiplier for chroma (see below) */ --gray: oklch(0.5 0 0); --red: oklch(0.6 0.181447 27.0726); --orange: oklch(0.7 0.150492 54); --yellow: oklch(0.8 0.128516 73.8032); --turquoise: oklch(0.5 0.081146 205.114); --cyan: oklch(0.4 0.142107 243.926); --green: oklch(0.5 0.121276 155.372); --blue: oklch(0.5 0.22049 266.315); --indigo: oklch(1 0.25049 284.23); --purple: oklch(0.7 0.223324 302); --pink: oklch(0.6 0.177717 347.813); /** tint color scale */ --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h); --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h); --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h); --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h); --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h); --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h); --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h); --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h); --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h); --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h); --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h); --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h); --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h); --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h); --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h); --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h); /* gray scale */ --gray-100: oklch(from var(--gray) var(--lightness-100) c h); --gray-200: oklch(from var(--gray) var(--lightness-200) c h); --gray-300: oklch(from var(--gray) var(--lightness-300) c h); --gray-400: oklch(from var(--gray) var(--lightness-400) c h); --gray-500: oklch(from var(--gray) var(--lightness-500) c h); --gray-600: oklch(from var(--gray) var(--lightness-600) c h); --gray-700: oklch(from var(--gray) var(--lightness-700) c h); --gray-800: oklch(from var(--gray) var(--lightness-800) c h); --gray-900: oklch(from var(--gray) var(--lightness-900) c h); --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h); --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h); --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h); --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h); --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h); --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h); --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h); } /* light mode colors */ :root { --background-color: #f8f8f8; --gray-50: #ffffff; --lightness-100: 98.1187%; --lightness-200: 95.2045%; --lightness-300: 91.1434%; --lightness-400: 85.1751%; --lightness-500: 79.1773%; --lightness-600: 72.3297%; --lightness-700: 67.0121%; --lightness-800: 62.3039%; --lightness-900: 57.9699%; --lightness-1000: 51.9076%; --lightness-1100: 46.9058%; --lightness-1200: 41.0821%; --lightness-1300: 35.3616%; --lightness-1400: 29.6725%; --lightness-1500: 24.5366%; --lightness-1600: 16.6959%; /* lower chroma at low lightness levels */ --chroma-100: calc(l * c * 0.5); --chroma-200: calc(l * c * 0.6); --chroma-300: calc(l * c * 0.7); --chroma-400: calc(l * c * 0.8); --chroma-500: calc(l * c * 0.9); --chroma-600: c; --chroma-700: c; --chroma-800: c; --chroma-900: c; --chroma-1000: c; --chroma-1100: c; --chroma-1200: c; --chroma-1300: c; --chroma-1400: c; --chroma-1500: c; --chroma-1600: c; --highlight-hover: rgb(0 0 0 / 0.07); --highlight-pressed: rgb(0 0 0 / 0.15); --overlay-background: var(--gray-50); --overlay-border: rgb(0 0 0 / 0.06); --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.12); } /* dark mode colors */ @media (prefers-color-scheme: dark) { :root { --background-color: #1b1b1b; --gray-50: oklch(22% 0 0); --lightness-100: 29.6725%; --lightness-200: 35.3616%; --lightness-300: 41.0821%; --lightness-400: 46.9058%; --lightness-500: 51.9076%; --lightness-600: 57.9699%; --lightness-700: 56.1347%; --lightness-800: 59.2866%; --lightness-900: 62.3039%; --lightness-1000: 67.0121%; --lightness-1100: 72.3297%; --lightness-1200: 79.1773%; --lightness-1300: 85.1751%; --lightness-1400: 91.1434%; --lightness-1500: 95.2045%; --lightness-1600: 100%; --highlight-hover: rgb(255 255 255 / 0.1); --highlight-pressed: rgb(255 255 255 / 0.2); --overlay-background: var(--gray-100); --overlay-border: rgb(255 255 255 / 0.2); --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.5); } } /* Semantic colors */ :root { --focus-ring-color: var(--tint-1000); --text-color: var(--gray-1200); --text-color-hover: var(--gray-1300); --text-color-disabled: var(--gray-600); --text-color-placeholder: var(--gray-1000); --link-color: var(--tint-1200); --link-color-secondary: var(--gray-1200); --link-color-pressed: var(--tint-1300); --border-color: var(--gray-400); --border-color-hover: var(--gray-500); --border-color-disabled: var(--gray-300); --field-text-color: var(--gray-1400); --button-background: var(--tint-100); --button-background-pressed: var(--tint-200); /* these colors are the same between light and dark themes * to ensure contrast with the foreground color */ --highlight-background: oklch(from var(--tint) 55% c h); --highlight-background-pressed: oklch(from var(--tint) 50% c h); --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h); --highlight-foreground: white; --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%); --invalid-color: oklch(from var(--red) var(--lightness-1000) c h); --field-background: var(--gray-50); } /* Windows high contrast mode overrides */ @media (forced-colors: active) { :root { --background-color: Canvas; --focus-ring-color: Highlight; --text-color: ButtonText; --text-color-hover: ButtonText; --text-color-disabled: GrayText; --text-color-placeholder: ButtonText; --link-color: LinkText; --link-color-secondary: LinkText; --link-color-pressed: LinkText; --border-color: ButtonBorder; --border-color-hover: ButtonBorder; --border-color-pressed: ButtonBorder; --border-color-disabled: GrayText; --field-background: Field; --field-text-color: FieldText; --overlay-background: Canvas; --overlay-border: ButtonBorder; --button-background: ButtonFace; --button-background-pressed: ButtonFace; --highlight-background: Highlight; --highlight-background-pressed: Highlight; --highlight-background-invalid: LinkText; --highlight-foreground: HighlightText; --invalid-color: LinkText; } } /* typography and spacing scale */ :root { --font-size: 0.875rem; /* 14px */ --font-size-sm: 0.75rem; /* 12px */ --font-size-lg: 1rem; /* 16px */ --radius: 8px; --radius-sm: 6px; --radius-lg: 10px; --radius-xl: 16px; --spacing: 0.25rem; /* 4px */ --spacing-1: var(--spacing); --spacing-2: calc(2 * var(--spacing)); --spacing-3: calc(3 * var(--spacing)); --spacing-4: calc(4 * var(--spacing)); --spacing-5: calc(5 * var(--spacing)); --spacing-6: calc(6 * var(--spacing)); --spacing-7: calc(7 * var(--spacing)); --spacing-8: calc(8 * var(--spacing)); --spacing-9: calc(9 * var(--spacing)); --spacing-10: calc(10 * var(--spacing)); } /* Scale up hit targets on high resolution mobile devices. */ @media (min-resolution: 200dpi) { :root { --spacing: calc(0.25rem * 1.25); --font-size: 1.0625rem; /* 17px */ --font-size-sm: 0.9375rem; /* 15px */ --font-size-lg: 1.25rem; /* 20px */ } } 55:T283a,@layer utilities { /* utility that creates a button-like element, which can be optionally selected */ .button-base { --button-color: var(--tint); --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h); --button-gradient: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h); --button-border: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h); --button-highlight: rgb(255 255 255 / 0.8); --button-shadow: oklch(from var(--button-color) var(--lightness-400) var(--chroma-400) h); --button-border-size: 1px; --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h); --button-gradient-size: 8px; background: var(--button-background); color: var(--button-text); box-shadow: inset 0 -1px 0 var(--button-shadow), /* bottom shadow */ inset 0 0 0 var(--button-border-size) var(--button-border), /* border */ inset 0px calc(var(--button-border-size) + 1px) 0px var(--button-highlight), /* top specular highlight */ inset 0px calc(-1 * var(--button-gradient-size)) var(--button-gradient-size) -2px var(--button-gradient); /* inner gradient */ outline: none; transition-property: background, color, scale, box-shadow; transition-duration: 200ms; will-change: scale; forced-color-adjust: none; -webkit-tap-highlight-color: transparent; @media (prefers-color-scheme: dark) { --button-shadow: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h); --button-highlight: rgb(255 255 255 / 0.15); box-shadow: inset 0 var(--button-border-size) 0 var(--button-highlight), /* top specular highlight */ inset 0 calc(-1 * var(--button-border-size)) 0 var(--button-shadow), /* bottom shadow */ inset 0 0 0 var(--button-border-size) var(--button-border), /* border */ inset 0 var(--button-gradient-size) var(--button-gradient-size) -2px var(--button-gradient); /* inner gradient */ } &:where([data-pressed]) { --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h); } &:where([data-focus-visible]) { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } &:where([data-variant='secondary']) { --button-color: var(--gray); } &:where([data-variant='quiet']) { --button-background: none; --button-text: var(--text-color); box-shadow: 0 0 0 1px transparent; &:where([data-hovered], [data-pressed]) { --button-background: var(--tint-200); --button-text: var(--tint-1400); box-shadow: 0 0 0 1px var(--tint-200); } } &:where([data-selected]) { --button-background: oklch(from var(--button-color) 55% c h); --button-border: oklch(from var(--button-color) 50% c h); --button-gradient: var(--button-border); --button-highlight: rgb(255 255 255 / 0.2); --button-shadow: oklch(from var(--button-color) 30% c h); --button-text: var(--highlight-foreground); box-shadow: inset 0 -1px 0 var(--button-shadow), /* bottom shadow */ inset 0 0 0 1px var(--button-border), /* border */ inset 0 2px 0 var(--button-highlight), /* top specular highlight */ inset 0 calc(-1 * var(--button-gradient-size)) var(--button-gradient-size) var(--button-gradient); /* inner gradient */ @media (prefers-color-scheme: dark) { --button-highlight: rgb(255 255 255 / 0.4); --button-gradient: rgb(255 255 255 / 0.2); --button-shadow: var(--button-border); box-shadow: inset 0 1px 0 var(--button-highlight), /* top specular highlight */ inset 0 var(--button-gradient-size) var(--button-gradient-size) var(--button-gradient), /* inner gradient */ inset 0 0 0 1px var(--button-border); /* border */ } &:where([data-pressed]) { --button-background: oklch(from var(--button-color) 50% c h); } } &:where([data-disabled]) { box-shadow: none; --button-background: var(--border-color-disabled); --button-text: var(--text-color-disabled); &:where([data-variant='quiet']) { --button-background: none; } } @media (forced-colors: active) { --button-background: ButtonFace; --button-text: ButtonText; --button-border: ButtonBorder; box-shadow: inset 0 0 0 var(--button-border-size) var(--button-border); &:where([data-variant='quiet']) { --button-border: transparent; &:where([data-hovered], [data-pressed]) { --button-border: ButtonBorder; } } &:where([data-selected]) { --button-background: Highlight; --button-text: HighlightText; --button-border: Highlight; } &:where([data-disabled]) { --button-background: ButtonFace; --button-text: GrayText; --button-border: GrayText; &:where([data-variant='quiet']) { --button-border: transparent; } } } } /* utility that creates a small indicator, such as a checkbox, radio, switch, or slider thumb */ .indicator { --indicator-color: var(--gray); --indicator-background: oklch( from var(--indicator-color) var(--lightness-100) var(--chroma-100) h ); --indicator-border: oklch(from var(--indicator-color) var(--lightness-800) var(--chroma-800) h); --indicator-drop-shadow: 0 0; background: var(--indicator-background); box-shadow: inset 0 0 0 1px var(--indicator-border), /* border */ inset 0 2px 0 white, /* top specular highlight */ inset 0 -4px 2px oklch(from var(--indicator-color) 30% c h / 0.08), /* inner gradient */ var(--indicator-drop-shadow); /* optional drop shadow */ will-change: scale; @media (prefers-color-scheme: dark) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), /* top specular highlight */ inset 0 4px 2px rgb(255 255 255 / 0.1), /* inner shadow */ inset 0 0 0 1px var(--indicator-border), /* border */ var(--indicator-drop-shadow); /* optional drop shadow */ } @media (forced-colors: active) { --indicator-background: ButtonFace; --indicator-border: ButtonBorder; box-shadow: inset 0 0 0 1px var(--indicator-border); } &[data-pressed], [data-pressed] & { scale: 0.9; } [data-selected] > &, [data-indeterminate] > & { --indicator-color: var(--highlight-background); --indicator-background: var(--indicator-color); --indicator-highlight: rgb(255 255 255 / 0.3); --indicator-shadow: oklch(from var(--indicator-color) 45% c h); --indicator-border: var(--indicator-background); box-shadow: inset 0 -1px 0 var(--indicator-shadow), /* bottom shadow */ inset 0 0 0 1px var(--indicator-border), /* border */ inset 0 2px 0 var(--indicator-highlight), /* top specular highlight */ var(--indicator-drop-shadow); /* optional drop shadow */ @media (prefers-color-scheme: dark) { --indicator-highlight: rgb(255 255 255 / 0.5); --indicator-gradient: rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 var(--indicator-highlight), /* top specular highlight */ inset 0 4px 2px var(--indicator-gradient), /* inner gradient */ inset 0 0 0 1px var(--indicator-border), /* border */ var(--indicator-drop-shadow); /* optional drop shadow */ } @media (forced-colors: active) { box-shadow: none; } } &[data-invalid], [data-invalid] > & { --indicator-color: var(--invalid-color); @media (forced-colors: active) { --indicator-border: var(--invalid-color); } } &[data-focus-visible], [data-focus-visible] > & { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } &[data-disabled], [data-disabled] > & { background: var(--field-background); box-shadow: inset 0 0 0 1px var(--border-color-disabled); } } /* utility that creates an inset effect, used for form fields, slider/progress tracks, etc. */ .inset { --inset-background: var(--field-background); --inset-border: var(--border-color); --inset-border-size: 1px; --inset-shadow-offset: 2px; --inset-shadow-size: 4px; background: var(--inset-background); box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border), /* border */ inset 0 var(--inset-shadow-offset) var(--inset-shadow-size) rgb(0 0 0 / 0.15), /* inner shadow */ 0 1px 0 var(--gray-50); /* bottom specular highlight */ transition: box-shadow 200ms; forced-color-adjust: none; @media (prefers-color-scheme: dark) { --inset-border: var(--gray-200); --border-color-hover: var(--gray-300); --inset-highlight: var(--gray-400); --inset-shadow-size: 6px; box-shadow: inset 0 calc(-1 * var(--inset-border-size)) 0 var(--inset-highlight), /* bottom specular highlight */ inset 0 0 0 var(--inset-border-size) var(--inset-border), /* border */ inset 0 1px var(--inset-shadow-size) rgb(0 0 0); /* inner shadow */ } &:where([data-hovered], [data-pressed]) { --inset-border: var(--border-color-hover); } @media (forced-colors: active) { --inset-border: ButtonBorder; box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border); } &:where([data-invalid]) { --inset-border: var(--invalid-color); --inset-highlight: var(--inset-border); } &:where([data-disabled]) { box-shadow: inset 0 0 0 1px var(--border-color-disabled); } &.track { --inset-shadow-offset: 1px; --inset-shadow-size: 3px; @media (prefers-color-scheme: light) { --inset-background: var(--gray-300); --inset-border: var(--gray-500); --inset-border-size: 0.5px; } @media (forced-colors: active) { --inset-background: Field; --inset-border: ButtonBorder; --inset-border-size: 1px; } } } } 56:T7dc,@import './theme.css'; .react-aria-Form { display: flex; flex-direction: column; gap: var(--spacing-6); > .react-aria-Button { align-self: start; } } .react-aria-Form [role='alert'] { border: 2px solid var(--invalid-color); background: var(--overlay-background); border-radius: 6px; padding: 12px; max-width: 250px; outline: none; &:focus { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } h3 { margin-top: 0; } p { margin-bottom: 0; } } .react-aria-Label { display: block; font: var(--font-size) system-ui; color: var(--text-color); margin-bottom: var(--spacing-2); font-weight: 500; cursor: default; } .react-aria-FieldError { display: block; font: var(--font-size-sm) system-ui; color: var(--invalid-color); margin-top: var(--spacing-1); contain: inline-size; } .field-description { display: block; font: var(--font-size-sm) system-ui; margin-top: var(--spacing-1); contain: inline-size; [data-invalid] > & { display: none; } } .field-Button { background: var(--tint-200); color: var(--tint-1400); forced-color-adjust: none; border-radius: var(--radius-sm); border: none; margin-left: calc(-1 * var(--spacing-8) + 4px); height: calc(100% - 8px); aspect-ratio: 1/1; padding: 0; display: flex; align-items: center; justify-content: center; transition-property: scale, background; transition-duration: 200ms; -webkit-tap-highlight-color: transparent; svg { width: var(--spacing-4); height: var(--spacing-4); } &:where([data-hovered], [data-pressed]) { background: var(--tint-300); color: var(--tint-1200); } @media (forced-colors: active) { background: Highlight; color: HighlightText; } &[data-pressed] { scale: 0.9; } &[data-focus-visible] { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } &[data-disabled] { background: none; color: var(--text-color-disabled); } } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-aria",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-aria","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-aria"}]]}]}],["$","li","react-stately",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-stately","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-stately"}]]}]}],["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-aria","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/Slider.tsx","content":"$52","type":"registry:ui"},{"path":"components/ui/Slider.css","content":"$53","type":"registry:component"},{"path":"components/ui/theme.css","content":"$54","type":"registry:component"},{"path":"components/ui/utilities.css","content":"$55","type":"registry:component"},{"path":"components/ui/Form.css","content":"$56","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]