{"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: 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","@layer plone-components.base {\n  .react-aria-Meter {\n    --fill-color: forestgreen;\n\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    }\n\n    .fill {\n      height: 100%;\n      background: var(--fill-color);\n    }\n  }\n\n  @media (forced-colors: active) {\n    .react-aria-Meter {\n      --fill-color: Highlight;\n    }\n  }\n}\n","/* depends on:\n@import './Button.css';\n@import './Form.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 './theme.css';\n\n@layer plone-components.base {\n  :root {\n    --quanta-icon-size: 0.25rem;\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-2xs {\n      &,\n      img,\n      svg {\n        width: calc(var(--quanta-icon-size) * 3);\n        height: calc(var(--quanta-icon-size) * 3);\n      }\n    }\n\n    &.icon-xs {\n      &,\n      img,\n      svg {\n        width: calc(var(--quanta-icon-size) * 4);\n        height: calc(var(--quanta-icon-size) * 4);\n      }\n    }\n\n    &.icon-sm {\n      &,\n      img,\n      svg {\n        width: calc(var(--quanta-icon-size) * 5);\n        height: calc(var(--quanta-icon-size) * 5);\n      }\n    }\n\n    &.icon-base {\n      &,\n      img,\n      svg {\n        width: calc(var(--quanta-icon-size) * 6);\n        height: calc(var(--quanta-icon-size) * 6);\n      }\n    }\n\n    &.icon-lg {\n      &,\n      img,\n      svg {\n        width: calc(var(--quanta-icon-size) * 7);\n        height: calc(var(--quanta-icon-size) * 7);\n      }\n    }\n\n    &.icon-xl {\n      &,\n      img,\n      svg {\n        width: calc(var(--quanta-icon-size) * 8);\n        height: calc(var(--quanta-icon-size) * 8);\n      }\n    }\n\n    &.icon-2xl {\n      &,\n      img,\n      svg {\n        width: calc(var(--quanta-icon-size) * 9);\n        height: calc(var(--quanta-icon-size) * 9);\n      }\n    }\n\n    &.icon3xl {\n      &,\n      img,\n      svg {\n        width: calc(var(--quanta-icon-size) * 10);\n        height: calc(var(--quanta-icon-size) * 10);\n      }\n    }\n  }\n}\n","/* depends on:\n@import './Button.css';\n@import './Form.css';\n*/\n@layer plone-components.base {\n  .react-aria-RadioGroup {\n    display: flex;\n    flex-direction: column;\n    color: var(--text-color);\n    gap: 8px;\n  }\n\n  .react-aria-Radio {\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    &:before {\n      display: block;\n      width: 1.286rem;\n      height: 1.286rem;\n      box-sizing: border-box;\n      border: 0.143rem solid var(--border-color);\n      border-radius: 1.286rem;\n      background: var(--field-background);\n      content: '';\n      transition: all 200ms;\n    }\n\n    &[data-pressed]:before {\n      border-color: var(--border-color-pressed);\n    }\n\n    &[data-selected] {\n      &:before {\n        border-width: 0.429rem;\n        border-color: var(--highlight-background);\n      }\n\n      &[data-pressed]:before {\n        border-color: var(--highlight-background-pressed);\n      }\n    }\n\n    &[data-focus-visible]:before {\n      outline: 2px solid var(--focus-ring-color);\n      outline-offset: 2px;\n    }\n\n    &[data-invalid] {\n      &:before {\n        border-color: var(--color-invalid);\n      }\n\n      &[data-pressed]:before {\n        border-color: var(--color-pressed-invalid);\n      }\n    }\n  }\n\n  .react-aria-RadioGroup {\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    &[data-orientation='horizontal'] {\n      flex-direction: row;\n      align-items: center;\n    }\n  }\n\n  .react-aria-Radio {\n    &[data-disabled] {\n      color: var(--text-color-disabled);\n\n      &:before {\n        border-color: var(--border-color-disabled);\n      }\n    }\n  }\n}\n","/* depends on:\n@import './Form.css';\n@import './Button.css';\n*/\n@layer plone-components.base {\n  .react-aria-TimeField {\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-TimeField {\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 './Popover.css';\n@import './Dialog.css';\n@import './DateField.css';\n@import './Calendar.css';\n@import './Form.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","/* 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  .blocks-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n\n    padding: 6px;\n    border-radius: 6px;\n    box-shadow:\n      0px 6px 12px 0px rgba(2, 19, 34, 0.06),\n      0px 9px 18px 0px rgba(2, 19, 34, 0.18);\n    gap: 5px;\n\n    &[data-orientation='horizontal'] {\n      flex-direction: row;\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  .blocks-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-Breadcrumbs {\n    display: flex;\n    align-items: center;\n    padding: 0;\n    margin: 0;\n    color: var(--text-color);\n    font-size: 18px;\n    list-style: none;\n\n    svg {\n      margin-top: -5px;\n      margin-right: 5px;\n      vertical-align: middle;\n    }\n\n    .react-aria-Breadcrumb > .react-aria-Link:has(button) + svg {\n      position: relative;\n      top: 2px;\n    }\n\n    .react-aria-Breadcrumb svg {\n      display: inline;\n    }\n\n    .react-aria-Breadcrumb:not(:last-child):not(\n        :has(.react-aria-Link + svg)\n      )::after {\n      padding: 0 5px;\n      alt: ' ';\n      content: '›';\n      content: '›' / '';\n    }\n\n    .react-aria-Breadcrumb button {\n      padding: 1px 4px;\n      svg {\n        margin: 0;\n      }\n    }\n\n    .react-aria-Link {\n      position: relative;\n      color: var(--link-color-secondary);\n      cursor: pointer;\n      outline: none;\n      text-decoration: none;\n\n      &[data-hovered] {\n        text-decoration: underline;\n      }\n\n      &[data-current] {\n        color: var(--text-color);\n        font-weight: bold;\n      }\n\n      &[data-focus-visible]:after {\n        position: absolute;\n        border: 2px solid var(--focus-ring-color);\n        border-radius: 6px;\n        content: '';\n        inset: -2px -4px;\n      }\n    }\n\n    .react-aria-Link {\n      &[data-disabled] {\n        cursor: default;\n\n        &:not([data-current]) {\n          color: var(--text-color-disabled);\n        }\n      }\n    }\n  }\n}\n","/* depends on:\n@import './Button.css';\n@import './Dialog.css';\n@import './Switch.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","/* depends on:\n@import './Button.css';\n@import './Popover.css';\n@import './Dialog.css';\n@import './DateField.css';\n@import './RangeCalendar.css';\n@import './Form.css';\n*/\n@layer plone-components.base {\n  .react-aria-DateRangePicker {\n    color: var(--text-color);\n\n    .react-aria-Group {\n      position: relative;\n      display: flex;\n      overflow: auto;\n      width: fit-content;\n      min-width: 220px;\n      max-width: 100%;\n      box-sizing: border-box;\n      align-items: center;\n      padding: 4px 4px 4px 8px;\n      border: 1px solid var(--border-color);\n      border-radius: 6px;\n      background: var(--field-background);\n      white-space: nowrap;\n\n      &[data-pressed] {\n        background: var(--highlight-background);\n        box-shadow: none;\n      }\n\n      &[data-focus-within] {\n        outline: 2px solid var(--focus-ring-color);\n        outline-offset: -1px;\n      }\n    }\n\n    [slot='start'] + span {\n      padding: 0 4px;\n    }\n\n    [slot='end'] {\n      flex: 1;\n      margin-right: 2rem;\n    }\n\n    .react-aria-Button {\n      position: sticky;\n      right: 0;\n      width: 1.429rem;\n      height: 1.429rem;\n      box-sizing: content-box;\n      flex-shrink: 0;\n      padding: 0;\n      border: 2px solid var(--field-background);\n      border: none;\n      border-radius: 4px;\n      margin-left: auto;\n      background: var(--highlight-background);\n      color: var(--highlight-foreground);\n      font-size: 0.857rem;\n      forced-color-adjust: none;\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      width: unset;\n      min-width: unset;\n      padding: unset;\n      border: unset;\n      outline: unset;\n    }\n  }\n\n  .react-aria-Popover[data-trigger='DateRangePicker'] {\n    max-width: unset;\n  }\n\n  .react-aria-DateRangePicker {\n    &[data-invalid] {\n      [slot='end']:after {\n        flex: 1;\n        margin-right: -1.5rem;\n        margin-left: 1.5rem;\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","/* depends on:\n@import './Button.css';\n@import './Link.css';\n*/\n@layer plone-components.base {\n  .react-aria-Tabs {\n    display: flex;\n    color: var(--text-color);\n\n    &[data-orientation='horizontal'] {\n      flex-direction: column;\n    }\n  }\n\n  .react-aria-TabList {\n    display: flex;\n\n    &[data-orientation='horizontal'] {\n      border-bottom: 1px solid var(--border-color);\n\n      .react-aria-Tab {\n        border-bottom: 3px solid var(--border-color);\n      }\n    }\n  }\n\n  .react-aria-Tab {\n    position: relative;\n    padding: 10px;\n    color: var(--text-color-base);\n    cursor: default;\n    forced-color-adjust: none;\n    outline: none;\n    transition: color 200ms;\n    --border-color: transparent;\n\n    &[data-hovered],\n    &[data-focused] {\n      color: var(--text-color-hover);\n    }\n\n    &[data-selected] {\n      --border-color: var(--highlight-background);\n      color: var(--text-color);\n    }\n\n    &[data-disabled] {\n      color: var(--text-color-disabled);\n      &[data-selected] {\n        --border-color: var(--text-color-disabled);\n      }\n    }\n\n    &[data-focus-visible]:after {\n      position: absolute;\n      border: 2px solid var(--focus-ring-color);\n      border-radius: 4px;\n      content: '';\n      inset: 4px;\n    }\n  }\n\n  .react-aria-TabPanel {\n    padding: 10px;\n    border-radius: 4px;\n    margin-top: 4px;\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--focus-ring-color);\n    }\n  }\n\n  .react-aria-Tabs {\n    &[data-orientation='vertical'] {\n      flex-direction: row;\n    }\n  }\n\n  .react-aria-TabList {\n    &[data-orientation='vertical'] {\n      flex-direction: column;\n      border-inline-end: 1px solid gray;\n\n      .react-aria-Tab {\n        border-inline-end: 3px solid var(--border-color, transparent);\n      }\n    }\n  }\n\n  .react-aria-Tab {\n    &[data-disabled] {\n      color: var(--text-color-disabled);\n      &[data-selected] {\n        --border-color: var(--border-color-disabled);\n      }\n    }\n  }\n\n  .react-aria-Tab[href] {\n    cursor: pointer;\n    text-decoration: none;\n  }\n}\n",".react-aria-ToastRegion {\n  --toast-bg: #021322;\n  --toast-fg: #fff;\n\n  position: fixed;\n\n  bottom: 8px;\n  left: 50%;\n\n  display: flex;\n  flex-direction: column-reverse;\n\n  border-radius: 8px;\n  gap: 8px;\n  outline: none;\n  transform: translateX(-50%);\n\n  &[data-focus-visible] {\n    outline: 2px solid var(--toast-bg);\n    outline-offset: 2px;\n  }\n}\n\n.react-aria-Toast {\n  &.error {\n    --toast-bg: #6d030a;\n  }\n\n  display: flex;\n  align-items: center;\n  padding: 0.8rem 1rem;\n  border-radius: 6px;\n  background: var(--toast-bg);\n  box-shadow: 0px 2px 4px 0px #f0f1f2;\n  color: var(--toast-fg);\n  gap: 16px;\n  outline: none;\n\n  &[data-focus-visible] {\n    outline: 2px solid var(--toast-bg);\n    outline-offset: 2px;\n  }\n\n  .react-aria-ToastContent {\n    display: flex;\n    min-width: 0px;\n    flex: 1 1 auto;\n    flex-direction: column;\n\n    [slot='title'] {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n    }\n  }\n\n  .react-aria-Button[slot='close'] {\n    display: flex;\n    width: 2rem;\n    height: 2rem;\n    flex: 0 0 auto;\n    justify-content: center;\n    padding: 0;\n    border: none;\n    border: none;\n    border-radius: 50%;\n    appearance: none;\n    background: none;\n    color: var(--toast-fg);\n    cursor: pointer;\n    font-size: 1rem;\n    outline: none;\n\n    &[data-focus-visible] {\n      box-shadow:\n        0 0 0 2px var(--toast-bg),\n        0 0 0 4px var(--toast-fg);\n    }\n\n    &[data-pressed] {\n      background: rgba(255, 255, 255, 0.2);\n    }\n  }\n}\n","@layer plone-components.base {\n  .react-aria-Link {\n    position: relative;\n    color: var(--link-color);\n    cursor: pointer;\n    font-size: 18px;\n    outline: none;\n    text-decoration: underline;\n    transition: all 200ms;\n\n    /* TODO: review, but removing the fancyness for now */\n    /* &[data-hovered] {\n    text-decoration-style: wavy;\n  } */\n\n    &[data-pressed] {\n      color: var(--link-color-pressed);\n    }\n\n    &[data-hovered] {\n      color: var(--link-color-secondary);\n    }\n\n    &[data-focused] {\n      color: var(--link-color-secondary);\n    }\n\n    &[data-focus-visible]:after {\n      position: absolute;\n      border: 2px solid var(--focus-ring-color);\n      border-radius: 6px;\n      content: '';\n      inset: -3px -6px;\n    }\n\n    &[data-disabled] {\n      color: var(--text-color-disabled);\n      cursor: default;\n    }\n  }\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","/* depends on:\n@import './Checkbox.css';\n*/\n@layer plone-components.base {\n  .react-aria-ListBox {\n    display: flex;\n    overflow: auto;\n    width: 250px;\n    min-height: 100px;\n    max-height: inherit;\n    max-height: 300px;\n    box-sizing: border-box;\n    flex-direction: column;\n    padding: 2px;\n    border: 1px solid var(--border-color);\n    border-radius: 6px;\n    background: var(--overlay-background);\n    forced-color-adjust: none;\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--focus-ring-color);\n      outline-offset: -1px;\n    }\n  }\n\n  .react-aria-ListBoxItem {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    padding: 0.286rem 0.571rem;\n    border-radius: 6px;\n    margin: 2px;\n    color: var(--text-color);\n    cursor: default;\n    font-size: 1.072rem;\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] {\n      background: var(--highlight-background);\n      color: var(--highlight-foreground);\n\n      &[data-focus-visible] {\n        outline-color: var(--highlight-foreground);\n        outline-offset: -4px;\n      }\n    }\n  }\n\n  .react-aria-ListBoxItem[href] {\n    cursor: pointer;\n    text-decoration: none;\n    -webkit-touch-callout: none;\n  }\n\n  .react-aria-ListBox {\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\n  .react-aria-ListBoxItem {\n    [slot='label'] {\n      font-weight: bold;\n    }\n\n    [slot='description'] {\n      font-size: small;\n    }\n  }\n\n  .react-aria-ListBox[data-orientation='horizontal'],\n  .react-aria-ListBox[data-layout='grid'] {\n    width: fit-content;\n    max-width: 100%;\n    flex-direction: row;\n    padding: 4px;\n\n    .react-aria-ListBoxItem {\n      position: relative;\n      padding: 4px;\n      margin: 0;\n\n      & img {\n        max-width: 150px;\n        border-radius: 4px;\n        margin-bottom: 4px;\n        aspect-ratio: 1/1;\n        object-fit: cover;\n        transition: box-shadow 200ms;\n      }\n\n      &[data-hovered] {\n        & img {\n          /* TODO: review */\n          /* box-shadow: 0 0 8px rgb(from slateblue r g b / 0.5); */\n          box-shadow: 0 0 8px var(--highlight-background-hover);\n        }\n      }\n\n      &[data-selected] {\n        background: none;\n        color: inherit;\n\n        & img {\n          /* TODO: review */\n          /* box-shadow: 0 0 12px rgb(from slateblue r g b / 0.8); */\n          box-shadow: 0 0 12px var(--highlight-background-hover);\n        }\n\n        &:after {\n          position: absolute;\n          top: 8px;\n          right: 8px;\n          display: flex;\n          width: 22px;\n          height: 22px;\n          box-sizing: border-box;\n          align-items: center;\n          justify-content: center;\n          border: 2px solid var(--highlight-foreground);\n          border-radius: 22px;\n          alt: ' ';\n          background: var(--highlight-background);\n          box-shadow: 0 0 8px rgb(0 0 0 / 0.5);\n          color: var(--highlight-foreground);\n          content: '✓';\n          content: '✓' / '';\n          font-size: 14px;\n          line-height: 1em;\n        }\n      }\n    }\n  }\n\n  .react-aria-ListBox[data-layout='grid'] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    scrollbar-gutter: stable;\n  }\n\n  .react-aria-ListBox[data-layout='grid'][data-orientation='horizontal'] {\n    display: grid;\n    width: 100%;\n    max-width: none;\n    max-height: 200px;\n    gap: 8px;\n    grid-auto-columns: 250px;\n    grid-auto-flow: column;\n    grid-template-columns: none;\n    grid-template-rows: 58px 58px;\n\n    .react-aria-ListBoxItem {\n      display: grid;\n      column-gap: 8px;\n      grid-template-areas:\n        'image .'\n        'image title'\n        'image description'\n        'image .';\n      grid-template-columns: auto 1fr;\n      grid-template-rows: 1fr auto auto 1fr;\n\n      & img {\n        width: 50px;\n        height: 50px;\n        margin-bottom: 0;\n        grid-area: image;\n      }\n\n      [slot='label'] {\n        grid-area: title;\n      }\n\n      [slot='description'] {\n        grid-area: description;\n      }\n    }\n  }\n\n  .react-aria-ListBoxItem {\n    &[data-disabled] {\n      color: var(--text-color-disabled);\n    }\n  }\n\n  .react-aria-ListBox {\n    &[data-empty] {\n      align-items: center;\n      justify-content: center;\n      font-style: italic;\n    }\n  }\n\n  .react-aria-ListBoxItem {\n    &[data-dragging] {\n      opacity: 0.6;\n    }\n  }\n\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 1px solid var(--highlight-background);\n  }\n\n  .react-aria-ListBox[data-drop-target] {\n    background: var(--highlight-overlay);\n    outline: 2px solid var(--highlight-background);\n    outline-offset: -1px;\n  }\n\n  .react-aria-ListBoxItem[data-drop-target] {\n    background: var(--highlight-overlay);\n    outline: 2px solid var(--highlight-background);\n  }\n\n  .react-aria-DropIndicator[data-drop-target] {\n    outline: 1px solid var(--highlight-background);\n  }\n}\n","/* depends on:\n@import './Button.css';\n@import './ToggleButton.css';\n@import './Checkbox.css';\n*/\n.react-aria-Tree {\n  display: flex;\n  overflow: auto;\n  width: 250px;\n  max-height: 300px;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 4px;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--overlay-background);\n  forced-color-adjust: none;\n  gap: 2px;\n  outline: none;\n\n  &[data-focus-visible] {\n    outline: 2px solid var(--focus-ring-color);\n    outline-offset: -1px;\n  }\n\n  .react-aria-TreeItem {\n    position: relative;\n    display: flex;\n    min-height: 28px;\n    align-items: center;\n    padding: 0.286rem 0.286rem 0.286rem 0.571rem;\n    border-radius: 6px;\n    color: var(--text-color);\n    cursor: default;\n    font-size: 1.072rem;\n    gap: 0.571rem;\n    outline: none;\n    transform: translateZ(0);\n    --padding: 8px;\n\n    .react-aria-Button[slot='chevron'] {\n      all: unset;\n      display: flex;\n      width: 1.3rem;\n      height: 100%;\n      align-items: center;\n      justify-content: center;\n      padding-left: calc((var(--tree-item-level) - 1) * var(--padding));\n      visibility: hidden;\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-has-child-items] .react-aria-Button[slot='chevron'] {\n      visibility: visible;\n    }\n\n    &[data-expanded] .react-aria-Button[slot='chevron'] svg {\n      rotate: 90deg;\n    }\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(--gray-100);\n    }\n\n    &[data-selected] {\n      background: var(--highlight-background);\n      color: var(--highlight-foreground);\n      --focus-ring-color: var(--highlight-foreground);\n\n      &[data-focus-visible] {\n        outline-color: var(--highlight-foreground);\n        outline-offset: -4px;\n      }\n\n      .react-aria-Button {\n        color: var(--highlight-foreground);\n        --highlight-hover: rgb(255 255 255 / 0.1);\n        --highlight-pressed: rgb(255 255 255 / 0.2);\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--text-color-disabled);\n    }\n\n    .react-aria-Button:not([slot]) {\n      padding: 0.286rem 0.429rem;\n      border: none;\n      margin-left: auto;\n      background: transparent;\n      font-size: 1.2rem;\n      line-height: 1.2em;\n      transition: background 200ms;\n\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  }\n\n  /* join selected items if :has selector is supported */\n  @supports selector(:has(.foo)) {\n    gap: 0;\n\n    .react-aria-TreeItem[data-selected]:has(+ [data-selected]) {\n      border-end-end-radius: 0;\n      border-end-start-radius: 0;\n    }\n\n    .react-aria-TreeItem[data-selected] + [data-selected] {\n      border-start-end-radius: 0;\n      border-start-start-radius: 0;\n    }\n  }\n\n  :where(.react-aria-TreeItem) .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\n.react-aria-TreeItem[data-href] {\n  cursor: pointer;\n}\n\n.react-aria-Tree {\n  &[data-empty] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-style: italic;\n  }\n}\n","/* depends on:\n@import './ListBox.css';\n@import './Popover.css';\n@import './Button.css';\n@import './Form.css';\n*/\n@layer plone-components.base {\n  .react-aria-Select {\n    color: var(--text-color);\n\n    .react-aria-Group {\n      display: flex;\n      min-width: var(--rac-select-min-width);\n      max-width: 250px;\n      align-items: center;\n      padding: 0.286rem;\n      border: 1px solid var(--border-color);\n      border-radius: 6px;\n      background: var(--field-background);\n      box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);\n      gap: 0.286rem;\n\n      &[data-focus-visible] {\n        outline: 2px solid var(--focus-ring-color);\n        outline-offset: -1px;\n      }\n\n      .react-aria-SelectValue {\n        min-width: 0;\n        flex: 1;\n      }\n\n      .react-aria-TagGroup {\n        min-width: 0;\n        flex: 1;\n      }\n\n      .react-aria-TagList {\n        min-height: 1.75rem;\n      }\n\n      .react-aria-Button {\n        flex-shrink: 0;\n      }\n    }\n\n    > .react-aria-Button {\n      display: flex;\n      min-width: var(--rac-select-min-width);\n      max-width: 250px;\n      align-items: center;\n      justify-content: space-between;\n      padding: 0.286rem 0.286rem 0.286rem 0.571rem;\n      border-radius: 6px;\n      box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);\n      font-size: 1.072rem;\n      text-align: initial;\n\n      &:has(.icon) {\n        line-height: initial;\n      }\n\n      &[data-focus-visible] {\n        outline: 2px solid var(--focus-ring-color);\n        outline-offset: -1px;\n      }\n    }\n\n    &[data-invalid] {\n      > .react-aria-Button {\n        border: 1px solid var(--color-invalid);\n      }\n\n      .react-aria-Group {\n        border-color: var(--color-invalid);\n      }\n\n      .react-aria-Label {\n        color: var(--color-invalid);\n      }\n    }\n\n    &[data-disabled] {\n      .react-aria-Label {\n        color: var(--basic-400);\n      }\n\n      [slot='description'] {\n        color: var(--basic-400);\n      }\n    }\n\n    .react-aria-SelectValue {\n      &[data-placeholder] {\n        color: var(--text-color-placeholder);\n        font-style: italic;\n      }\n    }\n\n    span[aria-hidden] {\n      width: 1.5rem;\n      padding: 1px;\n      border-radius: 4px;\n      margin-left: 1rem;\n      font-size: 0.857rem;\n      forced-color-adjust: none;\n      line-height: 1.375rem;\n    }\n\n    &[data-required] .react-aria-Label::after {\n      /* https://yoksel.github.io/url-encoder/ */\n      content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='hsl(7, 90%25, 59%25)' d='M12 18a6 6 0 100-12 6 6 0 000 12z'/%3E%3C/svg%3E\");\n    }\n  }\n\n  .react-aria-Popover[data-trigger='Select'] {\n    display: flex;\n    min-width: var(--trigger-width);\n    flex-direction: column;\n    padding: 4px;\n    box-shadow:\n      0 3px 6px 0 rgba(2, 19, 34, 0.12),\n      0 2px 4px 0 rgba(2, 19, 34, 0.06);\n\n    .react-aria-Dialog {\n      padding: 0;\n    }\n\n    .react-aria-ListBox {\n      display: block;\n      width: unset;\n      min-height: unset;\n      max-height: inherit;\n      padding: 0;\n      border: none;\n\n      .react-aria-Header {\n        padding: 0.25rem 0.571rem;\n        color: var(--text-color-placeholder);\n        font-size: 0.857rem;\n        text-transform: uppercase;\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    .react-aria-Autocomplete {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .react-aria-SearchField {\n      width: 100%;\n\n      .react-aria-Input {\n        width: 100%;\n      }\n    }\n  }\n\n  .react-aria-ListBoxItem[href] {\n    cursor: pointer;\n    text-decoration: none;\n  }\n\n  .react-aria-Select {\n    .react-aria-SelectValue {\n      [slot='description'] {\n        display: none;\n      }\n    }\n\n    > .react-aria-Button {\n      &[data-disabled] {\n        border-color: var(--border-color-disabled);\n        color: var(--text-color-disabled);\n        span[aria-hidden] {\n          color: var(--text-color-disabled);\n        }\n\n        .react-aria-SelectValue {\n          &[data-placeholder] {\n            color: var(--text-color-disabled);\n          }\n        }\n      }\n    }\n  }\n\n  @media (forced-colors: active) {\n    .react-aria-Select {\n      .react-aria-Button {\n        &[data-disabled] span[aria-hidden] {\n          background: 0 0;\n        }\n      }\n    }\n  }\n\n  .react-aria-Select {\n    .react-aria-FieldError {\n      color: var(--color-invalid);\n      font-size: 12px;\n    }\n\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    .react-aria-TagGroup {\n      [slot='description'],\n      [slot='errorMessage'] {\n        display: none;\n      }\n    }\n  }\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","/* depends on:\n@import './ToggleButton.css';\n*/\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","@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","/* depends on:\n@import './Button.css';\n@import './Checkbox.css';\n@import './ToggleButton.css';\n*/\n@layer plone-components.base {\n  .react-aria-GridList {\n    display: flex;\n    overflow: auto;\n    width: 250px;\n    min-height: 100px;\n    max-height: inherit;\n    max-height: 300px;\n    box-sizing: border-box;\n    flex-direction: column;\n    padding: 4px;\n    border: 1px solid var(--border-color);\n    border-radius: 6px;\n    background: var(--overlay-background);\n    forced-color-adjust: none;\n    gap: 2px;\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--focus-ring-color);\n      outline-offset: -1px;\n    }\n\n    .react-aria-GridListItem {\n      position: relative;\n      display: flex;\n      min-height: 28px;\n      align-items: center;\n      padding: 0.286rem 0.286rem 0.286rem 0.571rem;\n      border-radius: 6px;\n      color: var(--text-color);\n      cursor: default;\n      font-size: 1.072rem;\n      gap: 0.571rem;\n      outline: none;\n      transform: translateZ(0);\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(---basic-300);\n      }\n\n      &[data-selected] {\n        background: var(--highlight-background);\n        color: var(--highlight-foreground);\n        --focus-ring-color: var(--highlight-foreground);\n\n        &[data-focus-visible] {\n          outline-color: var(--highlight-foreground);\n          outline-offset: -4px;\n        }\n\n        .react-aria-Button {\n          color: var(--highlight-foreground);\n          --highlight-hover: rgb(255 255 255 / 0.1);\n          --highlight-pressed: rgb(255 255 255 / 0.2);\n        }\n      }\n\n      &[data-disabled] {\n        color: var(--text-color-disabled);\n      }\n\n      .react-aria-Button:not([slot]) {\n        margin-left: auto;\n      }\n\n      .react-aria-Button {\n        padding: 0.286rem 0.429rem;\n        border: none;\n        background: transparent;\n        font-size: 1.2rem;\n        line-height: 1.2em;\n        transition: background 200ms;\n\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    }\n\n    /* join selected items if :has selector is supported */\n    @supports selector(:has(.foo)) {\n      gap: 0;\n\n      .react-aria-GridListItem[data-selected]:has(+ [data-selected]),\n      .react-aria-GridListItem[data-selected]:has(\n          + .react-aria-DropIndicator + [data-selected]\n        ) {\n        border-end-end-radius: 0;\n        border-end-start-radius: 0;\n      }\n\n      .react-aria-GridListItem[data-selected] + [data-selected],\n      .react-aria-GridListItem[data-selected]\n        + .react-aria-DropIndicator\n        + [data-selected] {\n        border-start-end-radius: 0;\n        border-start-start-radius: 0;\n      }\n    }\n\n    :where(.react-aria-GridListItem) .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\n  .react-aria-GridListItem[data-href] {\n    cursor: pointer;\n  }\n\n  .react-aria-GridList {\n    &[data-empty] {\n      align-items: center;\n      justify-content: center;\n      font-style: italic;\n    }\n  }\n\n  .react-aria-GridListItem {\n    &[data-allows-dragging] {\n      padding-left: 4px;\n    }\n\n    &[data-dragging] {\n      opacity: 0.6;\n    }\n\n    [slot='drag'] {\n      all: unset;\n      width: 15px;\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\n  .react-aria-DropIndicator {\n    &[data-drop-target] {\n      outline: 1px solid var(--highlight-background);\n    }\n\n    @supports not selector(:has(.foo)) {\n      /* Undo gap in browsers that don't support :has */\n      margin-bottom: -2px;\n    }\n  }\n\n  .react-aria-GridList[data-drop-target] {\n    background: var(--highlight-overlay);\n    outline: 2px solid var(--highlight-background);\n    outline-offset: -1px;\n  }\n\n  .react-aria-GridListItem[data-drop-target] {\n    background: var(--highlight-overlay);\n    outline: 2px solid var(--highlight-background);\n  }\n\n  .react-aria-DropIndicator {\n    &[data-drop-target] {\n      outline: 1px solid var(--highlight-background);\n    }\n\n    @supports not selector(:has(.foo)) {\n      /* Undo gap in browsers that don't support :has */\n      margin-bottom: -2px;\n    }\n  }\n}\n","/* depends on:\n@import './Button.css';\n*/\n@layer plone-components.base {\n  .react-aria-Tooltip {\n    max-width: 150px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: var(--highlight-background);\n    box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);\n    color: var(--highlight-foreground);\n    forced-color-adjust: none;\n    outline: none;\n    /* fixes FF gap */\n    transform: translate3d(0, 0, 0);\n\n    &[data-placement='top'] {\n      margin-bottom: 8px;\n      --origin: translateY(4px);\n    }\n\n    &[data-placement='bottom'] {\n      margin-top: 8px;\n      --origin: translateY(-4px);\n      & .react-aria-OverlayArrow svg {\n        transform: rotate(180deg);\n      }\n    }\n\n    &[data-placement='right'] {\n      margin-left: 8px;\n      --origin: translateX(-4px);\n      & .react-aria-OverlayArrow svg {\n        transform: rotate(90deg);\n      }\n    }\n\n    &[data-placement='left'] {\n      margin-right: 8px;\n      --origin: translateX(4px);\n      & .react-aria-OverlayArrow svg {\n        transform: rotate(-90deg);\n      }\n    }\n\n    & .react-aria-OverlayArrow svg {\n      display: block;\n      fill: var(--highlight-background);\n    }\n\n    &[data-entering] {\n      animation: slide 200ms;\n    }\n\n    &[data-exiting] {\n      animation: slide 200ms reverse ease-in;\n    }\n  }\n\n  @keyframes 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","@layer plone-components.base {\n  .q.container {\n    container-type: inline-size;\n\n    &.layout {\n      max-width: var(--layout-container-width);\n      margin-right: auto;\n      margin-left: auto;\n    }\n\n    &.default {\n      max-width: var(--default-container-width);\n      margin-right: auto;\n      margin-left: auto;\n    }\n\n    &.narrow {\n      max-width: var(--narrow-container-width);\n      margin-right: auto;\n      margin-left: auto;\n    }\n  }\n}\n"],"names":[]}