@wix/site-ui 1.55.0 → 1.57.0

package/dist/ContextMenu/index.js

@@ -11,7 +11,7 @@ import { getTarget, contains } from "../4549.js";
 import { useRenderElement } from "../8272.js";
 import { pressableTriggerOpenStateMapping } from "../4388.js";
 import { useId } from "../6046.js";
-import { Separator } from "../9635.js";
+import { Separator as Separator_Separator } from "../9635.js";
 import * as __rspack_external_react from "react";
 const LONG_PRESS_DELAY = 500;
 const ContextMenuTrigger_ContextMenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
@@ -178,12 +178,19 @@ function ContextMenuRoot(props) {
     });
 }
 const ContextMenu_module = {
+    trigger: "trigger-D0oBie",
+    backdrop: "backdrop-SPwmGh",
+    positioner: "positioner-ZCJXBK",
     popup: "popup-exWvLg",
+    separator: "separator-FAmS6X",
+    arrow: "arrow-_xxSbP",
     groupLabel: "groupLabel-nJbnHC",
     item: "item-u6sdTm",
     checkboxItem: "checkboxItem-lQUwTw",
+    checkboxItemIndicator: "checkboxItemIndicator-kWKt4r",
     linkItem: "linkItem-w7Buqf",
     radioItem: "radioItem-GkHQXK",
+    radioItemIndicator: "radioItemIndicator-gKBhmr",
     submenuTrigger: "submenuTrigger-vAkD3A"
 };
 const Trigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ContextMenuTrigger_ContextMenuTrigger, {
@@ -261,6 +268,11 @@ const SubmenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ class
         className: clsx(ContextMenu_module.submenuTrigger, className),
         ...props
     }));
