@accelint/design-system 0.1.0 → 0.2.0

package/README.md

@@ -30,7 +30,7 @@ We also want to establish a common platform for multiple similar, but stylistica
 
 C2DS is a semi-headless, themeless collection of components that express minimal opinions about layout and baked-in styles with an API of props for each component that strives to suit many common use cases. The design guidelines are established within [Figma](https://www.figma.com/design/CoNlAMPL0u5DCVYRPQKhki/N2X-Design-System?node-id=30742-76715&m=dev).
 
-While C2DS is based on theme of the Jeric2o application, the vast majority of spacing and color theming to left up to the implementer to define. For every element of this system, the priority has been flexibility over rigid requirements and an "escape hatch" for overriding style and behavior if necessary.
+The vast majority of spacing and color theming is left up to the implementer to define. For every element of this system, the priority has been flexibility over rigid requirements and an "escape hatch" for overriding style and behavior if necessary.
 
 ## Why isn't there a theme or icons?
 

package/dist/assets/components/button/button.css

@@ -0,0 +1,55 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .button_buttonClassNames_container__17k72zwp {
+    container-name: button_buttonContainer__17k72zw0;
+    width: var(--width__17k72zwb, fit-content);
+    display: block;
+    background: none;
+    padding: 0;
+    border: 0;
+    text-decoration: none;
+    color: currentcolor;
+  }
+  .button_buttonClassNames_button__17k72zwq {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--gap__17k72zw9);
+    min-width: var(--minWidth__17k72zwa, auto);
+    width: var(--width__17k72zwb, fit-content);
+    padding: var(--y__17k72zwd, 0) var(--x__17k72zwc, 0);
+    border: 1px solid var(--border__17k72zw7, transparent);
+    border-radius: var(--md__ljimwq3e);
+    background: var(--background__17k72zw6, var(--bareBackground__17k72zw2, none));
+    font-weight: 700;
+    color: var(--color__17k72zw8, var(--nonSolidColor__17k72zw1));
+    cursor: pointer;
+  }
+  @container (style(--variant__17k72zwg: icon) or style(--variant__17k72zwg: floating)) {
+    .button_buttonClassNames_button__17k72zwq {
+      min-width: auto;
+    }
+  }
+  @container style(--variant__17k72zwg: floating) {
+    .button_buttonClassNames_button__17k72zwq {
+      border-radius: var(--round__ljimwq3g);
+    }
+  }
+  @container (style(--variant__17k72zwg: floating) or style(--variant__17k72zwg: hollow)) {
+    .button_buttonClassNames_button__17k72zwq {
+      border-color: var(--border__17k72zw7, var(--hollowBorder__17k72zw3));
+      background: var(--background__17k72zw6, transparent);
+    }
+  }
+  @container style(--variant__17k72zwg: solid) {
+    .button_buttonClassNames_button__17k72zwq {
+      background: var(--background__17k72zw6, var(--solidBackground__17k72zw4));
+      color: var(--color__17k72zw8, var(--solidColor__17k72zw5));
+    }
+  }
+  @container style(--isDisabled__17k72zwi: true) {
+    .button_buttonClassNames_button__17k72zwq {
+      cursor: not-allowed;
+    }
+  }
+}

package/dist/assets/components/checkbox/checkbox.css

