@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/features/options/index.vue

@@ -39,7 +39,7 @@ const uuids = computed(() => {
   return null;
 });
 const key = computed(() => {
-  const parts = [ui.currentDialog.value?.id ?? "no-dialog"];
+  const parts = [];
   if (typeof uuids.value === "string") {
     parts.push(uuids.value);
   } else if (uuids.value && typeof uuids.value === "object") {
@@ -90,731 +90,736 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-blokkli-item-options {
-    display: flex;
-    min-width: 100vw;
-    height: var(--bk-actions-height);
-    overflow: auto;
-}
-@media (min-width: 1024px) {
-    .bk .bk-blokkli-item-options {
-        overflow: visible;
-        border-left-width: 1px;
-        --bk-tw-border-opacity: 1;
-        border-left-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1));
-    }
+  display: flex;
+  min-width: 100vw;
+  height: var(--bk-actions-height);
+  overflow: auto;
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    overflow: visible;
+  }
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    border-left-style: var(--bk-tw-border-style);
+    border-left-width: 1px;
+  }
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    border-left-color: rgb(var(--bk-theme-mono-700) / 1);
+  }
 }
 .bk .bk-blokkli-item-options {
-    order: -9999;
-    min-width: 100%;
+  order: -9999;
+  min-width: 100%;
 }
-@media (min-width: 1024px) {
-    .bk .bk-blokkli-item-options {
-        order: 0;
-        min-width: 0px;
-    }
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    order: 0;
+  }
 }
-    .bk .bk-blokkli-item-options::-webkit-scrollbar {
-      display: none;
-    }
-    .bk .bk-blokkli-item-options:empty {
-    display: none;
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    min-width: 0px;
+  }
 }
-    .bk .bk-blokkli-item-options:not(:empty) {
-    border-bottom-width: 1px;
-    border-bottom-color: rgb(var(--bk-theme-mono-500) / 0.25);
+:is(.bk .bk-blokkli-item-options)::-webkit-scrollbar {
+  display: none;
 }
-    @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-options:not(:empty) {
-        border-bottom-width: 0;
-    }
+:is(.bk .bk-blokkli-item-options):empty {
+  display: none;
 }
-  .bk .bk-blokkli-item-options-item-content {
-    height: 100%;
-}
-  .bk .bk-blokkli-item-options-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    line-height: 20px;
-}
-  .bk .bk-blokkli-item-options-item.bk-is-disabled {
-    pointer-events: none;
-    opacity: 0.2;
-}
-  @media (min-width: 1024px) {
-    .bk .bk-blokkli-item-options-item:not(:last-child) {
-        border-right-width: 1px;
-        --bk-tw-border-opacity: 1;
-        border-right-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
-    }
-    .bk .bk-blokkli-item-options-item:last-child > div > .bk-blokkli-item-options-text input,
-        .bk .bk-blokkli-item-options-item:last-child > div > .bk-blokkli-item-options-checkbox,
-        .bk .bk-blokkli-item-options-item:last-child > div > .bk-blokkli-item-options-checkboxes {
-        border-start-end-radius: 6px;
-        border-end-end-radius: 6px;
-    }
-    .bk .bk-blokkli-item-options-group:last-child > button {
-        border-start-end-radius: 6px;
-        border-end-end-radius: 6px;
-    }
+:is(.bk .bk-blokkli-item-options):not(:empty) {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-500) / 1);
 }
