@wix/site-ui 1.57.0 → 1.59.0

package/dist/AlertDialog/index.css

@@ -3,7 +3,9 @@
 }
 
 .backdrop-uiBfeV {
-  background-color: color-mix(in srgb, var(--wst-system-default-dark-color, #212121) 60%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-system-default-dark-color, #212121) 60%,
+    transparent);
   z-index: 1000;
   position: fixed;
   inset: 0;

package/dist/Autocomplete/index.css

@@ -21,7 +21,9 @@
   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);
+  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;
@@ -36,7 +38,9 @@
 
 .inputGroup-II6FAN[data-disabled] {
   color: var(--wst-system-disabled-color, #939393);
-  border-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
+  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;
@@ -121,7 +125,9 @@
 }
 
 .list-D5iucO::-webkit-scrollbar-thumb {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 30%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-2-color, #000) 30%,
+    transparent);
   border-radius: 2px;
 }
 
@@ -149,8 +155,11 @@
   background-color: var(--wst-primary-background-color, #fff);
   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);
+  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;
@@ -161,7 +170,9 @@
   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);
+  stroke: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 40%,
+    transparent);
 }
 
 .group-RG2nP6 {
@@ -196,7 +207,9 @@
 }
 
 .item-MXqW1H[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 6%,
+    transparent);
 }
 
 .empty-P2WjlU {

package/dist/Checkbox/index.css

@@ -4,7 +4,9 @@
   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);
+  --indicator-border: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
   align-items: center;
   gap: 8px;
   transition: color .2s linear;
@@ -22,8 +24,12 @@
 }
 
 .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);
+  --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] {
@@ -31,7 +37,9 @@
   pointer-events: none;
   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);
+  --indicator-border: color-mix(in srgb,
+    var(--wst-system-disabled-color, #939393) 60%,
+    transparent);
 }
 
 .root-OrOWpu[data-invalid]:not([data-checked]) {
@@ -39,7 +47,9 @@
 }
 
 .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);
+  --indicator-border: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 70%,
+    transparent);
 }
 
 .root-OrOWpu[data-invalid][data-checked] {

package/dist/Combobox/index.css

@@ -9,7 +9,9 @@
   box-sizing: border-box;
   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);
+  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;
@@ -22,11 +24,15 @@
 }
 
 .inputGroup-j4QBzY[data-invalid] {
-  border-color: color-mix(in srgb, var(--wst-system-error-color, #df3131) 60%, transparent);
+  border-color: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 60%,
+    transparent);
 }
 
 .inputGroup-j4QBzY[data-disabled] {
-  border-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
   cursor: not-allowed;
   opacity: .6;
 }
@@ -96,7 +102,8 @@
   background-color: var(--wst-primary-background-color, #fff);
   border: var(--wst-system-line-1-width, 1px) solid
     color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
+  box-shadow: 0 4px 12px
+    color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
   min-width: var(--anchor-width);
   border-radius: 0;
   overflow: hidden;
@@ -133,15 +140,21 @@
 }
 
 .item-cRAzQU[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 6%,
+    transparent);
 }
 
 .item-cRAzQU[data-selected] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 12%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 12%,
+    transparent);
 }
 
 .item-cRAzQU[data-highlighted][data-selected] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 16%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 16%,