@@ -0,0 +1,73 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .checkbox_checkboxClassNames_checkbox_container__1rajo3pp {
+    container-name: checkbox_checkboxContainer__1rajo3p0;
+    display: block;
+    width: fit-content;
+  }
+  .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
+    display: flex;
+    align-items: center;
+    gap: var(--gap__1rajo3p7);
+    color: var(--color__1rajo3p4);
+  }
+  .checkbox_checkboxClassNames_checkbox_label__1rajo3ps {
+    color: var(--color__1rajo3p4);
+  }
+  .checkbox_checkboxClassNames_group_container__1rajo3pt {
+    container-name: checkbox_checkboxGroupContainer__1rajo3p1;
+    display: contents;
+  }
+  .checkbox_checkboxClassNames_group_group__1rajo3pu {
+    display: flex;
+    flex-direction: column;
+    gap: var(--elementGap__1rajo3p8, var(--gap__1rajo3p7));
+  }
+  .checkbox_checkboxClassNames_group_label__1rajo3pv {
+    color: var(--color__1rajo3p4);
+  }
+  @container style(--alignInput__1rajo3p9: start) {
+    .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
+      flex-direction: row-reverse;
+    }
+  }
+  @container style(--alignInput__1rajo3p9: end) {
+    .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
+      flex-direction: row;
+    }
+  }
+  @container style(--isReadOnly__1rajo3ph: false) {
+    .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
+      cursor: pointer;
+    }
+  }
+  @container style(--isDisabled__1rajo3pa: true) {
+    .checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq {
+      cursor: not-allowed;
+    }
+  }
+  @container style(--orientation__1rajo3pk: horizontal) {
+    .checkbox_checkboxClassNames_group_group__1rajo3pu {
+      flex-direction: row;
+    }
+  }
+  @container style(--orientation__1rajo3pk: vertical) {
+    .checkbox_checkboxClassNames_group_group__1rajo3pu {
+      flex-direction: column;
+    }
+  }
+}
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
+  .checkbox_checkboxClassNames_checkbox_icon_container__1rajo3pr {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--dimension__1rajo3p6);
+    height: var(--dimension__1rajo3p6);
+    color: var(--indicator__1rajo3p5, currentcolor);
+    border: 1px solid var(--border__1rajo3p2, transparent);
+    border-radius: var(--sm__ljimwq3d);
+    background: var(--background__1rajo3p3, none);
+  }
+}

package/dist/assets/components/chip/chip.css

@@ -0,0 +1,62 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .chip_chipClassNames_list__1t8hj09j {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--list-gap__1t8hj094);
+  }
+  .chip_chipClassNames_container__1t8hj09k {
+    container-name: chip_chipContainer__1t8hj090;
+    display: contents;
+  }
+  .chip_chipClassNames_chip__1t8hj09l {
+    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--border__1t8hj092, transparent);
+    border-radius: var(--round__ljimwq3g);
+    background: var(--background__1t8hj091, none);
+    color: var(--color__1t8hj093, currentcolor);
+    overflow: hidden;
+  }
+  .chip_chipClassNames_label__1t8hj09m {
+    display: flex;
+    gap: var(--chip-gap__1t8hj095);
+    padding: var(--chip-y__1t8hj097) var(--chip-x__1t8hj096);
+    border: none;
+    background: none;
+    color: currentcolor;
+  }
+  .chip_chipClassNames_remove__1t8hj09n {
+    padding: var(--chip-y__1t8hj097);
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: currentcolor;
+  }
+  @container style(--allowsRemoving__1t8hj09a: true) {
+    .chip_chipClassNames_label__1t8hj09m {
+      padding-right: var(--chip-y__1t8hj097);
+    }
+  }
+  @container (style(--selectionMode__1t8hj09c: single) or style(--selectionMode__1t8hj09c: multiple)) {
+    .chip_chipClassNames_label__1t8hj09m {
+      cursor: pointer;
+    }
+  }
+  @container style(--isDisabled__1t8hj09d: true) {
+    .chip_chipClassNames_label__1t8hj09m {
+      cursor: not-allowed;
+    }
+    .chip_chipClassNames_remove__1t8hj09n {
+      cursor: not-allowed;
+    }
+  }
+  @container style(--isFocused__1t8hj09e: true) or style(--isFocusVisible__1t8hj09f: true) {
+    .chip_chipClassNames_remove__1t8hj09n {
+      outline: none;
+    }
+  }
+}

package/dist/assets/components/combo-box/combo-box.css

