opus-react 0.6.32 → 0.6.34

package/dist/index.css

@@ -1,9 +1,9 @@
 /* components/fields/shared/inputControlSizes.module.css */
 .opus_8ChDQJ_sizeSm {
-  --opus-control-height: 24px;
-  --opus-control-padding-x: 8px;
+  --opus-control-height: 28px;
+  --opus-control-padding-x: 10px;
   --opus-control-padding-y: 6px;
-  --opus-control-font-size: .78rem;
+  --opus-control-font-size: .82rem;
   --opus-control-prefix-gap: 6px;
   --opus-control-prefix-size: 12px;
   --opus-control-suffix-inset: 30px;
@@ -19,10 +19,10 @@
 }
 
 .opus_8ChDQJ_sizeMd {
-  --opus-control-height: 28px;
-  --opus-control-padding-x: 10px;
+  --opus-control-height: 32px;
+  --opus-control-padding-x: 12px;
   --opus-control-padding-y: 8px;
-  --opus-control-font-size: .86rem;
+  --opus-control-font-size: .88rem;
   --opus-control-prefix-gap: 8px;
   --opus-control-prefix-size: 14px;
   --opus-control-suffix-inset: 38px;
@@ -38,10 +38,10 @@
 }
 
 .opus_8ChDQJ_sizeLg {
-  --opus-control-height: 36px;
-  --opus-control-padding-x: 14px;
+  --opus-control-height: 40px;
+  --opus-control-padding-x: 16px;
   --opus-control-padding-y: 10px;
-  --opus-control-font-size: .95rem;
+  --opus-control-font-size: .98rem;
   --opus-control-prefix-gap: 10px;
   --opus-control-prefix-size: 16px;
   --opus-control-suffix-inset: 44px;
@@ -74,6 +74,22 @@
   display: inline-flex;
 }
 
+.opus_lZkc26_button[data-control-radius="medium"] {
+  --opus-input-radius: 12px;
+}
+
+.opus_lZkc26_button[data-control-radius="large"] {
+  --opus-input-radius: 18px;
+}
+
+.opus_lZkc26_button[data-control-radius="none"] {
+  --opus-input-radius: 0;
+}
+
+.opus_lZkc26_button[data-control-radius="full"] {
+  --opus-input-radius: 999px;
+}
+
 .opus_lZkc26_button svg {
   flex-shrink: 0;
   width: .92em;
@@ -97,6 +113,18 @@
   border-color: #6c757d;
 }
 
+.opus_lZkc26_tertiary {
+  border-color: color-mix(in srgb, var(--opus-border) 84%, var(--opus-accent));
+  background: color-mix(in srgb, var(--opus-panel) 88%, var(--opus-accent) 12%);
+  color: var(--opus-text);
+}
+
+.opus_lZkc26_tertiary:hover {
+  border-color: var(--opus-accent);
+  background: var(--opus-accent-soft);
+  color: var(--opus-accent);
+}
+
 .opus_lZkc26_success {
   color: #fff;
   background: #198754;
@@ -242,6 +270,47 @@
 }
 
 /* components/fields/FieldShell/FieldShell.module.css */
