@dragunio/fe-libs 0.1.4 → 0.1.6

package/dist/styles.css

@@ -327,6 +327,10 @@ table[data-fe-table] tbody tr:hover {
   font: inherit;
   line-height: 1.25;
 }
+.fe-toggle--label-top {
+  flex-direction: column;
+  align-items: flex-start;
+}
 .fe-toggle__input {
   position: absolute;
   width: 1px;
@@ -347,7 +351,7 @@ table[data-fe-table] tbody tr:hover {
   border-radius: 999px;
   background: var(--fe-toggle-off);
   box-shadow: inset 0 0 0 1px rgb(16 24 40 / 8%);
-  transition: background-color .18s ease;
+  transition: background-color 0.18s ease;
 }
 .fe-toggle__control::after {
   width: 18px;
@@ -356,7 +360,7 @@ table[data-fe-table] tbody tr:hover {
   background: #fff;
   box-shadow: 0 1px 2px rgb(16 24 40 / 22%);
   content: "";
-  transition: transform .18s ease;
+  transition: transform 0.18s ease;
 }
 .fe-toggle__input:checked + .fe-toggle__control {
   background: var(--fe-toggle-color);
@@ -369,7 +373,7 @@ table[data-fe-table] tbody tr:hover {
   outline-offset: 2px;
 }
 .fe-toggle__input:disabled + .fe-toggle__control {
-  opacity: .52;
+  opacity: 0.52;
 }
 .fe-toggle:has(.fe-toggle__input:disabled) {
   cursor: not-allowed;
@@ -507,23 +511,52 @@ table[data-fe-table] tbody tr:hover {
   }
 }
 
-/* packages/form-controls/src/styles.css */
-.fe-selection,
-.fe-number-input,
-.fe-datetime-picker,
-.fe-text-input,
-.fe-text-area {
+/* packages/form-controls/src/controls/Field/style.css */
+.fe-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.fe-field__required {
+  color: #d83d55;
+}
+.fe-field__info {
+  display: inline-grid;
+  width: 16px;
+  height: 16px;
+  place-items: center;
+  border: 1px solid #98a2b3;
+  border-radius: 50%;
+  color: #687183;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 1;
+  outline: 0;
+}
+.fe-field__info:focus-visible {
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-field__message {
+  color: #687183;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.fe-field__message--error {
+  color: #b92c43;
+}
+
+/* packages/form-controls/src/controls/Selection/style.css */
+.fe-selection {
   display: grid;
   min-width: 0;
   gap: 6px;
-  font: inherit;
   color: #20242c;
+  font: inherit;
 }
-.fe-selection__label,
-.fe-number-input__label,
-.fe-datetime-picker__label,
-.fe-text-input__label,
-.fe-text-area__label {
+.fe-selection__label {
   font-size: 13px;
   font-weight: 600;
 }
@@ -532,30 +565,25 @@ table[data-fe-table] tbody tr:hover {
   width: 100%;
   min-width: 0;
 }
-.fe-selection__trigger,
-.fe-number-input input,
-.fe-text-input input,
-.fe-text-area textarea {
+.fe-selection__trigger {
+  display: flex;
+  align-items: center;
   width: 100%;
-  min-height: 42px;
+  min-height: 40px;
   padding: 0 13px;
   border: 1px solid #d4d8e0;
   border-radius: 12px;
+  outline: 0;
   background: #fff;
   color: #20242c;
   font: inherit;
-  outline: 0;
+  text-align: left;
+  cursor: pointer;
   transition:
     border-color 0.15s,
     box-shadow 0.15s,
     background 0.15s;
 }
-.fe-selection__trigger {
-  display: flex;
-  align-items: center;
-  text-align: left;
-  cursor: pointer;
-}
 .fe-selection--clearable .fe-selection__trigger {
   padding-right: 64px;
 }
@@ -568,11 +596,7 @@ table[data-fe-table] tbody tr:hover {
   border-color: #aab0bb;
   background: #fcfdff;
 }
-.fe-selection__trigger:focus-visible,
-.fe-number-input input:focus,
-.fe-datetime-picker__trigger:focus-visible,
-.fe-text-input input:focus,
-.fe-text-area textarea:focus {
+.fe-selection__trigger:focus-visible {
   border-color: #2878f0;
   box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
 }
@@ -607,12 +631,12 @@ table[data-fe-table] tbody tr:hover {
   gap: 4px;
   max-width: 100%;
   padding: 3px 7px;
+  overflow: hidden;
   border-radius: 7px;
   background: #e7f1ff;
   color: #1e60cc;
   font-size: 12px;
   font-weight: 600;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -626,22 +650,22 @@ table[data-fe-table] tbody tr:hover {
   right: 14px;
   width: 16px;
   height: 16px;
-  transform: translateY(-50%);
   pointer-events: none;
+  transform: translateY(-50%);
 }
 .fe-selection__clear {
   position: absolute;
   z-index: 1;
   top: 50%;
-  right: 40px;
+  right: 32px;
   display: grid;
-  place-items: center;
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 50%;
+  place-items: center;
   background: transparent;
   color: #697386;
   cursor: pointer;
@@ -650,9 +674,9 @@ table[data-fe-table] tbody tr:hover {
 .fe-selection__clear::before,
 .fe-selection__clear::after {
   position: absolute;
-  top: 7px;
-  left: 2px;
-  width: 12px;
+  top: 15px;
+  left: 9px;
+  width: 14px;
   height: 2px;
   border-radius: 999px;
   background: currentColor;
@@ -767,22 +791,14 @@ table[data-fe-table] tbody tr:hover {
   font-size: 13px;
   text-align: center;
 }
-.fe-selection__helper,
-.fe-number-input__helper {
+.fe-selection__helper {
   color: #687183;
   font-size: 12px;
 }
-.fe-selection--error .fe-selection__trigger,
-.fe-number-input--error input,
-.fe-text-input--error input,
-.fe-text-area--error textarea {
+.fe-selection--error .fe-selection__trigger {
   border-color: #d83d55;
 }
-.fe-selection--error .fe-selection__helper,
-.fe-number-input--error .fe-number-input__helper,
-.fe-number-input__error,
-.fe-text-input__error,
-.fe-text-area__error {
+.fe-selection--error .fe-selection__helper {
   color: #b92c43;
 }
 .fe-selection--disabled {
@@ -791,88 +807,445 @@ table[data-fe-table] tbody tr:hover {
 .fe-selection--disabled .fe-selection__trigger {
   cursor: not-allowed;
 }
+@keyframes fe-selection-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* packages/form-controls/src/controls/NumberInput/style.css */
+.fe-number-input {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-number-input__label {
+  font-size: 13px;
+  font-weight: 600;
+}
+.fe-number-input__control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  border: 1px solid #d4d8e0;
+  border-radius: 12px;
+  background: #fff;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    background 0.15s;
+}
+.fe-number-input__control:hover {
+  border-color: #aab0bb;
+  background: #fcfdff;
+}
 .fe-number-input input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 38px;
+  padding: 0 13px;
+  border: 0;
+  border-radius: 11px;
+  outline: 0;
+  background: transparent;
+  box-shadow: none;
+  color: #20242c;
+  font: inherit;
+}
+.fe-number-input__input-wrap {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+.fe-number-input__prefix,
+.fe-number-input__suffix {
+  z-index: 1;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: #535b6a;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.fe-number-input__prefix {
+  margin-right: -5px;
+  padding-left: 13px;
+}
+.fe-number-input__suffix {
+  margin-left: -5px;
   padding-right: 13px;
 }
-.fe-text-input__control,
-.fe-text-area__control {
+.fe-number-input__stepper {
+  display: flex;
+  width: 28px;
+  min-width: 28px;
+  flex: 0 0 28px;
+  flex-direction: column;
+  align-self: stretch;
+  justify-content: center;
+  margin-right: 4px;
+}
+.fe-number-input__stepper .fe-button {
+  width: 28px;
+  min-width: 28px;
+  min-height: 16px;
+  height: 16px;
+  padding: 2px 8px;
+  border-radius: 6px;
+}
+.fe-number-input__stepper .fe-button:disabled {
+  opacity: 0.35;
+}
+.fe-number-input__control:focus-within {
+  border-color: #2878f0;
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-number-input--error .fe-number-input__control {
+  border-color: #d83d55;
+}
+.fe-number-input__placeholder {
+  position: absolute;
+  top: 50%;
+  left: 13px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  max-width: calc(100% - 26px);
+  overflow: hidden;
+  color: #8b94a4;
+  pointer-events: none;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+.fe-number-input__placeholder > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fe-number-input__input-wrap:has(.fe-number-input__placeholder) input::placeholder {
+  color: transparent;
+}
+.fe-number-input input:focus {
+  outline: 0;
+}
+.fe-number-input__helper {
+  color: #687183;
+  font-size: 12px;
+}
+.fe-number-input--error .fe-number-input__helper,
+.fe-number-input__error {
+  color: #b92c43;
+}
+.fe-number-input__error {
+  font-size: 12px;
+}
+
+/* packages/form-controls/src/controls/TextInput/style.css */
+.fe-text-input {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-text-input__label {
+  font-size: 13px;
+  font-weight: 600;
+}
+.fe-text-input input {
+  width: 100%;
+  min-height: 40px;
+  padding: 0 13px;
+  border: 1px solid #d4d8e0;
+  border-radius: 12px;
+  outline: 0;
+  background: #fff;
+  color: #20242c;
+  font: inherit;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    background 0.15s;
+}
+.fe-text-input__control {
   position: relative;
-  display: block;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  border: 1px solid #d4d8e0;
+  border-radius: 12px;
+  background: #fff;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    background 0.15s;
 }
-.fe-text-input input,
-.fe-text-area textarea {
+.fe-text-input__control:hover {
+  border-color: #aab0bb;
+  background: #fcfdff;
+}
+.fe-text-input__control:focus-within {
+  border-color: #2878f0;
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-text-input--error .fe-text-input__control {
+  border-color: #d83d55;
+}
+.fe-text-input__input-wrap {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+.fe-text-input input {
   display: block;
   box-sizing: border-box;
 }
+.fe-text-input__control input,
+.fe-text-input__control input:focus {
+  min-width: 0;
+  min-height: 38px;
+  flex: 1 1 auto;
+  border: 0;
+  border-radius: 11px;
+  background: transparent;
+  box-shadow: none;
+}
+.fe-text-input__prefix,
+.fe-text-input__suffix {
+  z-index: 1;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: #535b6a;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.fe-text-input__prefix {
+  margin-right: -5px;
+  padding-left: 13px;
+}
+.fe-text-input__suffix {
+  margin-left: -5px;
+  padding-right: 13px;
+}
+.fe-text-input__placeholder {
+  position: absolute;
+  top: 50%;
+  left: 13px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  max-width: calc(100% - 26px);
+  overflow: hidden;
+  color: #8b94a4;
+  pointer-events: none;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+.fe-text-input__placeholder > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fe-text-input__input-wrap:has(.fe-text-input__placeholder) input::placeholder {
+  color: transparent;
+}
+.fe-text-input__clear.fe-button {
+  z-index: 1;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
+  flex: 0 0 32px;
+  margin-right: 4px;
+  padding: 4px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.fe-text-input__helper {
+  color: #687183;
+  font-size: 12px;
+}
+.fe-text-input__error {
+  color: #b92c43;
+  font-size: 12px;
+}
+
+/* packages/form-controls/src/controls/TextArea/style.css */
+.fe-text-area {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-text-area__label {
+  font-size: 13px;
+  font-weight: 600;
+}
 .fe-text-area textarea {
-  min-height: 96px;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 40px;
+  padding: 0 13px;
   padding-top: 10px;
   padding-bottom: 10px;
+  border: 1px solid #d4d8e0;
+  border-radius: 12px;
+  outline: 0;
   resize: vertical;
+  background: #fff;
+  color: #20242c;
+  font: inherit;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    background 0.15s;
 }
-.fe-text-input__clear.fe-button,
-.fe-text-area__clear.fe-button {
+.fe-text-area__control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  border: 1px solid #d4d8e0;
+  border-radius: 12px;
+  background: #fff;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s,
+    background 0.15s;
+}
+.fe-text-area__control:hover {
+  border-color: #aab0bb;
+  background: #fcfdff;
+}
+.fe-text-area__control:focus-within {
+  border-color: #2878f0;
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-text-area--error .fe-text-area__control {
+  border-color: #d83d55;
+}
+.fe-text-area__control textarea,
+.fe-text-area__control textarea:focus {
+  min-width: 0;
+  flex: 1 1 auto;
+  align-self: stretch;
+  border: 0;
+  border-radius: 11px;
+  background: transparent;
+  box-shadow: none;
+}
+.fe-text-area--autosize textarea {
+  resize: none;
+}
+.fe-text-area__placeholder {
   position: absolute;
-  top: 50%;
-  right: 8px;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 4px;
-  border-radius: 50%;
-  transform: translateY(-50%);
+  top: 10px;
+  left: 13px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  max-width: calc(100% - 26px);
+  overflow: hidden;
+  color: #8b94a4;
+  pointer-events: none;
+  white-space: nowrap;
 }
-.fe-text-input:has(.fe-text-input__clear) input {
-  padding-right: 42px;
+.fe-text-area__placeholder > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.fe-text-area:has(.fe-text-area__clear) textarea {
-  padding-right: 42px;
+.fe-text-area__control:has(.fe-text-area__placeholder) textarea::placeholder {
+  color: transparent;
+}
+.fe-text-area__clear.fe-button {
+  z-index: 1;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
+  flex: 0 0 32px;
+  margin-right: 4px;
+  padding: 4px;
+  border-radius: 50%;
+  cursor: pointer;
 }
-.fe-text-input__helper,
 .fe-text-area__helper {
   color: #687183;
   font-size: 12px;
 }
-.fe-text-input__error,
-.fe-text-area__error,
-.fe-number-input__error {
+.fe-text-area__error {
+  color: #b92c43;
   font-size: 12px;
 }
+
+/* packages/form-controls/src/controls/CurrencyInput/style.css */
 .fe-currency-input {
   position: relative;
-  display: flex;
-  align-items: start;
-}
-.fe-currency-input__number {
-  width: 100%;
-}
-.fe-currency-input__number input {
-  padding-right: 78px;
 }
 .fe-currency-input__suffix,
 .fe-currency-input__currency {
-  position: absolute;
-  right: 11px;
-  top: 8px;
   color: #535b6a;
   font: inherit;
   font-size: 13px;
   font-weight: 700;
 }
+.fe-currency-input__suffix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 13px 0 8px;
+}
 .fe-currency-input__currency {
-  top: 7px;
-  max-width: 90px;
+  align-self: center;
+  width: 96px;
+  margin-right: 4px;
+}
+.fe-currency-input__currency .fe-selection__trigger {
+  box-sizing: border-box;
+  min-height: 34px;
+  padding: 0 28px 0 8px;
   border: 0;
   border-left: 1px solid #d4d8e0;
-  background: #fff;
-  padding: 4px 0 4px 8px;
-  outline: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+  font-weight: 700;
+}
+.fe-currency-input__currency .fe-selection__trigger:hover,
+.fe-currency-input__currency .fe-selection__trigger:focus-visible {
+  background: transparent;
 }
-.fe-currency-input:has(.fe-number-input__label) .fe-currency-input__suffix,
-.fe-currency-input:has(.fe-number-input__label) .fe-currency-input__currency {
-  top: 31px;
+.fe-currency-input__currency .fe-selection__actions {
+  right: 7px;
 }
+
+/* packages/form-controls/src/controls/DateTimePicker/style.css */
 .fe-datetime-picker {
   position: relative;
+  display: grid;
+  min-width: 0;
+  gap: 6px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-datetime-picker__label {
+  font-size: 13px;
+  font-weight: 600;
 }
 .fe-datetime-picker__trigger {
   display: flex;
@@ -889,6 +1262,21 @@ table[data-fe-table] tbody tr:hover {
   text-align: left;
   cursor: pointer;
 }
+.fe-datetime-picker__trigger:focus-visible {
+  border-color: #2878f0;
+  box-shadow: 0 0 0 3px rgba(40, 120, 240, 0.16);
+}
+.fe-datetime-picker--error .fe-datetime-picker__trigger {
+  border-color: #d83d55;
+}
+.fe-datetime-picker__value {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+.fe-datetime-picker__value.is-placeholder {
+  color: #8b94a4;
+}
 .fe-datetime-picker__trigger:disabled {
   opacity: 0.55;
   cursor: not-allowed;
@@ -990,21 +1378,161 @@ table[data-fe-table] tbody tr:hover {
   font-weight: 600;
 }
 .fe-datetime-picker__time input {
+  padding: 5px;
   border: 1px solid #d4d8e0;
   border-radius: 8px;
-  padding: 5px;
   font: inherit;
 }
-@keyframes fe-selection-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+
+/* packages/form-controls/src/controls/Checkbox/style.css */
+.fe-checkbox,
+.fe-radio-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: #20242c;
+  cursor: pointer;
+  font: inherit;
+  line-height: 1.25;
+}
+.fe-checkbox--label-top,
+.fe-radio-button--label-top {
+  align-items: flex-start;
+  flex-direction: column;
+}
+.fe-checkbox__content,
+.fe-radio-button__content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.fe-checkbox__input,
+.fe-radio-button__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+.fe-checkbox__control,
+.fe-radio-button__control {
+  display: inline-grid;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid #98a2b3;
+  background: #fff;
+  transition:
+    border-color 0.16s ease,
+    background-color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+.fe-checkbox__control {
+  border-radius: 4px;
 }
+.fe-checkbox__control::after {
+  width: 8px;
+  height: 4px;
+  border-bottom: 2px solid #fff;
+  border-left: 2px solid #fff;
+  content: "";
+  opacity: 0;
+  transform: rotate(-45deg) translate(1px, -1px);
+  transition: opacity 0.16s ease;
+}
+.fe-checkbox__input:checked + .fe-checkbox__control {
+  border-color: #2878f0;
+  background: #2878f0;
+}
+.fe-checkbox__input:checked + .fe-checkbox__control::after {
+  opacity: 1;
+}
+.fe-checkbox__input:indeterminate + .fe-checkbox__control::after {
+  width: 8px;
+  height: 2px;
+  border: 0;
+  background: #fff;
+  opacity: 1;
+  transform: none;
+}
+.fe-checkbox__input:focus-visible + .fe-checkbox__control,
+.fe-radio-button__input:focus-visible + .fe-radio-button__control {
+  outline: 3px solid rgb(40 120 240 / 22%);
+  outline-offset: 2px;
+}
+.fe-checkbox--disabled,
+.fe-radio-button--disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+.fe-checkbox__label,
+.fe-radio-button__label {
+  user-select: none;
+}
+
+/* packages/form-controls/src/controls/RadioButton/style.css */
+.fe-radio-button__control {
+  border-radius: 50%;
+}
+.fe-radio-button__control::after {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #2878f0;
+  content: "";
+  opacity: 0;
+  transform: scale(0.6);
+  transition: opacity 0.16s ease, transform 0.16s ease;
+}
+.fe-radio-button__input:checked + .fe-radio-button__control {
+  border-color: #2878f0;
+}
+.fe-radio-button__input:checked + .fe-radio-button__control::after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* packages/form-controls/src/controls/RadioGroup/style.css */
+.fe-radio-group {
+  display: inline-flex;
+  gap: 8px;
+  color: #20242c;
+  font: inherit;
+}
+.fe-radio-group--label-top {
+  flex-direction: column;
+}
+.fe-radio-group--label-right {
+  align-items: center;
+}
+.fe-radio-group__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.fe-radio-group__required {
+  color: #d83d55;
+}
+.fe-radio-group__options {
+  display: inline-flex;
+  gap: 12px;
+}
+.fe-radio-group--vertical .fe-radio-group__options {
+  flex-direction: column;
+}
+.fe-radio-group--horizontal .fe-radio-group__options {
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* packages/form-controls/src/styles.css */
 
 /* packages/tooltip/src/styles.css */
 .fe-tooltip {