@wix/site-ui 1.56.0 → 1.58.0

package/dist/Menu/index.js

@@ -24,7 +24,7 @@ import { CompositeItem } from "../951.js";
 import { useIsoLayoutEffect } from "../6499.js";
 import { useMenubarContext } from "../7564.js";
 import { createChangeEventDetails } from "../4768.js";
-import { Separator } from "../9635.js";
+import { Separator as Separator_Separator } from "../9635.js";
 import * as __rspack_external_react from "react";
 let MenuViewportCssVars_MenuViewportCssVars = /*#__PURE__*/ function(MenuViewportCssVars) {
     MenuViewportCssVars["popupWidth"] = "--popup-width";
@@ -343,10 +343,20 @@ function createMenuHandle() {
 }
 const Menu_module = {
     trigger: "trigger-OltV1Y",
+    arrow: "arrow-ERrbkh",
+    backdrop: "backdrop-ptwUkx",
+    checkboxItem: "checkboxItem-U50JXJ",
+    checkboxItemIndicator: "checkboxItemIndicator-Bs1QNS",
     groupLabel: "groupLabel-_L41zu",
     popup: "popup-VQm6g1",
     item: "item-toMw6N",
-    linkItem: "linkItem-UZphBs"
+    linkItem: "linkItem-UZphBs",
+    positioner: "positioner-hYbdIP",
+    radioItem: "radioItem-xt5obc",
+    radioItemIndicator: "radioItemIndicator-EfDBAO",
+    submenuTrigger: "submenuTrigger-n7NBVv",
+    separator: "separator-mmvmF_",
+    viewport: "viewport-RskDAU"
 };
 const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(MenuArrow_MenuArrow, {
         ref: ref,
@@ -423,6 +433,11 @@ const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className,
         className: clsx(Menu_module.viewport, className),
         ...props
     }));