+.opus_zNi12Z_root[data-control-radius="medium"] {
+  --opus-input-radius: 12px;
+}
+
+.opus_zNi12Z_root[data-control-radius="large"] {
+  --opus-input-radius: 15px;
+  --opus-input-radius-large: 15px;
+  --opus-input-radius-small: 15px;
+}
+
+.opus_zNi12Z_root[data-control-radius="none"] {
+  --opus-input-radius: 0;
+  --opus-input-radius-large: 0;
+  --opus-input-radius-small: 0;
+}
+
+.opus_zNi12Z_root[data-control-radius="full"] {
+  --opus-input-radius: 999px;
+  --opus-input-radius-large: 20px;
+  --opus-input-radius-small: 999px;
+}
+
+.opus_zNi12Z_root[data-control-radius="full"] textarea, .opus_zNi12Z_root[data-control-radius="full"] [contenteditable="true"] {
+  border-radius: 20px;
+}
+
+.opus_zNi12Z_root[data-control-transparency="none"] {
+  --opus-input-bg: transparent;
+  --opus-input-fill: transparent;
+}
+
+.opus_zNi12Z_root[data-control-transparency="glass"] {
+  --opus-input-bg: var(--opus-glass-surface, color-mix(in srgb, var(--opus-panel) 42%, transparent));
+  --opus-input-fill: var(--opus-glass-surface, color-mix(in srgb, var(--opus-panel) 32%, transparent));
+}
+
+.opus_zNi12Z_root[data-control-gradient="true"] {
+  --opus-input-bg: linear-gradient(135deg, color-mix(in srgb, var(--opus-accent) 12%, var(--opus-panel)), var(--opus-panel));
+  --opus-input-fill: linear-gradient(135deg, color-mix(in srgb, var(--opus-accent) 8%, var(--opus-panel)), var(--opus-panel));
+}
+
 .opus_zNi12Z_root {
   gap: 8px;
   width: 100%;
@@ -634,6 +703,30 @@
 }
 
 /* components/fields/ColorPickerPanel/ColorPickerPanel.module.css */
+.opus_3MH1FS_panel[data-control-radius="medium"] {
+  --opus-input-radius: 12px;
+  --opus-input-radius-large: 12px;
+  --opus-input-radius-small: 12px;
+}
+
+.opus_3MH1FS_panel[data-control-radius="large"] {
+  --opus-input-radius: 18px;
+  --opus-input-radius-large: 18px;
+  --opus-input-radius-small: 18px;
+}
+
+.opus_3MH1FS_panel[data-control-radius="none"] {
+  --opus-input-radius: 0;
+  --opus-input-radius-large: 0;
+  --opus-input-radius-small: 0;
+}
+
+.opus_3MH1FS_panel[data-control-radius="full"] {
+  --opus-input-radius: 999px;
+  --opus-input-radius-large: 999px;
+  --opus-input-radius-small: 999px;
+}
+
 .opus_3MH1FS_panel {
   border: 1px solid var(--opus-border);
   border-radius: var(--opus-input-radius-large);
@@ -2894,11 +2987,16 @@
 }
 
 .opus_1Q5xBh_panel {
+  --opus-menu-radius: 14px;
+  --opus-menu-surface: var(--opus-menu-surface-token, var(--opus-panel));
   z-index: 20;
   border: 1px solid var(--opus-border-strong);
-  border-radius: var(--opus-input-radius-large);
-  background: var(--opus-panel);
-  box-shadow: var(--opus-shadow);
+  border-radius: var(--opus-menu-radius);
+  background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--opus-accent) 14%, transparent), transparent 34%),
+    var(--opus-menu-surface, var(--opus-menu-glass-surface, var(--opus-panel)));
+  box-shadow: 0 28px 80px #02061757,
+    0 0 0 1px color-mix(in srgb, var(--opus-accent) 10%, transparent);
+  backdrop-filter: blur(20px) saturate(1.35);
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
@@ -2958,6 +3056,7 @@
 }
 
 .opus_1Q5xBh_option {
+  border-radius: var(--opus-menu-item-radius, var(--opus-input-radius));
   color: var(--opus-text);
   cursor: pointer;
   align-items: center;
@@ -2968,7 +3067,7 @@
 }
 
 .opus_1Q5xBh_option:hover {
-  background: color-mix(in srgb, var(--opus-accent-soft) 65%, transparent);
+  background: color-mix(in srgb, var(--opus-accent) 14%, transparent);
 }
 
 .opus_1Q5xBh_option input {
@@ -3014,6 +3113,11 @@
   font-weight: 650;
 }
 
+.opus_m2ObG0_optionHighlighted {
+  background: color-mix(in srgb, var(--opus-accent) 14%, transparent);
+  outline: none;
+}
+
 .opus_m2ObG0_hiddenSelect {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -4169,9 +4273,12 @@
 .opus_1Fg59A_panel {
   z-index: 20;
   border: 1px solid var(--opus-border-strong);
-  border-radius: var(--opus-input-radius-large);
-  background: var(--opus-panel);
-  box-shadow: var(--opus-shadow);
+  background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--opus-accent) 14%, transparent), transparent 34%),
+    var(--opus-menu-surface-token, var(--opus-panel));
+  box-shadow: 0 28px 80px #02061757,
+    0 0 0 1px color-mix(in srgb, var(--opus-accent) 10%, transparent);
+  backdrop-filter: blur(20px) saturate(1.35);
+  border-radius: 14px;
   grid-auto-flow: column;
   gap: 0;
   display: grid;
