opus-react 0.2.28 → 0.2.30

package/dist/index.css

@@ -1,13 +1,71 @@
+/* components/fields/shared/inputControlSizes.module.css */
+.opus_8ChDQJ_sizeSm {
+  --opus-control-height: 24px;
+  --opus-control-padding-x: 8px;
+  --opus-control-padding-y: 6px;
+  --opus-control-font-size: .78rem;
+  --opus-control-prefix-gap: 6px;
+  --opus-control-prefix-size: 12px;
+  --opus-control-suffix-inset: 30px;
+  --opus-button-padding-x: 10px;
+  --opus-switch-width: 42px;
+  --opus-switch-thumb: 16px;
+  --opus-switch-travel: 18px;
+  --opus-range-thumb: 18px;
+  --opus-range-track: 6px;
+  --opus-file-min-height: 80px;
+  --opus-file-padding-y: 12px;
+  --opus-file-padding-x: 16px;
+}
+
+.opus_8ChDQJ_sizeMd {
+  --opus-control-height: 28px;
+  --opus-control-padding-x: 10px;
+  --opus-control-padding-y: 8px;
+  --opus-control-font-size: .86rem;
+  --opus-control-prefix-gap: 8px;
+  --opus-control-prefix-size: 14px;
+  --opus-control-suffix-inset: 38px;
+  --opus-button-padding-x: 12px;
+  --opus-switch-width: 50px;
+  --opus-switch-thumb: 20px;
+  --opus-switch-travel: 22px;
+  --opus-range-thumb: 22px;
+  --opus-range-track: 8px;
+  --opus-file-min-height: 96px;
+  --opus-file-padding-y: 16px;
+  --opus-file-padding-x: 20px;
+}
+
+.opus_8ChDQJ_sizeLg {
+  --opus-control-height: 36px;
+  --opus-control-padding-x: 14px;
+  --opus-control-padding-y: 10px;
+  --opus-control-font-size: .95rem;
+  --opus-control-prefix-gap: 10px;
+  --opus-control-prefix-size: 16px;
+  --opus-control-suffix-inset: 44px;
+  --opus-button-padding-x: 16px;
+  --opus-switch-width: 58px;
+  --opus-switch-thumb: 24px;
+  --opus-switch-travel: 26px;
+  --opus-range-thumb: 26px;
+  --opus-range-track: 10px;
+  --opus-file-min-height: 112px;
+  --opus-file-padding-y: 20px;
+  --opus-file-padding-x: 24px;
+}
+
 /* components/fields/Button/Button.module.css */
 .opus_lZkc26_button {
   min-height: var(--opus-control-height);
+  padding: 0 var(--opus-button-padding-x, 12px);
   border-radius: var(--opus-input-radius);
   cursor: pointer;
   font-size: var(--opus-control-font-size);
   border: 1px solid #0000;
   justify-content: center;
   align-items: center;
-  padding: 0 12px;
   font-weight: 700;
   line-height: 1;
   transition: border-color .16s, background .16s, box-shadow .16s, color .16s;
@@ -442,6 +500,7 @@
 .opus_Z7jeX4_picker {
   width: 100%;
   min-height: var(--opus-control-height);
+  padding: 0 var(--opus-control-padding-x, 10px);
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-input-fill);
@@ -451,7 +510,6 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 10px;
-  padding: 0 10px;
   display: grid;
   position: relative;
   box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
@@ -534,12 +592,12 @@
 .opus_G3y11z_input {
   width: 100%;
   min-height: var(--opus-control-height);
+  padding: 0 var(--opus-control-padding-x, 10px);
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
   color: var(--opus-text);
   font-size: var(--opus-control-font-size);
-  padding: 0 10px;
   box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
 }
 
@@ -560,25 +618,25 @@
 
 /* components/fields/HiddenField/HiddenField.module.css */
 .opus_kL1YXS_preview {
+  padding: var(--opus-control-padding-y, 8px) var(--opus-control-padding-x, 10px);
   border: 1px dashed var(--opus-border);
   border-radius: var(--opus-input-radius);
   background: color-mix(in srgb, var(--opus-input-bg) 70%, transparent);
   gap: 6px;
-  padding: 10px 12px;
   display: grid;
 }
 
 .opus_kL1YXS_note {
   color: var(--opus-muted);
+  font-size: calc(var(--opus-control-font-size) - .08rem);
   margin: 0;
-  font-size: .78rem;
 }
 
 .opus_kL1YXS_meta {
   color: var(--opus-text);
   font-family: var(--font-ibm-plex-mono), monospace;
+  font-size: calc(var(--opus-control-font-size) - .14rem);
   word-break: break-all;
-  font-size: .72rem;
 }
 
 /* components/fields/FileField/FileField.module.css */
@@ -589,6 +647,8 @@
 }
 
 .opus_aOsPA7_drop {
+  min-height: var(--opus-file-min-height, 96px);
+  padding: var(--opus-file-padding-y, 16px) var(--opus-file-padding-x, 20px);
   border-radius: var(--opus-input-radius-large);
   border: 1px dashed var(--opus-border-strong);
   background: var(--opus-input-fill);
@@ -596,8 +656,6 @@
   justify-content: center;
   align-items: center;
   gap: 14px;
-  min-height: 96px;
-  padding: 16px 20px;
   transition: border-color .16s, background-color .16s;
   display: flex;
   position: relative;
@@ -633,7 +691,7 @@
 
 .opus_aOsPA7_title {
   color: var(--opus-text);
-  font-size: .9rem;
+  font-size: var(--opus-control-font-size);
   line-height: 1.35;
 }
 
@@ -648,14 +706,15 @@
 }
 
 .opus_aOsPA7_action {
+  min-height: var(--opus-control-height);
+  padding: 0 var(--opus-control-padding-x, 14px);
   border-radius: var(--opus-input-radius);
   border: 1px solid var(--opus-border-strong);
   color: var(--opus-accent);
+  font-size: var(--opus-control-font-size);
   background: none;
   justify-content: center;
   margin-top: 2px;
-  padding: 7px 14px;
-  font-size: .82rem;
   font-weight: 600;
   display: inline-flex;
 }