@@ -0,0 +1,66 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .combo-box_comboBoxClassNames_container__12tc9p8a {
+    container-name: combo-box_comboBoxContainer__12tc9p80;
+    display: contents;
+  }
+  .combo-box_comboBoxClassNames_comboBox__12tc9p8b {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .combo-box_comboBoxClassNames_label__12tc9p8c {
+    color: var(--color__6yc0ri3);
+  }
+  .combo-box_comboBoxClassNames_group__12tc9p8d {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: var(--y__12tc9p84, 0) var(--x__12tc9p83, 0);
+  }
+  .combo-box_comboBoxClassNames_description__12tc9p8h {
+    color: var(--description-color__12tc9p81);
+  }
+  .combo-box_comboBoxClassNames_error__12tc9p8i {
+    color: var(--error-color__12tc9p82);
+  }
+}
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
+  .combo-box_comboBoxClassNames_input_sizer__12tc9p8e::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    border: 1px solid var(--border__6yc0ri2, transparent);
+    border-radius: var(--md__ljimwq3e);
+    background: var(--background__6yc0ri1);
+    color: var(--color__6yc0ri3);
+  }
+  .combo-box_comboBoxClassNames_input_sizer__12tc9p8e:has(:focus-visible)::before {
+    outline: var(--width__ljimwq5f) var(--style__ljimwq5g) var(--color__ljimwq5h, Highlight);
+    outline: var(--width__ljimwq5f) var(--style__ljimwq5g) var(--color__ljimwq5h, -webkit-focus-ring-color);
+    outline-offset: var(--offset__ljimwq5e);
+  }
+  .combo-box_comboBoxClassNames_input_input__12tc9p8f {
+    position: relative;
+    padding: 0;
+    border: none;
+    background: none;
+  }
+  .combo-box_comboBoxClassNames_input_input__12tc9p8f::-webkit-search-cancel-button, .combo-box_comboBoxClassNames_input_input__12tc9p8f::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  .combo-box_comboBoxClassNames_input_input__12tc9p8f:focus-visible {
+    outline: none;
+  }
+  .combo-box_comboBoxClassNames_toggle_button__12tc9p8g {
+    position: relative;
+    padding: 0;
+    background: none;
+  }
+}

package/dist/assets/components/dialog/dialog.css

@@ -0,0 +1,51 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+.dialog_dialogClassNames_modal__8ms59zk {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: var(--dialog__ljimwq5a);
+  transform: translate(-50%, -50%);
+}
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .dialog_header__8ms59zg {
+    margin-bottom: calc(var(--gap-header-after__8ms59z7) - var(--gap-default__8ms59z6));
+  }
+  .dialog_content__8ms59zh {
+    color: var(--content-color__8ms59z2);
+  }
+  .dialog_dialogClassNames_portal__8ms59zi {
+    display: contents;
+  }
+  .dialog_dialogClassNames_container__8ms59zj {
+    container-name: dialog_dialogContainer__8ms59z0;
+    display: contents;
+  }
+  .dialog_dialogClassNames_container__8ms59zj::before {
+    content: "";
+    width: 100%;
+    height: var(--visual-viewport-height);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--dialog__ljimwq5a);
+    background: var(--overlay__8ms59z1);
+  }
+  .dialog_dialogClassNames_dialog__8ms59zl {
+    width: var(--width__8ms59z3, 300px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-default__8ms59z6);
+    padding: var(--y__8ms59z5, 0) var(--x__8ms59z4, 0);
+    border-radius: var(--md__ljimwq3e);
+  }
+  .dialog_dialogClassNames_footer__8ms59zm {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: calc(var(--gap-footer-before__8ms59z9) - var(--gap-default__8ms59z6));
+  }
+}
+@container style(--isGlobal__8ms59ze: false) {
+  .dialog_dialogClassNames_modal__8ms59zk {
+    position: absolute;
+  }
+}

package/dist/assets/components/drawer/drawer.css