@@ -4199,6 +4306,7 @@
   cursor: pointer;
   background: none;
   border: 0;
+  border-radius: 8px;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
@@ -10258,6 +10366,7 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
 .opus_7RMR7r_input {
   aspect-ratio: 1;
   border: 1px solid var(--opus-border);
+  border-radius: var(--opus-input-radius);
   width: 100%;
   min-width: 0;
   color: var(--opus-text);
@@ -10265,7 +10374,6 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
   box-sizing: border-box;
   font: inherit;
   text-align: center;
-  border-radius: 10px;
   font-size: 1.25rem;
   font-weight: 700;
 }
@@ -10287,6 +10395,22 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
 }
 
 /* components/fields/ComboboxField/ComboboxField.module.css */
+.opus_tXYPoZ_portal[data-control-radius="medium"] {
+  --opus-input-radius: 12px;
+}
+
+.opus_tXYPoZ_portal[data-control-radius="large"] {
+  --opus-input-radius: 18px;
+}
+
+.opus_tXYPoZ_portal[data-control-radius="none"] {
+  --opus-input-radius: 0;
+}
+
+.opus_tXYPoZ_portal[data-control-radius="full"] {
+  --opus-input-radius: 999px;
+}
+
 .opus_tXYPoZ_root {
   width: 100%;
   position: relative;
@@ -10296,11 +10420,11 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
   width: 100%;
   min-height: var(--opus-control-height);
   border: 1px solid var(--opus-border);
+  border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
   color: var(--opus-text);
   box-sizing: border-box;
   font: inherit;
-  border-radius: 10px;
   padding: 0 12px;
 }
 
@@ -10322,10 +10446,12 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
 
 .opus_tXYPoZ_list {
   border: 1px solid var(--opus-border-strong);
-  border-radius: var(--opus-input-radius-large, 12px);
-  background: var(--opus-panel);
+  background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--opus-accent) 14%, transparent), transparent 34%),
+    var(--opus-menu-surface-token, var(--opus-panel));
   max-height: min(280px, 50vh);
   box-shadow: var(--opus-shadow);
+  backdrop-filter: blur(20px) saturate(1.35);
+  border-radius: 14px;
   overflow: auto;
 }
 
@@ -13202,11 +13328,9 @@ button.opus_7Zs_d5_docCard:hover, .opus_7Zs_d5_docCard[data-kind="folder"]:hover
 .opus_f7gfHI_stage {
   border: 1px solid color-mix(in srgb, var(--opus-border) 78%, transparent);
   border-radius: var(--opus-input-radius-large);
-  background: radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--opus-accent) 22%, transparent), transparent 34%),
-    linear-gradient(135deg, #2563eb2e, transparent 52%),
-    color-mix(in srgb, var(--opus-input-bg) 86%, var(--opus-panel));
   min-height: 260px;
   box-shadow: var(--opus-shadow);
+  background: #000;
   position: relative;
   overflow: hidden;
 }
@@ -22083,11 +22207,11 @@ button.opus_Fxxd7-_card:focus-visible {
 .opus_cH5Wrp_input {
   box-sizing: border-box;
   border: 1px solid var(--opus-border);
+  border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg, var(--opus-panel));
   width: 100%;
   color: var(--opus-text);
   font: inherit;
-  border-radius: 10px;
   padding: 11px 12px;
 }
 
@@ -22098,16 +22222,17 @@ button.opus_Fxxd7-_card:focus-visible {
 
 .opus_cH5Wrp_list {
   z-index: 30;
-  border: 1px solid var(--opus-border);
-  background: var(--opus-panel);
-  border-radius: 12px;
+  border: 1px solid var(--opus-border-strong);
+  background: radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--opus-accent) 14%,transparent),transparent 34%),var(--opus-menu-surface-token, var(--opus-panel));
   max-height: 240px;