+const Separator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Separator_Separator, {
+        ref: ref,
+        className: clsx(ContextMenu_module.separator, className),
+        ...props
+    }));
 const ContextMenu = {
     Trigger: Trigger,
     Backdrop: Backdrop,
@@ -277,9 +289,9 @@ const ContextMenu = {
     RadioItem: RadioItem,
     RadioItemIndicator: RadioItemIndicator,
     SubmenuTrigger: SubmenuTrigger,
+    Separator: Separator,
     Root: ContextMenuRoot,
     SubmenuRoot: MenuSubmenuRoot,
-    Portal: MenuPortal_MenuPortal,
-    Separator: Separator
+    Portal: MenuPortal_MenuPortal
 };
 export { ContextMenu };

package/dist/Dialog/index.css

@@ -1,50 +1,79 @@
 .backdrop-EHLKAc {
+  background-color: color-mix(in srgb, var(--wst-system-default-dark-color, #212121) 60%, transparent);
+  z-index: 1000;
+  transition: opacity .2s;
   position: fixed;
   inset: 0;
 }
 
+.backdrop-EHLKAc[data-starting-style], .backdrop-EHLKAc[data-ending-style] {
+  opacity: 0;
+}
+
 .viewport-nOzLZZ {
+  box-sizing: border-box;
+  z-index: 1001;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  display: flex;
   position: fixed;
   inset: 0;
-  overflow: hidden;
+  overflow-y: auto;
 }
 
 .viewport-nOzLZZ :focus-visible {
-  outline: 2px solid highlight;
-  outline: 2px solid -webkit-focus-ring-color;
+  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
   outline-offset: 2px;
 }
 
 .popup-RjSkgq {
+  background-color: var(--wst-primary-background-color, #fff);
   box-sizing: border-box;
-  background-color: var(--wst-dialog-background-color, #fff);
+  border-radius: 8px;
   flex-direction: column;
-  min-width: 280px;
-  max-width: 980px;
-  min-height: 240px;
-  max-height: min(100vh, 620px);
-  padding: 32px;
+  gap: 16px;
+  width: 100%;
+  max-width: 500px;
+  padding: 24px;
+  transition: transform .2s cubic-bezier(.25, .46, .45, .94), opacity .2s cubic-bezier(.25, .46, .45, .94);
   display: flex;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  overflow: auto;
-  transform: translate(-50%, -50%);
+  box-shadow: 0 8px 24px #00000029, 0 0 4px #00000014;
+}
+
+.popup-RjSkgq[data-starting-style], .popup-RjSkgq[data-ending-style] {
+  opacity: 0;
+  transform: scale(.96) translateY(4px);
 }
 
 .close-zqdBdX {
-  color: var(--wst-dialog-close-button-color, #000);
+  cursor: pointer;
+  color: var(--wst-paragraph-2-color, #000);
+  background: none;
+  border: none;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 4px;
+  line-height: 0;
+  display: inline-flex;
+}
+
+.close-zqdBdX:hover {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 8%, transparent);
 }
 
 .title-U8Hyut {
-  font: var(--wst-heading-6-font);
-  color: var(--wst-heading-6-color);
-  margin: 0 0 8px;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  margin: 0;
+  font-weight: 700;
 }
 
 .description-ZV1a4j {
   font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-2-color);
-  margin: 0 0 16px;
+  color: var(--wst-shade-3-color, #767676);
+  margin: 0;
 }
 

package/dist/Drawer/index.css

@@ -1,48 +1,99 @@
 .description-hsuUfX {
   font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-2-color);
-  margin: 0 0 16px;
+  color: var(--wst-shade-3-color, #767676);
+  margin: 0;
 }
 
 .title-A0LbRg {
-  font: var(--wst-heading-6-font);
-  color: var(--wst-heading-6-color);
-  margin: 0 0 8px;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  margin: 0;
+  font-weight: 700;
+}
+
+.close-Dq55Tj {
+  cursor: pointer;
+  color: var(--wst-paragraph-2-color, #000);
+  background: none;
+  border: none;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 4px;
+  line-height: 0;
+  display: inline-flex;
+}
+
+.backdrop-ZQf73g {
+  background-color: color-mix(in srgb, var(--wst-system-default-dark-color, #212121) 60%, transparent);
+  z-index: 1000;
+  transition: opacity .2s;
+  position: fixed;
+  inset: 0;
+}
+
+.content-ouQWaR {
+  box-sizing: border-box;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.indentBackground-JX6m1u {
+  background-color: var(--wst-primary-background-color, #fff);
 }
 
 .popup-FjIEpg {
   background-color: var(--wst-primary-background-color, #fff);
+  box-sizing: border-box;
   flex-direction: column;
-  max-height: 80vh;
-  padding: 24px;
-  transition-duration: .3s;
-  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  width: 100%;
+  max-height: 90dvh;
+  transition: transform .3s cubic-bezier(.25, .46, .45, .94), opacity .2s;
   display: flex;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-  box-shadow: 0 -4px 24px #00000026;
+  overflow: hidden;
+  box-shadow: 0 -4px 24px #0000001f, 0 0 4px #00000014;
 }
 
 .popup-FjIEpg[data-swipe-direction="up"] {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
 }
 
 .popup-FjIEpg[data-swipe-direction="down"] {
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 12px;
+  border-bottom-left-radius: 12px;
 }
 
 .popup-FjIEpg[data-swipe-direction="left"] {
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-top-left-radius: 12px;
+  border-bottom-left-radius: 12px;
+  width: auto;
+  min-width: 280px;
+  max-height: 100dvh;
 }
 
 .popup-FjIEpg[data-swipe-direction="right"] {
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+  width: auto;
+  min-width: 280px;
+  max-height: 100dvh;
+}
+
+.swipeArea-Nt_PFS {
+  touch-action: none;
+  position: fixed;
+}
+
+.viewport-XO9NfW {
+  z-index: 1001;
+  pointer-events: none;
+  justify-content: center;
+  align-items: flex-end;
+  display: flex;
+  position: fixed;
+  inset: 0;
 }
 

package/dist/Drawer/index.js

@@ -2782,7 +2782,13 @@ function createVisualStateStore() {
 const Drawer_module = {
     description: "description-hsuUfX",
     title: "title-A0LbRg",
-    popup: "popup-FjIEpg"
+    close: "close-Dq55Tj",
+    backdrop: "backdrop-ZQf73g",
+    content: "content-ouQWaR",
+    indentBackground: "indentBackground-JX6m1u",
+    popup: "popup-FjIEpg",
+    swipeArea: "swipeArea-Nt_PFS",
+    viewport: "viewport-XO9NfW"
 };
 const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(DrawerBackdrop_DrawerBackdrop, {
         ref: ref,

package/dist/Field/index.css

@@ -1,12 +1,13 @@
 .root-ECdHfF {
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
   display: flex;
 }
 
 .label-YSWZBs {
   font: var(--wst-paragraph-3-font);
-  color: var(--wst-paragraph-3-color);
+  color: var(--wst-paragraph-2-color, #000);
+  margin-bottom: 4px;
 }
 
 .root-ECdHfF:has([disabled]) .label-YSWZBs, .root-ECdHfF[data-disabled] .label-YSWZBs {
@@ -15,17 +16,15 @@
 
 .error-BUDKWp {
   font: var(--wst-paragraph-3-font);
-  color: var(--wst-system-error-color);
+  color: var(--wst-system-error-color, #df3131);
 }
 
 .description-IVviYU {
   font: var(--wst-paragraph-3-font);
-  color: var(--wst-paragraph-3-color);
+  color: var(--wst-shade-3-color, #767676);
 }
 
-.item-kQeHOQ {
-  align-items: center;
-  gap: 8px;
-  display: flex;
+.control-fRhDZ8, .item-kQeHOQ {
+  width: 100%;
 }
 

package/dist/Field/index.js

@@ -13,7 +13,7 @@ import { error } from "../4026.js";
 import { transitionStatusMapping, useOpenChangeComplete, useTransitionStatus } from "../880.js";
 import { useCheckboxGroupContext } from "../8979.js";
 import { FieldItemContext } from "../1457.js";
-import { FieldControl_FieldControl } from "../1268.js";
+import { Input_module, FieldControl_FieldControl } from "../8685.js";
 import * as __rspack_external_react from "react";
 const LabelableProvider_LabelableProvider = function(props) {
     const defaultId = useBaseUiId();
@@ -674,6 +674,7 @@ const Field_module = {
     label: "label-YSWZBs",
     error: "error-BUDKWp",
     description: "description-IVviYU",
+    control: "control-fRhDZ8",
     item: "item-kQeHOQ"
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
@@ -696,9 +697,26 @@ const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ classNam
         className: clsx(Field_module.description, className),
         ...props
     }));
-const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldControl_FieldControl, {
+const TEXT_INPUT_TYPES = new Set([
+    'text',
+    'email',
+    'password',
+    'search',
+    'url',
+    'tel',
+    'number',
+    'date',
+    'datetime-local',
+    'month',
+    'week',
+    'time'
+]);
+const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, type = 'text', ...props }, ref)=>/*#__PURE__*/ jsx(FieldControl_FieldControl, {
         ref: ref,
-        className: clsx(Field_module.control, className),
+        type: type,
+        className: clsx({
+            [Input_module.root]: TEXT_INPUT_TYPES.has(type)
+        }, Field_module.control, className),
         ...props
     }));
 const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldItem_FieldItem, {

package/dist/Fieldset/index.css

@@ -2,8 +2,23 @@
   border: none;
   flex-direction: column;
   gap: 16px;
+  min-width: 0;
   margin: 0;
   padding: 0;
   display: flex;
 }
 
+.root-v8M2Sx[data-disabled] {
+  opacity: .5;
+  pointer-events: none;
+}
+
+.legend-OVr_3r {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  width: 100%;
+  margin-bottom: 4px;
+  padding: 0;
+  font-weight: bold;
+}
+

package/dist/Fieldset/index.js

@@ -66,7 +66,8 @@ const FieldsetLegend_FieldsetLegend = /*#__PURE__*/ __rspack_external_react.forw
 });
 if ("production" !== process.env.NODE_ENV) FieldsetLegend_FieldsetLegend.displayName = "FieldsetLegend";
 const Fieldset_module = {
-    root: "root-v8M2Sx"
+    root: "root-v8M2Sx",
+    legend: "legend-OVr_3r"
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldsetRoot_FieldsetRoot, {
         ref: ref,

package/dist/Form/index.css

@@ -1,2 +1,7 @@
-
+.root-ontz3g {
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  display: flex;
+}
 

package/dist/Form/index.js

@@ -105,7 +105,9 @@ const Form_Form = /*#__PURE__*/ __rspack_external_react.forwardRef(function(comp
     });
 });
 if ("production" !== process.env.NODE_ENV) Form_Form.displayName = "Form";
-const Form_module = {};
+const Form_module = {
+    root: "root-ontz3g"
+};
 const Form_Form_Form = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Form_Form, {
         ref: ref,
         className: clsx(Form_module.root, className),

package/dist/Input/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { FieldControl_FieldControl } from "../1268.js";
+import { Input_module, FieldControl_FieldControl } from "../8685.js";
 import * as __rspack_external_react from "react";
 const Input_Input = /*#__PURE__*/ __rspack_external_react.forwardRef(function(props, forwardedRef) {
     return /*#__PURE__*/ jsx(FieldControl_FieldControl, {
@@ -9,9 +9,6 @@ const Input_Input = /*#__PURE__*/ __rspack_external_react.forwardRef(function(pr
     });
 });
 if ("production" !== process.env.NODE_ENV) Input_Input.displayName = "Input";
-const Input_module = {
-    root: "root-Y7wYn3"
-};
 const Input_Input_Input = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Input_Input, {
         ref: ref,
         className: clsx(Input_module.root, className),

package/dist/Menu/index.css

@@ -1,22 +1,75 @@
 .trigger-OltV1Y {
   font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-2-color);
+  color: var(--wst-paragraph-2-color, #000);
+  cursor: pointer;
+  text-align: start;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.arrow-ERrbkh {
+  width: 10px;
+  height: 10px;
+  fill: var(--wst-primary-background-color, #fff);
+  filter: drop-shadow(0 -1px 1px color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent));
+  display: block;
+}
+
+.backdrop-ptwUkx {
+  background-color: #0000;
+  position: fixed;
+  inset: 0;
+}
+
+.checkboxItem-U50JXJ {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  outline: none;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 24px;
+  display: flex;
+}
+
+.checkboxItem-U50JXJ[data-highlighted] {
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
+}
+
+.checkboxItem-U50JXJ[data-disabled] {
+  opacity: .3;
+  cursor: default;
+  pointer-events: none;
+}
+
+.checkboxItemIndicator-Bs1QNS {
+  width: 16px;
+  height: 16px;
+  color: var(--wst-links-and-actions-color, #116dff);
+  flex-shrink: 0;
+  justify-content: center;
   align-items: center;
-  display: inline-flex;
+  display: flex;
 }
 
 .groupLabel-_L41zu {
   font: var(--wst-paragraph-3-font);
-  color: var(--wst-paragraph-3-color);
+  color: var(--wst-shade-3-color, #767676);
   padding: 4px 24px;
 }
 
 .popup-VQm6g1 {
   background-color: var(--wst-primary-background-color, #fff);
-  border-style: solid;
-  border-width: 1px;
-  border-color: var(--wst-paragraph-2-color, #fff6);
+  border: var(--wst-system-line-1-width, 1px) solid
+    color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent);
   box-sizing: border-box;
+  border-radius: 6px;
+  outline: none;
+  min-width: 120px;
   max-width: 320px;
   margin: 0;
   padding: 12px 0;
@@ -29,57 +82,129 @@
 }
 
 .item-toMw6N {
-  cursor: pointer;
-  width: calc(100% + 2px);
-  color: var(--wst-paragraph-2-color, #000);
   font: var(--wst-paragraph-2-font);
-  text-align: initial;
+  color: var(--wst-paragraph-2-color, #000);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
   align-items: center;
+  width: 100%;
   padding: 8px 24px;
   display: flex;
-  position: relative;
-  left: -1px;
-  right: -1px;
 }
 
 .item-toMw6N[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
 }
 
 .item-toMw6N[data-disabled] {
   opacity: .3;
   cursor: default;
+  pointer-events: none;
 }
 
 .item-toMw6N[data-disabled]:hover {
-  background-color: inherit;
+  background-color: #0000;
 }
 
 .linkItem-UZphBs {
-  cursor: pointer;
-  width: calc(100% + 2px);
-  color: var(--wst-paragraph-2-color, #000);
   font: var(--wst-paragraph-2-font);
-  text-align: initial;
+  color: var(--wst-paragraph-2-color, #000);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
   align-items: center;
+  width: 100%;
   padding: 8px 24px;
   text-decoration: none;
   display: flex;
-  position: relative;
-  left: -1px;
-  right: -1px;
 }
 
 .linkItem-UZphBs[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
 }
 
 .linkItem-UZphBs[data-disabled] {
   opacity: .3;
   cursor: default;
+  pointer-events: none;
 }
 
 .linkItem-UZphBs[data-disabled]:hover {
-  background-color: inherit;
+  background-color: #0000;
+}
+
+.positioner-hYbdIP {
+  z-index: 1000;
+}
+
+.radioItem-xt5obc {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  outline: none;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 24px;
+  display: flex;
+}
+
+.radioItem-xt5obc[data-highlighted] {
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
+}
+
+.radioItem-xt5obc[data-disabled] {
+  opacity: .3;
+  cursor: default;
+  pointer-events: none;
+}
+
+.radioItemIndicator-EfDBAO {
+  width: 16px;
+  height: 16px;
+  color: var(--wst-links-and-actions-color, #116dff);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.submenuTrigger-n7NBVv {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  cursor: pointer;
+  user-select: none;
+  text-align: start;
+  background: none;
+  border: none;
+  outline: none;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 8px 24px;
+  display: flex;
+}
+
+.submenuTrigger-n7NBVv[data-highlighted] {
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
+}
+
+.submenuTrigger-n7NBVv[data-disabled] {
+  opacity: .3;
+  cursor: default;
+  pointer-events: none;
+}
+
+.separator-mmvmF_ {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent);
+  height: 1px;
+  margin: 4px 0;
+}
+
+.viewport-RskDAU {
+  overflow-y: auto;
 }
 

package/dist/Menu/index.d.ts

@@ -412,7 +412,9 @@ export declare const Menu: {
     Trigger: typeof Trigger;
     SubmenuRoot: typeof Menu_2.SubmenuRoot;
     Portal: React_2.ForwardRefExoticComponent<Omit<MenuPortalProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
-    Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+    Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>>;
     Handle: typeof Menu_2.Handle;
     createHandle: typeof Menu_2.createHandle;
 };