@@ -679,6 +738,315 @@
   overflow: hidden;
 }
 
+/* components/fields/ImageCropUploadField/ImageCropUploadField.module.css */
+.opus_itxBv9_root {
+  gap: 12px;
+  width: 100%;
+  display: grid;
+}
+
+.opus_itxBv9_drop {
+  min-height: var(--opus-file-min-height, 96px);
+  padding: var(--opus-file-padding-y, 16px) var(--opus-file-padding-x, 20px);
+  border-radius: var(--opus-input-radius-large);
+  border: 1px dashed var(--opus-border-strong);
+  background: var(--opus-input-fill);
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  gap: 14px;
+  transition: border-color .16s, background-color .16s;
+  display: flex;
+  position: relative;
+}
+
+.opus_itxBv9_drop:hover, .opus_itxBv9_dragging {
+  border-color: var(--opus-accent);
+  background: color-mix(in srgb, var(--opus-accent-soft) 72%, var(--opus-input-fill));
+}
+
+.opus_itxBv9_dropError {
+  border-color: color-mix(in srgb, var(--opus-error) 55%, var(--opus-border-strong));
+}
+
+.opus_itxBv9_dropIcon {
+  color: var(--opus-accent);
+  flex: none;
+  place-items: center;
+  display: grid;
+}
+
+.opus_itxBv9_dropIconSvg {
+  width: 32px;
+  height: 32px;
+}
+
+.opus_itxBv9_dropContent {
+  text-align: center;
+  justify-items: center;
+  gap: 4px;
+  display: grid;
+}
+
+.opus_itxBv9_dropTitle {
+  color: var(--opus-text);
+  font-size: var(--opus-control-font-size);
+  line-height: 1.35;
+}
+
+.opus_itxBv9_dropTitle strong {
+  font-weight: 700;
+}
+
+.opus_itxBv9_dropHint {
+  color: var(--opus-muted);
+  font-size: .78rem;
+  line-height: 1.2;
+}
+
+.opus_itxBv9_dropAction {
+  min-height: var(--opus-control-height);
+  padding: 0 var(--opus-control-padding-x, 14px);
+  border-radius: var(--opus-input-radius);
+  border: 1px solid var(--opus-border-strong);
+  color: var(--opus-accent);
+  font-size: var(--opus-control-font-size);
+  background: none;
+  justify-content: center;
+  margin-top: 2px;
+  font-weight: 600;
+  display: inline-flex;
+}
+
+.opus_itxBv9_hiddenInput {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.opus_itxBv9_previewCard, .opus_itxBv9_editor {
+  border-radius: var(--opus-input-radius-large);
+  border: 1px solid var(--opus-border-strong);
+  background: color-mix(in srgb, var(--opus-panel) 88%, transparent);
+  gap: 12px;
+  padding: 14px;
+  display: grid;
+}
+
+.opus_itxBv9_previewRow {
+  align-items: center;
+  gap: 14px;
+  display: flex;
+}
+
+.opus_itxBv9_previewImage {
+  object-fit: cover;
+  border: 1px solid color-mix(in srgb, var(--opus-border) 80%, transparent);
+  border-radius: 999px;
+  width: 72px;
+  height: 72px;
+}
+
+.opus_itxBv9_previewCopy {
+  gap: 4px;
+  min-width: 0;
+  display: grid;
+}
+
+.opus_itxBv9_previewTitle {
+  color: var(--opus-text);
+  font-size: var(--opus-control-font-size);
+  font-weight: 600;
+}
+
+.opus_itxBv9_previewHint {
+  color: var(--opus-muted);
+  font-size: .78rem;
+  line-height: 1.35;
+}
+
+.opus_itxBv9_viewport {
+  border: 1px solid color-mix(in srgb, var(--opus-border) 80%, transparent);
+  background: linear-gradient(45deg, color-mix(in srgb, var(--opus-muted) 16%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--opus-muted) 16%, transparent) 75%),
+    linear-gradient(45deg, color-mix(in srgb, var(--opus-muted) 16%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--opus-muted) 16%, transparent) 75%);
+  touch-action: none;
+  cursor: grab;
+  background-position: 0 0, 8px 8px;
+  background-size: 16px 16px;
+  border-radius: 999px;
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+}
+
+.opus_itxBv9_viewportDragging {
+  cursor: grabbing;
+}
+
+.opus_itxBv9_viewportImage {
+  transform-origin: center;
+  user-select: none;
+  pointer-events: none;
+  max-width: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.opus_itxBv9_viewportRing {
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--opus-accent) 45%, transparent);
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.opus_itxBv9_zoomRow {
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 10px;
+  display: grid;
+}
+
+.opus_itxBv9_zoomButton {
+  width: var(--opus-control-height);
+  min-height: var(--opus-control-height);
+  border-radius: var(--opus-input-radius);
+  border: 1px solid var(--opus-border-strong);
+  background: var(--opus-input-fill);
+  color: var(--opus-text);
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-flex;
+}
+
+.opus_itxBv9_zoomButton:disabled {
+  opacity: .45;
+  cursor: not-allowed;
+}
+
+.opus_itxBv9_zoomSlider {
+  width: 100%;
+  accent-color: var(--opus-accent);
+}
+
+.opus_itxBv9_zoomLabel {
+  color: var(--opus-muted);
+  text-align: center;
+  margin: 0;
+  font-size: .78rem;
+}
+
+.opus_itxBv9_actions {
+  flex-wrap: wrap;
+  gap: 8px;
+  display: flex;
+}
+
+.opus_itxBv9_instruction {
+  color: var(--opus-muted);
+  text-align: center;
+  margin: 0;
+  font-size: .78rem;
+  line-height: 1.4;
+}
+
+.opus_itxBv9_root[data-embedded="true"] .opus_itxBv9_editor, .opus_itxBv9_root[data-embedded="true"] .opus_itxBv9_previewCard {
+  background: none;
+  border: 0;
+  gap: 16px;
+  padding: 0;
+}
+
+.opus_itxBv9_root[data-embedded="true"] .opus_itxBv9_drop {
+  border-color: color-mix(in srgb, var(--opus-border) 55%, transparent);
+  background: color-mix(in srgb, var(--opus-input-fill) 72%, transparent);
+}
+
+.opus_itxBv9_root[data-embedded="true"] .opus_itxBv9_previewRow {
+  justify-content: center;
+}
+
+.opus_itxBv9_root[data-embedded="true"] .opus_itxBv9_previewImage {
+  border: 0;
+}
+
+.opus_itxBv9_previewFrame {
+  flex-shrink: 0;
+  display: inline-flex;
+  position: relative;
+}
+
+.opus_itxBv9_previewCameraButton {
+  color: #fff;
+  cursor: pointer;
+  filter: drop-shadow(0 1px 2px #0000008c);
+  background: none;
+  border: 0;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.opus_itxBv9_previewCameraButton svg {
+  width: 36px;
+  height: 36px;
+  display: block;
+}
+
+.opus_itxBv9_previewCameraButton:hover {
+  filter: drop-shadow(0 1px 2px #0000008c) brightness(1.08);
+}
+
+.opus_itxBv9_previewCameraButton:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid #ffffffd9;
+}
+
+.opus_itxBv9_root[data-embedded="true"] .opus_itxBv9_viewport {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--opus-border) 45%, transparent);
+  border: 0;
+}
+
+.opus_itxBv9_root[data-embedded="true"] .opus_itxBv9_viewportRing {
+  box-shadow: none;
+}
+
+.opus_itxBv9_root[data-embedded="true"] .opus_itxBv9_zoomButton {
+  background: color-mix(in srgb, var(--opus-input-fill) 80%, transparent);
+  border: 0;
+}
+
+.opus_itxBv9_changeLink {
+  color: var(--opus-accent);
+  font-size: var(--opus-control-font-size);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  justify-self: center;
+  margin: 0;
+  padding: 0;
+  font-weight: 600;
+}
+
+.opus_itxBv9_changeLink:hover {
+  text-decoration: underline;
+}
+
 /* components/fields/NumberField/NumberField.module.css */
 .opus_L272Dk_stepper {
   width: 100%;
@@ -837,6 +1205,7 @@
 .opus_IOOYwh_field {
   width: 100%;
   min-height: var(--opus-control-height);
+  padding: calc(var(--opus-control-padding-y, 8px) / 2) var(--opus-control-padding-x, 10px);
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
@@ -846,7 +1215,6 @@
   align-content: flex-start;
   align-items: center;
   gap: 6px;
-  padding: 4px 8px;
   transition: border-color .16s, box-shadow .16s;
   display: flex;
   box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
@@ -1012,9 +1380,9 @@
 
 .opus_iRHQuG_fieldLabel {
   color: var(--opus-text);
+  font-size: var(--opus-control-font-size);
   align-items: center;
   gap: 6px;
-  font-size: .86rem;
   font-weight: 600;
   line-height: 1.2;
   display: inline-flex;
@@ -1022,8 +1390,8 @@
 
 .opus_iRHQuG_value {
   color: var(--opus-text);
+  font-size: calc(var(--opus-control-font-size) + .06rem);
   font-variant-numeric: tabular-nums;
-  font-size: .92rem;
   font-weight: 700;
 }
 
@@ -1038,53 +1406,53 @@
 
 .opus_iRHQuG_slider {
   appearance: none;
+  width: 100%;
+  height: var(--opus-control-height);
   cursor: pointer;
   background: none;
-  width: 100%;
-  height: 28px;
   margin: 0;
 }
 
 .opus_iRHQuG_slider::-webkit-slider-runnable-track {
+  height: var(--opus-range-track, 8px);
   background: linear-gradient(to right,
     var(--opus-accent) 0%,
     var(--opus-accent) var(--range-progress),
     color-mix(in srgb, var(--opus-muted) 24%, var(--opus-input-bg)) var(--range-progress),
     color-mix(in srgb, var(--opus-muted) 24%, var(--opus-input-bg)) 100%);
   border-radius: 999px;
-  height: 8px;
 }
 
 .opus_iRHQuG_slider::-webkit-slider-thumb {
   appearance: none;
+  width: var(--opus-range-thumb, 22px);
+  height: var(--opus-range-thumb, 22px);
+  margin-top: calc((var(--opus-range-track, 8px) - var(--opus-range-thumb, 22px)) / 2);
   border: 3px solid var(--opus-accent);
   background: #fff;
   border-radius: 999px;
-  width: 22px;
-  height: 22px;
-  margin-top: -7px;
   box-shadow: 0 4px 14px #0000002e;
 }
 
 .opus_iRHQuG_slider::-moz-range-track {
+  height: var(--opus-range-track, 8px);
   background: color-mix(in srgb, var(--opus-muted) 24%, var(--opus-input-bg));
   border: 0;
   border-radius: 999px;
-  height: 8px;
 }
 
 .opus_iRHQuG_slider::-moz-range-progress {
+  height: var(--opus-range-track, 8px);
   background: var(--opus-accent);
   border-radius: 999px;
-  height: 8px;
 }
 
 .opus_iRHQuG_slider::-moz-range-thumb {
+  width: var(--opus-range-thumb, 22px);
+  height: var(--opus-range-thumb, 22px);
   border: 3px solid var(--opus-accent);
   background: #fff;
   border-radius: 999px;
-  width: 22px;
-  height: 22px;
   box-shadow: 0 4px 14px #0000002e;
 }
 
@@ -1132,13 +1500,13 @@
 .opus_m2ObG0_select {
   width: 100%;
   min-height: var(--opus-control-height);
+  padding: 0 calc(var(--opus-control-padding-x, 10px) + 22px) 0 var(--opus-control-padding-x, 10px);
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
   color: var(--opus-text);
   font-size: var(--opus-control-font-size);
   appearance: none;
-  padding: 0 32px 0 10px;
   box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
 }
 
@@ -1168,7 +1536,7 @@
 
 .opus_t9NLEA_track {
   appearance: none;
-  width: 50px;
+  width: var(--opus-switch-width, 50px);
   height: var(--opus-control-height);
   border: 1px solid var(--opus-border-strong);
   background: color-mix(in srgb, var(--opus-muted) 24%, transparent);
@@ -1181,10 +1549,10 @@
 
 .opus_t9NLEA_track:before {
   content: "";
+  width: var(--opus-switch-thumb, 20px);
+  height: var(--opus-switch-thumb, 20px);
   background: linear-gradient(#fff, #d7dff9);
   border-radius: 999px;
-  width: 20px;
-  height: 20px;
   transition: transform .16s;
   position: absolute;
   top: 50%;
@@ -1196,10 +1564,6 @@
   background: linear-gradient(135deg, var(--opus-accent), color-mix(in srgb, var(--opus-accent) 40%, #00d2ff));
 }
 
-.opus_t9NLEA_track:checked:before {
-  transform: translate(22px, -50%);
-}
-
 .opus_t9NLEA_error {
   outline: 2px solid color-mix(in srgb, var(--opus-error) 36%, transparent);
   outline-offset: 2px;
@@ -1218,15 +1582,15 @@
 }
 
 .opus_FjhWmh_textarea {
+  width: 100%;
+  min-height: 96px;
+  padding: var(--opus-control-padding-y, 8px) var(--opus-control-padding-x, 10px);
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
-  width: 100%;
-  min-height: 96px;
   color: var(--opus-text);
   font-size: var(--opus-control-font-size);
   resize: vertical;
-  padding: 8px 10px;
   line-height: 1.5;
   box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
 }
@@ -1327,14 +1691,14 @@
 }
 
 .opus_6HFqZH_blockSelect {
+  min-height: calc(var(--opus-control-height) - 2px);
+  padding: 0 var(--opus-control-padding-x, 6px);
   border: 1px solid var(--opus-border-strong);
   background: var(--opus-input-bg);
-  min-height: 26px;
   color: var(--opus-text);
+  font-size: calc(var(--opus-control-font-size) - .14rem);
   cursor: pointer;
   border-radius: 5px;
-  padding: 0 6px;
-  font-size: .72rem;
   font-weight: 600;
 }
 
@@ -1350,8 +1714,8 @@
 }
 
 .opus_6HFqZH_toolbarButton {
-  width: 24px;
-  height: 24px;
+  width: calc(var(--opus-control-height) - 4px);
+  height: calc(var(--opus-control-height) - 4px);
   color: var(--opus-text);
   cursor: pointer;
   background: none;
@@ -1655,46 +2019,81 @@
   cursor: not-allowed;
 }
 
-/* components/fields/TextField/TextField.module.css */
-.opus_SOck2f_input {
+/* components/fields/shared/fieldControl.module.css */
+.opus_1Q5xBh_input {
   width: 100%;
   min-height: var(--opus-control-height);
+  padding: 0 var(--opus-control-padding-x, 10px);
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
   color: var(--opus-text);
   font-size: var(--opus-control-font-size);
-  padding: 0 10px;
   transition: border-color .16s, box-shadow .16s;
   box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
 }
 
-.opus_SOck2f_input:focus {
+.opus_1Q5xBh_searchWrap {
+  align-items: center;
+  gap: var(--opus-control-prefix-gap, 8px);
+  width: 100%;
+  min-height: var(--opus-control-height);
+  padding: 0 var(--opus-control-padding-x, 10px);
+  border: 1px solid var(--opus-border-strong);
+  border-radius: var(--opus-input-radius);
+  background: var(--opus-input-bg);
+  color: var(--opus-text);
+  font-size: var(--opus-control-font-size);
+  cursor: text;
+  grid-template-columns: auto minmax(0, 1fr);
+  transition: border-color .16s, box-shadow .16s;
+  display: grid;
+  box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
+}
+
+.opus_1Q5xBh_searchWrap:focus-within {
   border-color: var(--opus-accent);
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--opus-accent) 22%, transparent),
     0 14px 30px #0000000f;
 }
 
-.opus_SOck2f_input::placeholder {
-  color: color-mix(in srgb, var(--opus-muted) 80%, transparent);
+.opus_1Q5xBh_searchWrapError {
+  border-color: color-mix(in srgb, var(--opus-error) 75%, transparent);
 }
 
-.opus_SOck2f_error {
-  border-color: color-mix(in srgb, var(--opus-error) 75%, transparent);
+.opus_1Q5xBh_prefixIcon {
+  width: var(--opus-control-prefix-size, 14px);
+  height: var(--opus-control-prefix-size, 14px);
+  color: var(--opus-muted);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  line-height: 0;
+  display: inline-flex;
 }
 
-/* components/fields/shared/fieldControl.module.css */
-.opus_1Q5xBh_input {
+.opus_1Q5xBh_prefixIconSvg {
+  width: var(--opus-control-prefix-size, 14px);
+  height: var(--opus-control-prefix-size, 14px);
+}
+
+.opus_1Q5xBh_searchInput {
   width: 100%;
-  min-height: var(--opus-control-height);
-  border: 1px solid var(--opus-border-strong);
-  border-radius: var(--opus-input-radius);
-  background: var(--opus-input-bg);
-  color: var(--opus-text);
-  font-size: var(--opus-control-font-size);
-  padding: 0 10px;
-  transition: border-color .16s, box-shadow .16s;
-  box-shadow: inset 0 1px #ffffff0d, 0 14px 30px #0000000f;
+  min-width: 0;
+  color: inherit;
+  font: inherit;
+  background: none;
+  border: 0;
+  padding: 0;
+  font-weight: 500;
+}
+
+.opus_1Q5xBh_searchInput:focus {
+  outline: none;
+}
+
+.opus_1Q5xBh_searchInput::placeholder {
+  color: color-mix(in srgb, var(--opus-muted) 80%, transparent);
 }
 
 .opus_1Q5xBh_input:focus {
@@ -1720,7 +2119,7 @@
 }
 
 .opus_1Q5xBh_passwordInput {
-  padding-right: 38px;
+  padding-right: var(--opus-control-suffix-inset, 38px);
 }
 
 .opus_1Q5xBh_passwordToggleSlot {
@@ -1760,6 +2159,7 @@
 .opus_1Q5xBh_trigger {
   width: 100%;
   min-height: var(--opus-control-height);
+  padding: 0 var(--opus-control-padding-x, 10px);
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
@@ -1770,7 +2170,6 @@
   justify-content: space-between;
   align-items: center;
   gap: 8px;
-  padding: 0 10px;
   display: flex;
 }
 
@@ -2002,15 +2401,15 @@
 }
 
 .opus_NPBFZk_item {
-  border-radius: var(--opus-input-radius);
   width: 100%;
+  padding: calc(var(--opus-control-padding-y, 8px) / 2) var(--opus-control-padding-x, 10px);
+  border-radius: var(--opus-input-radius);
   color: var(--opus-text);
+  font-size: var(--opus-control-font-size);
   text-align: left;
   cursor: pointer;
   background: none;
   border: 1px solid #0000;
-  padding: 8px 10px;
-  font-size: .82rem;
 }
 
 .opus_NPBFZk_item:hover {
@@ -2030,14 +2429,14 @@
 }
 
 .opus_NPBFZk_controlButton {
+  min-width: var(--opus-control-height);
+  min-height: var(--opus-control-height);
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
-  min-width: 36px;
-  min-height: 32px;
   color: var(--opus-text);
+  font-size: var(--opus-control-font-size);
   cursor: pointer;
-  font-size: .9rem;
 }
 
 .opus_NPBFZk_controlButton:hover {
@@ -2158,13 +2557,13 @@
 }
 
 .opus_0tdNUz_symbol {
-  min-width: 34px;
-  min-height: 34px;
+  min-width: var(--opus-control-height);
+  min-height: var(--opus-control-height);
   color: color-mix(in srgb, var(--opus-muted) 70%, transparent);
+  font-size: calc(var(--opus-control-font-size) + .5rem);
   cursor: pointer;
   background: none;
   border: 0;
-  font-size: 1.35rem;
   line-height: 1;
 }
 
@@ -2173,14 +2572,14 @@
 }
 
 .opus_0tdNUz_numeric {
+  min-width: var(--opus-control-height);
+  min-height: var(--opus-control-height);
   border: 1px solid var(--opus-border-strong);
   border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
-  min-width: 34px;
-  min-height: 34px;
   color: var(--opus-text);
+  font-size: var(--opus-control-font-size);
   cursor: pointer;
-  font-size: .82rem;
   font-weight: 600;
 }
 
@@ -2202,14 +2601,14 @@
 }
 
 .opus_ZHwfiN_segment {
+  min-height: var(--opus-control-height);
+  padding: 0 var(--opus-control-padding-x, 14px);
   border-radius: calc(var(--opus-input-radius-large) - 2px);
-  min-height: 30px;
   color: var(--opus-muted);
+  font-size: var(--opus-control-font-size);
   cursor: pointer;
   background: none;
   border: 0;
-  padding: 0 14px;
-  font-size: .8rem;
   font-weight: 600;
 }
 
@@ -2236,22 +2635,22 @@
 
 .opus_k3d0sS_value {
   color: var(--opus-text);
+  font-size: calc(var(--opus-control-font-size) + .06rem);
   font-variant-numeric: tabular-nums;
-  font-size: .92rem;
   font-weight: 700;
 }
 
 .opus_k3d0sS_trackWrap {
-  height: 28px;
+  height: var(--opus-control-height);
   position: relative;
 }
 
 .opus_k3d0sS_track {
+  inset: calc((var(--opus-control-height) - var(--opus-range-track, 8px)) / 2) 0 auto;
+  height: var(--opus-range-track, 8px);
   background: color-mix(in srgb, var(--opus-muted) 24%, var(--opus-input-bg));
   border-radius: 999px;
-  height: 8px;
   position: absolute;
-  inset: 10px 0 auto;
 }
 
 .opus_k3d0sS_track:before {
@@ -2277,22 +2676,22 @@
 
 .opus_k3d0sS_slider::-webkit-slider-thumb {
   appearance: none;
+  width: var(--opus-range-thumb, 22px);
+  height: var(--opus-range-thumb, 22px);
   border: 3px solid var(--opus-accent);
   pointer-events: auto;
   background: #fff;
   border-radius: 999px;
-  width: 22px;
-  height: 22px;
   box-shadow: 0 4px 14px #0000002e;
 }
 
 .opus_k3d0sS_slider::-moz-range-thumb {
+  width: var(--opus-range-thumb, 22px);
+  height: var(--opus-range-thumb, 22px);
   border: 3px solid var(--opus-accent);
   pointer-events: auto;
   background: #fff;
   border-radius: 999px;
-  width: 22px;
-  height: 22px;
   box-shadow: 0 4px 14px #0000002e;
 }
 
@@ -11427,6 +11826,118 @@
   font-weight: 700;
 }
 
+/* components/UserProfileWidget/UserProfileWidget.module.css */
+.opus_zjR1aT_root {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+  padding: 2px 0;
+  display: grid;
+}
+
+.opus_zjR1aT_copy {
+  gap: 2px;
+  min-width: 0;
+  display: grid;
+}
+
+.opus_zjR1aT_name {
+  color: var(--dashboard-section-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: .86rem;
+  font-weight: 700;
+  line-height: 1.2;
+  overflow: hidden;
+}
+
+.opus_zjR1aT_role {
+  color: var(--dashboard-section-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: .72rem;
+  font-weight: 500;
+  line-height: 1.2;
+  overflow: hidden;
+}
+
+.opus_zjR1aT_chevronButton {
+  width: 28px;
+  height: 28px;
+  color: color-mix(in srgb, var(--dashboard-section-text) 82%, transparent);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  transition: background .16s;
+  display: inline-flex;
+}
+
+.opus_zjR1aT_chevronButton:hover {
+  background: color-mix(in srgb, var(--dashboard-section-panel) 72%, transparent);
+}
+
+.opus_zjR1aT_chevronButton:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--opus-accent, #7c3aed) 55%, transparent);
+  outline-offset: 2px;
+}
+
+.opus_zjR1aT_chevron {
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  font-size: .72rem;
+  line-height: 0;
+  display: inline-flex;
+}
+
+.opus_zjR1aT_avatarButton {
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 999px;
+  margin: 0;
+  padding: 0;
+  transition: box-shadow .16s;
+  display: inline-flex;
+}
+
+.opus_zjR1aT_avatarButton:hover {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--opus-accent, #7c3aed) 28%, transparent);
+}
+
+.opus_zjR1aT_avatarButton:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--opus-accent, #7c3aed) 55%, transparent);
+  outline-offset: 2px;
+}
+
+/* components/ImageCropUploadWidget/ImageCropUploadWidget.module.css */
+.opus_jO9vJQ_root {
+  gap: 12px;
+  width: 100%;
+  display: grid;
+}
+
+.opus_jO9vJQ_title {
+  color: var(--opus-text);
+  letter-spacing: -.01em;
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 700;
+}
+
+.opus_jO9vJQ_field {
+  width: 100%;
+}
+
 /* components/DashboardContentContainer/DashboardContentContainer.module.css */
 .opus_myuwZ6_container {
   --dashboard-section-bg: #070d18;
@@ -11468,6 +11979,14 @@
   max-width: 28rem;
 }
 
+.opus_myuwZ6_container[data-component="user-profile"][data-width="widget"] {
+  max-width: 18rem;
+}
+
+.opus_myuwZ6_container[data-component="profile-photo-upload"][data-width="widget"] {
+  max-width: 28rem;
+}
+
 .opus_myuwZ6_container[data-width="full"] {
   flex: auto;
   align-self: stretch;
@@ -11475,7 +11994,7 @@
   max-width: none;
 }
 
-[data-theme="light"] .opus_myuwZ6_container {
+[data-preview-root][data-theme="light"] .opus_myuwZ6_container, [data-theme="light"] .opus_myuwZ6_container {
   --dashboard-section-bg: #f8fbff;
   --dashboard-section-border: #60a5fa47;
   --dashboard-section-text: #0f172a;
@@ -11484,6 +12003,15 @@
   box-shadow: inset 0 1px #ffffffe6, 0 8px 20px #0284c71a;
 }
 
+[data-preview-root][data-theme="dark"] .opus_myuwZ6_container {
+  --dashboard-section-bg: #070d18;
+  --dashboard-section-border: #60a5fa33;
+  --dashboard-section-text: #f8fafc;
+  --dashboard-section-muted: #f8fafc8f;
+  --dashboard-section-panel: #11192c;
+  box-shadow: inset 0 1px #ffffff0f, 0 12px 28px #020617ad;
+}
+
 .opus_myuwZ6_title {
   color: var(--dashboard-section-text);
   letter-spacing: -.01em;