@revotech-group/revotech-ui-kit 0.2.2 → 0.2.4

package/dist/library.css

@@ -380,6 +380,7 @@
 
   /* * NEGATIVE * */
   --sb-ref-space-neg-1: calc(var(--sb-ref-space) * -1);
+  --sb-ref-space-neg-1-5: calc(var(--sb-ref-space) * -1.5);
   --sb-ref-space-neg-2: calc(var(--sb-ref-space) * -2);
   --sb-ref-space-neg-3: calc(var(--sb-ref-space) * -3);
 
@@ -746,6 +747,8 @@
   --sb-sem-color-border-invalid: var(--sb-sem-color-role-destructive);
   --sb-sem-color-border-invalid-secondary: var(--sb-sem-color-role-destructive);
 
+  --sb-sem-color-border-checked: var(--sb-sem-color-role-brand) / var(--sb-ref-opacity-30);
+
   --sb-sem-color-border-secondary: var(--sb-ref-color-base-200);
 
   --sb-sem-color-border-tertiary: var(--sb-ref-color-transparent);
@@ -1067,6 +1070,8 @@
   --sb-sem-color-border-invalid: var(--sb-sem-color-role-destructive);
   --sb-sem-color-border-invalid-secondary: var(--sb-sem-color-role-destructive) / var(--sb-ref-opacity-50);
 
+  --sb-sem-color-border-checked: var(--sb-sem-color-role-brand) / var(--sb-ref-opacity-20);
+
   --sb-sem-color-border-secondary: var(--sb-ref-color-white) /
     var(--sb-ref-opacity-15);
 
@@ -1217,8 +1222,17 @@
  * --------------------------------------------------
  */
 :root {
+  --sb-sem-font-form-heading-size: var(--sb-ref-font-size-base);
+  --sb-sem-font-form-heading-line-height: var(--sb-ref-font-line-height-of-base);
+  --sb-sem-font-form-heading-weight: var(--sb-ref-font-weight-medium);
+
+  --sb-sem-font-form-content-line-height: var(--sb-ref-font-line-height-short);
+
+  --sb-sem-font-form-description-line-height: var(--sb-ref-font-line-height-normal);
+
   --sb-sem-font-form-label-size: var(--sb-ref-font-size-sm);
   --sb-sem-font-form-label-line-height: var(--sb-ref-font-line-height-shortest);
+  --sb-sem-font-form-label-line-height-alt: var(--sb-ref-font-line-height-short);
   --sb-sem-font-form-label-weight: var(--sb-ref-font-weight-medium);
 
   --sb-sem-font-form-size: var(--sb-ref-font-size-sm);
@@ -1685,6 +1699,7 @@
   /* Used for dropdown menu separator and select separator */
   --sb-sem-space-divider-mx: var(--sb-ref-space-neg-1);
   --sb-sem-space-divider-my: var(--sb-ref-space-1);
+  --sb-sem-space-divider-h: var(--sb-ref-space-5);
 }
 /*
  * --------------------------------------------------
@@ -1711,12 +1726,14 @@
 }
 /*
  * --------------------------------------------------
- *  FORM: label, input otp, command, radio group, select, input, textarea
+ *  FORM: label, input otp, command, radio group, select, input, textarea, field
  * --------------------------------------------------
  */
 :root {
   --sb-sem-space-form-gap: var(--sb-ref-space-3);
   --sb-sem-space-form-gap-sm: var(--sb-ref-space-2);
+  --sb-sem-space-form-gap-lg: var(--sb-ref-space-4);
+  --sb-sem-space-form-gap-xl: var(--sb-ref-space-5);
 
   --sb-sem-space-form-p: var(--sb-ref-space-3);
   --sb-sem-space-form-p-sm: var(--sb-ref-space-2);
@@ -3420,6 +3437,162 @@
   );
   --sb-dropdown-menu-shortcut-color-text: var(--sb-sem-color-text-secondary);
 }
