@membranehq/react 0.15.3 → 0.15.5

package/dist/esm/ui-kit/styled/utils/create-style-context.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.3
+ * v0.15.5
  */
 'use client';
 

package/dist/esm/ui-kit/switch.mjs

@@ -2,7 +2,7 @@
 /*
  * Membrane React package
  * {@link https://www.npmjs.com/package/@membranehq/react}
- * v0.15.3
+ * v0.15.5
  */
 'use client';
 

package/dist/styles.css

@@ -1355,9 +1355,9 @@
     --iap-colors-fg-disabled: var(--iap-colors-gray-9);
     --iap-colors-fg-error: var(--iap-colors-red-9);
     --iap-colors-border-default: var(--iap-colors-gray-7);
-    --iap-colors-border-muted: var(--iap-colors-gray-6);
-    --iap-colors-border-subtle: var(--iap-colors-gray-4);
-    --iap-colors-border-disabled: var(--iap-colors-gray-5);
+    --iap-colors-border-muted: var(--iap-colors-gray-7);
+    --iap-colors-border-subtle: var(--iap-colors-gray-6);
+    --iap-colors-border-disabled: var(--iap-colors-gray-6);
     --iap-colors-border-outline: var(--iap-colors-gray-a9);
     --iap-colors-border-error: var(--iap-colors-red-9);
     --iap-colors-red-1: var(--iap-colors-red-dark-1);
@@ -3030,12 +3030,16 @@
 }
 }
 
+  .iap---scroll-shadow-bg_colors\.bg\.default {
+    --scroll-shadow-bg: var(--iap-colors-bg-default);
+}
+
   .iap---thickness_1px {
     --thickness: 1px;
 }
 
-  .iap-bg_white {
-    background: var(--iap-colors-white);
+  .iap-bg_bg\.default {
+    background: var(--iap-colors-bg-default);
 }
 
   .iap-p_0 {
@@ -3054,8 +3058,8 @@
     padding: var(--iap-spacing-2);
 }
 
-  .iap-bg_slate\.2 {
-    background: var(--iap-colors-slate-2);
+  .iap-bg_bg\.subtle {
+    background: var(--iap-colors-bg-subtle);
 }
 
   .iap-bg_green {
@@ -3078,10 +3082,6 @@
     border: 1px;
 }
 
-  .iap-bg_slate\.1 {
-    background: var(--iap-colors-slate-1);
-}
-
   .iap-bg_tomato\.10 {
     background: var(--iap-colors-tomato-10);
 }
@@ -3090,12 +3090,16 @@
     padding: var(--iap-spacing-1);
 }
 
-  .iap-bg_gray\.3 {
-    background: var(--iap-colors-gray-3);
+  .iap-bg_bg\.muted {
+    background: var(--iap-colors-bg-muted);
 }
 
-  .iap-bg_linear-gradient\(\#ffffff_33\%\,_rgba\(255\,_255\,_255\,_0\)\)\,_linear-gradient\(rgba\(255\,_255\,_255\,_0\)\,_\#ffffff_66\%\)_0_100\%\,_radial-gradient\(farthest-side_at_50\%_0\,_rgba\(34\,_34\,_34\,_0\.5\)\,_rgba\(0\,_0\,_0\,_0\)\)\,_radial-gradient\(farthest-side_at_50\%_100\%\,_rgba\(34\,_34\,_34\,_0\.5\)\,_rgba\(0\,_0\,_0\,_0\)\)_0_100\% {
-    background: linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)) 0 100%;
+  .iap-bg_linear-gradient\(var\(--scroll-shadow-bg\)_33\%\,_transparent\)\,_linear-gradient\(transparent\,_var\(--scroll-shadow-bg\)_66\%\)_0_100\%\,_radial-gradient\(farthest-side_at_50\%_0\,_rgba\(34\,_34\,_34\,_0\.5\)\,_rgba\(0\,_0\,_0\,_0\)\)\,_radial-gradient\(farthest-side_at_50\%_100\%\,_rgba\(34\,_34\,_34\,_0\.5\)\,_rgba\(0\,_0\,_0\,_0\)\)_0_100\% {
+    background: linear-gradient(var(--scroll-shadow-bg) 33%, transparent), linear-gradient(transparent, var(--scroll-shadow-bg) 66%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)) 0 100%;
+}
+
+  .iap-bg_white {
+    background: var(--iap-colors-white);
 }
 
   .iap-p_3 {
@@ -3142,10 +3146,6 @@
     margin: var(--iap-spacing-0);
 }
 