-  .bk .bk-blokkli-item-options-checkbox {
-    position: relative;
-    display: inline-flex;
-    height: 100%;
-    cursor: pointer;
-    align-items: center;
-    padding-left: 10px;
-    padding-right: 10px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-text-opacity, 1));
-}
-  @media not all and (hover: none) {
-  .bk .bk-blokkli-item-options-checkbox:hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
-    }
-    }
-  .bk .bk-blokkli-item-options-checkbox input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-  .bk .bk-blokkli-item-options-checkbox input:checked + div {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-bg-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-checkbox input:checked + div::after {
-    --bk-tw-translate-x: 100%;
-    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(255 255 255 / var(--bk-tw-border-opacity, 1));
-    content: var(--bk-tw-content);
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-bg-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-checkbox > div {
-    position: relative;
-    height: 20px;
-    width: 36px;
-    flex-shrink: 0;
-    border-radius: 9999px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-checkbox > div::after {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    height: 16px;
-    width: 16px;
-    border-radius: 9999px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-content: '';
-    content: var(--bk-tw-content);
-}
-  .bk .bk-blokkli-item-options-checkbox > span {
-    display: inline-block;
-    padding-left: 10px;
-}
-  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) {
-    position: relative;
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding-left: 10px;
-    padding-right: 10px;
-    user-select: none;
-    font-size: 14px;
-    line-height: 20px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label {
-    display: flex;
-    height: 100%;
-    cursor: pointer;
-    align-items: center;
-}
-  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label input:checked + span {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
-}
-  @media not all and (hover: none) {
-        .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label:hover input:not(:checked) + span {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-blokkli-item-options):not(:empty) {
+    border-bottom-color: color-mix(in oklab, rgb(var(--bk-theme-mono-500) / 1) 25%, transparent);
+  }
+}
+@media (width >= 64rem) {
+  :is(.bk .bk-blokkli-item-options):not(:empty) {
+    border-bottom-style: var(--bk-tw-border-style);
+    border-bottom-width: 0;
+  }
+}
+.bk .bk-blokkli-item-options-item-content {
+  height: 100%;
+}
+.bk .bk-blokkli-item-options-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+.bk-is-disabled:is(.bk .bk-blokkli-item-options-item) {
+  pointer-events: none;
+  opacity: 20%;
+}
+@media (width >= 64rem) {
+  :is(.bk .bk-blokkli-item-options-item):not(:last-child) {
+    border-right-style: var(--bk-tw-border-style);
+    border-right-width: 1px;
+  }
+}
+@media (width >= 64rem) {
+  :is(.bk .bk-blokkli-item-options-item):not(:last-child) {
+    border-right-color: rgb(var(--bk-theme-mono-600) / 1);
+  }
+}
+.bk .bk-blokkli-item-options-checkbox {
+  position: relative;
+  display: inline-flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding-inline: 10px;
+  color: rgb(var(--bk-theme-mono-200) / 1);
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-checkbox):hover {
+      background-color: rgb(var(--bk-theme-mono-800) / 1);
     }
-      }
-  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label span {
-    display: inline-block;
-    border-radius: 24px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-  .bk .bk-blokkli-item-options-radios:not(.bk-is-color) > label.bk-is-muted {
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-radios.bk-is-color {
-    display: flex;
-    height: 100%;
-    align-items: stretch;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-  .bk .bk-blokkli-item-options-radios.bk-is-color label {
-    display: flex;
-    height: 100%;
-    cursor: pointer;
-    align-items: center;
-    padding-left: 5px;
-    padding-right: 5px;
-}
-  .bk .bk-blokkli-item-options-radios.bk-is-color label div {
-    position: relative;
-    height: 20px;
-    width: 20px;
-    border-radius: 9999px;
-}
-  .bk .bk-blokkli-item-options-radios.bk-is-color label input {
-    margin-right: 1px;
-    cursor: pointer;
-}
-  .bk .bk-blokkli-item-options-radios.bk-is-color label span {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    width: 100%;
-    border-radius: inherit;
-    font-size: 0px;
-    outline-style: solid;
-    outline-width: 2px;
-    outline-offset: 2px;
-    outline-color: transparent;
-}
-  @media not all and (hover: none) {
-        .bk .bk-blokkli-item-options-radios.bk-is-color label:hover input:not(:checked) + span {
-        outline-color: rgb(var(--bk-theme-mono-400) / 1);
+  }
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-checkbox):hover {
+      color: rgb(var(--bk-theme-mono-50) / 1);
     }
-      }
-  .bk .bk-blokkli-item-options-radios.bk-is-color label input {
-        opacity: 0;
-      }
-  .bk .bk-blokkli-item-options-radios.bk-is-color label input:checked + span {
-    outline-color: rgb(var(--bk-theme-mono-50) / 1);
+  }
 }
-  .bk .bk-blokkli-item-options-radios.bk-is-icons {
-    gap: 10px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+:is(.bk .bk-blokkli-item-options-checkbox) input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+:is(.bk .bk-blokkli-item-options-checkbox) input:checked + div {
+  background-color: rgb(var(--bk-theme-mono-500) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) input:checked + div)::after {
+  content: var(--bk-tw-content);
+  --bk-tw-translate-x: 100%;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) input:checked + div)::after {
+  content: var(--bk-tw-content);
+  border-color: white;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) input:checked + div)::after {
+  content: var(--bk-tw-content);
+  background-color: rgb(var(--bk-theme-mono-50) / 1);
+}
+:is(.bk .bk-blokkli-item-options-checkbox)  > div {
+  position: relative;
+  height: 20px;
+  width: 36px;
+  flex-shrink: 0;
+  border-radius: calc(infinity * 1px);
+  background-color: rgb(var(--bk-theme-mono-700) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  position: absolute;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  top: 2px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  left: 2px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  height: 16px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  width: 16px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  border-radius: calc(infinity * 1px);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  background-color: rgb(var(--bk-theme-mono-300) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  --bk-tw-content: '';
+  content: var(--bk-tw-content);
+}
+:is(.bk .bk-blokkli-item-options-checkbox)  > span {
+  display: inline-block;
+  padding-left: 10px;
+}
+.bk .bk-blokkli-item-options-radios:not(.bk-is-color) {
+  position: relative;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-inline: 10px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: rgb(var(--bk-theme-mono-50) / 1);
+  -webkit-user-select: none;
+  user-select: none;
+}
+:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color))  > label {
+  display: flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label) input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+:is(:is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label) input):checked + span {
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  color: rgb(var(--bk-theme-mono-900) / 1);
+}
+@media not all and (hover: none) {
+  :is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label):hover input:not(:checked) + span {
+    background-color: rgb(var(--bk-theme-mono-700) / 1);
+  }
 }