+  box-shadow: 0 28px 80px #02061757,0 0 0 1px color-mix(in srgb,var(--opus-accent) 10%,transparent);
+  backdrop-filter: blur(20px) saturate(1.35);
+  border-radius: 14px;
   padding: 6px;
   display: grid;
   position: absolute;
   inset: calc(100% + 6px) 0 auto;
   overflow: auto;
-  box-shadow: 0 16px 36px #00000047;
 }
 
 .opus_cH5Wrp_list p {
@@ -22147,10 +22272,10 @@ button.opus_Fxxd7-_card:focus-visible {
 .opus_RIwluQ_root input {
   box-sizing: border-box;
   border: 1px solid var(--opus-border);
+  border-radius: var(--opus-input-radius);
   background: var(--opus-input-bg);
   width: 100%;
   color: var(--opus-text);
-  border-radius: 8px;
   padding: 12px;
 }
 
@@ -22158,8 +22283,8 @@ button.opus_Fxxd7-_card:focus-visible {
   z-index: 20;
   inset-inline: 0;
   border: 1px solid var(--opus-border);
+  border-radius: var(--opus-input-radius-large);
   background: var(--opus-panel);
-  border-radius: 10px;
   padding: 6px;
   position: absolute;
   top: calc(100% + 6px);
@@ -22167,12 +22292,12 @@ button.opus_Fxxd7-_card:focus-visible {
 }
 
 .opus_RIwluQ_menu button {
+  border-radius: var(--opus-input-radius-small);
   width: 100%;
   color: var(--opus-text);
   text-align: left;
   background: none;
   border: 0;
-  border-radius: 7px;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 2px 8px;
@@ -27802,6 +27927,194 @@ body:not(.dark-mode) .opus_KL4dkl_subtitle {
   }
 }
 
+/* components/BackgroundBlobs/BackgroundBlobs.module.css */
+.opus_077MRo_root {
+  width: 100%;
+  min-height: 640px;
+  position: relative;
+}
+
+.opus_077MRo_blobLayer[data-placement="fixed"] {
+  z-index: -1;
+  position: fixed;
+}
+
+.opus_077MRo_blobLayer[data-placement="absolute"] {
+  z-index: 0;
+  height: 100%;
+}
+
+.opus_077MRo_blobLayer {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.opus_077MRo_content {
+  z-index: 1;
+  box-sizing: border-box;
+  pointer-events: auto;
+  place-items: end start;
+  min-height: 100%;
+  display: grid;
+  position: relative;
+}
+
+.opus_077MRo_root[data-placement="absolute"][data-pad-parent="true"] .opus_077MRo_content {
+  padding: 32px;
+}
+
+.opus_077MRo_blob {
+  filter: brightness(var(--opus-blob-brightness, 1)) blur(var(--opus-blob-blur, 80px));
+  will-change: transform;
+  transition: border-radius 1.8s ease-in-out;
+  display: block;
+  position: absolute;
+}
+
+.opus_077MRo_blob[data-drift="a"] {
+  border-radius: 42% 58% 62% 38% / 42% 36% 64% 58%;
+  animation: 7s ease-in-out infinite opus_077MRo_opusBlobDriftA;
+}
+
+.opus_077MRo_blob[data-drift="b"] {
+  border-radius: 58% 42% 38% 62% / 48% 62% 38% 52%;
+  animation: 8s ease-in-out infinite opus_077MRo_opusBlobDriftB;
+}
+
+.opus_077MRo_blob[data-drift="c"] {
+  border-radius: 38% 62% 48% 52% / 58% 42%;
+  animation: 9s ease-in-out infinite opus_077MRo_opusBlobDriftC;
+}
+
+.opus_077MRo_blob[data-drift="a-reverse"] {
+  border-radius: 62% 38% 52% 48% / 42% 58%;
+  animation: 8s ease-in-out infinite reverse opus_077MRo_opusBlobDriftA;
+}
+
+.opus_077MRo_root[data-animated="false"] .opus_077MRo_blob {
+  will-change: auto;
+  animation: none;
+}
+
+.opus_077MRo_root[data-programmatic="true"] .opus_077MRo_blob {
+  animation: none;
+}
+
+@keyframes opus_077MRo_opusBlobDriftA {
+  0% {
+    border-radius: 42% 58% 62% 38% / 42% 36% 64% 58%;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  18% {
+    border-radius: 58% 42% 38% 62% / 52% 48%;
+    transform: translate3d(22%, -12%, 0) scale(1.16);
+  }
+
+  36% {
+    border-radius: 38% 62% 52% 48% / 62% 38% 48% 52%;
+    transform: translate3d(10%, 24%, 0) scale(.88);
+  }
+
+  54% {
+    border-radius: 62% 38% 48% 52% / 42% 58%;
+    transform: translate3d(-20%, 12%, 0) scale(1.08);
+  }
+
+  72% {
+    border-radius: 46% 54% 64% 36% / 56% 44% 58% 42%;
+    transform: translate3d(-12%, -22%, 0) scale(.92);
+  }
+
+  88% {
+    border-radius: 54% 46% 42% 58% / 38% 62% 48% 52%;
+    transform: translate3d(16%, -18%, 0) scale(1.12);
+  }
+
+  100% {
+    border-radius: 42% 58% 62% 38% / 42% 36% 64% 58%;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes opus_077MRo_opusBlobDriftB {
+  0% {
+    border-radius: 58% 42% 38% 62% / 48% 62% 38% 52%;
+    transform: translate3d(0, 0, 0) scale(1.05);
+  }
+
+  20% {
+    border-radius: 42% 58% 62% 38% / 58% 42% 48% 52%;
+    transform: translate3d(-20%, 18%, 0) scale(.9);
+  }
+
+  42% {
+    border-radius: 62% 38% 48% 52% / 38% 62% 52% 48%;
+    transform: translate3d(-8%, -20%, 0) scale(1.18);
+  }
+
+  64% {
+    border-radius: 36% 64% 56% 44% / 54% 46% 62% 38%;
+    transform: translate3d(22%, -8%, 0) scale(1.08);
+  }
+
+  82% {
+    border-radius: 56% 44% 42% 58% / 44% 56% 38% 62%;
+    transform: translate3d(12%, 22%, 0) scale(.94);
+  }
+
+  100% {
+    border-radius: 58% 42% 38% 62% / 48% 62% 38% 52%;
+    transform: translate3d(0, 0, 0) scale(1.05);
+  }
+}
+
+@keyframes opus_077MRo_opusBlobDriftC {
+  0% {
+    border-radius: 38% 62% 48% 52% / 58% 42%;
+    transform: translate3d(0, 0, 0) scale(.96);
+  }
+
+  17% {
+    border-radius: 52% 48% 38% 62% / 42% 58%;
+    transform: translate3d(16%, -24%, 0) scale(1.18);
+  }
+
+  34% {
+    border-radius: 62% 38% 54% 46% / 48% 52% 58% 42%;
+    transform: translate3d(-16%, -12%, 0) scale(1.06);
+  }
+
+  51% {
+    border-radius: 44% 56% 62% 38% / 62% 38% 46% 54%;
+    transform: translate3d(-24%, 18%, 0) scale(.9);
+  }
+
+  68% {
+    border-radius: 58% 42% 46% 54% / 38% 62% 54% 46%;
+    transform: translate3d(4%, 24%, 0) scale(1.12);
+  }
+
+  84% {
+    border-radius: 36% 64% 52% 48% / 56% 44% 62% 38%;
+    transform: translate3d(22%, 8%, 0) scale(.98);
+  }
+
+  100% {
+    border-radius: 38% 62% 48% 52% / 58% 42%;
+    transform: translate3d(0, 0, 0) scale(.96);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .opus_077MRo_blob {
+    will-change: auto;
+    animation: none;
+  }
+}
+
 /* components/ColourClouds/ColourClouds.module.css */
 .opus_mKFpa5_control {
   flex: none;