@@ -0,0 +1,135 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .drawer_drawerClassNames_container__3hvldbh {
+    container-name: drawer_drawerContainer__3hvldb0;
+    display: contents;
+  }
+  .drawer_drawerClassNames_dialog_container__3hvldbk {
+    height: 100%;
+  }
+  .drawer_drawerClassNames_dialog_dialog__3hvldbl {
+    width: var(--drawer-width__3hvldb6);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--drawer-gap__3hvldb7);
+    padding: var(--drawer-y__3hvldb9, 0) var(--drawer-x__3hvldb8, 0);
+  }
+  .drawer_drawerClassNames_header_header__3hvldbm {
+    display: grid;
+    grid-template-areas: "back title close";
+    grid-template-columns: auto 1fr auto;
+    gap: var(--drawer-gap__3hvldb7);
+    align-items: center;
+  }
+  .drawer_drawerClassNames_header_title__3hvldbo {
+    margin-bottom: 0;
+  }
+  .drawer_drawerClassNames_content__3hvldbq {
+    flex: 1;
+  }
+  .drawer_drawerClassNames_footer__3hvldbr {
+    display: flex;
+    justify-content: flex-end;
+  }
+  @container style(--layoutShift__3hvldbd: false) {
+    .drawer_drawerClassNames_dialog_container__3hvldbk {
+      width: var(--drawer-width__3hvldb6);
+      position: absolute;
+      transition: transform var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
+      overflow: hidden;
+      pointer-events: none;
+    }
+    .drawer_drawerClassNames_dialog_dialog__3hvldbl {
+      transition: transform var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
+      pointer-events: auto;
+    }
+  }
+  @container style(--anchor__3hvldbc: left) and style(--layoutShift__3hvldbd: false) {
+    .drawer_drawerClassNames_dialog_container__3hvldbk {
+      left: 0;
+    }
+  }
+  @container style(--anchor__3hvldbc: right) and style(--layoutShift__3hvldbd: false) {
+    .drawer_drawerClassNames_dialog_container__3hvldbk {
+      right: 0;
+    }
+  }
+  @container style(--layoutShift__3hvldbd: true) {
+    .drawer_drawerClassNames_dialog_container__3hvldbk {
+      width: 0;
+      overflow: hidden;
+      transition: width var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
+    }
+  }
+  @container style(--layoutShift__3hvldbd: true) and style(--isOpen__3hvldbf: true) {
+    .drawer_drawerClassNames_dialog_container__3hvldbk {
+      width: var(--drawer-width__3hvldb6);
+    }
+  }
+  @container style(--anchor__3hvldbc: left) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: false) {
+    .drawer_drawerClassNames_dialog_dialog__3hvldbl {
+      transform: translateX(-100%);
+    }
+  }
+  @container style(--anchor__3hvldbc: right) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: false) {
+    .drawer_drawerClassNames_dialog_dialog__3hvldbl {
+      transform: translateX(100%);
+    }
+  }
+  @container style(--isChild__3hvldbg: false) {
+    .drawer_drawerClassNames_header_title__3hvldbo {
+      grid-area: back title;
+    }
+  }
+  @container style(--isChild__3hvldbg: true) {
+    .drawer_drawerClassNames_header_title__3hvldbo {
+      grid-area: title;
+      text-align: center;
+    }
+  }
+}
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
+  .drawer_drawerClassNames_tabs_tabs__3hvldbi {
+    height: 100%;
+    display: block;
+    position: relative;
+  }
+  .drawer_drawerClassNames_tabs_list_list__3hvldbj {
+    position: absolute;
+    top: var(--list-top__3hvldba);
+    transform: translateY(var(--list-translateY__3hvldbb, 0));
+  }
+  .drawer_drawerClassNames_header_back_container__3hvldbn {
+    grid-area: back;
+  }
+  .drawer_drawerClassNames_header_close_container__3hvldbp {
+    grid-area: close;
+  }
+  @container style(--anchor__3hvldbc: left) {
+    .drawer_drawerClassNames_tabs_list_list__3hvldbj {
+      left: 100%;
+    }
+  }
+  @container style(--anchor__3hvldbc: right) {
+    .drawer_drawerClassNames_tabs_list_list__3hvldbj {
+      right: 100%;
+    }
+  }
+  @container style(--layoutShift__3hvldbd: false) {
+    .drawer_drawerClassNames_tabs_list_list__3hvldbj {
+      transition: transform var(--duration__3hvldb2, 0ms) var(--easing__3hvldb3, linear) var(--delay__3hvldb1, 0ms);
+    }
+  }
+  @container style(--anchor__3hvldbc: left) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: true) {
+    .drawer_drawerClassNames_tabs_list_list__3hvldbj {
+      transform: translateX(var(--drawer-width__3hvldb6)) translateY(var(--list-translateY__3hvldbb, 0));
+    }
+  }
+  @container style(--anchor__3hvldbc: right) and style(--layoutShift__3hvldbd: false) and style(--isOpen__3hvldbf: true) {
+    .drawer_drawerClassNames_tabs_list_list__3hvldbj {
+      transform: translateX(calc(var(--drawer-width__3hvldb6) * -1)) translateY(var(--list-translateY__3hvldbb, 0));
+    }
+  }
+}

