@wix/site-ui 1.55.0 → 1.57.0

package/dist/Switch/index.css

@@ -1,46 +1,53 @@
 .root-jFySXM {
   width: var(--switch-width, 44px);
   height: var(--switch-height, 24px);
+  box-sizing: border-box;
   border-radius: calc(var(--switch-height, 24px) / 2);
-  background-color: var(--wst-system-disabled-color);
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 30%, transparent);
   cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
   padding: 0;
   transition: background-color .2s;
+  display: inline-flex;
   position: relative;
 }
 
 .root-jFySXM[data-checked] {
-  background-color: var(--wst-links-and-actions-color);
+  background-color: var(--wst-links-and-actions-color, #116dff);
 }
 
 .root-jFySXM[data-disabled] {
+  background-color: color-mix(in srgb, var(--wst-system-disabled-color, #939393) 60%, transparent);
   cursor: default;
   pointer-events: none;
-  opacity: .5;
 }
 
 .root-jFySXM:focus-visible {
-  outline: 2px solid var(--wst-links-and-actions-color);
+  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
   outline-offset: 2px;
 }
 
 .thumb-aDkgmk {
   width: var(--switch-thumb-size, 18px);
   height: var(--switch-thumb-size, 18px);
-  background-color: var(--wst-primary-background-color);
+  background-color: var(--wst-primary-background-color, #fff);
+  transform: translateX(calc(-1 * (var(--switch-width, 44px) - var(--switch-thumb-size, 18px)) / 2 + 2px));
   border-radius: 50%;
-  transition: left .2s;
+  transition: transform .2s;
   position: absolute;
-  top: 50%;
-  left: 3px;
-  transform: translateY(-50%);
+  box-shadow: 0 1px 5px #0000004d;
 }
 
 .root-jFySXM[data-checked] .thumb-aDkgmk {
-  left: calc(var(--switch-width, 44px) - var(--switch-thumb-size, 18px) - 3px);
+  transform: translateX(calc((var(--switch-width, 44px) - var(--switch-thumb-size, 18px)) / 2 - 2px));
 }
 
 .root-jFySXM[data-disabled] .thumb-aDkgmk {
-  background-color: color-mix(in srgb, var(--wst-primary-background-color) 60%, transparent);
+  background-color: color-mix(in srgb, var(--wst-primary-background-color, #fff) 70%, transparent);
+  box-shadow: none;
 }
 

package/dist/Toggle/index.css

@@ -1,41 +1,23 @@
 .root-b5XZrV {
-  box-sizing: border-box;
-  padding: var(--wst-button-secondary-padding-top) var(--wst-button-secondary-padding-right) var(--wst-button-secondary-padding-bottom) var(--wst-button-secondary-padding-left);
-  border-top: var(--wst-button-secondary-border-top-width) var(--wst-button-secondary-border-top-style) var(--wst-button-secondary-border-top-color);
-  border-inline-end: var(--wst-button-secondary-border-right-width) var(--wst-button-secondary-border-right-style) var(--wst-button-secondary-border-right-color);
-  border-bottom: var(--wst-button-secondary-border-bottom-width) var(--wst-button-secondary-border-bottom-style) var(--wst-button-secondary-border-bottom-color);
-  border-inline-start: var(--wst-button-secondary-border-left-width) var(--wst-button-secondary-border-left-style) var(--wst-button-secondary-border-left-color);
-  background-color: var(--wst-button-secondary-background-color);
-  color: var(--wst-button-secondary-color);
-  font: var(--wst-button-secondary-font);
   cursor: pointer;
-  border-start-start-radius: var(--wst-button-secondary-border-top-left-radius);
-  border-start-end-radius: var(--wst-button-secondary-border-top-right-radius);
-  border-end-end-radius: var(--wst-button-secondary-border-bottom-right-radius);
-  border-end-start-radius: var(--wst-button-secondary-border-bottom-left-radius);
+  color: var(--wst-shade-3-color, #939393);
+  background: none;
+  border: none;
   justify-content: center;
   align-items: center;
-  line-height: normal;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
   transition: opacity .2s cubic-bezier(.39, .11, .37, .99);
   display: inline-flex;
 }
 
 .root-b5XZrV:hover {
-  opacity: .8;
-}
-
-.root-b5XZrV[data-pressed] {
-  background-color: var(--wst-button-primary-background-color);
-  color: var(--wst-button-primary-color);
-  border-top-color: var(--wst-button-primary-background-color);
-  border-inline-end-color: var(--wst-button-primary-background-color);
-  border-bottom-color: var(--wst-button-primary-background-color);
-  border-inline-start-color: var(--wst-button-primary-background-color);
+  opacity: .6;
 }
 
 .root-b5XZrV:disabled {
-  color: var(--wst-system-disabled-color);
-  border-color: var(--wst-system-disabled-color);
+  color: var(--wst-system-disabled-color, #939393);
   cursor: default;
   pointer-events: none;
 }
@@ -45,28 +27,26 @@
 }
 
 .root-b5XZrV:focus-visible {
-  outline: 2px solid var(--wst-links-and-actions-color);
+  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
   outline-offset: 2px;
 }
 
 @keyframes toggle-pop-in-YeDB_9 {
   0% {
-    opacity: 0;
-    transform: scale(.9);
+    transform: scale(1);
   }
 
   50% {
-    opacity: .32;
-    transform: scale(1.03);
+    transform: scale(1.3);
   }
 
   100% {
-    opacity: 1;
     transform: scale(1);
   }
 }
 
 .root-b5XZrV[data-pressed] {
+  color: var(--wst-links-and-actions-color, #116dff);
   animation: .2s forwards toggle-pop-in-YeDB_9;
 }
 

package/dist/ToggleGroup/index.css

@@ -1,5 +1,15 @@
 .root-JZaWem {
-  gap: 4px;
+  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: 4px;
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
   display: inline-flex;
+  overflow: hidden;
 }
 

package/dist/Toolbar/index.css

@@ -1,57 +1,101 @@
 .root-TasA57 {
+  flex-direction: row;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  display: flex;
+}
+
+.group-gw9JGb {
+  flex-direction: row;
   align-items: center;
   gap: 2px;
   display: flex;
 }
 
 .button-VwIpOv {
-  box-sizing: border-box;
-  color: var(--wst-paragraph-2-color);
-  font: var(--wst-paragraph-2-font);
   cursor: pointer;
+  color: var(--wst-paragraph-2-color, #000);
+  font: var(--wst-paragraph-2-font);
+  box-sizing: border-box;
   background: none;
-  border: 1px solid #0000;
+  border: none;
   border-radius: 4px;
+  outline: none;
   justify-content: center;
   align-items: center;
-  padding: 6px 10px;
+  padding: 6px;
+  line-height: 0;
+  transition: background-color .15s;
   display: inline-flex;
 }
 
 .button-VwIpOv:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color) 8%, transparent);
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
 }
 
 .button-VwIpOv[data-pressed] {
-  background-color: color-mix(in srgb, var(--wst-links-and-actions-color) 12%, transparent);
-  color: var(--wst-links-and-actions-color);
+  color: var(--wst-links-and-actions-color, #116dff);
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 12%, transparent);
 }
 
 .button-VwIpOv:disabled {
-  color: var(--wst-system-disabled-color);
+  color: var(--wst-system-disabled-color, #939393);
   cursor: default;
   pointer-events: none;
 }
 
+.button-VwIpOv:focus-visible {
+  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
+  outline-offset: 2px;
+}
+
 .link-ONsUed {
-  color: var(--wst-links-and-actions-color);
+  color: var(--wst-paragraph-2-color, #000);
   font: var(--wst-paragraph-2-font);
+  box-sizing: border-box;
   border-radius: 4px;
+  outline: none;
   justify-content: center;
   align-items: center;
-  padding: 6px 10px;
+  padding: 6px;
+  line-height: 0;
   text-decoration: none;
+  transition: background-color .15s;
   display: inline-flex;
 }
 
 .link-ONsUed:hover {
-  text-decoration: underline;
+  background-color: color-mix(in srgb, var(--wst-base-2-color) 6%, transparent);
+  color: var(--wst-links-and-actions-color, #116dff);
+}
+
+.link-ONsUed:focus-visible {
+  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
+  outline-offset: 2px;
+}
+
+.input-BIEb11 {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  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;
+  background: none;
+  border-radius: 4px;
+  outline: none;
+  padding: 4px 8px;
+}
+
+.input-BIEb11:focus-visible {
+  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
+  outline-offset: 2px;
 }
 
 .separator-pZlgb3 {
-  background-color: var(--wst-system-line-1-color);
+  width: var(--wst-system-line-1-width, 1px);
+  background-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
   flex-shrink: 0;
-  width: 1px;
   height: 20px;
   margin: 0 4px;
 }

package/dist/Toolbar/index.js

@@ -225,8 +225,10 @@ const ToolbarSeparator_ToolbarSeparator = /*#__PURE__*/ __rspack_external_react.
 if ("production" !== process.env.NODE_ENV) ToolbarSeparator_ToolbarSeparator.displayName = "ToolbarSeparator";
 const Toolbar_module = {
     root: "root-TasA57",
+    group: "group-gw9JGb",
     button: "button-VwIpOv",
     link: "link-ONsUed",
+    input: "input-BIEb11",
     separator: "separator-pZlgb3"
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToolbarRoot_ToolbarRoot, {

package/dist/Tooltip/index.css

@@ -1,22 +1,11 @@
 .trigger-xVlrp2 {
-  padding: var(--wst-button-secondary-padding-top) var(--wst-button-secondary-padding-right) var(--wst-button-secondary-padding-bottom) var(--wst-button-secondary-padding-left);
-  border-top: var(--wst-button-secondary-border-top-width) var(--wst-button-secondary-border-top-style) var(--wst-button-secondary-border-top-color);
-  border-inline-end: var(--wst-button-secondary-border-right-width) var(--wst-button-secondary-border-right-style) var(--wst-button-secondary-border-right-color);
-  border-bottom: var(--wst-button-secondary-border-bottom-width) var(--wst-button-secondary-border-bottom-style) var(--wst-button-secondary-border-bottom-color);
-  border-inline-start: var(--wst-button-secondary-border-left-width) var(--wst-button-secondary-border-left-style) var(--wst-button-secondary-border-left-color);
-  background-color: var(--wst-button-secondary-background-color);
-  color: var(--wst-button-secondary-color);
-  font: var(--wst-button-secondary-font);
-  cursor: pointer;
-  border-start-start-radius: var(--wst-button-secondary-border-top-left-radius);
-  border-start-end-radius: var(--wst-button-secondary-border-top-right-radius);
-  border-end-end-radius: var(--wst-button-secondary-border-bottom-right-radius);
-  border-end-start-radius: var(--wst-button-secondary-border-bottom-left-radius);
-  justify-content: center;
-  align-items: center;
   display: inline-flex;
 }
 
+.positioner-sRKHj5 {
+  z-index: 9999;
+}
+
 .positioner-sRKHj5[data-side="top"] {
   padding-bottom: 6px;
 }
@@ -50,12 +39,13 @@
 }
 
 .popup-V_41k4 {
-  background-color: var(--wst-paragraph-2-color, #212121);
-  border: 1px solid var(--wst-primary-background-color, #fff);
-  color: var(--wst-primary-background-color, #fff);
+  background-color: var(--wst-system-default-dark-color, #212121);
+  color: var(--wst-system-default-light-color, #fff);
   font: var(--wst-paragraph-3-font);
-  -webkit-font-smoothing: auto;
-  border-radius: 3px;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  border-radius: 4px;
+  max-width: 240px;
   padding: 4px 12px;
   transition: transform .12s cubic-bezier(.25, .46, .45, .94), opacity .12s cubic-bezier(.25, .46, .45, .94);
   box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
@@ -86,49 +76,9 @@
 }
 
 .arrow-aUAEXL {
-  margin: 0;
-  display: block;
-  position: absolute;
-}
-
-.arrow-aUAEXL svg {
-  display: block;
-}
-
-.arrow-aUAEXL path {
-  fill: var(--wst-paragraph-2-color, #212121);
-  stroke: var(--wst-paragraph-2-color, #212121);
-}
-
-.arrow-aUAEXL path:first-child {
-  stroke: none;
-}
-
-.arrow-aUAEXL path:last-child {
-  stroke-dasharray: 0 17 17;
-}
-
-.positioner-sRKHj5[data-side="top"] .arrow-aUAEXL {
-  width: 12px;
-  height: 7px;
-  bottom: -1px;
-}
-
-.positioner-sRKHj5[data-side="bottom"] .arrow-aUAEXL {
-  width: 12px;
-  height: 7px;
-  top: -1px;
-}
-
-.positioner-sRKHj5[data-side="left"] .arrow-aUAEXL {
-  width: 7px;
-  height: 12px;
-  right: -1px;
-}
-
-.positioner-sRKHj5[data-side="right"] .arrow-aUAEXL {
-  width: 7px;
-  height: 12px;
-  left: -1px;
+  background-color: var(--wst-system-default-dark-color, #212121);
+  width: 8px;
+  height: 8px;
+  rotate: 45deg;
 }
 

package/dist/index.d.ts

@@ -2931,10 +2931,12 @@ export declare const ContextMenu: {
     SubmenuTrigger: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ContextMenuSubmenuTriggerProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
+    Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>>;
     Root: typeof ContextMenu_2.Root;
     SubmenuRoot: typeof ContextMenu_2.SubmenuRoot;
     Portal: React_2.ForwardRefExoticComponent<Omit<ContextMenuPortalProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
-    Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 };
 
 export declare namespace ContextMenu_2 {
@@ -4971,7 +4973,9 @@ export declare const Menu: {
     Trigger: typeof Trigger_5;
     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;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.55.0",
+  "version": "1.57.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -84,5 +84,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "14c1bf795f07aae7f19e9925a4d36dfa49973eb0da224a9340c5429c"
+  "falconPackageHash": "8d0c35fab631c111a67f1a0aeac6db8dc75c63939639845a7bea452f"
 }

package/dist/Input/index.css

@@ -1,72 +0,0 @@
-.root-Y7wYn3 {
-  box-sizing: border-box;
-  border: 1px solid var(--wst-paragraph-2-color, #0009);
-  background-color: var(--wst-primary-background-color, #fff);
-  width: 100%;
-  min-width: 0;
-  font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-2-color, #000);
-  vertical-align: middle;
-  border-radius: 0;
-  outline: 0;
-  margin: 0;
-  padding-block: 8px;
-  padding-inline: 12px;
-  transition: border-color .1s ease-in;
-}
-
-.root-Y7wYn3:hover {
-  border-color: var(--wst-paragraph-2-color, #000);
-}
-
-.root-Y7wYn3:focus {
-  border-color: var(--wst-paragraph-2-color, #000);
-  outline: 0;
-}
-
-.root-Y7wYn3:focus-visible {
-  border-color: var(--wst-links-and-actions-color, #116dff);
-  outline: none;
-}
-
-.root-Y7wYn3:disabled {
-  color: var(--wst-system-disabled-color, #ccc);
-  background-color: var(--wst-primary-background-color, #fff);
-  cursor: not-allowed;
-  border-color: #0009;
-}
-
-.root-Y7wYn3[aria-invalid="true"], .root-Y7wYn3[aria-invalid="true"]:hover, .root-Y7wYn3[aria-invalid="true"]:focus {
-  border-color: var(--wst-system-error-color, #df3131);
-}
-
-.root-Y7wYn3[data-valid] {
-  border-color: var(--wst-system-success-color, #60d1a8);
-}
-
-.root-Y7wYn3::selection {
-  background: var(--wst-paragraph-2-color, #0003);
-  opacity: .2;
-}
-
-.root-Y7wYn3::placeholder {
-  color: var(--wst-shade-3-color, #0006);
-}
-
-.root-Y7wYn3:disabled::placeholder {
-  color: var(--wst-system-disabled-color, #ccc);
-}
-
-.root-Y7wYn3:-webkit-autofill {
-  -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;
-}
-
-.root-Y7wYn3[type="number"]::-webkit-inner-spin-button, .root-Y7wYn3[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-
-.root-Y7wYn3[type="number"] {
-  appearance: textfield;
-}
-