+/*
+ * -------------------------
+ *  FIELD: rtg-field-*
+ * -------------------------
+ */
+/*
+ * ===========================================================================
+ *  FIELD COMPONENT TOKENS
+ *  rtg-field-*
+ * ===========================================================================
+ */
+/*
+ * --------------------------------------------------
+ *  FIELD SET
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-set-space-gap: var(--sb-sem-space-form-gap-lg);
+  --rtg-field-set-space-gap-has-checkbox-group: var(--sb-sem-space-form-gap);
+  --rtg-field-set-space-gap-has-radio-group: var(--sb-sem-space-form-gap);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD LEGEND
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-legend-space-mb: var(--sb-ref-space-1-5);
+  --rtg-field-legend-font-weight: var(--sb-sem-font-form-heading-weight);
+
+  /* * VARIANTS * */
+  /* LABEL */
+  --rtg-field-legend-label-font-size: var(--sb-sem-font-form-label-size);
+  --rtg-field-legend-label-font-line-height: var(--sb-sem-font-form-label-line-height);
+
+  /* LEGEND */
+  --rtg-field-legend-legend-font-size: var(--sb-sem-font-form-heading-size);
+  --rtg-field-legend-legend-font-line-height: var(--sb-sem-font-form-heading-line-height);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD GROUP
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-group-space-gap: var(--sb-sem-space-form-gap-xl);
+
+  --rtg-field-group-space-gap-is-checkbox-group: var(--sb-sem-space-form-gap);
+  --rtg-field-group-space-gap-is-nested: var(--sb-sem-space-form-gap-lg);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-space-gap: var(--sb-sem-space-form-gap-sm);
+
+  --rtg-field-color-text-invalid: hsl(var(--sb-sem-color-text-destructive));
+
+  --rtg-field-space-p-in-label: var(--sb-ref-space-2-5);
+
+  /* * CHECKBOX CHILD * */
+  --rtg-field-checkbox-space-mt: 1px;
+
+  /* * RADIO CHILD * */
+  --rtg-field-radio-space-mt: 1px;
+}
+/*
+ * --------------------------------------------------
+ *  FIELD CONTENT
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-content-space-gap: var(--sb-ref-space-0-5);
+  --rtg-field-content-font-line-height: var(--sb-sem-font-form-content-line-height);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD LABEL
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-label-space-gap: var(--sb-sem-space-form-gap-sm);
+  --rtg-field-label-font-line-height: var(--sb-sem-font-form-label-line-height-alt);
+
+  --rtg-field-label-width-border-has-field: var(--sb-sem-width-border);
+  --rtg-field-label-color-border-has-field: hsl(var(--sb-sem-color-border));
+  --rtg-field-label-radius-has-field: var(--sb-sem-radius-form-lg);
+
+  --rtg-field-label-color-bg-has-checked: hsl(var(--sb-sem-color-bg-surface-brand));
+  --rtg-field-label-color-border-has-checked: hsl(var(--sb-sem-color-border-checked));
+
+  --rtg-field-label-opacity-disabled: var(--sb-sem-opacity-disabled);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD TITLE
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-title-space-gap: var(--sb-sem-space-form-gap-sm);
+
+  --rtg-field-title-font-size: var(--sb-sem-font-form-label-size);
+  --rtg-field-title-font-line-height: var(--sb-sem-font-form-label-line-height-alt);
+  --rtg-field-title-font-weight: var(--sb-sem-font-form-label-weight);
+
+  --rtg-field-title-opacity-disabled: var(--sb-sem-opacity-disabled);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD DESCRIPTION
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-description-font-size: var(--sb-sem-font-form-size);
+  --rtg-field-description-font-line-height: var(--sb-sem-font-form-description-line-height);
+  --rtg-field-description-font-weight: var(--sb-sem-font-form-weight);
+  --rtg-field-description-color-text: hsl(var(--sb-sem-color-text-secondary));
+
+  --rtg-field-description-space-mt-after-legend: var(--sb-ref-space-neg-1-5);
+  --rtg-field-description-space-mt-is-last: var(--sb-ref-space-0);
+  --rtg-field-description-space-mt-is-2-last: var(--sb-ref-space-neg-1);
+
+  --rtg-field-description-link-color-text-hover: hsl(var(--sb-sem-color-text-brand));
+}
+/*
+ * --------------------------------------------------
+ *  FIELD SEPARATOR
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-separator-space-my: var(--sb-ref-space-neg-2);
+  --rtg-field-separator-space-h: var(--sb-sem-space-divider-h);
+  --rtg-field-separator-font-size: var(--sb-sem-font-form-size);
+  --rtg-field-separator-font-line-height: var(--sb-sem-font-form-line-height);
+
+  /* * CONTENT * */
+  --rtg-field-separator-content-space-px: var(--sb-sem-space-form-gap-sm);
+  --rtg-field-separator-content-color-text: hsl(var(--sb-sem-color-text-secondary));
+  --rtg-field-separator-content-color-bg: hsl(var(--sb-sem-color-bg));
+}
+/*
+ * --------------------------------------------------
+ *  FIELD ERROR
+ * --------------------------------------------------
+ */
+:root {
+  --rtg-field-error-font-size: var(--sb-sem-font-form-size);
+  --rtg-field-error-font-line-height: var(--sb-sem-font-form-line-height);
+  --rtg-field-error-font-weight: var(--sb-sem-font-form-weight);
+  --rtg-field-error-color-text: hsl(var(--sb-sem-color-text-destructive));
+
+  --rtg-field-error-content-space-gap: var(--sb-ref-space-1);
+  --rtg-field-error-content-space-ml: var(--sb-ref-space-4);
+}
 /*
  * -------------------------
  *  HOVER CARD: sb-hover-card-*
@@ -5684,8 +5857,7 @@ rtg-checkbox > [data-slot="checkbox"]:disabled {
   opacity: var(--rtg-checkbox-opacity-disabled);
   cursor: not-allowed;
 }
-/* TODO: This signature should reference rtg-field (it does not exist yet) */
-[data-slot="field"]:has([disabled]) rtg-checkbox > [data-slot="checkbox"] {
+rtg-field > [data-slot="field"][data-disabled] rtg-checkbox > [data-slot="checkbox"] {
   opacity: var(--rtg-checkbox-opacity-disabled);
 }
 /* * AFTER (::after) * */
@@ -5725,6 +5897,315 @@ rtg-checkbox > [data-slot="checkbox-input"] {
   transform: translateX(-100%);
   pointer-events: none;
 }
+/*
+ * ===========================================================================
+ *  FIELD COMPONENT STYLES
+ * ===========================================================================
+ */
+/*
+ * --------------------------------------------------
+ *  FIELD SET
+ * --------------------------------------------------
+ */
+rtg-field-set > [data-slot="field-set"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rtg-field-set-space-gap);
+}
+rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="checkbox"]) {
+  gap: var(--rtg-field-set-space-gap-has-checkbox-group);
+}
+rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="radio"]) {
+  gap: var(--rtg-field-set-space-gap-has-radio-group);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD LEGEND
+ * --------------------------------------------------
+ */
+rtg-field-legend {
+  margin-bottom: calc(var(--rtg-field-legend-space-mb) - var(--rtg-field-set-space-gap));
+}
+rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="checkbox"]) rtg-field-legend {
+  margin-bottom: calc(var(--rtg-field-legend-space-mb) - var(--rtg-field-set-space-gap-has-checkbox-group));
+}
+rtg-field-set > [data-slot="field-set"]:has(> rtg-field-group[data-slot="field-group"][data-type="radio"]) rtg-field-legend {
+  margin-bottom: calc(var(--rtg-field-legend-space-mb) - var(--rtg-field-set-space-gap-has-radio-group));
+}
+rtg-field-legend > [data-slot="field-legend"] {
+  font-weight: var(--rtg-field-legend-font-weight);
+}
+/* * VARIANTS * */
+rtg-field-legend > [data-slot="field-legend"][data-variant="label"] {
+  font-size: var(--rtg-field-legend-label-font-size);
+  line-height: var(--rtg-field-legend-label-font-line-height);
+}
+rtg-field-legend > [data-slot="field-legend"][data-variant="legend"] {
+  font-size: var(--rtg-field-legend-legend-font-size);
+  line-height: var(--rtg-field-legend-legend-font-line-height);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD GROUP
+ * --------------------------------------------------
+ */
+rtg-field-group {
+  width: 100%;
+
+  container-name: field-group;
+  container-type: inline-size;
+}
+rtg-field-group > [data-slot="field-group"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rtg-field-group-space-gap);
+  width: 100%;
+}
+rtg-field-group > [data-slot="field-group"][data-type="checkbox"] {
+  gap: var(--rtg-field-group-space-gap-is-checkbox-group);
+}
+rtg-field-group > [data-slot="field-group"] > rtg-field-group > [data-slot="field-group"] {
+  gap: var(--rtg-field-group-space-gap-is-nested);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD
+ * --------------------------------------------------
+ */
+rtg-field {
+  width: 100%;
+}
+rtg-field > [data-slot="field"] {
+  display: flex;
+  gap: var(--rtg-field-space-gap);
+  width: 100%;
+}
+/* INVALID */
+rtg-field > [data-slot="field"][data-invalid="true"] {
+  color: var(--rtg-field-color-text-invalid);
+}
+/* * ORIENTATIONS * */
+/* VERTICAL */
+rtg-field > [data-slot="field"][data-orientation="vertical"] {
+  flex-direction: column;
+}
+rtg-field > [data-slot="field"][data-orientation="vertical"] > * {
+  width: 100%;
+}
+rtg-field > [data-slot="field"][data-orientation="vertical"] > .rtg-sr-only {
+  width: auto;
+}
+/* HORIZONTAL */
+rtg-field > [data-slot="field"][data-orientation="horizontal"] {
+  flex-direction: row;
+  align-items: center;
+}
+rtg-field > [data-slot="field"][data-orientation="horizontal"] > *:has(> [data-slot="field-label"]) {
+  flex: auto;
+}
+rtg-field > [data-slot="field"][data-orientation="horizontal"]:has(> rtg-field-content) {
+  align-items: start;
+}
+/* Checkbox Child */
+rtg-field > [data-slot="field"][data-orientation="horizontal"]:has(> rtg-field-content) > *:has(> [role="checkbox"]) {
+  margin-top: var(--rtg-field-checkbox-space-mt);
+}
+/* Radio Child */
+rtg-field > [data-slot="field"][data-orientation="horizontal"]:has(> rtg-field-content) > *:has(> [role="radio"]) {
+  margin-top: var(--rtg-field-radio-space-mt);
+}
+/* RESPONSIVE */
+rtg-field > [data-slot="field"][data-orientation="responsive"] {
+  flex-direction: column;
+}
+rtg-field > [data-slot="field"][data-orientation="responsive"] > * {
+  width: 100%;
+}
+rtg-field > [data-slot="field"][data-orientation="responsive"] > .rtg-sr-only {
+  width: auto;
+}
+@container field-group (width >= 28rem) {
+  rtg-field > [data-slot="field"][data-orientation="responsive"] {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  rtg-field > [data-slot="field"][data-orientation="responsive"] > * {
+    width: auto;
+  }
+
+  rtg-field > [data-slot="field"][data-orientation="responsive"] > *:has(> [data-slot="field-label"]) {
+    flex: auto;
+  }
+
+  rtg-field > [data-slot="field"][data-orientation="responsive"]:has(> rtg-field-content) {
+    align-items: start;
+  }
+
+  /* Checkbox Child */
+  rtg-field > [data-slot="field"][data-orientation="responsive"]:has(> rtg-field-content) > *:has(> [role="checkbox"]) {
+    margin-top: var(--rtg-field-checkbox-space-mt);
+  }
+
+  /* Radio Child */
+  rtg-field > [data-slot="field"][data-orientation="responsive"]:has(> rtg-field-content) > *:has(> [role="radio"]) {
+    margin-top: var(--rtg-field-radio-space-mt);
+  }
+}
+/*
+ * --------------------------------------------------
+ *  FIELD CONTENT
+ * --------------------------------------------------
+ */
+rtg-field-content {
+  flex: 1;
+}
+rtg-field-content > [data-slot="field-content"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rtg-field-content-space-gap);
+
+  line-height: var(--rtg-field-content-font-line-height);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD LABEL
+ * --------------------------------------------------
+ */
+rtg-field-label > [data-slot="field-label"] > [data-slot="label"] {
+  display: flex;
+  gap: var(--rtg-field-label-space-gap);
+  width: -moz-fit-content;
+  width: fit-content;
+  line-height: var(--rtg-field-label-font-line-height);
+}
+rtg-field-label > [data-slot="field-label"] > [data-slot="label"]:has(> rtg-field) {
+  flex-direction: column;
+  width: 100%;
+  border: var(--rtg-field-label-width-border-has-field) solid var(--rtg-field-label-color-border-has-field);
+  border-radius: var(--rtg-field-label-radius-has-field);
+}
+rtg-field-label > [data-slot="field-label"] > [data-slot="label"]:has([data-state="checked"]) {
+  background-color: var(--rtg-field-label-color-bg-has-checked);
+  border-color: var(--rtg-field-label-color-border-has-checked);
+}
+rtg-field > [data-slot="field"][data-disabled="true"] rtg-field-label > [data-slot="field-label"] > [data-slot="label"] {
+  opacity: var(--rtg-field-label-opacity-disabled);
+}
+/* * FIELD CHILD * */
+rtg-field-label > [data-slot="field-label"] > [data-slot="label"] > rtg-field > [data-slot="field"] {
+  padding: var(--rtg-field-space-p-in-label);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD TITLE
+ * --------------------------------------------------
+ */
+rtg-field-title > [data-slot="field-label"] {
+  display: flex;
+  align-items: center;
+  gap: var(--rtg-field-title-space-gap);
+
+  width: -moz-fit-content;
+
+  width: fit-content;
+
+  font-size: var(--rtg-field-title-font-size);
+  line-height: var(--rtg-field-title-font-line-height);
+  font-weight: var(--rtg-field-title-font-weight);
+}
+rtg-field > [data-slot="field"][data-disabled="true"] rtg-field-title > [data-slot="field-label"] {
+  opacity: var(--rtg-field-title-opacity-disabled);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD DESCRIPTION
+ * --------------------------------------------------
+ */
+rtg-field-description > [data-slot="field-description"] {
+  font-size: var(--rtg-field-description-font-size);
+  line-height: var(--rtg-field-description-font-line-height);
+  font-weight: var(--rtg-field-description-font-weight);
+  color: var(--rtg-field-description-color-text);
+  text-align: left;
+}
+rtg-field-legend:has(> [data-slot="field-legend"][data-variant="legend"]) + rtg-field-description {
+  margin-top: var(--rtg-field-description-space-mt-after-legend);
+  margin-top: calc(var(--rtg-field-description-space-mt-after-legend));
+}
+rtg-field-description:nth-last-child(2) {
+  margin-top: var(--rtg-field-description-space-mt-is-2-last);
+}
+rtg-field-description > [data-slot="field-description"] > a {
+  text-decoration-line: underline;
+  text-underline-offset: 4px;
+}
+rtg-field-description > [data-slot="field-description"] > a:hover {
+  color: var(--rtg-field-description-link-color-text-hover);
+}
+rtg-field > [data-slot="field"][data-orientation="horizontal"] > rtg-field-description > [data-slot="field-description"] {
+  text-wrap: balance;
+}
+/*
+ * --------------------------------------------------
+ *  FIELD SEPARATOR
+ * --------------------------------------------------
+ */
+rtg-field-separator > [data-slot="field-separator"] {
+  position: relative;
+
+  margin-top: var(--rtg-field-separator-space-my);
+  margin-bottom: var(--rtg-field-separator-space-my);
+
+  height: var(--rtg-field-separator-space-h);
+
+  font-size: var(--rtg-field-separator-font-size);
+  line-height: var(--rtg-field-separator-font-line-height);
+}
+/* * SEPARATOR * */
+rtg-field-separator > [data-slot="field-separator"] > rtg-separator {
+  position: absolute;
+  inset: 0;
+  top: calc(0.5 * 100%);
+}
+/* * CONTENT * */
+rtg-field-separator > [data-slot="field-separator"] > [data-slot="field-separator-content"] {
+  display: block;
+  position: relative;
+
+  padding-left: var(--rtg-field-separator-content-space-px);
+  padding-right: var(--rtg-field-separator-content-space-px);
+  margin-left: auto;
+  margin-right: auto;
+
+  width: -moz-fit-content;
+
+  width: fit-content;
+
+  color: var(--rtg-field-separator-content-color-text);
+
+  background-color: var(--rtg-field-separator-content-color-bg);
+}
+/*
+ * --------------------------------------------------
+ *  FIELD ERROR
+ * --------------------------------------------------
+ */
+rtg-field-error > [data-slot="field-error"] {
+  font-size: var(--rtg-field-error-font-size);
+  line-height: var(--rtg-field-error-font-line-height);
+  font-weight: var(--rtg-field-error-font-weight);
+  color: var(--rtg-field-error-color-text);
+}
+rtg-field-error > [data-slot="field-error"] > [data-slot="field-error-content"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rtg-field-error-content-space-gap);
+
+  margin-left: var(--rtg-field-error-content-space-ml);
+
+  list-style-type: disc;
+}
 /*
  * ===========================================================================
  *  INPUT COMPONENT STYLES
@@ -6011,16 +6492,15 @@ rtg-label > [data-slot="label"] {
   line-height: var(--rtg-label-font-line-height);
   font-weight: var(--rtg-label-font-weight);
 }
-/* TODO: This signature should reference rtg-field (it does not exist yet) */
-[data-slot="field"]:has([disabled]) > rtg-label > [data-slot="label"] {
+/* DISABLED */
+*:has([disabled]) > rtg-label > [data-slot="label"] {
   opacity: var(--rtg-label-opacity-disabled);
   pointer-events: none;
 }
-/* TODO: must review this rule - it doesn't work as expected */
-/* :has(> [disabled]) ~ rtg-label > [data-slot="label"] {
+*:has(> [disabled]) + rtg-label > [data-slot="label"] {
   opacity: var(--rtg-label-opacity-disabled);
   cursor: not-allowed;
-} */
+}
 /*
  * ===========================================================================
  *  SEPARATOR COMPONENT STYLES
@@ -6348,7 +6828,7 @@ rtg-tabs-content > [data-slot="tabs-content"][data-state="active"] {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */
+/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -7295,6 +7775,9 @@ body {
 .rtg-w-56 {
   width: 14rem;
 }
+.rtg-w-72 {
+  width: 18rem;
+}
 .rtg-w-8 {
   width: 2rem;
 }
@@ -7453,6 +7936,9 @@ body {
 .rtg-max-w-dialog-content-space-max-w-sm {
   max-width: var(--sb-dialog-content-space-max-w-sm);
 }
+.rtg-max-w-lg {
+  max-width: 32rem;
+}
 .rtg-max-w-md {
   max-width: 28rem;
 }
@@ -7580,6 +8066,9 @@ body {
      -moz-user-select: none;
           user-select: none;
 }
+.rtg-resize-none {
+  resize: none;
+}
 .rtg-scroll-my-1 {
   scroll-margin-top: 0.25rem;
   scroll-margin-bottom: 0.25rem;
@@ -9176,6 +9665,9 @@ body {
 .rtg-font-menubar-trigger-font-weight {
   font-weight: var(--sb-menubar-trigger-font-weight);
 }
+.rtg-font-normal {
+  font-weight: 400;
+}
 .rtg-font-semibold {
   font-weight: 600;
 }
@@ -10790,9 +11282,6 @@ body {
 .\[\&_\[rtgcmd-item\]_svg\]\:rtg-w-5 [rtgcmd-item] svg {
   width: 1.25rem;
 }
-.\[\&_button\]\:rtg-w-full button {
-  width: 100%;
-}
 .\[\&_svg\:not\(\[class\*\=\"rtg-size-\"\]\)\]\:rtg-size-button-icon-space-size svg:not([class*="rtg-size-"]) {
   width: var(--rtg-button-icon-space-size-default);
   height: var(--rtg-button-icon-space-size-default);