-  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon {
-    opacity: 0.3;
+:is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label) span {
+  display: inline-block;
+  border-radius: var(--radius-3xl, 24px);
+  padding-inline: 10px;
+  padding-block: 2px;
+}
+.bk-is-muted:is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label) {
+  color: rgb(var(--bk-theme-mono-500) / 1);
+}
+.bk .bk-blokkli-item-options-radios.bk-is-color {
+  display: flex;
+  height: 100%;
+  align-items: stretch;
+  padding-inline: 10px;
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label {
+  display: flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding-inline: 5px;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) div {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  border-radius: calc(infinity * 1px);
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) input {
+  margin-right: 1px;
+  cursor: pointer;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) span {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  font-size: 0px;
+  outline-width: 1px;
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: transparent;
+}
+@media not all and (hover: none) {
+  :is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label):hover input:not(:checked) + span {
+    outline-color: rgb(var(--bk-theme-mono-400) / 1);
+  }
 }
-  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon svg {
-    height: 24px;
-    width: auto;
-    fill: currentColor;
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) input {
+  opacity: 0;
 }
-  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon svg .bk-option-icon-fill {
-    fill: rgb(var(--bk-theme-mono-700) / 1);
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) input):checked + span {
+  outline-color: rgb(var(--bk-theme-mono-50) / 1);
 }
-  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon svg .bk-option-icon-fill-strong {
-    fill: rgb(var(--bk-theme-mono-200) / 1);
+.bk .bk-blokkli-item-options-radios.bk-is-icons {
+  gap: 10px;
+  color: white;
 }
-  .bk .bk-blokkli-item-options-radios.bk-is-icons .bk-blokkli-item-options-radios-icon svg .bk-option-icon-stroke {
-    stroke: currentColor;
+:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon {
+  opacity: 30%;
 }
-  .bk .bk-blokkli-item-options-radios.bk-is-icons input:not(:checked):hover + .bk-blokkli-item-options-radios-icon {
-    opacity: 0.5;
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon) svg {
+  height: 24px;
+  width: auto;
+  fill: currentcolor;
 }
-  .bk .bk-blokkli-item-options-radios.bk-is-icons input:checked + .bk-blokkli-item-options-radios-icon {
-    opacity: 1;
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon) svg) .bk-option-icon-fill {
+  fill: rgb(var(--bk-theme-mono-700) / 1);
 }
-  .bk .bk-blokkli-item-options-text {
-    position: relative;
-    height: 100%;
-    cursor: pointer;
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon) svg) .bk-option-icon-fill-strong {
+  fill: rgb(var(--bk-theme-mono-200) / 1);
 }