+const Separator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Separator_Separator, {
+        ref: ref,
+        className: clsx(Menu_module.separator, className),
+        ...props
+    }));
 function Trigger({ className, ...props }) {
     return /*#__PURE__*/ jsx(MenuTrigger_MenuTrigger, {
         ...props,

package/dist/Menubar/index.css

@@ -1,2 +1,12 @@
-
+.root-pDDSVW {
+  background: none;
+  border: none;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  display: flex;
+}
 

package/dist/Menubar/index.js

@@ -104,7 +104,9 @@ function MenubarContent(props) {
         children: props.children
     });
 }
-const Menubar_module = {};
+const Menubar_module = {
+    root: "root-pDDSVW"
+};
 const Menubar_Menubar_Menubar = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menubar_Menubar, {
         ref: ref,
         className: clsx(Menubar_module.root, className),

package/dist/Meter/index.css

@@ -1,40 +1,38 @@
 .root-bc9hfF {
+  flex-direction: row;
   align-items: center;
+  gap: 8px;
   width: 100%;
   display: flex;
 }
 
 .track-BJK3T1 {
-  background: #fff3;
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 20%, transparent);
+  height: var(--meter-size, 6px);
+  border-radius: calc(var(--meter-size, 6px) / 2);
+  background-color: var(--wst-secondary-background-color, #e0e0e0);
   flex: 1;
-  min-width: 0;
-  height: 6px;
   position: relative;
+  overflow: hidden;
 }
 
 .indicator-YaPgI9 {
+  border-radius: calc(var(--meter-size, 6px) / 2);
   background-color: var(--wst-links-and-actions-color, #116dff);
   height: 100%;
-  transition: width .5s ease-in-out;
+  transition: width .3s;
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .value-Uz_0kH {
-  color: var(--wst-paragraph-2-color, #000);
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color, #000);
+  white-space: nowrap;
   flex-shrink: 0;
-  padding-inline-start: 8px;
-  font-size: 12px;
-  line-height: 1.4em;
 }
 
 .label-yJGBDG {
+  font: var(--wst-paragraph-3-font);
   color: var(--wst-paragraph-2-color, #000);
-  flex-shrink: 0;
-  padding-inline-end: 8px;
-  font-size: 12px;
-  line-height: 1.4em;
 }
 

package/dist/NavigationMenu/index.css

@@ -1,49 +1,147 @@
 .root-Gth795 {
+  align-items: center;
+  display: flex;
   position: relative;
 }
 
 .list-kus7O6 {
-  gap: 4px;
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
   margin: 0;
-  padding: 0;
+  padding: 4px;
   list-style: none;
   display: flex;
 }
 
+.item-OKUYls {
+  position: relative;
+}
+
+.content-TaN2sK {
+  padding: 8px 0;
+}
+
 .trigger-L7xhgv {
-  cursor: pointer;
   font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-2-color);
+  color: var(--wst-paragraph-2-color, #000);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
   background: none;
   border: none;
-  border-radius: 6px;
-  padding: 8px 12px;
-  font-weight: 500;
+  border-radius: 4px;
+  outline: none;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  text-decoration: none;
+  display: inline-flex;
 }
 
 .trigger-L7xhgv:hover {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
+}
+
+.trigger-L7xhgv[data-state="open"] {
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 12%, transparent);
+  color: var(--wst-links-and-actions-color, #116dff);
+}
+
+.trigger-L7xhgv[data-disabled] {
+  opacity: .3;
+  cursor: default;
+  pointer-events: none;
+}
+
+.trigger-L7xhgv:focus-visible {
+  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
+  outline-offset: 2px;
+}
+
+.positioner-C8EsN2 {
+  z-index: 1000;
+}
+
+.viewport-yWpuCH {
+  background-color: var(--wst-primary-background-color, #fff);
+  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;
+  min-width: 160px;
+  max-width: 360px;
+  overflow: hidden;
+  box-shadow: 0 0 4px #0000001a, 0 4px 8px #0000001a;
+}
+
+.backdrop-_mgpOu {
+  background-color: #0000;
+  position: fixed;
+  inset: 0;
 }
 
 .popup-jElt_o {
-  background-color: var(--wst-primary-background-color);
-  border: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color) 15%, transparent);
-  border-radius: 8px;
-  min-width: 220px;
-  padding: 16px;
-  box-shadow: 0 4px 16px #0000001f;
+  box-sizing: border-box;
+  outline: none;
+  padding: 12px 0;
+}
+
+.arrow-as8hPF {
+  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;
 }
 
 .link-jrEqu4 {
-  color: var(--wst-paragraph-2-color);
   font: var(--wst-paragraph-2-font);
-  border-radius: 4px;
-  padding: 6px 8px;
+  color: var(--wst-paragraph-2-color, #000);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  outline: none;
+  align-items: center;
+  width: 100%;
+  padding: 8px 24px;
   text-decoration: none;
-  display: block;
+  display: flex;
 }
 
 .link-jrEqu4:hover {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color) 6%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
+  color: var(--wst-links-and-actions-color, #116dff);
+}
+
+.link-jrEqu4[data-active] {
+  color: var(--wst-links-and-actions-color, #116dff);
+  text-decoration: underline;
+}
+
+.link-jrEqu4[data-disabled] {
+  opacity: .3;
+  cursor: default;
+  pointer-events: none;
+}
+
+.link-jrEqu4:focus-visible {
+  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
+  outline-offset: 2px;
+}
+
+.icon-YQWwDM {
+  width: 16px;
+  height: 16px;
+  color: var(--wst-shade-3-color, #767676);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  transition: transform .2s;
+  display: inline-flex;
+}
+
+[data-state="open"] .icon-YQWwDM {
+  transform: rotate(180deg);
 }
 

package/dist/NavigationMenu/index.js

@@ -1022,9 +1022,16 @@ if ("production" !== process.env.NODE_ENV) NavigationMenuPortal_NavigationMenuPo
 const NavigationMenu_module = {
     root: "root-Gth795",
     list: "list-kus7O6",
+    item: "item-OKUYls",
+    content: "content-TaN2sK",
     trigger: "trigger-L7xhgv",
+    positioner: "positioner-C8EsN2",
+    viewport: "viewport-yWpuCH",
+    backdrop: "backdrop-_mgpOu",
     popup: "popup-jElt_o",
-    link: "link-jrEqu4"
+    arrow: "arrow-as8hPF",
+    link: "link-jrEqu4",
+    icon: "icon-YQWwDM"
 };
 const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(NavigationMenuList_NavigationMenuList, {
         ref: ref,

package/dist/NumberField/index.css

@@ -1,18 +1,20 @@
 .root-XA6trs {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
   flex-direction: column;
+  gap: 4px;
   display: inline-flex;
 }
 
 .group-lqMZOf {
   box-sizing: border-box;
-  border: 1px solid var(--wst-paragraph-2-color, #0009);
   background-color: var(--wst-primary-background-color, #fff);
+  border: var(--wst-system-line-1-width, 1px) solid
+    color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent);
   border-radius: 0;
+  justify-content: space-between;
   align-items: center;
-  font-size: 16px;
-  line-height: 24px;
-  transition: border-color .1s ease-in;
-  display: flex;
+  display: inline-flex;
 }
 
 .group-lqMZOf:hover, .group-lqMZOf:focus-within {
@@ -20,8 +22,7 @@
 }
 
 .root-XA6trs[data-disabled] .group-lqMZOf {
-  background-color: var(--wst-primary-background-color, #fff);
-  border-color: #0009;
+  border-color: var(--wst-system-disabled-color, #939393);
 }
 
 .root-XA6trs[data-invalid] .group-lqMZOf, .root-XA6trs[data-invalid] .group-lqMZOf:hover, .root-XA6trs[data-invalid] .group-lqMZOf:focus-within {
@@ -29,19 +30,16 @@
 }
 
 .input-BRhN7p {
-  box-sizing: border-box;
-  vertical-align: middle;
+  text-align: center;
   width: 100%;
-  min-width: 0;
   color: var(--wst-paragraph-2-color, #000);
-  background-color: #0000;
-  border: 0;
-  outline: 0;
-  margin: 0;
-  padding-block: 8px;
-  padding-inline: 12px;
-  font-size: 16px;
-  line-height: 24px;
+  font: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  flex: 1;
+  align-self: stretch;
+  padding: 0;
 }
 
 .group-lqMZOf:hover .input-BRhN7p, .group-lqMZOf:focus-within .input-BRhN7p {
@@ -49,68 +47,73 @@
 }
 
 .root-XA6trs[data-disabled] .input-BRhN7p {
-  color: var(--wst-system-disabled-color, #ccc);
-  cursor: not-allowed;
+  color: var(--wst-system-disabled-color, #939393);
 }
 
 .input-BRhN7p:focus {
-  outline: 0;
+  outline: none;
 }
 
 .input-BRhN7p::selection {
-  background: var(--wst-paragraph-2-color, #0003);
-  opacity: .2;
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 20%, transparent);
 }
 
 .input-BRhN7p::placeholder {
-  color: var(--wst-shade-3-color, #0006);
+  color: var(--wst-shade-3-color, #757575);
 }
 
 .root-XA6trs[data-disabled] .input-BRhN7p::placeholder {
-  color: var(--wst-system-disabled-color, #ccc);
+  color: var(--wst-system-disabled-color, #939393);
 }
 
 .input-BRhN7p:-webkit-autofill {
+  box-shadow: 0 0 0 1.5em var(--wst-primary-background-color, #fff) inset;
   -webkit-text-fill-color: var(--wst-paragraph-2-color, #000);
-  -webkit-box-shadow: 0 0 0 1.5em var(--wst-primary-background-color, #fff) inset !important;
 }
 
 .input-BRhN7p[type="number"]::-webkit-inner-spin-button, .input-BRhN7p[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
 }
 
 .input-BRhN7p[type="number"] {
+  -moz-appearance: textfield;
   appearance: textfield;
 }
 
 .increment-qnw0yh, .decrement-zkpqlA {
-  all: unset;
   cursor: pointer;
-  color: var(--wst-paragraph-2-color);
-  font: var(--wst-paragraph-2-font);
-  border-inline-start: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color) 20%, transparent);
+  font: inherit;
+  color: var(--wst-paragraph-2-color, #000);
+  box-sizing: border-box;
+  background: none;
+  border: none;
   justify-content: center;
   align-self: stretch;
   align-items: center;
-  padding: 0 10px;
-  display: flex;
+  padding: 7px 4px;
+  display: inline-flex;
 }
 
 .decrement-zkpqlA {
-  border-inline-start: none;
-  border-inline-end: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color) 20%, transparent);
+  padding-inline-start: 4px;
 }
 
 .increment-qnw0yh:hover, .decrement-zkpqlA:hover {
-  opacity: .7;
+  color: var(--wst-links-and-actions-color, #116dff);
 }
 
 .root-XA6trs[data-disabled] .increment-qnw0yh, .root-XA6trs[data-disabled] .decrement-zkpqlA {
-  color: var(--wst-system-disabled-color, #ccc);
-  cursor: not-allowed;
+  color: var(--wst-system-disabled-color, #939393);
+  cursor: default;
+  pointer-events: none;
 }
 
 .scrubArea-XsXHM_ {
-  cursor: ew-resize;
+  flex: 1;
+  align-self: stretch;
+  height: 100%;
+  display: flex;
 }
 

package/dist/Popover/index.css

@@ -1,90 +1,81 @@
+.trigger-jUfWGu {
+  cursor: pointer;
+}
+
+.positioner-t0X5uo {
+  z-index: 1000;
+}
+
 .popup-Wrjs4v {
-  padding: var(--wst-popover-padding, 20px);
   background-color: var(--wst-primary-background-color, #fff);
-  border: 0;
-  border-color: var(--wst-primary-background-color, #fff6);
-  border-radius: var(--wst-popover-border-radius, 0px);
-  border-style: solid;
-  border-width: 1px;
+  border: var(--wst-system-line-1-width, 1px) solid
+    color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
+  box-sizing: border-box;
+  border-radius: 6px;
   min-width: 40px;
   max-width: 320px;
-  min-height: 20px;
+  padding: 16px;
   box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
 }
 
 .arrow-FmdRXW {
-  border-color: #0000;
-}
-
-.arrow-FmdRXW:after, .arrow-FmdRXW:before {
-  content: "";
-  background: none;
-  position: absolute;
-  inset: 0;
-  transform: rotate(45deg);
-}
-
-.arrow-FmdRXW:before {
-  z-index: -1;
-}
-
-.positioner-t0X5uo[data-side="right"] .arrow-FmdRXW {
-  border-right-color: var(--wst-primary-background-color, #fff);
-}
-
-.positioner-t0X5uo[data-side="left"] .arrow-FmdRXW {
-  border-left-color: var(--wst-primary-background-color, #fff);
+  background-color: var(--wst-primary-background-color, #fff);
+  border-style: solid;
+  border-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
+  border-width: 0;
+  width: 10px;
+  height: 10px;
+  rotate: 45deg;
 }
 
 .positioner-t0X5uo[data-side="bottom"] .arrow-FmdRXW {
-  border-bottom-color: var(--wst-primary-background-color, #fff);
+  border-top-width: 1px;
+  border-left-width: 1px;
 }
 
 .positioner-t0X5uo[data-side="top"] .arrow-FmdRXW {
-  border-top-color: var(--wst-primary-background-color, #fff);
-}
-
-.positioner-t0X5uo[data-side="right"] .arrow-FmdRXW:before {
-  box-shadow: 5px -5px 0 6px var(--wst-primary-background-color, #fff6);
-}
-
-.positioner-t0X5uo[data-side="right"] .arrow-FmdRXW:after {
-  box-shadow: 5px -5px 0 5px var(--wst-primary-background-color, #fff);
-}
-
-.positioner-t0X5uo[data-side="left"] .arrow-FmdRXW:before {
-  box-shadow: -5px 5px 0 6px var(--wst-primary-background-color, #fff6);
-}
-
-.positioner-t0X5uo[data-side="left"] .arrow-FmdRXW:after {
-  box-shadow: -5px 5px 0 5px var(--wst-primary-background-color, #fff);
+  border-bottom-width: 1px;
+  border-right-width: 1px;
 }
 
-.positioner-t0X5uo[data-side="top"] .arrow-FmdRXW:before {
-  box-shadow: -5px -5px 0 6px var(--wst-primary-background-color, #fff6);
-}
-
-.positioner-t0X5uo[data-side="top"] .arrow-FmdRXW:after {
-  box-shadow: -5px -5px 0 5px var(--wst-primary-background-color, #fff);
+.positioner-t0X5uo[data-side="right"] .arrow-FmdRXW {
+  border-top-width: 1px;
+  border-left-width: 1px;
 }
 
-.positioner-t0X5uo[data-side="bottom"] .arrow-FmdRXW:before {
-  box-shadow: 5px 5px 0 6px var(--wst-primary-background-color, #fff6);
+.positioner-t0X5uo[data-side="left"] .arrow-FmdRXW {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
 }
 
-.positioner-t0X5uo[data-side="bottom"] .arrow-FmdRXW:after {
-  box-shadow: 5px 5px 0 5px var(--wst-primary-background-color, #fff);
+.backdrop-GyKZma {
+  background-color: #0000;
+  position: fixed;
+  inset: 0;
 }
 
 .title-kQ490g {
-  font: var(--wst-heading-6-font);
-  color: var(--wst-heading-6-color);
-  margin: 0 0 4px;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  margin: 0 0 8px;
 }
 
 .description-IgC4Ak {
-  font: var(--wst-paragraph-3-font);
-  color: var(--wst-paragraph-3-color);
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-shade-3-color, #767676);
   margin: 0 0 12px;
 }
 
+.close-rFxG1X {
+  cursor: pointer;
+  color: var(--wst-links-and-actions-color, #1f4fff);
+  font: var(--wst-paragraph-2-font);
+  background: none;
+  border: none;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 8px;
+  display: inline-flex;
+}
+

package/dist/Popover/index.js

@@ -778,11 +778,14 @@ function createPopoverHandle() {
     return new PopoverHandle();
 }
 const Popover_module = {
+    trigger: "trigger-jUfWGu",
+    positioner: "positioner-t0X5uo",
     popup: "popup-Wrjs4v",
     arrow: "arrow-FmdRXW",
-    positioner: "positioner-t0X5uo",
+    backdrop: "backdrop-GyKZma",
     title: "title-kQ490g",
-    description: "description-IgC4Ak"
+    description: "description-IgC4Ak",
+    close: "close-rFxG1X"
 };
 const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PopoverPositioner_PopoverPositioner, {
         ref: ref,