+    transparent);
 }
 
 .item-cRAzQU[data-disabled] {
@@ -170,7 +183,9 @@
 .chip-YCMHpQ {
   font: var(--wst-paragraph-3-font);
   color: var(--wst-paragraph-2-color, #000);
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 8%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-2-color, #000) 8%,
+    transparent);
   user-select: none;
   border-radius: 12px;
   align-items: center;

package/dist/ContextMenu/index.css

@@ -29,7 +29,9 @@
 }
 
 .popup-exWvLg hr, .separator-FAmS6X {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-2-color, #000) 15%,
+    transparent);
   border: none;
   height: 1px;
   margin: 4px 0;
@@ -62,7 +64,9 @@
 }
 
 .item-u6sdTm[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 6%,
+    transparent);
 }
 
 .item-u6sdTm[data-disabled] {
@@ -87,7 +91,9 @@
 }
 
 .checkboxItem-lQUwTw[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 6%,
+    transparent);
 }
 
 .checkboxItem-lQUwTw[data-disabled] {
@@ -123,7 +129,9 @@
 }
 
 .linkItem-w7Buqf[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 6%,
+    transparent);
 }
 
 .linkItem-w7Buqf[data-disabled] {
@@ -148,7 +156,9 @@
 }
 
 .radioItem-GkHQXK[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 6%,
+    transparent);
 }
 
 .radioItem-GkHQXK[data-disabled] {
@@ -187,7 +197,9 @@
 }
 
 .submenuTrigger-vAkD3A[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 6%,
+    transparent);
 }
 
 .submenuTrigger-vAkD3A[data-disabled] {

package/dist/Dialog/index.css

@@ -1,5 +1,7 @@
 .backdrop-EHLKAc {
-  background-color: color-mix(in srgb, var(--wst-system-default-dark-color, #212121) 60%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-system-default-dark-color, #212121) 60%,
+    transparent);
   z-index: 1000;
   transition: opacity .2s;
   position: fixed;
@@ -61,7 +63,9 @@
 }
 
 .close-zqdBdX:hover {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 8%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-2-color, #000) 8%,
+    transparent);
 }
 
 .title-U8Hyut {

package/dist/Drawer/index.css

@@ -26,7 +26,9 @@
 }
 
 .backdrop-ZQf73g {
-  background-color: color-mix(in srgb, var(--wst-system-default-dark-color, #212121) 60%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-system-default-dark-color, #212121) 60%,
+    transparent);
   z-index: 1000;
   transition: opacity .2s;
   position: fixed;

package/dist/Menu/index.css

@@ -12,7 +12,8 @@
   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));
+  filter: drop-shadow(0 -1px 1px
+      color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent));
   display: block;
 }
 
@@ -199,7 +200,9 @@
 }
 
 .separator-mmvmF_ {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-2-color, #000) 15%,
+    transparent);
   height: 1px;
   margin: 4px 0;
 }

package/dist/NavigationMenu/index.css

@@ -44,7 +44,9 @@
 }
 
 .trigger-L7xhgv[data-state="open"] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color) 12%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color) 12%,
+    transparent);
   color: var(--wst-links-and-actions-color, #116dff);
 }
 
@@ -91,7 +93,8 @@
   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));
+  filter: drop-shadow(0 -1px 1px
+      color-mix(in srgb, var(--wst-paragraph-2-color, #000) 15%, transparent));
   display: block;
 }
 

package/dist/NumberField/index.css

@@ -55,7 +55,9 @@
 }
 
 .input-BRhN7p::selection {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 20%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-2-color, #000) 20%,
+    transparent);
 }
 
 .input-BRhN7p::placeholder {

package/dist/Popover/index.css

@@ -21,7 +21,9 @@
 .arrow-FmdRXW {
   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-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
   border-width: 0;
   width: 10px;
   height: 10px;

package/dist/Radio/index.css

@@ -2,7 +2,8 @@
   box-sizing: border-box;
   width: var(--radio-size, 16px);
   height: var(--radio-size, 16px);
-  border: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent);
   background-color: var(--wst-primary-background-color, #fff);
   cursor: pointer;
   border-radius: 50%;

package/dist/ScrollArea/index.css

@@ -27,14 +27,18 @@
 }
 
 .thumb-qKKUxU {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 30%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 30%,
+    transparent);
   border-radius: 4px;
   flex: 1;
   position: relative;
 }
 
 .thumb-qKKUxU:hover {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 50%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 50%,
+    transparent);
 }
 
 .corner-Ev0G3O {

package/dist/Select/index.css

@@ -126,16 +126,22 @@
 }
 
 .item-SBIvtk[data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 6%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 6%,
+    transparent);
   outline: none;
 }
 
 .item-SBIvtk[data-selected] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 12%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 12%,
