UNPKG

@plone/components

Version:

ReactJS components for Plone

plone.org

plone/volto

1 lines • 104 kB
1
{"version":3,"mappings":"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","sources":["src/styles/basic/main.css","src/styles/basic/ColorField.css","src/styles/basic/CheckboxGroup.css","src/styles/basic/ProgressBar.css","src/styles/basic/Checkbox.css","src/styles/basic/DateField.css","src/styles/basic/Slider.css","src/styles/basic/theme.css","src/styles/basic/Menu.css","src/styles/basic/ColorSwatch.css","src/styles/basic/Switch.css","src/styles/basic/ColorSwatchPicker.css","src/styles/basic/RangeCalendar.css","src/styles/basic/Spinner.css","src/styles/basic/TextField.css","src/styles/basic/ComboBox.css","src/styles/basic/SearchField.css","src/styles/basic/Toolbar.css","src/styles/basic/ColorSlider.css","src/styles/basic/Disclosure.css","src/styles/basic/../quanta/colors.css","src/styles/basic/ColorArea.css","src/styles/basic/Modal.css","src/styles/basic/Calendar.css","src/styles/basic/Form.css","src/styles/basic/ColorPicker.css","src/styles/basic/Dialog.css","src/styles/basic/Table.css","src/styles/basic/Meter.css","src/styles/basic/NumberField.css","src/styles/basic/icons.css","src/styles/basic/RadioGroup.css","src/styles/basic/TimeField.css","src/styles/basic/DatePicker.css","src/styles/basic/BlockToolbar.css","src/styles/basic/Breadcrumbs.css","src/styles/basic/Popover.css","src/styles/basic/DateRangePicker.css","src/styles/basic/Tabs.css","src/styles/basic/Toast.css","src/styles/basic/Link.css","src/styles/basic/Button.css","src/styles/basic/ListBox.css","src/styles/basic/Tree.css","src/styles/basic/Select.css","src/styles/basic/ToggleButton.css","src/styles/basic/TagGroup.css","src/styles/basic/Label.css","src/styles/basic/GridList.css","src/styles/basic/Tooltip.css","src/styles/basic/Container.css"],"sourcesContent":["@import './theme.css';\n\n@import './icons.css';\n\n@import './Link.css';\n@import './Button.css';\n@import './ToggleButton.css';\n@import './Label.css';\n@import './Checkbox.css';\n\n@import './TextField.css';\n@import './Form.css';\n@import './CheckboxGroup.css';\n\n@import './ColorSlider.css';\n@import './ColorArea.css';\n@import './ColorField.css';\n@import './ColorSwatch.css';\n@import './ColorSwatchPicker.css';\n@import './Disclosure.css';\n@import './NumberField.css';\n@import './RadioGroup.css';\n@import './Switch.css';\n@import './Slider.css';\n@import './Calendar.css';\n@import './DateField.css';\n@import './RangeCalendar.css';\n@import './Meter.css';\n@import './ProgressBar.css';\n@import './Spinner.css';\n@import './SearchField.css';\n@import './TimeField.css';\n\n@import './ListBox.css';\n@import './GridList.css';\n\n@import './Modal.css';\n@import './Dialog.css';\n@import './Popover.css';\n@import './Tabs.css';\n@import './TagGroup.css';\n@import './Tooltip.css';\n\n@import './Menu.css';\n@import './Toolbar.css';\n@import './Table.css';\n@import './DatePicker.css';\n@import './DateRangePicker.css';\n@import './Select.css';\n@import './ComboBox.css';\n@import './ColorPicker.css';\n\n@import './Breadcrumbs.css';\n@import './BlockToolbar.css';\n@import './Tree.css';\n@import './Toast.css';\n\n@import './Container.css';\n","/* depends on:\n@import './Button.css';\n@import './Form.css';\n*/\n@layer plone-components.base {\n .react-aria-ColorField {\n display: flex;\n flex-direction: column;\n color: var(--text-color);\n\n .react-aria-Input {\n width: 100%;\n max-width: 12ch;\n box-sizing: border-box;\n padding: 0.286rem;\n border: 1px solid var(--border-color);\n border-radius: 6px;\n margin: 0;\n background: var(--field-background);\n color: var(--field-text-color);\n font-size: 1.143rem;\n\n &[data-focused] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: -1px;\n }\n }\n\n &[data-invalid] {\n .react-aria-Input {\n border-color: var(--color-invalid);\n }\n }\n\n .react-aria-FieldError {\n color: var(--color-invalid);\n font-size: 12px;\n }\n\n [slot='description'] {\n font-size: 12px;\n }\n\n .react-aria-Input {\n &[data-disabled] {\n border-color: var(--border-color-disabled);\n color: var(--text-color-disabled);\n }\n }\n }\n}\n","/* depends on:\n@import './Checkbox.css';\n@import './Form.css';\n@import './Button.css';\n*/\n@layer plone-components.base {\n .react-aria-CheckboxGroup {\n display: flex;\n flex-direction: column;\n color: var(--text-color);\n gap: 0.571rem;\n\n .react-aria-FieldError {\n color: var(--color-invalid);\n font-size: 12px;\n }\n\n [slot='description'] {\n font-size: 12px;\n }\n }\n}\n","@layer plone-components.base {\n .react-aria-ProgressBar {\n display: grid;\n width: 250px;\n color: var(--text-color);\n gap: 4px;\n grid-template-areas:\n 'label value'\n 'bar bar';\n grid-template-columns: 1fr auto;\n\n .value {\n grid-area: value;\n }\n\n .bar {\n overflow: hidden;\n height: 10px;\n border-radius: 5px;\n box-shadow: inset 0px 0px 0px 1px var(--border-color);\n forced-color-adjust: none;\n grid-area: bar;\n will-change: transform;\n }\n\n .fill {\n height: 100%;\n background: var(--highlight-background);\n }\n\n &:not([aria-valuenow]) {\n .fill {\n width: 120px;\n border-radius: inherit;\n animation: indeterminate 1.5s infinite ease-in-out;\n will-change: transform;\n }\n }\n }\n\n @keyframes indeterminate {\n from {\n transform: translateX(-100%);\n }\n\n to {\n transform: translateX(250px);\n }\n }\n}\n","@layer plone-components.base {\n .react-aria-Checkbox {\n --selected-color: var(--highlight-background);\n --selected-color-pressed: var(--highlight-background-pressed);\n --checkmark-color: var(--highlight-foreground);\n\n display: flex;\n align-items: center;\n color: var(--text-color);\n font-size: 1.143rem;\n forced-color-adjust: none;\n gap: 0.571rem;\n\n .checkbox {\n display: flex;\n width: 1.143rem;\n height: 1.143rem;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--border-color);\n border-radius: 4px;\n transition: all 200ms;\n }\n\n svg {\n width: 1rem;\n height: 1rem;\n fill: none;\n stroke: var(--checkmark-color);\n stroke-dasharray: 22px;\n stroke-dashoffset: 66;\n stroke-width: 3px;\n transition: all 200ms;\n }\n\n &[data-pressed] .checkbox {\n border-color: var(--border-color-pressed);\n }\n\n &[data-focus-visible] .checkbox {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &[data-selected],\n &[data-indeterminate] {\n .checkbox {\n border-color: var(--selected-color);\n background: var(--selected-color);\n }\n\n &[data-pressed] .checkbox {\n border-color: var(--selected-color-pressed);\n background: var(--selected-color-pressed);\n }\n\n svg {\n stroke-dashoffset: 44;\n }\n }\n\n &[data-indeterminate] {\n & svg {\n fill: var(--checkmark-color);\n stroke: none;\n }\n }\n\n &[data-invalid] {\n color: var(--color-invalid);\n\n .checkbox {\n --checkmark-color: var(--gray-50);\n border-color: var(--color-invalid);\n }\n\n &[data-pressed] .checkbox {\n border-color: var(--color-pressed-invalid);\n }\n\n &[data-selected],\n &[data-indeterminate] {\n .checkbox {\n background: var(--color-invalid);\n }\n\n &[data-pressed] .checkbox {\n background: var(--color-pressed-invalid);\n }\n }\n }\n\n &[data-disabled] {\n color: var(--text-color-disabled);\n\n .checkbox {\n border-color: var(--border-color-disabled);\n }\n\n & + [slot='description'] {\n color: var(--text-color-disabled);\n }\n }\n\n &[data-required]::after {\n content: url('data:image/svg+xml; utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path fill=\"hsl(7, 90%, 59%)\" d=\"M12 18a6 6 0 100-12 6 6 0 000 12z\"/></svg>');\n }\n }\n\n .react-aria-CheckboxField {\n [slot='description'] {\n /* For now, we want the error in under the description */\n display: block;\n padding-top: 3px;\n font-size: 12px;\n }\n\n [slot='errorMessage'] {\n color: var(--color-invalid);\n font-size: 12px;\n }\n }\n}\n","/* depends on:\n@import './Form.css';\n@import './Button.css';\n*/\n@layer plone-components.base {\n .react-aria-DateField {\n color: var(--text-color);\n }\n\n .react-aria-DateInput {\n display: flex;\n width: fit-content;\n min-width: 150px;\n padding: 4px;\n border: 1px solid var(--border-color);\n border-radius: 6px;\n background: var(--field-background);\n forced-color-adjust: none;\n white-space: nowrap;\n\n &[data-focus-within] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: -1px;\n }\n }\n\n .react-aria-DateSegment {\n padding: 0 2px;\n color: var(--text-color);\n font-variant-numeric: tabular-nums;\n text-align: end;\n\n &[data-type='literal'] {\n padding: 0;\n }\n\n &[data-placeholder] {\n color: var(--text-color-placeholder);\n font-style: italic;\n }\n\n &:focus {\n border-radius: 4px;\n background: var(--highlight-background);\n caret-color: transparent;\n color: var(--highlight-foreground);\n outline: none;\n }\n\n &[data-invalid] {\n color: var(--color-invalid);\n\n &:focus {\n background: var(--highlight-background-invalid);\n color: var(--highlight-foreground);\n }\n }\n }\n\n .react-aria-DateField {\n .react-aria-FieldError {\n color: var(--color-invalid);\n font-size: 12px;\n }\n\n [slot='description'] {\n font-size: 12px;\n }\n }\n}\n","/* depends on:\n@import './NumberField.css';\n*/\n@layer plone-components.base {\n .react-aria-Slider {\n display: grid;\n max-width: 300px;\n color: var(--text-color);\n grid-template-areas:\n 'label output'\n 'track track';\n grid-template-columns: 1fr auto;\n\n .react-aria-Label {\n grid-area: label;\n }\n\n .react-aria-SliderOutput {\n grid-area: output;\n }\n\n .react-aria-SliderTrack {\n position: relative;\n grid-area: track;\n\n /* track line */\n &:before {\n position: absolute;\n display: block;\n background: var(--border-color);\n content: '';\n }\n }\n\n .react-aria-SliderThumb {\n width: 1.429rem;\n height: 1.429rem;\n border: 2px solid var(--background-color);\n border-radius: 50%;\n background: var(--highlight-background);\n forced-color-adjust: none;\n\n &[data-dragging] {\n background: var(--highlight-background-pressed);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n }\n }\n\n &[data-orientation='horizontal'] {\n width: 300px;\n flex-direction: column;\n\n .react-aria-SliderTrack {\n width: 100%;\n height: 30px;\n\n &:before {\n top: 50%;\n width: 100%;\n height: 3px;\n transform: translateY(-50%);\n }\n }\n\n .react-aria-SliderThumb {\n top: 50%;\n }\n }\n\n &[data-orientation='vertical'] {\n display: block;\n height: 150px;\n\n .react-aria-Label,\n .react-aria-SliderOutput {\n display: none;\n }\n\n .react-aria-SliderTrack {\n width: 30px;\n height: 100%;\n\n &:before {\n left: 50%;\n width: 3px;\n height: 100%;\n transform: translateX(-50%);\n }\n }\n\n .react-aria-SliderThumb {\n left: 50%;\n }\n }\n\n &[data-disabled] {\n .react-aria-SliderTrack:before {\n background: var(--border-color-disabled);\n }\n\n .react-aria-SliderThumb {\n background: var(--border-color-disabled);\n }\n }\n }\n}\n","@import '../quanta/colors.css';\n\n/* color themes for dark and light modes, generated with Leonardo.\n * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */\n:root {\n --background-color: #fff;\n --gray-50: #ffffff;\n --gray-100: #d0d0d0;\n --gray-200: #afafaf;\n --gray-300: #8f8f8f;\n --gray-400: #717171;\n --gray-500: #555555;\n --gray-600: #393939;\n --purple-100: #d5c9fa;\n --purple-200: #b8a3f6;\n --purple-300: #997cf2;\n --purple-400: #7a54ef;\n --purple-500: #582ddc;\n --purple-600: #3c1e95;\n --red-100: #f7c4ba;\n --red-200: #f29887;\n --red-300: #eb664d;\n --red-400: #de2300;\n --red-500: #a81b00;\n --red-600: #731200;\n --highlight-hover: rgb(0 0 0 / 0.07);\n --highlight-pressed: rgb(0 0 0 / 0.15);\n}\n\n/* ShadCN slate theme */\n:root {\n --basic-50: #fff; /* was #f8fafc */\n --basic-100: #f1f5f9;\n --basic-200: #e2e8f0;\n --basic-300: #cbd5e1;\n --basic-400: #94a3b8;\n --basic-500: #64748b;\n --basic-600: #475569;\n --basic-700: #334155;\n --basic-800: #1e293b;\n --basic-900: #0f172a;\n --basic-950: #020617;\n}\n\n/* Semantic colors */\n:root {\n /* Text */\n --text-color: var(--basic-950); /* --gray-600 */\n --text-color-base: var(--basic-600); /* --gray-500 */\n --text-color-hover: var(--basic-950); /* --gray-600 */\n --text-color-disabled: var(--basic-500); /* --gray-200 */\n --text-color-placeholder: var(--gray-400);\n /* Link */\n --link-color: var(--quanta-sapphire);\n --link-color-secondary: var(--quanta-royal);\n --link-color-pressed: var(--quanta-cobalt);\n /* Border */\n --border-color: var(--basic-400); /* --gray-300 */\n --border-color-hover: var(--basic-500); /* --gray-400 */\n --border-color-pressed: var(--basic-500); /* --gray-400 */\n --border-color-disabled: var(--basic-300); /* --gray-100 */\n /* Input */\n --focus-ring-color: var(--basic-400); /* --purple-400 */\n --field-background: var(--basic-50); /* --purple-400 */\n --field-text-color: var(--basic-950); /* --purple-600 */\n /* Button */\n --button-background: var(--basic-50); /* --gray-50 */\n --button-background-pressed: var(--background-color); /* --background-color */\n\n --overlay-background: var(--basic-50); /* --gray-50 */\n /* these colors are the same between light and dark themes\n * to ensure contrast with the foreground color */\n --highlight-background: var(--basic-600); /* #6f46ed purple-300 */\n --highlight-background-pressed: var(--basic-800); /* #522acd purple-200 */\n --highlight-background-invalid: var(\n --quanta-candy\n ); /* red-300 from dark theme */\n --highlight-background-hover: var(--basic-400); /* #6f46ed purple-300 */\n --highlight-foreground: var(--basic-50); /* white */\n --highlight-foreground-pressed: var(--basic-200); /* #ddd */\n --highlight-overlay: var(--basic-400); /* rgb(from #6f46ed r g b / 15%) */\n --color-invalid: var(--red-400); /* Renamed */\n --color-pressed-invalid: var(--red-500); /* Renamed */\n}\n\n/* Layout properties */\n:root {\n --layout-container-width: 1440px;\n --default-container-width: 940px;\n --narrow-container-width: 620px;\n}\n\n/* Windows high contrast mode overrides */\n@media (forced-colors: active) {\n :root {\n --background-color: Canvas;\n --focus-ring-color: Highlight;\n --text-color: ButtonText;\n --text-color-base: ButtonText;\n --text-color-hover: ButtonText;\n --text-color-disabled: GrayText;\n --text-color-placeholder: ButtonText;\n --link-color: LinkText;\n --link-color-secondary: LinkText;\n --link-color-pressed: LinkText;\n --border-color: ButtonBorder;\n --border-color-hover: ButtonBorder;\n --border-color-pressed: ButtonBorder;\n --border-color-disabled: GrayText;\n --field-background: Field;\n --field-text-color: FieldText;\n --overlay-background: Canvas;\n --button-background: ButtonFace;\n --button-background-pressed: ButtonFace;\n --highlight-background: Highlight;\n --highlight-background-pressed: Highlight;\n --highlight-background-invalid: LinkText;\n --highlight-foreground: HighlightText;\n --highlight-foreground-pressed: HighlightText;\n --color-invalid: LinkText;\n --color-pressed-invalid: LinkText;\n }\n}\n","/* depends on:\n@import './Button.css';\n@import './Popover.css';\n*/\n@layer plone-components.base {\n .react-aria-Menu {\n overflow: auto;\n min-width: 150px;\n max-height: inherit;\n box-sizing: border-box;\n box-sizing: border-box;\n padding: 2px;\n outline: none;\n }\n\n .react-aria-MenuItem {\n position: relative;\n display: grid;\n align-items: center;\n justify-content: start;\n padding: 0.286rem 0.571rem;\n border-radius: 6px;\n margin: 2px;\n color: var(--text-color);\n column-gap: 20px;\n cursor: default;\n font-size: 1.072rem;\n forced-color-adjust: none;\n grid-template-areas: 'icon label kbd' 'icon desc kbd';\n outline: none;\n\n &[data-focused] {\n background: var(--highlight-background);\n color: var(--highlight-foreground);\n }\n }\n\n .react-aria-MenuItem {\n &[data-selection-mode] {\n padding-left: 24px;\n\n &::before {\n position: absolute;\n left: 4px;\n font-weight: 600;\n }\n\n &[data-selection-mode='multiple'][data-selected]::before {\n position: absolute;\n left: 4px;\n alt: ' ';\n content: '✓';\n content: '✓' / '';\n font-weight: 600;\n }\n\n &[data-selection-mode='single'][data-selected]::before {\n content: '●';\n content: '●' / '';\n transform: scale(0.7);\n }\n }\n }\n\n .react-aria-MenuItem[href] {\n cursor: pointer;\n text-decoration: none;\n }\n\n .react-aria-Menu {\n .react-aria-Section:not(:first-child) {\n margin-top: 12px;\n }\n\n .react-aria-Header {\n padding: 0 0.714rem;\n font-size: 1.143rem;\n font-weight: bold;\n }\n\n .react-aria-Separator {\n height: 1px;\n margin: 2px 4px;\n background: var(--border-color);\n }\n }\n\n .react-aria-MenuItem {\n [slot='label'] {\n /* font-weight: bold; */\n grid-area: label;\n }\n\n [slot='description'] {\n font-size: small;\n grid-area: desc;\n }\n\n kbd {\n font-family: monospace;\n grid-area: kbd;\n text-align: end;\n }\n\n &[data-disabled] {\n color: var(--text-color-disabled);\n }\n\n &[data-has-submenu]::after {\n position: absolute;\n right: 0.571rem;\n content: '›';\n content: '›' / '';\n font-size: 1rem;\n line-height: 1;\n }\n }\n}\n","/* depends on:\n@import './ColorSlider.css';\n*/\n@layer plone-components.base {\n .react-aria-ColorSwatch {\n width: 32px;\n height: 32px;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n }\n}\n","@layer plone-components.base {\n .react-aria-Switch {\n display: flex;\n align-items: center;\n color: var(--text-color);\n font-size: 1.143rem;\n forced-color-adjust: none;\n gap: 0.571rem;\n\n .indicator {\n width: 2rem;\n height: 1.143rem;\n border: 2px solid var(--border-color);\n border-radius: 1.143rem;\n background: var(--background-color);\n transition: all 200ms;\n\n &:before {\n display: block;\n width: 0.857rem;\n height: 0.857rem;\n border-radius: 16px;\n margin: 0.143rem;\n background: var(--highlight-background);\n content: '';\n transition: all 200ms;\n }\n }\n\n &[data-pressed] .indicator {\n border-color: var(--border-color-pressed);\n\n &:before {\n background: var(--highlight-background-pressed);\n }\n }\n\n &[data-selected] {\n .indicator {\n border-color: var(--highlight-background);\n background: var(--highlight-background);\n\n &:before {\n background: var(--field-background);\n transform: translateX(100%);\n }\n }\n\n &[data-pressed] {\n .indicator {\n border-color: var(--highlight-background-pressed);\n background: var(--highlight-background-pressed);\n }\n }\n }\n\n &[data-focus-visible] .indicator {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &[data-disabled] {\n color: var(--text-color-disabled);\n\n .indicator {\n border-color: var(--border-color-disabled);\n\n &:before {\n background: var(--border-color-disabled);\n }\n }\n }\n }\n}\n","/* depends on:\n@import './ColorSwatch.css';\n@import './ColorField.css';\n*/\n@layer plone-components.base {\n .react-aria-ColorSwatchPicker {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .react-aria-ColorSwatchPickerItem {\n position: relative;\n width: fit-content;\n border-radius: 4px;\n forced-color-adjust: none;\n outline: none;\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &[data-selected]::after {\n position: absolute;\n border: 2px solid black;\n border-radius: inherit;\n content: '';\n inset: 0;\n outline: 2px solid white;\n outline-offset: -4px;\n }\n\n &[data-disabled] {\n opacity: 0.2;\n }\n }\n\n .react-aria-ColorSwatchPicker {\n &[data-layout='stack'] {\n flex-direction: column;\n }\n }\n}\n","/* depends on:\n@import './Button.css';\n*/\n@layer plone-components.base {\n .react-aria-RangeCalendar {\n width: fit-content;\n max-width: 100%;\n color: var(--text-color);\n\n & header {\n display: flex;\n align-items: center;\n margin: 0 4px 0.5rem 4px;\n\n .react-aria-Heading {\n flex: 1;\n margin: 0;\n font-size: 1.375rem;\n text-align: center;\n }\n }\n\n .react-aria-Button {\n width: 2rem;\n height: 2rem;\n padding: 0;\n }\n\n & table {\n border-collapse: collapse;\n\n & td {\n padding: 2px 0;\n }\n }\n\n .react-aria-CalendarCell {\n width: 2.286rem;\n border-radius: 6px;\n cursor: default;\n forced-color-adjust: none;\n line-height: 2.286rem;\n outline: none;\n text-align: center;\n\n &[data-outside-month] {\n display: none;\n }\n\n &[data-pressed] {\n background: var(--gray-100);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--highlight-background);\n outline-offset: -2px;\n }\n\n &[data-selected] {\n border-radius: 0;\n background: var(--highlight-background);\n color: var(--highlight-foreground);\n\n &[data-focus-visible] {\n outline-color: var(--highlight-foreground);\n outline-offset: -3px;\n }\n }\n\n &[data-selection-start] {\n border-end-start-radius: 6px;\n border-start-start-radius: 6px;\n }\n\n &[data-selection-end] {\n border-end-end-radius: 6px;\n border-start-end-radius: 6px;\n }\n }\n\n .react-aria-CalendarCell {\n &[data-disabled] {\n color: var(--text-color-disabled);\n }\n }\n\n .react-aria-CalendarCell {\n &[data-unavailable] {\n color: var(--color-invalid);\n text-decoration: line-through;\n }\n\n &[data-invalid] {\n background: var(--color-invalid);\n color: var(--highlight-foreground);\n }\n }\n\n [slot='errorMessage'] {\n color: var(--color-invalid);\n font-size: 12px;\n }\n }\n}\n","@layer plone-components.base {\n .react-aria-Spinner {\n --spinner-size: 1.5rem;\n --spinner-track-color: color-mix(\n in srgb,\n var(--highlight-background) 20%,\n transparent\n );\n\n display: inline-flex;\n align-items: center;\n color: var(--highlight-background);\n gap: 0.5rem;\n vertical-align: middle;\n\n &[data-size='xs'] {\n --spinner-size: 1rem;\n }\n\n &[data-size='sm'] {\n --spinner-size: 1.5rem;\n }\n\n &[data-size='lg'] {\n --spinner-size: 2rem;\n }\n\n .spinner-svg {\n width: var(--spinner-size);\n height: var(--spinner-size);\n animation: spinner-rotate 0.8s linear infinite;\n will-change: transform;\n }\n\n .spinner-track {\n stroke: var(--spinner-track-color);\n stroke-width: 3;\n }\n\n .spinner-indicator {\n stroke: currentColor;\n stroke-dasharray: 42 57;\n stroke-linecap: round;\n stroke-width: 3;\n }\n\n .spinner-label {\n color: var(--text-color);\n font-size: 0.875rem;\n line-height: 1;\n }\n\n .sr-only {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n margin: -1px;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n }\n }\n\n @keyframes spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .react-aria-Spinner {\n .spinner-svg {\n animation: none;\n }\n }\n }\n}\n","/* depends on:\n@import './Button.css';\n@import './Label.css';\n*/\n\n@layer plone-components.base {\n .react-aria-TextField {\n display: flex;\n width: fit-content;\n flex-direction: column;\n color: var(--text-color);\n\n .react-aria-Input,\n .react-aria-TextArea {\n padding: 0.286rem;\n border: 1px solid var(--border-color);\n border-radius: 6px;\n margin: 0;\n background: var(--field-background);\n color: var(--field-text-color);\n font-size: 1.143rem;\n\n &[data-focused] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: -1px;\n }\n }\n\n .react-aria-Input,\n .react-aria-TextArea {\n &[data-invalid] {\n border-color: var(--color-invalid);\n }\n }\n\n .react-aria-FieldError {\n color: var(--color-invalid);\n font-size: 12px;\n }\n\n [slot='description'] {\n font-size: 12px;\n }\n\n .react-aria-Input,\n .react-aria-TextArea {\n &[data-disabled] {\n border-color: var(--border-color-disabled);\n color: var(--text-color-disabled);\n }\n }\n }\n}\n","/* depends on:\n@import './Checkbox.css';\n@import './ListBox.css';\n@import './Popover.css';\n@import './Form.css';\n@import './Button.css';\n@import './theme.css';\n*/\n@layer plone-components.base {\n .react-aria-ComboBox {\n color: var(--text-color);\n\n .react-aria-Input {\n padding: 0.286rem 2rem 0.286rem 0.571rem;\n border: 1px solid var(--border-color);\n border-radius: 6px;\n margin: 0;\n background: var(--field-background);\n color: var(--field-text-color);\n font-size: 1.072rem;\n vertical-align: middle;\n\n &[data-focused] {\n outline: none;\n outline: 2px solid var(--focus-ring-color);\n outline-offset: -1px;\n }\n }\n\n .react-aria-Button {\n width: 1.429rem;\n height: 1.429rem;\n padding: 0;\n border: none;\n border-radius: 4px;\n margin-left: -1.714rem;\n background: var(--highlight-background);\n color: var(--highlight-foreground);\n cursor: default;\n font-size: 0.857rem;\n forced-color-adjust: none;\n\n &[data-pressed] {\n background: var(--highlight-background);\n box-shadow: none;\n }\n }\n }\n\n .react-aria-Popover[data-trigger='ComboBox'] {\n width: var(--trigger-width);\n\n .react-aria-ListBox {\n display: block;\n width: unset;\n min-height: unset;\n max-height: inherit;\n border: none;\n\n .react-aria-Header {\n padding-left: 1.571rem;\n }\n }\n\n .react-aria-ListBoxItem {\n padding: 0.286rem 0.571rem 0.286rem 1.571rem;\n\n &[data-focus-visible] {\n outline: none;\n }\n\n &[data-selected] {\n background: unset;\n color: var(--text-color);\n font-weight: 600;\n\n &::before {\n position: absolute;\n top: 4px;\n left: 4px;\n alt: ' ';\n content: '✓';\n content: '✓' / '';\n }\n }\n\n &[data-focused],\n &[data-pressed] {\n background: var(--highlight-background);\n color: var(--highlight-foreground);\n }\n }\n }\n\n .react-aria-ListBoxItem[href] {\n cursor: pointer;\n text-decoration: none;\n }\n\n .react-aria-ComboBox {\n .react-aria-Input {\n &[data-disabled] {\n border-color: var(--border-color-disabled);\n }\n }\n\n .react-aria-Button {\n &[data-disabled] {\n background: var(--border-color-disabled);\n }\n }\n\n .react-aria-Input {\n &[data-invalid]:not([data-focused]) {\n border-color: var(--color-invalid);\n }\n }\n\n .react-aria-FieldError {\n color: var(--color-invalid);\n font-size: 12px;\n }\n\n [slot='description'] {\n font-size: 12px;\n }\n }\n}\n","/* depends on:\n@import './Button.css';\n@import './Form.css';\n*/\n@layer plone-components.base {\n .react-aria-SearchField {\n display: grid;\n width: fit-content;\n align-items: center;\n color: var(--text-color);\n grid-template-areas:\n 'label label'\n 'input button'\n 'help help';\n grid-template-columns: 1fr auto;\n\n .react-aria-Input {\n padding: 0.286rem 1.714rem 0.286rem 0.286rem;\n border: 1px solid var(--border-color);\n border-radius: 6px;\n margin: 0;\n background: var(--field-background);\n color: var(--field-text-color);\n font-size: 1.143rem;\n grid-area: input;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &[data-focused] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: -1px;\n }\n }\n\n .react-aria-Button {\n width: 1.143rem;\n height: 1.143rem;\n padding: 0;\n border: none;\n border-radius: 1.143rem;\n margin-left: -1.429rem;\n background: var(--gray-500);\n color: var(--gray-50);\n font-size: 0.857rem;\n grid-area: button;\n line-height: 0.857rem;\n text-align: center;\n vertical-align: middle;\n\n &[data-pressed] {\n background: var(--gray-600);\n }\n }\n\n &[data-empty] button {\n display: none;\n }\n\n .react-aria-Input {\n &[data-invalid] {\n border-color: var(--color-invalid);\n }\n }\n\n .react-aria-FieldError {\n color: var(--color-invalid);\n font-size: 12px;\n grid-area: help;\n }\n\n [slot='description'] {\n font-size: 12px;\n grid-area: help;\n }\n\n .react-aria-Input {\n &[data-disabled] {\n border-color: var(--border-color-disabled);\n color: var(--text-color-disabled);\n }\n }\n }\n}\n","/* depends on:\n@import './Checkbox.css';\n@import './Button.css';\n@import './ToggleButton.css';\n@import './Menu.css';\n*/\n@layer plone-components.base {\n .react-aria-Toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n\n &[data-orientation='horizontal'] {\n flex-direction: row;\n }\n\n .react-aria-Group {\n display: contents;\n }\n }\n\n .react-aria-Separator {\n align-self: stretch;\n background-color: var(--border-color);\n\n &[aria-orientation='vertical'] {\n width: 1px;\n margin: 0px 10px;\n }\n }\n\n .react-aria-Toolbar {\n width: fit-content;\n\n &[data-orientation='vertical'] {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n .react-aria-Separator {\n &:not([aria-orientation='vertical']) {\n width: 100%;\n height: 1px;\n border: none;\n margin: 10px 0;\n }\n }\n}\n","@layer plone-components.base {\n .react-aria-ColorSlider {\n display: grid;\n max-width: 300px;\n gap: 4px;\n grid-template-areas:\n 'label output'\n 'track track';\n grid-template-columns: 1fr auto;\n\n .react-aria-Label {\n grid-area: label;\n }\n\n .react-aria-SliderOutput {\n grid-area: output;\n }\n\n .react-aria-SliderTrack {\n border-radius: 4px;\n grid-area: track;\n }\n\n &[data-orientation='horizontal'] {\n .react-aria-SliderTrack {\n height: 28px;\n }\n\n .react-aria-ColorThumb {\n top: 50%;\n }\n }\n }\n\n .react-aria-ColorThumb {\n width: 20px;\n height: 20px;\n box-sizing: border-box;\n border: 2px solid white;\n border-radius: 50%;\n box-shadow:\n 0 0 0 1px black,\n inset 0 0 0 1px black;\n\n &[data-focus-visible] {\n width: 24px;\n height: 24px;\n }\n }\n\n .react-aria-ColorSlider {\n &[data-orientation='vertical'] {\n display: block;\n height: 150px;\n\n .react-aria-Label,\n .react-aria-SliderOutput {\n display: none;\n }\n\n .react-aria-SliderTrack {\n width: 28px;\n height: 100%;\n }\n\n .react-aria-ColorThumb {\n left: 50%;\n }\n }\n\n &[data-disabled] {\n .react-aria-SliderTrack {\n background: gray !important;\n }\n\n .react-aria-ColorThumb {\n background: gray !important;\n opacity: 0.5;\n }\n }\n }\n}\n","/* depends on:\n@import './Button.css';\n*/\n@layer plone-components.base {\n .react-aria-Disclosure {\n .react-aria-Button[slot='trigger'] {\n display: flex;\n align-items: center;\n border: none;\n background: none;\n box-shadow: none;\n font-size: 16px;\n font-weight: bold;\n gap: 8px;\n\n svg {\n width: 12px;\n height: 12px;\n fill: none;\n rotate: 0deg;\n stroke: currentColor;\n stroke-width: 3px;\n transition: rotate 200ms;\n }\n }\n\n &[data-expanded] .react-aria-Button[slot='trigger'] svg {\n rotate: 90deg;\n }\n }\n\n .react-aria-DisclosurePanel {\n margin-left: 32px;\n }\n}\n",":root {\n --quanta-air: #fff;\n --quanta-space: #000;\n --quanta-denim: #021322;\n\n --quanta-snow: #f3f5f7;\n --quanta-smoke: #e4e8ec;\n --quanta-silver: #c3cdd5;\n --quanta-dolphin: #8296a6;\n --quanta-pigeon: #617789;\n --quanta-iron: #4a5b68;\n\n --quanta-arctic: #e2f1fd;\n --quanta-sky: #c5e3fc;\n --quanta-azure: #7cc0f8;\n --quanta-cobalt: #2597f4;\n --quanta-sapphire: #0b78d0;\n --quanta-royal: #085696;\n\n --quanta-ballet: #fee9e7;\n --quanta-flamingo: #fcd0ca;\n --quanta-poppy: #f9a094;\n --quanta-rose: #f54e38;\n --quanta-candy: #d0220b;\n --quanta-wine: #a91c09;\n\n --quanta-cream: #fcf3cf;\n --quanta-banana: #faeaad;\n --quanta-lemmon: #f6d355;\n --quanta-gold: #b48f09;\n --quanta-dijon: #917308;\n --quanta-bronze: #6b5506;\n\n --quanta-daiquiri: #e2f7de;\n --quanta-mint: #c5efbe;\n --quanta-celery: #8bde7c;\n --quanta-neon: #3da72a;\n --quanta-emerald: #318722;\n --quanta-turtle: #256619;\n\n --quanta-aqua: #d6f5f2;\n --quanta-spa: #baeee9;\n --quanta-tiffany: #74dcd4;\n --quanta-turquoise: #29a399;\n --quanta-peacock: #207e77;\n --quanta-puya: #175e58;\n}\n","/* depends on:\n@import './ColorSlider.css';\n*/\n\n@layer plone-components.base {\n .react-aria-ColorArea {\n width: 192px;\n height: 192px;\n flex-shrink: 0;\n border-radius: 4px;\n }\n\n .react-aria-ColorThumb {\n width: 20px;\n height: 20px;\n box-sizing: border-box;\n border: 2px solid white;\n border-radius: 50%;\n box-shadow:\n 0 0 0 1px black,\n inset 0 0 0 1px black;\n\n &[data-focus-visible] {\n width: 24px;\n height: 24px;\n }\n }\n\n .react-aria-ColorArea {\n &[data-disabled] {\n background: gray !important;\n\n .react-aria-ColorThumb {\n background: gray !important;\n }\n }\n }\n}\n","/* depends on:\n@import './Button.css';\n@import './TextField.css';\n*/\n@layer plone-components.base {\n .react-aria-ModalOverlay {\n position: fixed;\n z-index: 100;\n top: 0;\n left: 0;\n display: flex;\n width: 100vw;\n height: var(--visual-viewport-height);\n align-items: center;\n justify-content: center;\n background: rgba(0 0 0 / 0.5);\n\n &[data-entering] {\n animation: modal-fade 200ms;\n }\n\n &[data-exiting] {\n animation: modal-fade 150ms reverse ease-in;\n }\n }\n\n .react-aria-Modal {\n max-width: 300px;\n border: 1px solid var(--border-color);\n border-radius: 6px;\n background: var(--overlay-background);\n box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);\n color: var(--text-color);\n outline: none;\n\n &[data-entering] {\n animation: modal-zoom 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n .react-aria-TextField {\n margin-bottom: 8px;\n }\n }\n\n @keyframes modal-fade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n }\n\n @keyframes modal-zoom {\n from {\n transform: scale(0.8);\n }\n\n to {\n transform: scale(1);\n }\n }\n\n @keyframes mymodal-blur {\n from {\n backdrop-filter: blur(0);\n background: rgba(45 0 0 / 0);\n }\n\n to {\n backdrop-filter: blur(10px);\n background: rgba(45 0 0 / 0.3);\n }\n }\n\n @keyframes mymodal-slide {\n from {\n transform: translateX(100%);\n }\n\n to {\n transform: translateX(0);\n }\n }\n}\n","/* depends on:\n@import './Button.css';\n*/\n@layer plone-components.base {\n .react-aria-Calendar {\n width: fit-content;\n max-width: 100%;\n color: var(--text-color);\n\n header {\n display: flex;\n align-items: center;\n margin: 0 4px 0.5rem 4px;\n\n .react-aria-Heading {\n flex: 1;\n margin: 0;\n font-size: 1.375rem;\n text-align: center;\n }\n }\n\n .react-aria-Button {\n width: 2rem;\n height: 2rem;\n padding: 0;\n }\n\n .react-aria-CalendarCell {\n width: 2rem;\n border-radius: 6px;\n margin: 1px;\n cursor: default;\n forced-color-adjust: none;\n line-height: 2rem;\n outline: none;\n text-align: center;\n\n &[data-outside-month] {\n display: none;\n }\n\n &[data-pressed] {\n background: var(--gray-100);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &[data-selected] {\n background: var(--highlight-background);\n color: var(--highlight-foreground);\n }\n }\n\n .react-aria-CalendarCell {\n &[data-disabled] {\n color: var(--text-color-disabled);\n }\n }\n\n .react-aria-CalendarCell {\n &[data-unavailable] {\n color: var(--color-invalid);\n text-decoration: line-through;\n }\n }\n\n .react-aria-CalendarCell {\n &[data-invalid] {\n background: var(--color-invalid);\n color: var(--highlight-foreground);\n }\n }\n\n [slot='errorMessage'] {\n color: var(--color-invalid);\n font-size: 12px;\n }\n }\n}\n","/* depends on:\n@import './TextField.css';\n@import './Button.css';\n@import './theme.css';\n*/\n\n@layer plone-components.base {\n .react-aria-Form {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .react-aria-Form [role='alert'] {\n max-width: 250px;\n padding: 12px;\n border: 2px solid var(--color-invalid);\n border-radius: 6px;\n background: var(--overlay-background);\n outline: none;\n\n &:focus-visible {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n h3 {\n margin-top: 0;\n }\n\n p {\n margin-bottom: 0;\n }\n }\n}\n","/* depends on:\n@import './Button.css';\n@import './ColorArea.css';\n@import './ColorSlider.css';\n@import './ColorSwatch.css';\n@import './ColorSwatchPicker.css';\n@import './ColorField.css';\n@import './Popover.css';\n@import './Dialog.css';\n@import './ListBox.css';\n@import './Select.css';\n*/\n@layer plone-components.base {\n .color-picker {\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n border-radius: 4px;\n appearance: none;\n background: none;\n color: var(--text-color);\n font-size: 1rem;\n gap: 8px;\n outline: none;\n vertical-align: middle;\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n }\n\n .color-picker-dialog {\n display: flex;\n overflow: auto;\n min-width: 192px;\n max-height: inherit;\n box-sizing: border-box;\n flex-direction: column;\n padding: 15px;\n gap: 8px;\n outline: none;\n }\n}\n","/* depends on:\n@import './Button.css';\n@import './TextField.css';\n@import './Modal.css';\n*/\n@layer plone-components.base {\n .react-aria-Dialog {\n padding: 30px;\n outline: none;\n\n .react-aria-Heading[slot='title'] {\n margin-top: 0;\n line-height: 1em;\n }\n }\n}\n","/* depends on:\n@import './Button.css';\n@import './ToggleButton.css';\n@import './Checkbox.css';\n@import './Popover.css';\n@import './Menu.css';\n*/\n@layer plone-components.base {\n :root {\n --plone-table-border: 0 none;\n --plone-table-border-radius: 0;\n --plone-table-padding: 0.286rem;\n --plone-table-width: initial;\n --plone-table-max-width: 100%;\n --plone-table-background: var(--overlay-background);\n\n --plone-table-header-color: var(--text-color);\n --plone-table-header-font-size: 1rem;\n --plone-table-header-border-bottom: 1px solid var(--border-color);\n\n --plone-table-row-color: var(--text-color);\n --plone-table-row-font-size: 1rem;\n --plone-table-row-pressed: var(--highlight-pressed);\n --plone-table-row-border-radius: 0;\n\n --plone-table-column-font-weight