package/dist/assets/components/group/group.css

@@ -0,0 +1,33 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .group_groupClassNames_container__eq8x6h8 {
+    container-name: group_groupContainer__eq8x6h0;
+    display: contents;
+  }
+  .group_groupClassNames_group__eq8x6h9 {
+    width: fit-content;
+    display: flex;
+    gap: var(--gap__eq8x6h1);
+    padding: var(--y__eq8x6h3, 0) var(--x__eq8x6h2, 0);
+  }
+  @container style(--orientation__eq8x6h5: horizontal) and style(--reverse__eq8x6h6: false) {
+    .group_groupClassNames_group__eq8x6h9 {
+      flex-direction: row;
+    }
+  }
+  @container style(--orientation__eq8x6h5: horizontal) and style(--reverse__eq8x6h6: true) {
+    .group_groupClassNames_group__eq8x6h9 {
+      flex-direction: row-reverse;
+    }
+  }
+  @container style(--orientation__eq8x6h5: vertical) and style(--reverse__eq8x6h6: false) {
+    .group_groupClassNames_group__eq8x6h9 {
+      flex-direction: column;
+    }
+  }
+  @container style(--orientation__eq8x6h5: vertical) and style(--reverse__eq8x6h6: true) {
+    .group_groupClassNames_group__eq8x6h9 {
+      flex-direction: column-reverse;
+    }
+  }
+}

package/dist/assets/components/icon/icon.css

@@ -0,0 +1,19 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .icon_iconClassNames_container__oeqjzpa {
+    container-name: icon_iconContainer__oeqjzp0;
+    display: contents;
+  }
+  .icon_iconClassNames_icon__oeqjzpb {
+    width: var(--width__oeqjzp4, auto);
+    height: var(--height__oeqjzp5, var(--width__oeqjzp4, auto));
+    color: var(--color__oeqjzp6, var(--color__oeqjzp1, inherit));
+    fill: var(--fill__oeqjzp7, var(--fill__oeqjzp2, none));
+    stroke: var(--stroke__oeqjzp9, var(--stroke__oeqjzp3, none));
+    overflow: hidden;
+  }
+  .icon_iconClassNames_icon__oeqjzpb > svg {
+    width: 100%;
+    height: 100%;
+  }
+}

package/dist/assets/components/input/input.css

@@ -0,0 +1,29 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .input_inputClassNames_container__6yc0ril {
+    container-name: input_inputContainer__6yc0ri0;
+    display: contents;
+  }
+  .input_inputClassNames_sizer__6yc0rim {
+    min-width: var(--minWidth__6yc0ri4, auto);
+    width: var(--width__6yc0ri5, 100%);
+    max-width: var(--maxWidth__6yc0ri6, 100%);
+  }
+  .input_inputClassNames_input__6yc0rin {
+    width: 100%;
+    padding: var(--y__6yc0ri8, 0) var(--x__6yc0ri7, 0);
+    border: 1px solid var(--border__6yc0ri2, transparent);
+    border-radius: var(--md__ljimwq3e);
+    background: var(--background__6yc0ri1);
+    font-family: var(--mono__ljimwq3i);
+    color: var(--color__6yc0ri3);
+  }
+  .input_inputClassNames_input__6yc0rin::-webkit-inner-spin-button {
+    display: none;
+  }
+  @container style(--isDisabled__6yc0ric: true) {
+    .input_inputClassNames_input__6yc0rin {
+      cursor: not-allowed;
+    }
+  }
+}