-  .iap-bg_gray\.2 {
-    background: var(--iap-colors-gray-2);
-}
-
   .iap-bg_colorPalette\.3 {
     background: var(--iap-colors-color-palette-3);
 }
@@ -3154,8 +3154,12 @@
     background: var(--iap-colors-transparent) !important;
 }
 
-  .iap-bg_slate\.4 {
-    background: var(--iap-colors-slate-4);
+  .iap-bg_bg\.emphasized {
+    background: var(--iap-colors-bg-emphasized);
+}
+
+  .iap-bg_gray\.2 {
+    background: var(--iap-colors-gray-2);
 }
 
   .iap-bg_warning\.2 {
@@ -3174,8 +3178,8 @@
     border-radius: var(--iap-radii-lg);
 }
 
-  .iap-bd-c_gray\.2 {
-    border-color: var(--iap-colors-gray-2);
+  .iap-bd-c_border\.subtle {
+    border-color: var(--iap-colors-border-subtle);
 }
 
   .iap-bd-w_0\.5 {
@@ -3206,10 +3210,6 @@
     padding-block: var(--iap-spacing-1);
 }
 
-  .iap-bd-c_slate\.3 {
-    border-color: var(--iap-colors-slate-3);
-}
-
   .iap-bd-w_thin {
     border-width: thin;
 }
@@ -3242,8 +3242,8 @@
     border-style: solid;
 }
 
-  .iap-bd-c_gray\.6 {
-    border-color: var(--iap-colors-gray-6);
+  .iap-bd-c_border\.muted {
+    border-color: var(--iap-colors-border-muted);
 }
 
   .iap-px_2\.5 {
@@ -3278,8 +3278,8 @@
     border-radius: var(--iap-radii-full);
 }
 
-  .iap-bd-c_gray\.5 {
-    border-color: var(--iap-colors-gray-5);
+  .iap-bd-c_bg\.disabled {
+    border-color: var(--iap-colors-bg-disabled);
 }
 
   .iap-flex_0_0_auto {
@@ -3350,10 +3350,6 @@
     gap: var(--iap-spacing-0\.5);
 }
 
-  .iap-bd-c_gray\.4 {
-    border-color: var(--iap-colors-gray-4);
-}
-
   .iap-gap_5 {
     gap: var(--iap-spacing-5);
 }
@@ -3378,10 +3374,6 @@
     border-color: var(--iap-colors-transparent) !important;
 }
 
-  .iap-bd-c_slate\.5 {
-    border-color: var(--iap-colors-slate-5);
-}
-
   .iap-ring_none {
     outline: var(--iap-borders-none);
 }
@@ -3450,8 +3442,8 @@
     flex-grow: 1;
 }
 
-  .iap-c_slate\.11 {
-    color: var(--iap-colors-slate-11);
+  .iap-c_fg\.muted {
+    color: var(--iap-colors-fg-muted);
 }
 
   .iap-tt_uppercase {
@@ -3494,26 +3486,22 @@
     overflow-wrap: break-word;
 }
 
-  .iap-c_slate\.9 {
-    color: var(--iap-colors-slate-9);
+  .iap-c_fg\.disabled {
+    color: var(--iap-colors-fg-disabled);
 }
 
   .iap-ta_right {
     text-align: right;
 }
 
-  .iap-c_slate\.12 {
-    color: var(--iap-colors-slate-12);
+  .iap-c_fg\.default {
+    color: var(--iap-colors-fg-default);
 }
 
   .iap-c_tomato\.10 {
     color: var(--iap-colors-tomato-10);
 }
 
-  .iap-c_fg\.default {
-    color: var(--iap-colors-fg-default);
-}
-
   .iap-op_0 {
     opacity: 0;
 }
@@ -3641,8 +3629,8 @@
     line-height: 1.2;
 }
 
-  .iap-c_slate\.10 {
-    color: var(--iap-colors-slate-10);
+  .iap-c_fg\.subtle {
+    color: var(--iap-colors-fg-subtle);
 }
 
   .iap-jc_center {
@@ -3673,10 +3661,6 @@
     justify-content: start;
 }
 
-  .iap-c_neutral\.10 {
-    color: var(--iap-colors-neutral-10);
-}
-
   .iap-flex-sh_1 {
     flex-shrink: 1;
 }
@@ -3706,6 +3690,10 @@
     font-size: var(--iap-font-sizes-sm);
 }
 
+  .iap-c_slate\.11 {
+    color: var(--iap-colors-slate-11);
+}
+
   .iap-bg-c_transparent {
     background-color: var(--iap-colors-transparent);
 }
@@ -3816,14 +3804,14 @@
     box-shadow: var(--iap-shadows-2xl);
 }
 
-  .iap-c_gray\.11 {
-    color: var(--iap-colors-gray-11);
-}
-
   .iap-fw_bold {
     font-weight: var(--iap-font-weights-bold);
 }
 
+  .iap-c_slate\.12 {
+    color: var(--iap-colors-slate-12);
+}
+
   .iap-jc_flex-start {
     justify-content: flex-start;
 }
@@ -4301,8 +4289,8 @@
     overflow-x: hidden;
 }
 
-  .iap-bd-l-c_slate\.3 {
-    border-left-color: var(--iap-colors-slate-3);
+  .iap-bd-l-c_border\.subtle {
+    border-left-color: var(--iap-colors-border-subtle);
 }
 
   .iap-min-h_8\.5 {
@@ -4537,8 +4525,8 @@
     margin-top: var(--iap-spacing-1\.5);
 }
 
-  .current\:iap-bg_slate\.3:is([data-current]) {
-    background: var(--iap-colors-slate-3);
+  .current\:iap-bg_bg\.muted:is([data-current]) {
+    background: var(--iap-colors-bg-muted);
 }
 
   .\[\&\:has\(\.simple-input__textarea\)\]\:iap-p_0:has(.simple-input__textarea) {
@@ -4553,20 +4541,20 @@
     padding: var(--iap-spacing-1\.5);
 }
 
-  .\[\&\[data-selected\=\"true\"\]\]\:iap-bg_gray\.3[data-selected="true"] {
-    background: var(--iap-colors-gray-3);
+  .\[\&\[data-selected\=\"true\"\]\]\:iap-bg_bg\.muted[data-selected="true"] {
+    background: var(--iap-colors-bg-muted);
 }
 
-  .\[\&\[data-highlighted\]\]\:iap-bg_gray\.4[data-highlighted] {
-    background: var(--iap-colors-gray-4);
+  .\[\&\[data-highlighted\]\]\:iap-bg_bg\.emphasized[data-highlighted] {
+    background: var(--iap-colors-bg-emphasized);
 }
 
   [data-selected='true'] .\[\[data-selected\=\'true\'\]_\&\,_\[data-tag-dropdown-open\=\'true\'\]_\&\]\:iap-bg_colorPalette\.5,[data-tag-dropdown-open='true'] .\[\[data-selected\=\'true\'\]_\&\,_\[data-tag-dropdown-open\=\'true\'\]_\&\]\:iap-bg_colorPalette\.5 {
     background: var(--iap-colors-color-palette-5);
 }
 
-  [aria-disabled='true'] .\[\[aria-disabled\=\'true\'\]_\&\]\:iap-bg_slate\.4 {
-    background: var(--iap-colors-slate-4);
+  [aria-disabled='true'] .\[\[aria-disabled\=\'true\'\]_\&\]\:iap-bg_bg\.emphasized {
+    background: var(--iap-colors-bg-emphasized);
 }
 
   .\[\&\:has\(\.simple-input__textarea\)\]\:iap-px_3:has(.simple-input__textarea) {
@@ -4635,8 +4623,8 @@
     border-color: var(--iap-colors-color-palette-6);
 }
 
-  [aria-disabled='true'] .\[\[aria-disabled\=\'true\'\]_\&\]\:iap-bd-c_slate\.5 {
-    border-color: var(--iap-colors-slate-5);
+  [aria-disabled='true'] .\[\[aria-disabled\=\'true\'\]_\&\]\:iap-bd-c_bg\.disabled {
+    border-color: var(--iap-colors-bg-disabled);
 }
 
   .placeholderShown\:iap-trunc_true:is(:placeholder-shown, [data-placeholder-shown]) {
@@ -4714,8 +4702,8 @@
     font-weight: var(--iap-font-weights-bold);
 }
 
-  .disabled\:iap-c_slate\.8:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-    color: var(--iap-colors-slate-8);
+  .disabled\:iap-c_fg\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    color: var(--iap-colors-fg-disabled);
 }
 
   .disabled\:iap-cursor_not-allowed:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
@@ -4746,8 +4734,8 @@
     pointer-events: none;
 }
 
-  [aria-disabled='true'] .\[\[aria-disabled\=\'true\'\]_\&\]\:iap-c_black {
-    color: var(--iap-colors-black);
+  [aria-disabled='true'] .\[\[aria-disabled\=\'true\'\]_\&\]\:iap-c_fg\.default {
+    color: var(--iap-colors-fg-default);
 }
 
   [aria-disabled='true'] .\[\[aria-disabled\=\'true\'\]_\&\]\:iap-cursor_initial {
@@ -4842,8 +4830,8 @@
     background: var(--iap-colors-gray-2);
 }
 
-  .focusVisible\:iap-bg_neutral\.2:is(:focus-visible, [data-focus-visible]) {
-    background: var(--iap-colors-neutral-2);
+  .focusVisible\:iap-bg_bg\.subtle:is(:focus-visible, [data-focus-visible]) {
+    background: var(--iap-colors-bg-subtle);
 }
 
   .focus\:iap-bg_colorPalette\.6:is(:focus, [data-focus]) {
@@ -4879,8 +4867,8 @@
     --gradient-to: var(--iap-colors-color-palette-4) !important;
 }
 
-  .active\:iap-bg_slate\.3:is(:active, [data-active]) {
-    background: var(--iap-colors-slate-3);
+  .active\:iap-bg_bg\.muted:is(:active, [data-active]) {
+    background: var(--iap-colors-bg-muted);
 }
 
   .active\:iap-bg_colorPalette\.5:is(:active, [data-active]) {
@@ -4891,8 +4879,8 @@
     border-color: var(--iap-colors-color-palette-6);
 }
 
-  .expanded\:\[\&_p\]\:iap-bg_slate\.2:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) p {
-    background: var(--iap-colors-slate-2);
+  .expanded\:\[\&_p\]\:iap-bg_bg\.subtle:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) p {
+    background: var(--iap-colors-bg-subtle);
 }
 
   .\[\&_p\]\:\[\&\:has\(\[data-editor-tag\=\'true\'\]\)\]\:iap-py_0 p:has([data-editor-tag='true']) {
@@ -4943,8 +4931,8 @@
     content: none;
 }
 
-  .empty\:after\:iap-c_gray\.9:is(:empty, [data-empty])::after {
-    color: var(--iap-colors-gray-9);
+  .empty\:after\:iap-c_fg\.disabled:is(:empty, [data-empty])::after {
+    color: var(--iap-colors-fg-disabled);
 }
 
   .empty\:after\:iap-content_var\(--placeholder-text\):is(:empty, [data-empty])::after {
@@ -4999,8 +4987,8 @@
     stroke-width: 3px;
 }
 
-  .\[\&\:hover\:not\(\:has\(\[data-editor-tag\=\'true\'\]\:hover\)\)\]\:\[\&_p\]\:iap-bg_slate\.2:hover:not(:has([data-editor-tag='true']:hover)) p {
-    background: var(--iap-colors-slate-2);
+  .\[\&\:hover\:not\(\:has\(\[data-editor-tag\=\'true\'\]\:hover\)\)\]\:\[\&_p\]\:iap-bg_bg\.subtle:hover:not(:has([data-editor-tag='true']:hover)) p {
+    background: var(--iap-colors-bg-subtle);
 }
 
   @media screen and (min-width: 40rem) {
@@ -5034,8 +5022,8 @@
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-bg_slate\.3:is(:hover, [data-hover]) {
-      background: var(--iap-colors-slate-3);
+    .hover\:iap-bg_bg\.muted:is(:hover, [data-hover]) {
+      background: var(--iap-colors-bg-muted);
 }
 }
 
@@ -5046,26 +5034,14 @@
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-bg_slate\.4:is(:hover, [data-hover]) {
-      background: var(--iap-colors-slate-4);
-}
-}
-
-  @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-bg_slate\.2:is(:hover, [data-hover]) {
-      background: var(--iap-colors-slate-2);
-}
-}
-
-  @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-bg_neutral\.2:is(:hover, [data-hover]) {
-      background: var(--iap-colors-neutral-2);
+    .hover\:iap-bg_bg\.emphasized:is(:hover, [data-hover]) {
+      background: var(--iap-colors-bg-emphasized);
 }
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-bg_gray\.4:is(:hover, [data-hover]) {
-      background: var(--iap-colors-gray-4);
+    .hover\:iap-bg_bg\.subtle:is(:hover, [data-hover]) {
+      background: var(--iap-colors-bg-subtle);
 }
 }
 
@@ -5082,8 +5058,8 @@
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-bd-c_slate\.4:is(:hover, [data-hover]) {
-      border-color: var(--iap-colors-slate-4);
+    .hover\:iap-bd-c_border\.muted:is(:hover, [data-hover]) {
+      border-color: var(--iap-colors-border-muted);
 }
 }
 
@@ -5100,8 +5076,8 @@
 }
 
   @media (hover: hover) and (pointer: fine) {
-    .hover\:iap-c_slate\.11:is(:hover, [data-hover]) {
-      color: var(--iap-colors-slate-11);
+    .hover\:iap-c_fg\.muted:is(:hover, [data-hover]) {
+      color: var(--iap-colors-fg-muted);
 }
 }
 

package/dist/types/components/ComboBox/Badges/EditorTagBadge/index.d.ts

@@ -4,7 +4,7 @@ export declare const editorTagBadgeRecipe: import("../../../../styled-system/typ
     variant: {
         'static-value': {
             root: {
-                color: "black";
+                color: "fg.default";
                 colorPalette: "gray";
             };
         };
@@ -45,9 +45,9 @@ export declare const editorTagBadgeRecipe: import("../../../../styled-system/typ
         true: {
             root: {
                 pointerEvents: "none";
-                bg: "slate.4";
-                borderColor: "slate.5";
-                color: "black";
+                bg: "bg.emphasized";
+                borderColor: "bg.disabled";
+                color: "fg.default";
                 cursor: "initial";
             };
         };

package/dist/types/components/ComboBoxElements/ComboboxContainer/index.d.ts

@@ -3,7 +3,7 @@ export declare const comboboxContainerRecipe: import("../../../styled-system/typ
     disabled: {
         true: {
             root: {
-                bg: "slate.2";
+                bg: "bg.subtle";
                 cursor: "initial";
             };
         };

package/dist/types/components/DataBuilderUI/Cell.d.ts

@@ -47,7 +47,7 @@ export declare const dataBuilderCellRecipe: import("../../styled-system/types").
                 display: "flex";
                 alignItems: "center";
                 justifyContent: "center";
-                color: "neutral.10";
+                color: "fg.subtle";
                 px: "2.5";
                 py: "2.5";
                 '& svg': {
@@ -61,7 +61,7 @@ export declare const dataBuilderCellRecipe: import("../../styled-system/types").
         true: {
             root: {
                 pointerEvents: "none";
-                bg: "slate.1";
+                bg: "bg.subtle";
             };
         };
         false: {};