+    transparent);
 }
 
 .item-SBIvtk[data-selected][data-highlighted] {
-  background-color: color-mix(in srgb, var(--wst-base-2-color, #000) 18%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 18%,
+    transparent);
 }
 
 .item-SBIvtk[data-disabled] {

package/dist/Slider/index.d.ts

@@ -290,9 +290,9 @@ declare interface ReasonToEventMap {
     [REASONS.windowResize]: UIEvent;
 }
 
-declare function Root<Value extends number | readonly number[]>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
+declare function Root<Value extends number | ReadonlyArray<number>>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
 
-declare type RootProps<Value extends number | readonly number[]> = WithStringClassName<Slider_2.Root.Props<Value>> & {
+declare type RootProps<Value extends number | ReadonlyArray<number>> = WithStringClassName<Slider_2.Root.Props<Value>> & {
     size?: number;
 };
 

package/dist/Switch/index.css

@@ -3,7 +3,9 @@
   height: var(--switch-height, 24px);
   box-sizing: border-box;
   border-radius: calc(var(--switch-height, 24px) / 2);
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 30%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-paragraph-2-color, #000) 30%,
+    transparent);
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
@@ -21,7 +23,9 @@
 }
 
 .root-jFySXM[data-disabled] {
-  background-color: color-mix(in srgb, var(--wst-system-disabled-color, #939393) 60%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-system-disabled-color, #939393) 60%,
+    transparent);
   cursor: default;
   pointer-events: none;
 }
@@ -35,7 +39,8 @@
   width: var(--switch-thumb-size, 18px);
   height: var(--switch-thumb-size, 18px);
   background-color: var(--wst-primary-background-color, #fff);
-  transform: translateX(calc(-1 * (var(--switch-width, 44px) - var(--switch-thumb-size, 18px)) / 2 + 2px));
+  transform: translateX(calc(-1 * (var(--switch-width, 44px) - var(--switch-thumb-size, 18px)) / 2 +
+        2px));
   border-radius: 50%;
   transition: transform .2s;
   position: absolute;
@@ -47,7 +52,9 @@
 }
 
 .root-jFySXM[data-disabled] .thumb-aDkgmk {
-  background-color: color-mix(in srgb, var(--wst-primary-background-color, #fff) 70%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-primary-background-color, #fff) 70%,
+    transparent);
   box-shadow: none;
 }
 

package/dist/Toolbar/index.css

@@ -36,7 +36,9 @@
 
 .button-VwIpOv[data-pressed] {
   color: var(--wst-links-and-actions-color, #116dff);
-  background-color: color-mix(in srgb, var(--wst-base-2-color) 12%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color) 12%,
+    transparent);
 }
 
 .button-VwIpOv:disabled {
@@ -94,7 +96,9 @@
 
 .separator-pZlgb3 {
   width: var(--wst-system-line-1-width, 1px);
-  background-color: color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
+  background-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
   flex-shrink: 0;
   height: 20px;
   margin: 0 4px;

package/dist/index.d.ts

@@ -8562,13 +8562,13 @@ declare function Root_3<Value = any>({ className, ...props }: WithStringClassNam
 
 declare function Root_4<Value>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
 
-declare function Root_5<Value extends number | readonly number[]>({ className, size, style, ...props }: RootProps_2<Value>): JSX_2.Element;
+declare function Root_5<Value extends number | ReadonlyArray<number>>({ className, size, style, ...props }: RootProps_2<Value>): JSX_2.Element;
 
 declare type RootProps<Value> = WithStringClassName<Radio_2.Root.Props<Value>> & {
     size?: number;
 };
 
-declare type RootProps_2<Value extends number | readonly number[]> = WithStringClassName<Slider_2.Root.Props<Value>> & {
+declare type RootProps_2<Value extends number | ReadonlyArray<number>> = WithStringClassName<Slider_2.Root.Props<Value>> & {
     size?: number;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.57.0",
+  "version": "1.59.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -23,6 +23,9 @@
     "build": "rslib build && yarn build:docs",
     "build:docs": "yarn build-storybook && janet-build",
     "test": "rstest --passWithNoTests",
+    "lint": "yarn run -T lint:package",
+    "format:check": "yarn run -T format:package:check",
+    "check:lint-and-format": "yarn run -T concurrently yarn:lint yarn:format:check",
     "test:visual": "test-storybook --url http://localhost:6006",
     "test:visual:update": "test-storybook --url http://localhost:6006 --updateSnapshot",
     "tsc": "tsc -b ./tsconfig.json --force",
@@ -78,11 +81,16 @@
           "url": "https://bo.wix.com/pages/site-ui/"
         }
       ]
+    },
+    "validations": {
+      "postDependenciesBuild": [
+        "check:lint-and-format"
+      ]
     }
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "8d0c35fab631c111a67f1a0aeac6db8dc75c63939639845a7bea452f"
+  "falconPackageHash": "68a229f71bdb4020aabf6e5cc6cd0fa742f24a4e70f38b7a3d55c0e4"
 }