@wix/site-ui 1.13.0 → 1.15.0

package/dist/Drawer/index.css

@@ -1,11 +1,29 @@
+.description-hsuUfX {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+  margin: 0 0 16px;
+}
+
+.title-A0LbRg {
+  font: var(--wst-heading-6-font);
+  color: var(--wst-heading-6-color);
+  margin: 0 0 8px;
+}
+
 .popup-FjIEpg {
   background-color: var(--wst-primary-background-color, #fff);
-  border: 0 solid #000;
-  width: 100%;
-  min-height: 60px;
-  max-height: 320px;
+  flex-direction: column;
+  max-height: 80vh;
+  padding: 24px;
   transition-duration: .3s;
   transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+  box-shadow: 0 -4px 24px #00000026;
 }
 
 .popup-FjIEpg[data-swipe-direction="up"] {

package/dist/Drawer/index.js

@@ -3,6 +3,8 @@ import { Drawer } from "@base-ui/react/drawer";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
 const Drawer_module = {
+    description: "description-hsuUfX",
+    title: "title-A0LbRg",
     popup: "popup-FjIEpg"
 };
 const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Drawer.Backdrop, {

package/dist/Field/index.css

@@ -4,10 +4,9 @@
 }
 
 .label-YSWZBs {
-  color: var(--wst-paragraph-2-color, #000);
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
   margin-bottom: 8px;
-  font-size: 14px;
-  line-height: 1.4;
   display: inline-block;
 }
 
@@ -16,18 +15,22 @@
 }
 
 .error-BUDKWp {
-  color: var(--wst-system-error-color, #df3131);
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-system-error-color);
   margin-top: 8px;
-  font-size: 14px;
-  line-height: 1.4;
   display: block;
 }
 
 .description-IVviYU {
-  color: var(--wst-shade-3-color, #767676);
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
   margin-top: 8px;
-  font-size: 14px;
-  line-height: 1.4;
   display: block;
 }
 
+.item-kQeHOQ {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+

package/dist/Field/index.js

@@ -6,7 +6,8 @@ const Field_module = {
     root: "root-ECdHfF",
     label: "label-YSWZBs",
     error: "error-BUDKWp",
-    description: "description-IVviYU"
+    description: "description-IVviYU",
+    item: "item-kQeHOQ"
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Field.Root, {
         ref: ref,

package/dist/Fieldset/index.css

@@ -1,2 +1,9 @@
-
+.root-v8M2Sx {
+  border: none;
+  flex-direction: column;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
 

package/dist/Fieldset/index.js

@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { Fieldset } from "@base-ui/react/fieldset";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Fieldset_module = {};
+const Fieldset_module = {
+    root: "root-v8M2Sx"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Fieldset.Root, {
         ref: ref,
         className: clsx(Fieldset_module.root, className),

package/dist/Input/index.css

@@ -4,6 +4,7 @@
   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;
@@ -11,8 +12,6 @@
   margin: 0;
   padding-block: 8px;
   padding-inline: 12px;
-  font-size: 16px;
-  line-height: 24px;
   transition: border-color .1s ease-in;
 }
 
@@ -26,8 +25,8 @@
 }
 
 .root-Y7wYn3:focus-visible {
-  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
-  outline-offset: 1px;
+  border-color: var(--wst-links-and-actions-color, #116dff);
+  outline: none;
 }
 
 .root-Y7wYn3:disabled {

package/dist/Menu/index.css

@@ -1,3 +1,16 @@
+.trigger-OltV1Y {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+  align-items: center;
+  display: inline-flex;
+}
+
+.groupLabel-_L41zu {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
+  padding: 4px 24px;
+}
+
 .popup-VQm6g1 {
   background-color: var(--wst-primary-background-color, #fff);
   border-style: solid;
@@ -19,12 +32,10 @@
   cursor: pointer;
   width: calc(100% + 2px);
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2, inherit);
+  font: var(--wst-paragraph-2-font);
   text-align: initial;
   align-items: center;
   padding: 8px 24px;
-  font-size: 16px;
-  line-height: 24px;
   display: flex;
   position: relative;
   left: -1px;
@@ -48,12 +59,10 @@
   cursor: pointer;
   width: calc(100% + 2px);
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2, inherit);
+  font: var(--wst-paragraph-2-font);
   text-align: initial;
   align-items: center;
   padding: 8px 24px;
-  font-size: 16px;
-  line-height: 24px;
   text-decoration: none;
   display: flex;
   position: relative;

package/dist/Menu/index.js

@@ -3,6 +3,8 @@ import { Menu } from "@base-ui/react/menu";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
 const Menu_module = {
+    trigger: "trigger-OltV1Y",
+    groupLabel: "groupLabel-_L41zu",
     popup: "popup-VQm6g1",
     item: "item-toMw6N",
     linkItem: "linkItem-UZphBs"

package/dist/Meter/index.css

@@ -7,7 +7,8 @@
 .track-BJK3T1 {
   background: #fff3;
   background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 20%, transparent);
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   height: 6px;
   position: relative;
 }
@@ -23,6 +24,7 @@
 
 .value-Uz_0kH {
   color: var(--wst-paragraph-2-color, #000);
+  flex-shrink: 0;
   padding-inline-start: 8px;
   font-size: 12px;
   line-height: 1.4em;
@@ -30,6 +32,7 @@
 
 .label-yJGBDG {
   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,2 +1,49 @@
+.root-Gth795 {
+  position: relative;
+}
 
+.list-kus7O6 {
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.trigger-L7xhgv {
+  cursor: pointer;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+  background: none;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-weight: 500;
+}
+
+.trigger-L7xhgv:hover {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color) 6%, transparent);
+}
+
+.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;
+}
+
+.link-jrEqu4 {
+  color: var(--wst-paragraph-2-color);
+  font: var(--wst-paragraph-2-font);
+  border-radius: 4px;
+  padding: 6px 8px;
+  text-decoration: none;
+  display: block;
+}
+
+.link-jrEqu4:hover {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color) 6%, transparent);
+}
 

package/dist/NavigationMenu/index.js

@@ -2,7 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { NavigationMenu } from "@base-ui/react/navigation-menu";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const NavigationMenu_module = {};
+const NavigationMenu_module = {
+    root: "root-Gth795",
+    list: "list-kus7O6",
+    trigger: "trigger-L7xhgv",
+    popup: "popup-jElt_o",
+    link: "link-jrEqu4"
+};
 const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(NavigationMenu.List, {
         ref: ref,
         className: clsx(NavigationMenu_module.list, className),

package/dist/NumberField/index.css

@@ -86,14 +86,21 @@
 .increment-qnw0yh, .decrement-zkpqlA {
   all: unset;
   cursor: pointer;
-  height: 16px;
-  color: var(--wst-paragraph-2-color, #000);
+  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);
   justify-content: center;
+  align-self: stretch;
   align-items: center;
-  line-height: 16px;
+  padding: 0 10px;
   display: flex;
 }
 
+.decrement-zkpqlA {
+  border-inline-start: none;
+  border-inline-end: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color) 20%, transparent);
+}
+
 .increment-qnw0yh:hover, .decrement-zkpqlA:hover {
   opacity: .7;
 }

package/dist/Popover/index.css

@@ -76,3 +76,15 @@
   box-shadow: 5px 5px 0 5px var(--wst-primary-background-color, #fff);
 }
 
+.title-kQ490g {
+  font: var(--wst-heading-6-font);
+  color: var(--wst-heading-6-color);
+  margin: 0 0 4px;
+}
+
+.description-IgC4Ak {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
+  margin: 0 0 12px;
+}
+

package/dist/Popover/index.js

@@ -5,7 +5,9 @@ import * as __rspack_external_react from "react";
 const Popover_module = {
     popup: "popup-Wrjs4v",
     arrow: "arrow-FmdRXW",
-    positioner: "positioner-t0X5uo"
+    positioner: "positioner-t0X5uo",
+    title: "title-kQ490g",
+    description: "description-IgC4Ak"
 };
 const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Positioner, {
         ref: ref,

package/dist/Progress/index.css

@@ -1,26 +1,26 @@
 .root-VDHmKD {
-  align-items: center;
+  flex-direction: column;
+  gap: 8px;
   width: 100%;
   display: flex;
 }
 
 .track-_XqaKn {
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #333) 20%, transparent);
   width: 100%;
-  height: 100%;
+  height: var(--progress-size, 6px);
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #333) 20%, transparent);
+  border-radius: 999px;
   position: relative;
 }
 
 .indicator-lfO9jO {
   background: var(--wst-links-and-actions-color, #116dff);
+  height: 100%;
   transition: width .5s ease-in-out;
 }
 
 .value-SBk4OI, .label-HqgXxt {
-  color: var(--wst-paragraph-2-color, #333);
-  gap: 8px;
-  font-size: 12px;
-  line-height: 1.4em;
-  display: flex;
+  color: var(--wst-paragraph-3-color, #333);
+  font: var(--wst-paragraph-3-font);
 }
 

package/dist/Progress/index.d.ts

@@ -8,6 +8,8 @@ import * as React_2 from 'react';
 export declare const Progress: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ProgressRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        size?: number | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
     Track: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ProgressTrackProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -23,6 +25,13 @@ export declare const Progress: {
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare const ProgressSize: {
+    readonly thin: 4;
+    readonly small: 6;
+    readonly medium: 8;
+    readonly large: 12;
+};
+
 
 export * from "@base-ui/react/progress";
 

package/dist/Progress/index.js

@@ -9,9 +9,19 @@ const Progress_module = {
     value: "value-SBk4OI",
     label: "label-HqgXxt"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Progress.Root, {
+const ProgressSize = {
+    thin: 4,
+    small: 6,
+    medium: 8,
+    large: 12
+};
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size = ProgressSize.small, style, ...props }, ref)=>/*#__PURE__*/ jsx(Progress.Root, {
         ref: ref,
         className: clsx(Progress_module.root, className),
+        style: {
+            '--progress-size': `${size}px`,
+            ...style
+        },
         ...props
     }));
 const Track = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Progress.Track, {
@@ -41,4 +51,4 @@ const Progress_Progress = {
     Value: Value,
     Label: Label
 };
-export { Progress_Progress as Progress };
+export { ProgressSize, Progress_Progress as Progress };

package/dist/Radio/index.css

@@ -1,13 +1,13 @@
 .root-Lal8hj {
   background-color: var(--wst-primary-background-color, transparent);
+  height: var(--radio-size, 16px);
+  width: var(--radio-size, 16px);
   box-sizing: content-box;
   border: 1px solid var(--wst-paragraph-2-color, #0009);
   cursor: pointer;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
-  width: 14px;
-  height: 14px;
   transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
   display: flex;
 }
@@ -28,12 +28,20 @@
   border-color: var(--wst-system-disabled-color, #ccc);
 }
 
+.root-Lal8hj[data-invalid]:not([data-checked]) {
+  border-color: var(--wst-system-error-color) !important;
+}
+
+.root-Lal8hj[data-invalid][data-checked] {
+  border-color: var(--wst-system-error-color);
+}
+
 .indicator-YyFvol {
+  width: calc(var(--radio-size, 16px) * .5);
+  height: calc(var(--radio-size, 16px) * .5);
   background-color: var(--wst-links-and-actions-color, #000);
   opacity: 0;
   border-radius: 50%;
-  width: 8px;
-  height: 8px;
   transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
   transform: scale(.5);
 }
@@ -47,3 +55,7 @@
   background-color: var(--wst-system-disabled-color, #ccc);
 }
 
+.root-Lal8hj[data-invalid][data-checked] .indicator-YyFvol {
+  background-color: var(--wst-system-error-color);
+}
+

package/dist/Radio/index.d.ts

@@ -10,7 +10,17 @@ export declare const Radio: {
     Root: typeof Root;
 };
 
-declare function Root<Value>({ className, ...props }: WithStringClassName<Radio_2.Root.Props<Value>>): JSX_2.Element;
+export declare const RadioSize: {
+    readonly small: 12;
+    readonly medium: 16;
+    readonly large: 20;
+};
+
+declare function Root<Value>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
+
+declare type RootProps<Value> = WithStringClassName<Radio_2.Root.Props<Value>> & {
+    size?: number;
+};
 
 declare type WithStringClassName<P> = Omit<P, 'className'> & {
     className?: string;

package/dist/Radio/index.js

@@ -6,19 +6,28 @@ const Radio_module = {
     root: "root-Lal8hj",
     indicator: "indicator-YyFvol"
 };
+const RadioSize = {
+    small: 12,
+    medium: 16,
+    large: 20
+};
 const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Radio.Indicator, {
         ref: ref,
         className: clsx(Radio_module.indicator, className),
         ...props
     }));
-function Root({ className, ...props }) {
+function Root({ className, size = RadioSize.medium, style, ...props }) {
     return /*#__PURE__*/ jsx(Radio.Root, {
         ...props,
-        className: clsx(Radio_module.root, className)
+        className: clsx(Radio_module.root, className),
+        style: {
+            '--radio-size': `${size}px`,
+            ...style
+        }
     });
 }
 const Radio_Radio = {
     Indicator: Indicator,
     Root: Root
 };
-export { Radio_Radio as Radio };
+export { RadioSize, Radio_Radio as Radio };

package/dist/ScrollArea/index.css

@@ -1,2 +1,37 @@
+.root-_9VjLl {
+  position: relative;
+  overflow: hidden;
+}
 
+.viewport-AtdxVk {
+  width: 100%;
+  height: 100%;
+  overflow: hidden scroll;
+}
+
+.scrollbar-NftRcM {
+  background: color-mix(in srgb, var(--wst-paragraph-2-color) 4%, transparent);
+  border-radius: 8px;
+  width: 8px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.scrollbar-NftRcM[data-orientation="horizontal"] {
+  width: auto;
+  height: 8px;
+  inset: auto 0 0;
+}
+
+.thumb-qKKUxU {
+  background: color-mix(in srgb, var(--wst-paragraph-2-color) 25%, transparent);
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.thumb-qKKUxU:hover {
+  background: color-mix(in srgb, var(--wst-paragraph-2-color) 40%, transparent);
+}
 

package/dist/ScrollArea/index.js

@@ -2,7 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const ScrollArea_module = {};
+const ScrollArea_module = {
+    root: "root-_9VjLl",
+    viewport: "viewport-AtdxVk",
+    scrollbar: "scrollbar-NftRcM",
+    thumb: "thumb-qKKUxU"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollArea.Root, {
         ref: ref,
         className: clsx(ScrollArea_module.root, className),

package/dist/Select/index.css

@@ -1,8 +1,7 @@
 .label-UrIm_f {
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2, inherit);
+  font: var(--wst-paragraph-2-font);
   margin-bottom: 8px;
-  font-size: 14px;
   display: block;
 }
 
@@ -16,14 +15,12 @@
   border-style: solid;
   border-width: 1px;
   border-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent);
-  font: var(--wst-paragraph-2, inherit);
+  font: var(--wst-paragraph-2-font);
   cursor: pointer;
   border-radius: 0;
   align-items: center;
   column-gap: 4px;
   padding: 0 12px;
-  font-size: 16px;
-  line-height: 1.5em;
   display: flex;
 }
 
@@ -102,12 +99,10 @@
   padding-bottom: 8px;
   width: 100%;
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2, inherit);
+  font: var(--wst-paragraph-2-font);
   cursor: pointer;
   align-items: center;
   padding-inline: 12px;
-  font-size: 16px;
-  line-height: 1.5;
   display: flex;
 }
 
@@ -132,6 +127,8 @@
 .itemText-tVdjcF {
   text-overflow: ellipsis;
   white-space: nowrap;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
   padding-inline: 0;
   display: block;
   overflow: hidden;
@@ -157,11 +154,9 @@
 .groupLabel-GC3RgN {
   padding-top: 0;
   padding-bottom: 0;
-  color: var(--wst-shade-3-color, #aaa);
-  font: var(--wst-paragraph-2, inherit);
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
   padding-inline: 12px;
-  font-size: 16px;
-  line-height: 1.5;
   display: block;
 }
 

package/dist/Slider/index.css

@@ -1,13 +1,24 @@
-.label-MkH3nw {
-  color: var(--wst-paragraph-2-color, #32536a);
-  font: var(--wst-paragraph-2, normal 14px/1.4 sans-serif);
+.root-uI1zMj {
+  box-sizing: border-box;
   align-items: center;
-  min-height: 29px;
-  padding: 0;
+  gap: 12px;
+  width: 100%;
   display: flex;
 }
 
+.label-MkH3nw {
+  color: var(--wst-paragraph-2-color, #32536a);
+  font: var(--wst-paragraph-2-font);
+}
+
+.value-ZbXzRd {
+  color: var(--wst-paragraph-2-color, #32536a);
+  font: var(--wst-paragraph-2-font);
+  text-align: end;
+}
+
 .control-_J8a2_ {
+  flex: 1;
   padding: 0 8px;
 }