@plone/components
Version:
ReactJS components for Plone
1 lines • 95.2 kB
Source Map (JSON)
{"version":3,"mappings":"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","sources":["src/styles/basic/main.css","src/styles/basic/theme.css","src/styles/basic/DatePicker.css","src/styles/basic/Label.css","src/styles/basic/Form.css","src/styles/basic/Checkbox.css","src/styles/basic/ColorField.css","src/styles/basic/TagGroup.css","src/styles/basic/CheckboxGroup.css","src/styles/basic/ColorSlider.css","src/styles/basic/ColorPicker.css","src/styles/basic/../quanta/colors.css","src/styles/basic/Modal.css","src/styles/basic/Button.css","src/styles/basic/TextField.css","src/styles/basic/Dialog.css","src/styles/basic/Popover.css","src/styles/basic/NumberField.css","src/styles/basic/Table.css","src/styles/basic/ToggleButton.css","src/styles/basic/DateField.css","src/styles/basic/icons.css","src/styles/basic/ColorArea.css","src/styles/basic/ColorSwatch.css","src/styles/basic/Calendar.css","src/styles/basic/RadioGroup.css","src/styles/basic/Tabs.css","src/styles/basic/ColorSwatchPicker.css","src/styles/basic/DateRangePicker.css","src/styles/basic/Toolbar.css","src/styles/basic/Link.css","src/styles/basic/Switch.css","src/styles/basic/ComboBox.css","src/styles/basic/Menu.css","src/styles/basic/BlockToolbar.css","src/styles/basic/Tooltip.css","src/styles/basic/Breadcrumbs.css","src/styles/basic/ListBox.css","src/styles/basic/Disclosure.css","src/styles/basic/RangeCalendar.css","src/styles/basic/DisclosureGroup.css","src/styles/basic/Select.css","src/styles/basic/Slider.css","src/styles/basic/Meter.css","src/styles/basic/Container.css","src/styles/basic/GridList.css","src/styles/basic/TimeField.css","src/styles/basic/SearchField.css","src/styles/basic/ProgressBar.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@import './CheckboxGroup.css';\n@import './ColorArea.css';\n@import './ColorField.css';\n@import './ColorPicker.css';\n@import './ColorSlider.css';\n@import './ColorSwatch.css';\n@import './ColorSwatchPicker.css';\n@import './ComboBox.css';\n@import './Disclosure.css';\n@import './DisclosureGroup.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 './DatePicker.css';\n@import './DateRangePicker.css';\n@import './RangeCalendar.css';\n@import './Meter.css';\n@import './ProgressBar.css';\n@import './SearchField.css';\n@import './Select.css';\n@import './TimeField.css';\n@import './TextField.css';\n\n@import './Menu.css';\n@import './ListBox.css';\n@import './GridList.css';\n@import './Form.css';\n\n@import './Table.css';\n@import './Dialog.css';\n@import './Modal.css';\n@import './Popover.css';\n@import './Tabs.css';\n@import './TagGroup.css';\n@import './Toolbar.css';\n@import './Tooltip.css';\n\n@import './Breadcrumbs.css';\n@import './BlockToolbar.css';\n\n@import './Container.css';\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","@import './Button.css';\n@import './Popover.css';\n@import './Dialog.css';\n@import './DateField.css';\n@import './Calendar.css';\n@import './Form.css';\n@import './theme.css';\n\n@layer plone-components.base {\n .react-aria-DatePicker {\n color: var(--text-color);\n\n .react-aria-Group {\n display: flex;\n width: fit-content;\n align-items: center;\n }\n\n .react-aria-Button {\n width: 1.429rem;\n height: 1.429rem;\n box-sizing: content-box;\n padding: 0;\n border: 2px solid var(--field-background);\n border: none;\n border-radius: 4px;\n margin-left: -1.929rem;\n background: var(--highlight-background);\n color: var(--highlight-foreground);\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 &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n }\n\n .react-aria-DateInput {\n padding: 4px 2.5rem 4px 8px;\n }\n }\n\n .react-aria-Popover[data-trigger='DatePicker'] {\n max-width: unset;\n }\n\n .react-aria-DatePicker {\n &[data-invalid] {\n .react-aria-DateInput:after {\n flex: 1;\n alt: ' ';\n content: '🚫' / '';\n content: '🚫';\n text-align: end;\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","@import './theme.css';\n\n@layer plone-components.base {\n .react-aria-Label {\n /* TODO: Review since taken from default quanta */\n font-size: 0.9rem;\n font-weight: 500;\n letter-spacing: 0.012em;\n line-height: 1.714285714285;\n\n &::after {\n /* Marks after Label (Required, etc) */\n display: inline-block;\n margin-left: 3px;\n color: var(--basic-600);\n line-height: 0;\n vertical-align: middle;\n }\n }\n}\n","@import './TextField.css';\n@import './Button.css';\n@import './theme.css';\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","@import './theme.css';\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","@import './Button.css';\n@import './Form.css';\n@import './theme.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","@import './ToggleButton.css';\n@import './theme.css';\n\n@layer plone-components.base {\n .react-aria-TagGroup {\n display: flex;\n flex-direction: column;\n color: var(--text-color);\n font-size: small;\n gap: 2px;\n }\n\n .react-aria-TagList {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n }\n\n .react-aria-Tag {\n display: flex;\n align-items: center;\n padding: 2px 8px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n color: var(--text-color);\n cursor: default;\n font-size: 0.929rem;\n forced-color-adjust: none;\n outline: none;\n transition: border-color 200ms;\n\n &[data-hovered] {\n border-color: var(--border-color-hover);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &[data-selected] {\n border-color: var(--highlight-background);\n background: var(--highlight-background);\n color: var(--highlight-foreground);\n }\n\n [slot='remove'] {\n padding: 0;\n border: none;\n margin-left: 8px;\n background: none;\n color: var(--text-color-base);\n font-size: 0.95em;\n outline: none;\n transition: color 200ms;\n\n &[data-hovered] {\n color: var(--text-color-hover);\n }\n }\n\n &[data-selected] {\n [slot='remove'] {\n color: inherit;\n }\n }\n }\n\n .react-aria-Tag[data-href] {\n cursor: pointer;\n text-decoration: none;\n }\n\n .react-aria-TagList {\n .react-aria-Tag {\n &[data-disabled] {\n border-color: var(--border-color-disabled);\n color: var(--text-color-disabled);\n }\n }\n }\n\n .react-aria-TagGroup {\n [slot='description'] {\n font-size: 12px;\n }\n\n [slot='errorMessage'] {\n color: var(--color-invalid);\n font-size: 12px;\n }\n }\n}\n","@import './Checkbox.css';\n@import './Form.css';\n@import './Button.css';\n@import './theme.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-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","@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@import './theme.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",":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","@import './Button.css';\n@import './TextField.css';\n@import './theme.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","@import './theme.css';\n\n@layer plone-components.base {\n .react-aria-Button {\n padding: 8px 8px;\n border: 1px solid var(--border-color);\n border-radius: 6px;\n margin: 0;\n appearance: none;\n background: var(--button-background);\n color: var(--text-color);\n font-size: 1rem;\n outline: none;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n\n &[data-pressed] {\n border-color: var(--border-color-pressed);\n background: var(--button-background-pressed);\n box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: -1px;\n }\n\n &[data-disabled] {\n border-color: var(--border-color-disabled);\n color: var(--text-color-disabled);\n }\n\n .icon:not(:last-child) {\n margin-right: 6px;\n }\n\n &:has(.icon) {\n display: inline-flex;\n align-items: center;\n line-height: 0;\n }\n }\n}\n","@import './Button.css';\n@import './Label.css';\n@import './theme.css';\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","@import './Button.css';\n@import './TextField.css';\n@import './Modal.css';\n@import './theme.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","@import './Button.css';\n@import './Dialog.css';\n@import './Switch.css';\n@import './theme.css';\n\n@layer plone-components.base {\n .react-aria-Popover {\n --background-color: var(--overlay-background);\n max-width: 250px;\n box-sizing: border-box;\n\n border: 1px solid var(--border-color);\n border-radius: 6px;\n background: var(--background-color);\n box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);\n color: var(--text-color);\n outline: none;\n\n .react-aria-OverlayArrow svg {\n display: block;\n fill: var(--background-color);\n stroke: var(--border-color);\n stroke-width: 1px;\n }\n\n &[data-placement='top'] {\n --origin: translateY(8px);\n\n &:has(.react-aria-OverlayArrow) {\n margin-bottom: 6px;\n }\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-8px);\n\n &:has(.react-aria-OverlayArrow) {\n margin-top: 6px;\n }\n\n .react-aria-OverlayArrow svg {\n transform: rotate(180deg);\n }\n }\n\n &[data-placement='right'] {\n --origin: translateX(-8px);\n\n &:has(.react-aria-OverlayArrow) {\n margin-left: 6px;\n }\n\n .react-aria-OverlayArrow svg {\n transform: rotate(90deg);\n }\n }\n\n &[data-placement='left'] {\n --origin: translateX(8px);\n\n &:has(.react-aria-OverlayArrow) {\n margin-right: 6px;\n }\n\n .react-aria-OverlayArrow svg {\n transform: rotate(-90deg);\n }\n }\n\n &[data-entering] {\n animation: popover-slide 200ms;\n }\n\n &[data-exiting] {\n animation: popover-slide 200ms reverse ease-in;\n }\n }\n\n @keyframes popover-slide {\n from {\n opacity: 0;\n transform: var(--origin);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n}\n","@import './Button.css';\n@import './Form.css';\n@import './theme.css';\n\n@layer plone-components.base {\n .react-aria-NumberField {\n margin-bottom: 8px;\n color: var(--text-color);\n\n .react-aria-Group {\n display: flex;\n width: fit-content;\n border-radius: 6px;\n\n &[data-focus-within] {\n outline: 1px solid var(--focus-ring-color);\n .react-aria-Input,\n .react-aria-Button {\n border-color: var(--focus-ring-color);\n }\n }\n }\n\n .react-aria-Button {\n width: 2.3rem;\n font-size: 1.4rem;\n\n &[slot='decrement'] {\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n }\n\n &[slot='increment'] {\n border-end-start-radius: 0;\n border-start-start-radius: 0;\n }\n }\n\n .react-aria-Input {\n z-index: 1;\n width: 6rem;\n flex: 1;\n padding: 0.429rem 0.571rem;\n border: 1px solid var(--border-color);\n border-radius: 0;\n margin: 0 -1px;\n background: var(--field-background);\n color: var(--field-text-color);\n font-size: 1rem;\n outline: none;\n }\n\n &[data-invalid] {\n .react-aria-Input,\n .react-aria-Button {\n border-color: var(--color-invalid);\n }\n\n &:focus-within {\n .react-aria-Input,\n .react-aria-Button {\n border-color: var(--focus-ring-color);\n }\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-Button {\n &[data-disabled] {\n border-color: var(--border-color-disabled);\n color: var(--text-color-disabled);\n }\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","@import './Button.css';\n@import './ToggleButton.css';\n@import './Checkbox.css';\n@import './Popover.css';\n@import './Menu.css';\n@import './theme.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: 500;\n\n --plone-table-cell-padding: 18px 12px;\n --plone-table-cell-border-bottom: 1px solid var(--smoke);\n }\n\n .react-aria-Table {\n width: var(--plone-table-width);\n max-width: 100%;\n min-height: 100px;\n align-self: start;\n padding: var(--plone-table-padding);\n border: var(--plone-table-border);\n border-radius: var(--plone-table-border-radius);\n background: var(--plone-table-background);\n border-spacing: 0;\n forced-color-adjust: none;\n outline: none;\n word-break: break-word;\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: -1px;\n }\n\n .react-aria-TableHeader {\n color: var(--plone-table-header-color);\n font-size: var(--plone-table-header-font-size);\n\n & tr:last-child .react-aria-Column {\n border-bottom: var(--plone-table-header-border-bottom);\n cursor: default;\n }\n }\n\n .react-aria-Row {\n --radius-top: 6px;\n --radius-bottom: 6px;\n --radius: var(--radius-top) var(--radius-top) var(--radius-bottom)\n var(--radius-bottom);\n position: relative;\n border-radius: var(--plone-table-row-border-radius);\n clip-path: inset(0 round var(--radius)); /* firefox */\n color: var(--plone-table-row-color);\n cursor: default;\n font-size: var(--plone-table-row-font-size);\n outline: none;\n transform: scale(1);\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: -2px;\n }\n\n &[data-pressed] {\n background: var(--plone-table-row-pressed);\n }\n\n &[data-selected] {\n background: var(--highlight-background);\n color: var(--highlight-foreground);\n --text-color: var(--highlight-foreground);\n --focus-ring-color: var(--highlight-foreground);\n --link-color: var(--highlight-foreground);\n --link-color-secondary: var(--highlight-foreground);\n --button-background: var(--highlight-background);\n\n &[data-focus-visible],\n .react-aria-Cell[data-focus-visible] {\n outline-offset: -4px;\n }\n }\n\n &[data-disabled] {\n color: var(--text-color-disabled);\n }\n\n &[data-dragging] {\n opacity: 0.6;\n transform: translateZ(0);\n }\n\n [slot='drag'] {\n all: unset;\n width: 1em;\n text-align: center;\n\n &[data-focus-visible] {\n border-radius: 4px;\n outline: 2px solid var(--focus-ring-color);\n }\n }\n\n &[data-href] {\n cursor: pointer;\n }\n }\n\n .react-aria-Cell,\n .react-aria-Column {\n padding: var(--plone-table-cell-padding);\n outline: none;\n text-align: left;\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: -2px;\n }\n }\n\n .react-aria-Cell {\n border-bottom: var(--plone-table-cell-border-bottom);\n transform: translateZ(0);\n\n &:first-child {\n border-radius: var(--radius-top) 0 0 var(--radius-bottom);\n }\n\n &:last-child {\n border-radius: 0 var(--radius-top) var(--radius-bottom) 0;\n }\n }\n\n /* join selected items if :has selector is supported */\n @supports selector(:has(.foo)) {\n .react-aria-Row[data-selected]:has(+ [data-selected]),\n .react-aria-Row[data-selected]:has(\n + .react-aria-DropIndicator + [data-selected]\n ) {\n --radius-bottom: 0px;\n }\n\n .react-aria-Row[data-selected] + [data-selected],\n .react-aria-Row[data-selected]\n + .react-aria-DropIndicator\n + [data-selected] {\n --radius-top: 0px;\n }\n }\n }\n\n :where(.react-aria-Row) .react-aria-Checkbox {\n --selected-color: var(--highlight-foreground);\n --selected-color-pressed: var(--highlight-foreground-pressed);\n --checkmark-color: var(--highlight-background);\n --background-color: var(--highlight-background);\n }\n\n .react-aria-Column {\n font-weight: var(--plone-table-column-font-weight);\n\n .sort-indicator {\n padding: 0 2px;\n }\n\n &:not([data-sort-direction]) .sort-indicator {\n visibility: hidden;\n }\n }\n\n .react-aria-ResizableTableContainer {\n position: relative;\n overflow: auto;\n max-width: var(--plone-table-max-width);\n border: var(--plone-table-border);\n border-radius: var(--plone-table-border-radius);\n background: var(--plone-table-background);\n\n .react-aria-Table {\n border: none;\n }\n\n .flex-wrapper {\n display: flex;\n align-items: center;\n }\n\n .column-name,\n .react-aria-Button {\n --background-color: var(--overlay-background);\n overflow: hidden;\n flex: 1;\n border-color: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n text-overflow: ellipsis;\n transition: background 200ms;\n &[data-hovered] {\n background: var(--highlight-hover);\n }\n\n &[data-pressed] {\n background: var(--highlight-pressed);\n box-shadow: none;\n }\n\n &:focus-visible {\n outline: 2px solid var(--focus-ring-color);\n }\n }\n\n .react-aria-ColumnResizer {\n width: 15px;\n height: 25px;\n box-sizing: border-box;\n flex: 0 0 auto;\n border: 5px;\n border-style: none solid;\n border-color: transparent;\n background-clip: content-box;\n background-color: grey;\n touch-action: none;\n\n &[data-resizable-direction='both'] {\n cursor: ew-resize;\n }\n\n &[data-resizable-direction='left'] {\n cursor: e-resize;\n }\n\n &[data-resizable-direction='right'] {\n cursor: w-resize;\n }\n\n &[data-focus-visible] {\n background-color: var(--focus-ring-color);\n }\n\n &[data-resizing] {\n border-color: var(--focus-ring-color);\n background-color: transparent;\n }\n }\n\n .react-aria-Column,\n .react-aria-Cell {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n }\n\n .react-aria-DropIndicator[data-drop-target] {\n outline: 1px solid var(--highlight-background);\n transform: translateZ(0);\n }\n\n .react-aria-Table[data-drop-target] {\n background: var(--highlight-overlay);\n outline: 2px solid var(--highlight-background);\n outline-offset: -1px;\n }\n\n .react-aria-Row[data-drop-target] {\n background: var(--highlight-overlay);\n outline: 2px solid var(--highlight-background);\n }\n}\n","@import './theme.css';\n\n@layer plone-components.base {\n .react-aria-ToggleButton {\n padding: 8px 8px;\n border: 1px solid var(--border-color);\n border-radius: 6px;\n margin: 0;\n appearance: none;\n background: var(--button-background);\n color: var(--text-color);\n font-size: 1rem;\n forced-color-adjust: none;\n outline: none;\n text-align: center;\n vertical-align: middle;\n\n &[data-pressed] {\n border-color: var(--border-color-pressed);\n background: var(--button-background-pressed);\n box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);\n }\n\n &[data-selected] {\n border-color: var(--highlight-background);\n background: var(--highlight-background);\n color: var(--highlight-foreground);\n\n &[data-pressed] {\n border-color: var(--highlight-background-pressed);\n background: var(--highlight-background-pressed);\n }\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--focus-ring-color);\n outline-offset: 2px;\n }\n\n &[data-disabled] {\n border-color: var(--border-color-disabled);\n background: var(--button-background);\n color: var(--text-color-disabled);\n }\n\n .icon:not(:last-child) {\n margin-right: 6px;\n }\n\n &:has(.icon) {\n display: inline-flex;\n align-items: center;\n line-height: 0;\n }\n }\n}\n","@import './Form.css';\n@import './Button.css';\n@import './theme.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","@import './theme.css';\n\n@layer plone-components.base {\n :root {\n /* These has to be mapped to global css custom properties based on the SG scales */\n --quanta-icon-default-size-s: 18px;\n --quanta-icon-default-size-m: 24px;\n --quanta-icon-size-s: var(--quanta-icon-default-size-s);\n --quanta-icon-size-m: var(--quanta-icon-default-size-m);\n --quanta-icon-size-xxs: calc(var(--quanta-icon-size-s) / 2);\n --quanta-icon-size-xs: calc(var(--quanta-icon-size-m) / 2);\n --quanta-icon-size-l: calc(var(--quanta-icon-size-s) * 2);\n --quanta-icon-size-xl: calc(var(--quanta-icon-size-m) * 2);\n --quanta-icon-size-xxl: calc(var(--quanta-icon-size-m) * 3);\n\n --quanta-color-icon-informative: var(--quanta-sapphire);\n --quanta-color-icon-negative: var(--quanta-candy);\n --quanta-color-icon-positive: var(--quanta-neon);\n --quanta-color-icon-notice: var(--quanta-lemmon);\n }\n\n .q.icon {\n display: inline-block;\n\n /* Inherit the text color */\n color: inherit;\n\n /* Fill should match the current text color */\n fill: currentColor;\n\n /* Hide the svg overflow in IE. */\n &:not(:root) {\n overflow: hidden;\n }\n\n /* Don't catch clicks or hover, otherwise they may not escape the SVG */\n pointer-events: none;\n }\n @media (forced-colors: active) {\n .q.icon {\n /* Automatically adjust the SVG to pick up the text color for High Contrast mode */\n forced-color-adjust: auto;\n }\n }\n\n .q {\n &.icon--sizeXXS {\n &,\n img,\n svg {\n block-size: var(--quanta-icon-size-xxs);\n inline-size: var(--quanta-icon-size-xxs);\n }\n }\n\n &.icon--sizeXS {\n &,\n img,\n svg {\n block-size: var(--quanta-icon-size-xs);\n inline-size: var(--quanta-icon-size-xs);\n }\n }\n\n &.icon--sizeS {\n &,\n img,\n svg {\n block-size: var(--quanta-icon-size-s);\n inline-size: var(--quanta-icon-size-s);\n }\n }\n\n &.icon--sizeM {\n &,\n img,\n svg {\n block-size: var(--quanta-icon-size-m);\n inline-size: var(--quanta-icon-size-m);\n }\n }\n\n &.icon--sizeL {\n &,\n img,\n svg {\n block-size: var(--quanta-icon-size-l);\n inline-size: var(--quanta-icon-size-l);\n }\n }\n\n &.icon--sizeXL {\n &,\n img,\n svg {\n block-size: var(--quanta-icon-size-xl);\n inline-size: var(--quanta-icon-size-xl);\n }\n }\n\n &.icon--sizeXXL {\n &,\n img,\n svg {\n block-size: var(--quanta-icon-size-xxl);\n inline-size: var(--quanta-icon-size-xxl);\n }\n }\n }\n}\n","@import './ColorSlider.css';\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","@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","@import './Button.css';\n@import './theme.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-di