-  .bk .bk-blokkli-item-options-text input {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    width: 100%;
-    background-color: transparent;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-  .bk .bk-blokkli-item-options-text input:focus {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-shadow: 0 0 #0000;
-    --bk-tw-shadow-colored: 0 0 #0000;
-    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-}
-  .bk .bk-blokkli-item-options-text > div {
-    pointer-events: none;
-    visibility: hidden;
-    white-space: pre;
-    padding-left: 10px;
-    padding-right: 10px;
-    min-width: 100px;
-    max-width: 250px;
-    overflow: hidden;
-}
-  @media not all and (hover: none) {
-      .bk .bk-blokkli-item-options-text:hover {
-        color: var(--gin-color-primary);
-      }
-    }
-  .bk .bk-blokkli-item-options-date {
-    position: relative;
-    height: 100%;
-    cursor: pointer;
-}
-  .bk .bk-blokkli-item-options-date input {
-    height: 100%;
-    background-color: transparent;
-    padding-left: 10px;
-    padding-right: 10px;
-    accent-color: rgb(var(--bk-theme-mono-100) / 1);
-}
-  .bk .bk-blokkli-item-options-date input:focus {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-shadow: 0 0 #0000;
-    --bk-tw-shadow-colored: 0 0 #0000;
-    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-}
-  @media not all and (hover: none) {
-      .bk .bk-blokkli-item-options-date:hover {
-        color: var(--gin-color-primary);
-      }
-    }
-  .bk .bk-blokkli-item-options-radios.bk-is-grid .bk-blokkli-item-options-radios-flex {
-    position: relative;
-    margin-left: 5px;
-    margin-right: 5px;
-    display: flex;
-    height: 20px;
-    width: 60px;
-    border-width: 1px;
-    border-color: currentColor;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-radios.bk-is-grid .bk-blokkli-item-options-radios-flex > div {
-    position: relative;
-    height: 100%;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-radios.bk-is-grid .bk-blokkli-item-options-radios-flex > div:not(:last-child):after {
-          content: '';
-          position: absolute;
-          top: -1px;
-          right: 0px;
-          bottom: -1px;
-          border-right-width: 1px;
-          border-color: currentColor;
-        }
-  .bk .bk-blokkli-item-options-radios.bk-is-grid input:checked + div {
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-radios.bk-is-grid input:checked + div > div {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-radios.bk-is-grid input:checked + div > div:after {
-    --bk-tw-border-opacity: 1 !important;
-    border-right-color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-border-opacity, 1)) !important;
-}
-  @media not all and (hover: none) {
-        .bk .bk-blokkli-item-options-radios.bk-is-grid label:hover input:not(:checked) + div {
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-    }
-          .bk .bk-blokkli-item-options-radios.bk-is-grid label:hover input:not(:checked) + div > div {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-bg-opacity, 1));
-    }
-      }
-  .bk .bk-blokkli-item-options-checkboxes {
-    height: 100%;
-    padding-left: 15px;
-    padding-right: 15px;
-}
-  .bk .bk-blokkli-item-options-checkboxes.bk-is-grouped {
-    height: auto;
-    padding-left: 0px;
-    padding-right: 0px;
-}
-  .bk .bk-blokkli-item-options-checkboxes.bk-is-grouped > div {
-    position: static;
-}
-  @media not all and (hover: none) {
-  .bk .bk-blokkli-item-options-checkboxes:hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-    }
-    }
-  .bk .bk-blokkli-item-options-checkboxes button {
-    display: flex;
-    height: 100%;
-    min-width: 200px;
-    align-items: center;
-    gap: 10px;
-}
-  .bk .bk-blokkli-item-options-checkboxes button svg {
-        fill: currentColor;
-        height: 15px;
-        width: 20px;
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
-      }
-  .bk .bk-blokkli-item-options-checkboxes button > span:first-child {
-    margin-right: auto;
-}
-  .bk .bk-blokkli-item-options-checkboxes > div {
-    position: fixed;
-    left: 0px;
-    display: grid;
-    min-width: 100%;
-    overflow: hidden;
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-    bottom: 100%;
-}
-  @media (min-width: 768px) {
-  .bk .bk-blokkli-item-options-checkboxes > div {
-        position: absolute;
-        top: 100%;
-        bottom: auto;
-        border-top-left-radius: 0px;
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 4px;
-        border-bottom-left-radius: 4px;
-    }
-      }
-  .bk .bk-blokkli-item-options-checkboxes > div label {
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-  @media not all and (hover: none) {
-  .bk .bk-blokkli-item-options-checkboxes > div label:hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-    }
-        }
-  .bk .bk-blokkli-item-options-checkboxes.bk-is-active {
-    border-bottom-right-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-checkboxes.bk-is-active button svg {
-    --bk-tw-rotate: 180deg;
-    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-}
-  .bk .bk-blokkli-item-options-color {
-    position: relative;
-    display: flex;
-    height: 100%;
-    cursor: pointer;
-    align-items: center;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-  @media not all and (hover: none) {
-  .bk .bk-blokkli-item-options-color:hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-    }
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon) svg) .bk-option-icon-stroke {
+  stroke: currentcolor;
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) input:not(:checked):hover + .bk-blokkli-item-options-radios-icon {
+  opacity: 50%;
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) input:checked + .bk-blokkli-item-options-radios-icon {
+  opacity: 100%;
+}
+.bk .bk-blokkli-item-options-text {
+  position: relative;
+  height: 100%;
+  cursor: pointer;
+}
+:is(.bk .bk-blokkli-item-options-text) input {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  padding-inline: 10px;
+}
+:is(:is(.bk .bk-blokkli-item-options-text) input):focus {
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-text) input):focus {
+  --bk-tw-shadow: 0 0 #0000;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+}
+:is(:is(.bk .bk-blokkli-item-options-text) input):focus {
+  --bk-tw-outline-style: none;
+  outline-style: none;
+}
+:is(.bk .bk-blokkli-item-options-text)  > div {
+  pointer-events: none;
+  visibility: hidden;
+  padding-inline: 10px;
+  white-space: pre;
+  max-width: 250px;
+  min-width: 100px;
+  overflow: hidden;
+}
+@media not all and (hover: none) {
+  :is(.bk .bk-blokkli-item-options-text):hover {
+    color: var(--gin-color-primary);
+  }
+}
+.bk .bk-blokkli-item-options-date {
+  position: relative;
+  height: 100%;
+  cursor: pointer;
+}
+:is(.bk .bk-blokkli-item-options-date) input {
+  height: 100%;
+  background-color: transparent;
+  padding-inline: 10px;
+  accent-color: rgb(var(--bk-theme-mono-100) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-date) input):focus {
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-date) input):focus {
+  --bk-tw-shadow: 0 0 #0000;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+}
+:is(:is(.bk .bk-blokkli-item-options-date) input):focus {
+  --bk-tw-outline-style: none;
+  outline-style: none;
+}
+@media not all and (hover: none) {
+  :is(.bk .bk-blokkli-item-options-date):hover {
+    color: var(--gin-color-primary);
+  }
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) .bk-blokkli-item-options-radios-flex {
+  position: relative;
+  margin-inline: 5px;
+  display: flex;
+  height: 20px;
+  width: 60px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: currentcolor;
+  color: rgb(var(--bk-theme-mono-500) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) .bk-blokkli-item-options-radios-flex)  > div {
+  position: relative;
+  height: 100%;
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+}
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) .bk-blokkli-item-options-radios-flex) > div):not(:last-child):after {
+  content: '';
+  position: absolute;
+  top: calc(1px * -1);
+  right: 0px;
+  bottom: calc(1px * -1);
+  border-right-style: var(--bk-tw-border-style);
+  border-right-width: 1px;
+  border-color: currentcolor;
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) input:checked + div {
+  color: white;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) input:checked + div)  > div {
+  background-color: white;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) input:checked + div)  > div:after {
+  border-right-color: rgb(var(--bk-theme-mono-950) / 1) !important;
+}
+@media not all and (hover: none) {
+  :is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) label):hover input:not(:checked) + div {
+    color: rgb(var(--bk-theme-mono-300) / 1);
+  }
+  :is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) label):hover input:not(:checked) + div)  > div {
+    background-color: rgb(var(--bk-theme-mono-600) / 1);
+  }
+}
+.bk .bk-blokkli-item-options-checkboxes {
+  height: 100%;
+  padding-inline: 15px;
+}
+.bk-is-grouped:is(.bk .bk-blokkli-item-options-checkboxes) {
+  height: auto;
+  padding-inline: 0px;
+}
+.bk-is-grouped:is(.bk .bk-blokkli-item-options-checkboxes)  > div {
+  position: static;
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-checkboxes):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
     }