package/dist/assets/components/menu/menu.css

@@ -0,0 +1,85 @@
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .menu_menuClassNames_menu_container__dpszds19 {
+    container-name: menu_menuContainers_menu__dpszds0;
+    display: block;
+  }
+  .menu_menuClassNames_menu_menu__dpszds1a {
+    min-width: var(--menu-minWidth__dpszdsv, var(--trigger-width));
+    padding: var(--menu-y__dpszdsx, 0) var(--menu-x__dpszdsw, 0);
+    border-radius: var(--sm__ljimwq3d);
+  }
+  .menu_menuClassNames_list_container__dpszds1b {
+    container-name: menu_menuContainers_list__dpszds1;
+    display: contents;
+  }
+  .menu_menuClassNames_list_section__dpszds1d {
+    padding: var(--section-y__dpszds11, 0) var(--section-x__dpszds10, 0);
+  }
+  .menu_menuClassNames_list_header__dpszds1e {
+    padding: var(--header-y__dpszds13, var(--item-y__dpszds17, 0)) var(--header-x__dpszds12, var(--item-x__dpszds16, 0));
+    border: 1px solid transparent;
+    background: var(--header-background__dpszdsm);
+    color: var(--header-color__dpszdso);
+  }
+  .menu_menuClassNames_list_separator__dpszds1f {
+    height: 1px;
+    margin: var(--separator-y__dpszds15, 0) var(--separator-x__dpszds14, 0);
+    background: var(--separator__dpszdsp);
+  }
+  .menu_menuClassNames_item_container__dpszds1g {
+    container-name: menu_menuContainers_item__dpszds2;
+  }
+  .menu_menuClassNames_item_item__dpszds1h {
+    display: grid;
+    grid-template-areas: "icon label space action" "icon description space action";
+    grid-template-columns: auto auto 1fr auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    gap: var(--item-gap__dpszds18);
+    padding: var(--item-y__dpszds17, 0) var(--item-x__dpszds16, 0);
+    border: 1px solid var(--item-border__dpszdsr, transparent);
+    background: var(--item-background__dpszdsq);
+    color: var(--item-color__dpszdss);
+    cursor: pointer;
+  }
+  .menu_menuClassNames_item_label__dpszds1j {
+    grid-area: label;
+    color: var(--label__dpszdst);
+  }
+  .menu_menuClassNames_item_description__dpszds1k {
+    grid-area: description;
+    color: var(--description__dpszdsu, var(--label__dpszdst));
+  }
+  .menu_menuClassNames_item_shortcut__dpszds1m {
+    grid-area: action;
+  }
+  @container style(--isDisabled__dpszdsd: true) {
+    .menu_menuClassNames_item_item__dpszds1h {
+      cursor: not-allowed;
+    }
+  }
+  @container style(--hasDescription__dpszdsa: false) {
+    .menu_menuClassNames_item_label__dpszds1j {
+      grid-row-start: label;
+      grid-row-end: description;
+    }
+  }
+}
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
+  .menu_menuClassNames_list_list__dpszds1c {
+    display: flex;
+    flex-direction: column;
+    background: var(--list-background__dpszdsj);
+    padding: var(--list-y__dpszdsz, var(--v03__ljimwq2x)) var(--list-x__dpszdsy, 0);
+    border: 1px solid var(--list-border__dpszdsk, transparent);
+    border-radius: var(--sm__ljimwq3d);
+  }
+  .menu_menuClassNames_item_icon_icon__dpszds1i {
+    grid-area: icon;
+  }
+  .menu_menuClassNames_item_more_icon__dpszds1l {
+    grid-area: action;
+  }
+}