@wix/site-ui 1.56.0 → 1.57.0

package/dist/8685.css

@@ -0,0 +1,86 @@
+.root-Y7wYn3 {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  border-width: var(--wst-system-line-1-width, 1px);
+  border-style: solid;
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+  background-color: var(--wst-primary-background-color, #fff);
+  vertical-align: middle;
+  border-radius: 0;
+  margin: 0;
+  padding-block: 8px;
+  padding-inline: 12px;
+  display: block;
+}
+
+.root-Y7wYn3:hover {
+  border-color: var(--wst-system-line-1-color, #000);
+}
+
+.root-Y7wYn3:focus {
+  border-color: var(--wst-system-line-1-color, #000);
+  outline: none;
+}
+
+.root-Y7wYn3:disabled {
+  color: var(--wst-system-disabled-color, #939393);
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+  cursor: not-allowed;
+}
+
+.root-Y7wYn3[aria-invalid="true"] {
+  border-color: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 60%,
+    transparent);
+}
+
+.root-Y7wYn3[aria-invalid="true"]:hover {
+  border-color: var(--wst-system-error-color, #df3131);
+}
+
+.root-Y7wYn3[aria-invalid="true"]:focus {
+  border-color: var(--wst-system-error-color, #df3131);
+  outline: none;
+}
+
+.root-Y7wYn3[data-valid] {
+  border-color: color-mix(in srgb,
+    var(--wst-system-success-color, #008250) 60%,
+    transparent);
+}
+
+.root-Y7wYn3::selection {
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-2-color, #000) 20%,
+    transparent);
+}
+
+.root-Y7wYn3::placeholder {
+  color: var(--wst-shade-3-color, #767676);
+  font: var(--wst-paragraph-2-font);
+}
+
+.root-Y7wYn3:disabled::placeholder {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.root-Y7wYn3:-webkit-autofill {
+  -webkit-text-fill-color: var(--wst-paragraph-2-color, #000);
+  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 {
+  appearance: none;
+}
+
+.root-Y7wYn3[type="number"] {
+  appearance: textfield;
+}
+

package/dist/{1268.js → 8685.js}

@@ -96,4 +96,7 @@ const FieldControl_FieldControl = /*#__PURE__*/ __rspack_external_react.forwardR
     return element;
 });
 if ("production" !== process.env.NODE_ENV) FieldControl_FieldControl.displayName = "FieldControl";
-export { FieldControl_FieldControl };
+const Input_module = {
+    root: "root-Y7wYn3"
+};
+export { FieldControl_FieldControl, Input_module };

package/dist/Accordion/index.css

@@ -77,7 +77,7 @@
 
 .subtitle-wfobjk {
   font: var(--wst-paragraph-3-font);
-  color: var(--wst-shade-3-color);
+  color: var(--wst-shade-3-color, #767676);
 }
 
 .suffix-O091QK {

package/dist/AlertDialog/index.css

@@ -1,50 +1,58 @@
+.trigger-OrOoKa {
+  display: inline-flex;
+}
+
 .backdrop-uiBfeV {
+  background-color: color-mix(in srgb, var(--wst-system-default-dark-color, #212121) 60%, transparent);
+  z-index: 1000;
   position: fixed;
   inset: 0;
 }
 
 .viewport-rOzJs7 {
+  z-index: 1001;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  display: flex;
   position: fixed;
   inset: 0;
-  overflow: hidden;
+  overflow-y: auto;
 }
 
 .viewport-rOzJs7 :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-L9x90S {
+  background-color: var(--wst-primary-background-color, #fff);
   box-sizing: border-box;
-  background-color: var(--wst-dialog-background-color, #fff);
-  flex-direction: column;
-  min-width: 280px;
-  max-width: 980px;
-  min-height: 240px;
-  max-height: min(100vh, 620px);
+  border-radius: 8px;
+  width: 100%;
+  max-width: 560px;
   padding: 32px;
-  display: flex;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  overflow: auto;
-  transform: translate(-50%, -50%);
+  position: relative;
+  box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
 }
 
 .close-ws9ziC {
-  color: var(--wst-dialog-close-button-color, #000);
-}
-
-.title-IeDaIJ {
-  font: var(--wst-heading-6-font);
-  color: var(--wst-heading-6-color);
-  margin: 0 0 8px;
+  cursor: pointer;
+  color: var(--wst-paragraph-2-color, #000);
+  background: none;
+  border: none;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  display: inline-flex;
 }
 
-.description-imwSAm {
+.title-IeDaIJ, .description-imwSAm {
   font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-2-color);
-  margin: 0 0 16px;
+  color: var(--wst-paragraph-2-color, #000);
+  overflow-wrap: break-word;
+  margin: 0;
 }
 

package/dist/AlertDialog/index.js

@@ -23,6 +23,7 @@ function createAlertDialogHandle() {
     return new AlertDialogHandle();
 }
 const AlertDialog_module = {
+    trigger: "trigger-OrOoKa",
     backdrop: "backdrop-uiBfeV",
     viewport: "viewport-rOzJs7",
     popup: "popup-L9x90S",

package/dist/Autocomplete/index.css

@@ -1,116 +1,209 @@
+.trigger-nY0jd8 {
+  appearance: none;
+  cursor: pointer;
+  color: var(--wst-paragraph-2-color, #000);
+  background: none;
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
+}
+
 .inputGroup-II6FAN {
   box-sizing: border-box;
-  border: var(--wst-autocomplete-border-width, 1px) solid var(--wst-paragraph-2-color, #0009);
-  border-radius: var(--wst-autocomplete-border-radius, 0px);
-  background-color: var(--wst-primary-background-color, #fff);
   width: 100%;
-  transition: border-color .1s ease-in;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  border-width: var(--wst-system-line-1-width, 1px);
+  border-style: solid;
+  border-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
+  background-color: var(--wst-primary-background-color, #fff);
+  border-radius: 0;
+  align-items: center;
+  gap: 8px;
+  padding-inline: 12px;
+  display: flex;
 }
 
 .inputGroup-II6FAN:hover {
-  border-color: var(--wst-paragraph-2-color, #000);
+  border-color: var(--wst-system-line-1-color, #000);
 }
 
 .inputGroup-II6FAN[data-disabled] {
-  border-color: color-mix(in srgb, var(--wst-system-disabled-color, #000) 30%, transparent);
+  color: var(--wst-system-disabled-color, #939393);
+  border-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
+  background-color: var(--wst-primary-background-color, #fff);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .input-k82Te5 {
-  height: unset;
+  appearance: none;
   box-sizing: border-box;
   width: 100%;
+  min-width: 0;
+  font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color, #000);
-  background-color: var(--wst-primary-background-color, #fff);
-  border-radius: var(--wst-autocomplete-border-radius, 0px);
-  line-height: 24px;
-  font: var(--wst-paragraph-2, inherit);
-  border: 0;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-right: 42px;
-  font-size: 16px;
+  background: none;
+  border: none;
+  outline: none;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  padding-block: 8px;
 }
 
 .input-k82Te5::placeholder {
-  color: var(--wst-shade-3-color, #0006);
-  font: var(--wst-paragraph-2, inherit);
-  font-size: 16px;
+  color: var(--wst-shade-3-color, #767676);
+  font: var(--wst-paragraph-2-font);
 }
 
 .input-k82Te5:disabled {
-  color: var(--wst-system-disabled-color, #0000004d);
-}
-
-.input-k82Te5:hover {
-  background-color: var(--wst-primary-background-color, #fff);
-  color: var(--wst-paragraph-2-color, #000);
+  color: var(--wst-system-disabled-color, #939393);
+  cursor: not-allowed;
 }
 
-.input-k82Te5:focus {
-  color: var(--wst-paragraph-2-color, #000);
-  background-color: var(--wst-primary-background-color, #fff);
-  outline: 0;
+.input-k82Te5:hover, .input-k82Te5:focus {
+  outline: none;
 }
 
 .icon-xxqTKh {
-  fill: var(--wst-paragraph-2-color, #000);
+  width: 24px;
+  height: 24px;
+  color: var(--wst-paragraph-2-color, #000);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  transition: transform .2s;
   display: flex;
-  position: absolute;
-  right: 14px;
 }
 
 .inputGroup-II6FAN[data-disabled] .icon-xxqTKh {
-  fill: var(--wst-system-disabled-color, #0000004d);
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.clear-xRE3Jo {
+  appearance: none;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  color: var(--wst-paragraph-2-color, #000);
+  background: none;
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  display: inline-flex;
 }
 
 .list-D5iucO {
-  border-radius: var(--wst-autocomplete-border-radius, 0px);
-  max-height: 284px;
+  max-height: 300px;
+  margin: 0;
+  padding-block: 8px;
+  padding-inline: 0;
+  list-style: none;
   overflow-y: auto;
 }
 
 .list-D5iucO::-webkit-scrollbar {
-  background-color: unset;
-  width: 24px;
+  width: 4px;
 }
 
 .list-D5iucO::-webkit-scrollbar-button {
-  height: 6px;
+  display: none;
 }
 
 .list-D5iucO::-webkit-scrollbar-thumb {
-  background-color: #0003;
-  background-clip: padding-box;
-  border: 10px solid #0000;
-  border-radius: 12px;
-  height: 61px;
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 30%, transparent);
+  border-radius: 2px;
+}
+
+.status-xcX72u {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.backdrop-sjLHGs {
+  z-index: 1000;
+  background-color: #0000;
+  position: fixed;
+  inset: 0;
+}
+
+.positioner-VKb66C {
+  z-index: 1001;
 }
 
 .popup-w30icg {
-  border-color: var(--wst-paragraph-2-color, #000);
-  border-width: var(--wst-autocomplete-border-width, 1px);
-  border-radius: var(--wst-autocomplete-border-radius, 0px);
   background-color: var(--wst-primary-background-color, #fff);
-  width: calc(100% + 2px);
-  min-width: 100%;
-  margin-left: -1px;
+  border-width: var(--wst-system-line-1-width, 1px);
+  border-style: solid;
+  border-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 40%, transparent);
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
+  min-width: var(--available-width, 160px);
+  box-sizing: border-box;
+  border-radius: 0;
+  overflow: hidden;
+}
+
+.arrow-_1k6Kj {
+  width: 10px;
+  height: 5px;
+  fill: var(--wst-primary-background-color, #fff);
+  stroke: color-mix(in srgb, var(--wst-system-line-1-color, #000) 40%, transparent);
+}
+
+.group-RG2nP6 {
+  padding: 0;
+}
+
+.groupLabel-mgGSHG {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-shade-3-color, #767676);
+  padding-block: 6px;
+  padding-inline: 12px;
+  display: block;
+}
+
+.row-ay0VrR {
+  align-items: center;
+  display: flex;
 }
 
 .item-MXqW1H {
-  box-sizing: border-box;
+  font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2, inherit);
-  padding: 10px 14px;
-  font-size: 16px;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  align-items: center;
+  gap: 8px;
+  padding-block: 8px;
+  padding-inline: 12px;
+  list-style: none;
+  display: flex;
 }
 
 .item-MXqW1H[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, #000) 6%, transparent);
 }
 
 .empty-P2WjlU {
   font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-3-color);
-  padding: 10px 14px;
+  color: var(--wst-shade-3-color, #767676);
+  text-align: center;
+  padding-block: 8px;
+  padding-inline: 12px;
 }
 

package/dist/Autocomplete/index.js

@@ -77,11 +77,20 @@ function AutocompleteValue(props) {
     });
 }
 const Autocomplete_module = {
+    trigger: "trigger-nY0jd8",
     inputGroup: "inputGroup-II6FAN",
     input: "input-k82Te5",
     icon: "icon-xxqTKh",
+    clear: "clear-xRE3Jo",
     list: "list-D5iucO",
+    status: "status-xcX72u",
+    backdrop: "backdrop-sjLHGs",
+    positioner: "positioner-VKb66C",
     popup: "popup-w30icg",
+    arrow: "arrow-_1k6Kj",
+    group: "group-RG2nP6",
+    groupLabel: "groupLabel-mgGSHG",
+    row: "row-ay0VrR",
     item: "item-MXqW1H",
     empty: "empty-P2WjlU"
 };

package/dist/Avatar/index.css

@@ -1,12 +1,14 @@
 .root-uFk_6F {
   width: var(--avatar-size, 36px);
   height: var(--avatar-size, 36px);
-  font-size: calc(var(--avatar-size, 36px) / 3);
-  letter-spacing: 0;
+  background-color: var(--wst-secondary-background-color, #e0e0e0);
+  color: var(--wst-paragraph-2-color, #000);
+  font: var(--wst-paragraph-2-font);
   text-align: center;
-  user-select: none;
-  background-color: var(--wst-secondary-background-color, #e6e6e6);
+  letter-spacing: 0;
+  box-sizing: border-box;
   border-radius: 50%;
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
   display: flex;
@@ -15,22 +17,16 @@
 }
 
 .image-i3BrFP {
+  object-fit: cover;
   width: 100%;
   height: 100%;
-  font-size: initial;
-  object-fit: cover;
-  border-radius: 50%;
 }
 
 .fallback-r0pagw {
-  font: var(--wst-paragraph-2-font);
-  font-size: inherit;
-  color: var(--wst-paragraph-2-color);
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   display: flex;
-  position: absolute;
 }
 

package/dist/Badge/index.css

@@ -16,29 +16,30 @@
 
 .default-nJusqF {
   background-color: color-mix(in srgb,
-    var(--wst-paragraph-3-color) 10%,
+    var(--wst-paragraph-3-color, #000) 10%,
     transparent);
-  color: var(--wst-paragraph-3-color);
+  color: var(--wst-paragraph-3-color, #000);
 }
 
 .light-qGxiE8 {
-  background-color: var(--wst-primary-background-color);
-  color: var(--wst-paragraph-3-color);
+  background-color: var(--wst-primary-background-color, #fff);
+  color: var(--wst-paragraph-3-color, #000);
+  border-style: solid;
   border-width: 1px;
   border-color: color-mix(in srgb,
-    var(--wst-paragraph-3-color) 10%,
+    var(--wst-paragraph-3-color, #000) 10%,
     transparent);
 }
 
 .primary-bU68vw {
-  background-color: var(--wst-links-and-actions-color);
-  color: var(--wst-primary-background-color);
+  background-color: var(--wst-links-and-actions-color, #116dff);
+  color: var(--wst-primary-background-color, #fff);
 }
 
 .secondary-dA1Wg2 {
   background-color: color-mix(in srgb,
-    var(--wst-links-and-actions-color) 10%,
+    var(--wst-links-and-actions-color, #116dff) 10%,
     transparent);
-  color: var(--wst-links-and-actions-color);
+  color: var(--wst-links-and-actions-color, #116dff);
 }
 

package/dist/Checkbox/index.css

@@ -1,59 +1,68 @@
 .root-OrOWpu {
   box-sizing: border-box;
-  width: var(--checkbox-size, 16px);
-  height: var(--checkbox-size, 16px);
-  vertical-align: middle;
-  border: var(--wst-checkbox-input-border-width, 1px) solid;
-  border-color: var(--wst-paragraph-2-color, #0009);
-  border-radius: var(--wst-checkbox-input-border-radius, 0px);
-  background-color: var(--wst-primary-background-color, transparent);
   cursor: pointer;
-  transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+  --indicator-bg: var(--wst-primary-background-color, #fff);
+  --indicator-border: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
+  align-items: center;
+  gap: 8px;
+  transition: color .2s linear;
   display: inline-flex;
-  position: relative;
 }
 
 .root-OrOWpu:hover, .root-OrOWpu:focus-within {
-  border-color: var(--wst-paragraph-2-color, #000);
-  border-width: var(--wst-checkbox-input-hover-border-width, var(--wst-checkbox-input-border-width, 1px));
-  border-radius: var(--wst-checkbox-input-hover-border-radius, 0px);
-  background-color: var(--wst-primary-background-color, transparent);
+  --indicator-border: var(--wst-system-line-1-color, #000);
+  outline: none;
+}
+
+.root-OrOWpu[data-checked]:not([data-disabled]) {
+  --indicator-bg: var(--wst-links-and-actions-color, #116dff);
+  --indicator-border: var(--wst-links-and-actions-color, #116dff);
 }
 
-.root-OrOWpu[data-checked]:not([data-disabled]), .root-OrOWpu[data-checked]:hover {
-  background-color: var(--wst-links-and-actions-color);
-  border-color: var(--wst-links-and-actions-color);
+.root-OrOWpu[data-checked]:hover {
+  --indicator-bg: color-mix(in srgb, var(--wst-links-and-actions-color, #116dff) 85%, #000);
+  --indicator-border: color-mix(in srgb, var(--wst-links-and-actions-color, #116dff) 85%, #000);
 }
 
 .root-OrOWpu[data-disabled] {
   cursor: default;
   pointer-events: none;
-  border-color: var(--wst-system-disabled-color, #ccc);
-  background-color: var(--wst-primary-background-color, transparent);
+  color: var(--wst-system-disabled-color, #939393);
+  --indicator-bg: var(--wst-primary-background-color, #fff);
+  --indicator-border: color-mix(in srgb, var(--wst-system-disabled-color, #939393) 60%, transparent);
 }
 
 .root-OrOWpu[data-invalid]:not([data-checked]) {
-  border-color: var(--wst-system-error-color, #df3131) !important;
+  --indicator-border: var(--wst-system-error-color, #df3131);
 }
 
-.root-OrOWpu[data-invalid]:not([data-checked]):hover, .root-OrOWpu[data-invalid]:not([data-checked]):focus-within, .root-OrOWpu[data-invalid][data-checked] {
-  border-color: color-mix(in srgb, var(--wst-system-error-color, #df3131) 70%, transparent) !important;
+.root-OrOWpu[data-invalid]:not([data-checked]):hover, .root-OrOWpu[data-invalid]:not([data-checked]):focus-within {
+  --indicator-border: color-mix(in srgb, var(--wst-system-error-color, #df3131) 70%, transparent);
+}
+
+.root-OrOWpu[data-invalid][data-checked] {
+  --indicator-bg: var(--wst-system-error-color, #df3131);
+  --indicator-border: var(--wst-system-error-color, #df3131);
 }
 
 .indicator-g_8JYy {
+  box-sizing: content-box;
+  width: var(--checkbox-size, 16px);
+  height: var(--checkbox-size, 16px);
+  border: var(--wst-system-line-1-width, 1px) solid var(--indicator-border);
+  background-color: var(--indicator-bg);
+  border-radius: 2px;
+  flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
-  transition: opacity .2s linear;
+  transition: background-color .2s linear, border-color .2s linear;
   display: inline-flex;
-  position: absolute;
-  top: 0;
-  left: 0;
 }
 
 .indicator-g_8JYy path {
-  fill: var(--wst-links-and-actions-color, #000);
+  fill: #0000;
   transition: fill .2s linear;
 }
 
@@ -62,14 +71,14 @@
 }
 
 .root-OrOWpu:hover .indicator-g_8JYy path, .root-OrOWpu:focus-within .indicator-g_8JYy path {
-  fill: var(--wst-links-and-actions-color, #000);
+  fill: #0000;
 }
 
 .root-OrOWpu[data-disabled] .indicator-g_8JYy path {
-  fill: var(--wst-system-disabled-color, #ccc);
+  fill: var(--wst-system-disabled-color, #939393);
 }
 
 .root-OrOWpu[data-invalid][data-checked] .indicator-g_8JYy path {
-  fill: var(--wst-system-error-color, #df3131);
+  fill: var(--wst-primary-background-color, #fff);
 }