-  .bk .bk-blokkli-item-options-color input {
+  }
+}
+:is(.bk .bk-blokkli-item-options-checkboxes) button {
+  display: flex;
+  height: 100%;
+  min-width: 200px;
+  align-items: center;
+  gap: 10px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkboxes) button) svg {
+  fill: currentColor;
+  height: 15px;
+  width: 20px;
+  color: rgb(var(--bk-theme-mono-100) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkboxes) button)  > span:first-child {
+  margin-right: auto;
+}
+:is(.bk .bk-blokkli-item-options-checkboxes)  > div {
+  position: fixed;
+  left: 0px;
+  display: grid;
+  min-width: 100%;
+  overflow: hidden;
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
+  bottom: 100%;
+}
+@media (width >= 48rem) {
+  :is(.bk .bk-blokkli-item-options-checkboxes)  > div {
     position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-    appearance: none;
-    opacity: 0;
-}
-  .bk .bk-blokkli-item-options-color .bk-blokkli-item-options-color-preview {
-    height: 20px;
-    width: 20px;
-    border-radius: 9999px;
-}
-  .bk .bk-blokkli-item-options-color .bk-blokkli-item-options-color-label {
-    margin-left: 10px;
-    font-family: monospace;
-}
-  .bk .bk-blokkli-item-options-range {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    gap: 5px;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-  .bk .bk-blokkli-item-options-range input {
-    height: 5px;
-    width: 120px;
-    appearance: none;
-    border-radius: 9999px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-bg-opacity, 1));
-}
-  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
-  .bk .bk-blokkli-item-options-range input::-webkit-slider-thumb {
-    appearance: none;
-    border-radius: 9999px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-        width: 15px; /* Set a specific slider handle width */
-        height: 15px; /* Slider handle height */
-        cursor: pointer; /* Cursor on hover */
-}
-  .bk .bk-blokkli-item-options-range input::-moz-range-thumb {
-    border-radius: 9999px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-        width: 15px; /* Set a specific slider handle width */
-        height: 15px; /* Slider handle height */
-        cursor: pointer; /* Cursor on hover */
-}
-  .bk .bk-blokkli-item-options-range > div {
-    min-width: 40px;
-    text-align: right;
-    font-family: monospace;
-}
-  .bk .bk-blokkli-item-options-group {
-    position: relative;
-}
-  .bk .bk-blokkli-item-options-group > button {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    min-width: 200px;
-    align-items: center;
-    gap: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    font-size: 14px;
-    line-height: 20px;
-}
-  @media not all and (hover: none) {
-  .bk .bk-blokkli-item-options-group > button:hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+    top: 100%;
+    bottom: auto;
+  }
+}
+:is(:is(.bk .bk-blokkli-item-options-checkboxes) > div) label {
+  padding-block: 10px;
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(:is(:is(.bk .bk-blokkli-item-options-checkboxes) > div) label):hover {
+      background-color: rgb(var(--bk-theme-mono-800) / 1);
     }
-      }
-  .bk .bk-blokkli-item-options-group > button .bk-icon {
-    margin-left: auto;
-}
-  .bk .bk-blokkli-item-options-group > button svg {
-        fill: currentColor;
-        height: 15px;
-        width: 20px;
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
-      }
-  .bk .bk-blokkli-item-options-group.bk-is-active:last-child > button {
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
+  }
 }
