opus-react 0.2.10 → 0.2.16

package/dist/index.css

@@ -177,7 +177,7 @@
 
 .opus_zNi12Z_flagged {
   align-items: start;
-  gap: 8px 12px;
+  gap: 0 12px;
   width: 100%;
   display: grid;
 }
@@ -277,6 +277,7 @@
 
 .opus_zNi12Z_errorFlagged {
   grid-area: opus_zNi12Z_error;
+  margin-top: 8px;
 }
 
 .opus_zNi12Z_required {
@@ -1509,6 +1510,126 @@
   cursor: default;
 }
 
+.opus_6HFqZH_modalOverlay {
+  z-index: 60;
+  backdrop-filter: blur(2px);
+  background: #0406148c;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.opus_6HFqZH_modal {
+  border: 1px solid var(--opus-border-strong);
+  background: var(--opus-panel);
+  width: 100%;
+  max-width: 340px;
+  color: var(--opus-text);
+  box-shadow: var(--opus-shadow, 0 24px 60px #0006);
+  border-radius: 14px;
+  gap: 14px;
+  padding: 18px;
+  display: grid;
+}
+
+.opus_6HFqZH_modalTitle {
+  color: var(--opus-text);
+  margin: 0;
+  font-size: .95rem;
+  font-weight: 700;
+}
+
+.opus_6HFqZH_modalField {
+  gap: 5px;
+  display: grid;
+}
+
+.opus_6HFqZH_modalLabel {
+  color: var(--opus-muted);
+  font-size: .72rem;
+  font-weight: 600;
+  display: block;
+}
+
+.opus_6HFqZH_modalInput, .opus_6HFqZH_modalNumber {
+  border: 1px solid var(--opus-border-strong);
+  background: var(--opus-input-fill);
+  width: 100%;
+  min-height: 34px;
+  color: var(--opus-text);
+  border-radius: 8px;
+  padding: 0 10px;
+  font-size: .85rem;
+}
+
+.opus_6HFqZH_modalInput:focus-visible, .opus_6HFqZH_modalNumber:focus-visible {
+  border-color: var(--opus-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--opus-accent) 22%, transparent);
+  outline: none;
+}
+
+.opus_6HFqZH_modalDimensions {
+  align-items: flex-end;
+  gap: 10px;
+  display: flex;
+}
+
+.opus_6HFqZH_modalDimensionField {
+  flex: 1;
+  gap: 5px;
+  display: grid;
+}
+
+.opus_6HFqZH_modalTimes {
+  color: var(--opus-muted);
+  padding-bottom: 7px;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.opus_6HFqZH_modalActions {
+  justify-content: flex-end;
+  gap: 8px;
+  display: flex;
+}
+
+.opus_6HFqZH_modalCancel, .opus_6HFqZH_modalConfirm {
+  cursor: pointer;
+  border-radius: 8px;
+  min-height: 34px;
+  padding: 0 14px;
+  font-size: .8rem;
+  font-weight: 600;
+}
+
+.opus_6HFqZH_modalCancel {
+  border: 1px solid var(--opus-border-strong);
+  background: var(--opus-input-fill);
+  color: var(--opus-text);
+}
+
+.opus_6HFqZH_modalCancel:hover {
+  background: color-mix(in srgb, var(--opus-accent-soft) 70%, var(--opus-input-fill));
+}
+
+.opus_6HFqZH_modalConfirm {
+  border: 1px solid var(--opus-accent);
+  background: var(--opus-accent);
+  color: var(--opus-accent-contrast, #fff);
+}
+
+.opus_6HFqZH_modalConfirm:hover:not(:disabled) {
+  filter: brightness(1.05);
+}
+
+.opus_6HFqZH_modalConfirm:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
 /* components/fields/TextField/TextField.module.css */
 .opus_SOck2f_input {
   width: 100%;