-  .bk .bk-blokkli-item-options-group.bk-is-active > button {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+.bk-is-active:is(.bk .bk-blokkli-item-options-checkboxes) {
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
 }
-  .bk .bk-blokkli-item-options-group.bk-is-active > button svg {
-    --bk-tw-rotate: 180deg;
-    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+:is(.bk-is-active:is(.bk .bk-blokkli-item-options-checkboxes) button) svg {
+  rotate: 180deg;
 }
-  .bk .bk-blokkli-item-options-group-content {
-    position: absolute;
-    position: fixed;
-    left: 0px;
-    display: grid;
-    min-width: 100%;
-    overflow: hidden;
-    border-bottom-right-radius: 0px;
-    border-bottom-left-radius: 0px;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-    bottom: 100%;
-}
-  @media (min-width: 768px) {
-  .bk .bk-blokkli-item-options-group-content {
-        position: absolute;
-        top: 100%;
-        bottom: auto;
-        border-top-left-radius: 0px;
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 4px;
-        border-bottom-left-radius: 4px;
+.bk .bk-blokkli-item-options-color {
+  position: relative;
+  display: flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding-inline: 10px;
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-color):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
     }
+  }
+}
+:is(.bk .bk-blokkli-item-options-color) input {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  appearance: none;
+  opacity: 0%;
+}
+:is(.bk .bk-blokkli-item-options-color) .bk-blokkli-item-options-color-preview {
+  height: 20px;
+  width: 20px;
+  border-radius: calc(infinity * 1px);
+}
+:is(.bk .bk-blokkli-item-options-color) .bk-blokkli-item-options-color-label {
+  margin-left: 10px;
+  font-family: monospace;
+}
+.bk .bk-blokkli-item-options-range {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  gap: 5px;
+  padding-inline: 10px;
+}
+:is(.bk .bk-blokkli-item-options-range) input {
+  height: 5px;
+  width: 120px;
+  appearance: none;
+  border-radius: calc(infinity * 1px);
+  background-color: rgb(var(--bk-theme-mono-500) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-range) input)::-webkit-slider-thumb {
+  appearance: none;
+  border-radius: calc(infinity * 1px);
+  background-color: white;
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+:is(:is(.bk .bk-blokkli-item-options-range) input)::-moz-range-thumb {
+  border-radius: calc(infinity * 1px);
+  background-color: white;
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+:is(.bk .bk-blokkli-item-options-range)  > div {
+  min-width: 40px;
+  text-align: right;
+  font-family: monospace;
+}
+.bk .bk-blokkli-item-options-group {
+  position: relative;
+}
+:is(.bk .bk-blokkli-item-options-group)  > button {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  min-width: 200px;
+  align-items: center;
+  gap: 10px;
+  padding-inline: 10px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(:is(.bk .bk-blokkli-item-options-group) > button):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
     }
-  .bk .bk-blokkli-item-options-group-content > label {
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-  @media not all and (hover: none) {
-  .bk .bk-blokkli-item-options-group-content > label:hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+  }
+}
+:is(:is(.bk .bk-blokkli-item-options-group) > button) .bk-icon {
+  margin-left: auto;
+}
+:is(:is(.bk .bk-blokkli-item-options-group) > button) svg {
+  fill: currentColor;
+  height: 15px;
+  width: 20px;
+  color: rgb(var(--bk-theme-mono-100) / 1);
+}
+.bk-is-active:is(.bk .bk-blokkli-item-options-group):last-child  > button {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.bk-is-active:is(.bk .bk-blokkli-item-options-group)  > button {
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+}
+:is(.bk-is-active:is(.bk .bk-blokkli-item-options-group) > button) svg {
+  rotate: 180deg;
+}
+.bk .bk-blokkli-item-options-group-content {
+  position: absolute;
+  position: fixed;
+  left: 0px;
+  display: grid;
+  min-width: 100%;
+  overflow: hidden;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
+  bottom: 100%;
+}
+@media (width >= 48rem) {
+  .bk .bk-blokkli-item-options-group-content {
+    position: absolute;
+    top: 100%;
+    bottom: auto;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+}
+:is(.bk .bk-blokkli-item-options-group-content)  > label {
+  padding-block: 10px;
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(:is(.bk .bk-blokkli-item-options-group-content) > label):hover {
+      background-color: rgb(var(--bk-theme-mono-800) / 1);
     }
-      }
-  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item-content {
-    height: 50px;
-}
-  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item-content.bk-is-grouped {
-    height: auto;
-    min-height: 50px;
-    width: 100%;
-}
-  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item-content.bk-is-grouped .bk-blokkli-item-options-checkbox {
-    height: 50px;
-    width: 100%;
-    white-space: nowrap;
-}
-  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item:not(:last-child) {
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-group-content .bk-blokkli-item-options-item .bk-blokkli-item-options-item-label {
-    margin-top: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    font-weight: 600;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-complex-type {
-    display: flex;
-    height: 100%;
-    cursor: pointer;
-    align-items: center;
-    gap: 10px;
-    white-space: nowrap;
-    padding-left: 10px;
-    padding-right: 10px;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 500;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-  @media not all and (hover: none) {
-  .bk .bk-blokkli-item-options-complex-type:hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-        --bk-tw-text-opacity: 1;
-        color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
+  }
+}
+:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item-content {
+  height: 50px;
+}
+.bk-is-grouped:is(:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item-content) {
+  height: auto;
+  min-height: 50px;
+  width: 100%;
+}
+.bk-is-grouped:is(:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item-content) .bk-blokkli-item-options-checkbox {
+  height: 50px;
+  width: 100%;
+  white-space: nowrap;
+}
+:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+:is(:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item):not(:last-child) {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-600) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item) .bk-blokkli-item-options-item-label {
+  margin-top: 10px;
+  padding-inline: 10px;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-300) / 1);
+}
+.bk .bk-blokkli-item-options-complex-type {
+  display: flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  gap: 10px;
+  padding-inline: 10px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  white-space: nowrap;
+  color: rgb(var(--bk-theme-mono-300) / 1);
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-complex-type):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
     }
+  }
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-complex-type):hover {
+      color: rgb(var(--bk-theme-mono-50) / 1);
     }
-  .bk .bk-blokkli-item-options-complex-type .bk-icon {
-    width: 24px;
-    height: 24px;
-    fill: currentColor;
-}
-  .bk .bk-blokkli-item-options-number {
-    position: relative;
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-  .bk .bk-blokkli-item-options-number input {
-    height: 100%;
-    appearance: none;
-    background-color: transparent;
-    text-align: center;
-    font-family: monospace;
-}
-  .bk .bk-blokkli-item-options-number input:focus {
-    border-style: none;
-    --bk-tw-shadow: 0 0 #0000;
-    --bk-tw-shadow-colored: 0 0 #0000;
-    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
-    outline-width: 0px;
-}
-  .bk .bk-blokkli-item-options-number input::-webkit-inner-spin-button {
-    display: none;
-    height: 0px;
-    width: 0px;
-    appearance: none;
-}
-  .bk .bk-blokkli-item-options-number button {
-    display: flex;
-    height: 20px;
-    width: 20px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-}
-  .bk .bk-blokkli-item-options-number button:hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-number button[disabled] {
-    pointer-events: none;
-    background-color: transparent;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-blokkli-item-options-number button .bk-icon {
-    height: 15px;
-    width: 15px;
-    fill: currentColor;
+  }
+}
+:is(.bk .bk-blokkli-item-options-complex-type) .bk-icon {
+  width: 24px;
+  height: 24px;
+  fill: currentcolor;
+}
+.bk .bk-blokkli-item-options-number {
+  position: relative;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-inline: 10px;
+}
+:is(.bk .bk-blokkli-item-options-number) input {
+  height: 100%;
+  appearance: none;
+  background-color: transparent;
+  text-align: center;
+  font-family: monospace;
+}
+:is(:is(.bk .bk-blokkli-item-options-number) input):focus {
+  --bk-tw-border-style: none;
+  border-style: none;
+}
+:is(:is(.bk .bk-blokkli-item-options-number) input):focus {
+  --bk-tw-shadow: 0 0 #0000;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+}
+:is(:is(.bk .bk-blokkli-item-options-number) input):focus {
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 0px;
+}
+:is(:is(.bk .bk-blokkli-item-options-number) input)::-webkit-inner-spin-button {
+  display: none;
+  height: 0px;
+  width: 0px;
+  appearance: none;
+}
+:is(.bk .bk-blokkli-item-options-number) button {
+  display: flex;
+  height: 20px;
+  width: 20px;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(infinity * 1px);
+}
+@media (hover: hover) {
+  :is(:is(.bk .bk-blokkli-item-options-number) button):hover {
+    background-color: rgb(var(--bk-theme-mono-700) / 1);
+  }
+}
+[disabled]:is(:is(.bk .bk-blokkli-item-options-number) button) {
+  pointer-events: none;
+  background-color: transparent;
+  color: rgb(var(--bk-theme-mono-600) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-number) button) .bk-icon {
+  height: 15px;
+  width: 15px;
+  fill: currentcolor;
 }
 </style>