@wix/site-ui 1.13.0 → 1.14.0

package/dist/Accordion/index.css

@@ -16,18 +16,18 @@
 }
 
 .trigger-cbcjp2 {
-  font-family: var(--wst-paragraph-2-font-family);
-  font-size: var(--wst-paragraph-2-font-size, 16px);
-  font-style: var(--wst-paragraph-2-font-style);
-  font-weight: var(--wst-paragraph-2-font-weight);
-  line-height: var(--wst-paragraph-2-line-height);
+  font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color, #000);
   text-align: start;
   cursor: pointer;
   background: none;
   border: none;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
   width: 100%;
   padding: 0;
+  display: flex;
 }
 
 .trigger-cbcjp2:disabled {
@@ -35,11 +35,8 @@
 }
 
 .panel-Gp0XFK {
-  font-family: var(--wst-paragraph-2-font-family);
-  font-size: var(--wst-paragraph-2-font-size, 16px);
-  font-style: var(--wst-paragraph-2-font-style);
-  font-weight: var(--wst-paragraph-2-font-weight);
-  line-height: var(--wst-paragraph-2-line-height);
+  font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color, #000);
+  padding-block: 12px;
 }
 

package/dist/Accordion/index.d.ts

@@ -20,6 +20,11 @@ export declare const Accordion: {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
     Root: typeof Root;
+    Arrow: React_2.ForwardRefExoticComponent<Omit<ArrowProps, "ref"> & React_2.RefAttributes<SVGSVGElement>>;
+};
+
+declare type ArrowProps = React_2.SVGProps<SVGSVGElement> & {
+    className?: string;
 };
 
 declare function Root<Value = any>({ className, ...props }: WithStringClassName<Accordion_2.Root.Props<Value>>): JSX_2.Element;

package/dist/Accordion/index.js

@@ -35,11 +35,26 @@ function Root({ className, ...props }) {
         className: clsx(Accordion_module.root, className)
     });
 }
+const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("svg", {
+        ref: ref,
+        className: clsx(Accordion_module.arrow, className),
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 16 16",
+        width: "16",
+        height: "16",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M2.293 5.293a1 1 0 0 1 1.414 0L8 9.586l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414z"
+        })
+    }));
 const Accordion_Accordion = {
     Item: Item,
     Header: Header,
     Trigger: Trigger,
     Panel: Panel,
-    Root: Root
+    Root: Root,
+    Arrow: Arrow
 };
 export { Accordion_Accordion as Accordion };

package/dist/AlertDialog/index.css

@@ -18,11 +18,13 @@
 .popup-L9x90S {
   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);
-  padding: 80px 32px;
+  padding: 32px;
+  display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -32,8 +34,17 @@
 
 .close-ws9ziC {
   color: var(--wst-dialog-close-button-color, #000);
-  position: absolute;
-  top: 20px;
-  right: 20px;
+}
+
+.title-IeDaIJ {
+  font: var(--wst-heading-6-font);
+  color: var(--wst-heading-6-color);
+  margin: 0 0 8px;
+}
+
+.description-imwSAm {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+  margin: 0 0 16px;
 }
 

package/dist/AlertDialog/index.js

@@ -6,7 +6,9 @@ const AlertDialog_module = {
     backdrop: "backdrop-uiBfeV",
     viewport: "viewport-rOzJs7",
     popup: "popup-L9x90S",
-    close: "close-ws9ziC"
+    close: "close-ws9ziC",
+    title: "title-IeDaIJ",
+    description: "description-imwSAm"
 };
 const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(AlertDialog.Backdrop, {
         ref: ref,

package/dist/Autocomplete/index.css

@@ -92,6 +92,7 @@
   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;
 }
 
@@ -107,3 +108,9 @@
   background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
 }
 
+.empty-P2WjlU {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-3-color);
+  padding: 10px 14px;
+}
+

package/dist/Autocomplete/index.js

@@ -8,7 +8,8 @@ const Autocomplete_module = {
     icon: "icon-xxqTKh",
     list: "list-D5iucO",
     popup: "popup-w30icg",
-    item: "item-MXqW1H"
+    item: "item-MXqW1H",
+    empty: "empty-P2WjlU"
 };
 const InputGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.InputGroup, {
         ref: ref,

package/dist/Avatar/index.css

@@ -4,7 +4,8 @@
   font-size: calc(var(--avatar-size, 36px) / 3);
   letter-spacing: 0;
   text-align: center;
-  background-color: #d8d8d8;
+  user-select: none;
+  background-color: var(--wst-secondary-background-color, #e6e6e6);
   border-radius: 50%;
   justify-content: center;
   align-items: center;
@@ -17,17 +18,18 @@
   width: 100%;
   height: 100%;
   font-size: initial;
+  object-fit: cover;
   border-radius: 50%;
 }
 
 .fallback-r0pagw {
-  color: #979797;
-  font-family: var(--wst-font-family, sans-serif);
+  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%;
-  font-weight: 500;
   display: flex;
   position: absolute;
 }

package/dist/Button/index.css

@@ -1,5 +1,3 @@
-
-
 .root-kIffNe {
   cursor: pointer;
   box-sizing: border-box;
@@ -15,25 +13,31 @@
   padding-bottom: var(--wst-button-primary-padding-bottom);
   padding-left: var(--wst-button-primary-padding-left);
   border-top-color: var(--wst-button-primary-border-top-color);
-  border-right-color: var(--wst-button-primary-border-right-color);
+  border-inline-end-color: var(--wst-button-primary-border-right-color);
   border-bottom-color: var(--wst-button-primary-border-bottom-color);
-  border-left-color: var(--wst-button-primary-border-left-color);
+  border-inline-start-color: var(--wst-button-primary-border-left-color);
   border-top-width: var(--wst-button-primary-border-top-width);
-  border-right-width: var(--wst-button-primary-border-right-width);
+  border-inline-end-width: var(--wst-button-primary-border-right-width);
   border-bottom-width: var(--wst-button-primary-border-bottom-width);
-  border-left-width: var(--wst-button-primary-border-left-width);
+  border-inline-start-width: var(--wst-button-primary-border-left-width);
   border-top-style: var(--wst-button-primary-border-top-style);
-  border-right-style: var(--wst-button-primary-border-right-style);
+  border-inline-end-style: var(--wst-button-primary-border-right-style);
   border-bottom-style: var(--wst-button-primary-border-bottom-style);
-  border-left-style: var(--wst-button-primary-border-left-style);
-  border-top-left-radius: var(--wst-button-primary-border-top-left-radius);
-  border-top-right-radius: var(--wst-button-primary-border-top-right-radius);
-  border-bottom-left-radius: var(--wst-button-primary-border-bottom-left-radius);
-  border-bottom-right-radius: var(--wst-button-primary-border-bottom-right-radius);
+  border-inline-start-style: var(--wst-button-primary-border-left-style);
   box-shadow: var(--wst-button-primary-box-shadow);
   column-gap: var(--wst-button-primary-column-gap);
   row-gap: var(--wst-button-primary-row-gap);
   justify-content: var(--wst-button-primary-justify-content);
+  color: var(--wst-button-primary-color);
+  font: var(--wst-button-primary-font);
+  letter-spacing: var(--wst-button-primary-letter-spacing);
+  text-decoration: var(--wst-button-primary-text-decoration);
+  text-transform: var(--wst-button-primary-text-transform);
+  text-shadow: var(--wst-button-primary-text-shadow);
+  border-start-start-radius: var(--wst-button-primary-border-top-left-radius);
+  border-start-end-radius: var(--wst-button-primary-border-top-right-radius);
+  border-end-end-radius: var(--wst-button-primary-border-bottom-right-radius);
+  border-end-start-radius: var(--wst-button-primary-border-bottom-left-radius);
 }
 
 .secondary-O9td6z {
@@ -44,25 +48,31 @@
   padding-bottom: var(--wst-button-secondary-padding-bottom);
   padding-left: var(--wst-button-secondary-padding-left);
   border-top-color: var(--wst-button-secondary-border-top-color);
-  border-right-color: var(--wst-button-secondary-border-right-color);
+  border-inline-end-color: var(--wst-button-secondary-border-right-color);
   border-bottom-color: var(--wst-button-secondary-border-bottom-color);
-  border-left-color: var(--wst-button-secondary-border-left-color);
+  border-inline-start-color: var(--wst-button-secondary-border-left-color);
   border-top-width: var(--wst-button-secondary-border-top-width);
-  border-right-width: var(--wst-button-secondary-border-right-width);
+  border-inline-end-width: var(--wst-button-secondary-border-right-width);
   border-bottom-width: var(--wst-button-secondary-border-bottom-width);
-  border-left-width: var(--wst-button-secondary-border-left-width);
+  border-inline-start-width: var(--wst-button-secondary-border-left-width);
   border-top-style: var(--wst-button-secondary-border-top-style);
-  border-right-style: var(--wst-button-secondary-border-right-style);
+  border-inline-end-style: var(--wst-button-secondary-border-right-style);
   border-bottom-style: var(--wst-button-secondary-border-bottom-style);
-  border-left-style: var(--wst-button-secondary-border-left-style);
-  border-top-left-radius: var(--wst-button-secondary-border-top-left-radius);
-  border-top-right-radius: var(--wst-button-secondary-border-top-right-radius);
-  border-bottom-left-radius: var(--wst-button-secondary-border-bottom-left-radius);
-  border-bottom-right-radius: var(--wst-button-secondary-border-bottom-right-radius);
+  border-inline-start-style: var(--wst-button-secondary-border-left-style);
   box-shadow: var(--wst-button-secondary-box-shadow);
   column-gap: var(--wst-button-secondary-column-gap);
   row-gap: var(--wst-button-secondary-row-gap);
   justify-content: var(--wst-button-secondary-justify-content);
+  color: var(--wst-button-secondary-color);
+  font: var(--wst-button-secondary-font);
+  letter-spacing: var(--wst-button-secondary-letter-spacing);
+  text-decoration: var(--wst-button-secondary-text-decoration);
+  text-transform: var(--wst-button-secondary-text-transform);
+  text-shadow: var(--wst-button-secondary-text-shadow);
+  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);
 }
 
 .tertiary-QWTRNC {
@@ -73,57 +83,70 @@
   padding-bottom: var(--wst-button-tertiary-padding-bottom);
   padding-left: var(--wst-button-tertiary-padding-left);
   border-top-color: var(--wst-button-tertiary-border-top-color);
-  border-right-color: var(--wst-button-tertiary-border-right-color);
+  border-inline-end-color: var(--wst-button-tertiary-border-right-color);
   border-bottom-color: var(--wst-button-tertiary-border-bottom-color);
-  border-left-color: var(--wst-button-tertiary-border-left-color);
+  border-inline-start-color: var(--wst-button-tertiary-border-left-color);
   border-top-width: var(--wst-button-tertiary-border-top-width);
-  border-right-width: var(--wst-button-tertiary-border-right-width);
+  border-inline-end-width: var(--wst-button-tertiary-border-right-width);
   border-bottom-width: var(--wst-button-tertiary-border-bottom-width);
-  border-left-width: var(--wst-button-tertiary-border-left-width);
+  border-inline-start-width: var(--wst-button-tertiary-border-left-width);
   border-top-style: var(--wst-button-tertiary-border-top-style);
-  border-right-style: var(--wst-button-tertiary-border-right-style);
+  border-inline-end-style: var(--wst-button-tertiary-border-right-style);
   border-bottom-style: var(--wst-button-tertiary-border-bottom-style);
-  border-left-style: var(--wst-button-tertiary-border-left-style);
-  border-top-left-radius: var(--wst-button-tertiary-border-top-left-radius);
-  border-top-right-radius: var(--wst-button-tertiary-border-top-right-radius);
-  border-bottom-left-radius: var(--wst-button-tertiary-border-bottom-left-radius);
-  border-bottom-right-radius: var(--wst-button-tertiary-border-bottom-right-radius);
+  border-inline-start-style: var(--wst-button-tertiary-border-left-style);
   box-shadow: var(--wst-button-tertiary-box-shadow);
   column-gap: var(--wst-button-tertiary-column-gap);
   row-gap: var(--wst-button-tertiary-row-gap);
   justify-content: var(--wst-button-tertiary-justify-content);
+  color: var(--wst-button-tertiary-color);
+  font: var(--wst-button-tertiary-font);
+  letter-spacing: var(--wst-button-tertiary-letter-spacing);
+  text-decoration: var(--wst-button-tertiary-text-decoration);
+  text-transform: var(--wst-button-tertiary-text-transform);
+  text-shadow: var(--wst-button-tertiary-text-shadow);
+  border-start-start-radius: var(--wst-button-tertiary-border-top-left-radius);
+  border-start-end-radius: var(--wst-button-tertiary-border-top-right-radius);
+  border-end-end-radius: var(--wst-button-tertiary-border-bottom-right-radius);
+  border-end-start-radius: var(--wst-button-tertiary-border-bottom-left-radius);
+}
+
+.root-kIffNe:focus-visible {
+  outline: 2px solid var(--wst-links-and-actions-color);
+  outline-offset: 2px;
 }
 
-.tiny-u7daFm {
-  padding-top: calc(4px * 2 - 2px);
-  padding-bottom: calc(4px * 2 - 2px);
-  padding-right: calc(4px * 4);
-  padding-left: calc(4px * 4);
+.primary-BOdHls:not(:disabled):hover {
+  background-color: color-mix(in srgb, var(--wst-button-primary-background-color) 85%, black);
 }
 
-.small-OumyWK {
-  padding-top: calc(4px * 2 - 1px);
-  padding-bottom: calc(4px * 2 - 1px);
-  padding-right: calc(4px * 4);
-  padding-left: calc(4px * 4);
+.primary-BOdHls:disabled {
+  background-color: var(--wst-system-disabled-color);
+  border-top-color: var(--wst-system-disabled-color);
+  border-bottom-color: var(--wst-system-disabled-color);
+  border-inline-start-color: var(--wst-system-disabled-color);
+  border-inline-end-color: var(--wst-system-disabled-color);
+  color: var(--wst-primary-background-color);
+  cursor: default;
+  pointer-events: none;
 }
 
-.medium-ZNTo1S {
-  padding-top: calc(4px * 2);
-  padding-bottom: calc(4px * 2);
-  padding-right: calc(4px * 4);
-  padding-left: calc(4px * 4);
+.secondary-O9td6z:not(:disabled):hover {
+  background-color: color-mix(in srgb, var(--wst-button-secondary-border-top-color) 8%, transparent);
 }
 
-.large-g_AXNi {
-  padding-top: calc(4px * 3 - 2px);
-  padding-bottom: calc(4px * 3 - 2px);
-  padding-right: calc(4px * 4);
-  padding-left: calc(4px * 4);
+.secondary-O9td6z:disabled {
+  border-top-color: var(--wst-system-disabled-color);
+  border-bottom-color: var(--wst-system-disabled-color);
+  border-inline-start-color: var(--wst-system-disabled-color);
+  border-inline-end-color: var(--wst-system-disabled-color);
+  color: var(--wst-system-disabled-color);
+  cursor: default;
+  pointer-events: none;
 }
 
-.root-kIffNe:disabled {
-  cursor: not-allowed;
-  opacity: .4;
+.tertiary-QWTRNC:disabled {
+  color: var(--wst-system-disabled-color);
+  cursor: default;
+  pointer-events: none;
 }
 

package/dist/Button/index.d.ts

@@ -7,11 +7,8 @@ export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & Rea
 
 declare interface ButtonProps extends BaseProps {
     variant?: ButtonVariant;
-    size?: ButtonSize;
 }
 
-declare type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
-
 declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
 declare type WithStringClassName<P> = Omit<P, 'className'> & {

package/dist/Button/index.js

@@ -3,30 +3,14 @@ import { Button } from "@base-ui/react/button";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
 const Button_module = {
-    "base-unit": "4px",
-    baseUnit: "4px",
-    "button-padding-h": "calc(4px * 4)",
-    buttonPaddingH: "calc(4px * 4)",
-    "button-size-tiny-padding-v": "calc(4px * 2 - 2px)",
-    buttonSizeTinyPaddingV: "calc(4px * 2 - 2px)",
-    "button-size-small-padding-v": "calc(4px * 2 - 1px)",
-    buttonSizeSmallPaddingV: "calc(4px * 2 - 1px)",
-    "button-size-medium-padding-v": "calc(4px * 2)",
-    buttonSizeMediumPaddingV: "calc(4px * 2)",
-    "button-size-large-padding-v": "calc(4px * 3 - 2px)",
-    buttonSizeLargePaddingV: "calc(4px * 3 - 2px)",
     root: "root-kIffNe",
     primary: "primary-BOdHls",
     secondary: "secondary-O9td6z",
-    tertiary: "tertiary-QWTRNC",
-    tiny: "tiny-u7daFm",
-    small: "small-OumyWK",
-    medium: "medium-ZNTo1S",
-    large: "large-g_AXNi"
+    tertiary: "tertiary-QWTRNC"
 };
-const Button_Button = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = 'primary', size, ...props }, ref)=>/*#__PURE__*/ jsx(Button, {
+const Button_Button = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = 'primary', ...props }, ref)=>/*#__PURE__*/ jsx(Button, {
         ref: ref,
-        className: clsx(Button_module.root, Button_module[variant], size && Button_module[size], className),
+        className: clsx(Button_module.root, Button_module[variant], className),
         ...props
     }));
 export { Button_Button as Button };

package/dist/Checkbox/index.css

@@ -1,7 +1,7 @@
 .root-OrOWpu {
   box-sizing: border-box;
-  width: var(--wst-checkbox-input-size, 14px);
-  height: var(--wst-checkbox-input-size, 14px);
+  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);
@@ -20,12 +20,9 @@
   background-color: var(--wst-primary-background-color, transparent);
 }
 
-.root-OrOWpu[data-checked]:not([data-disabled]) {
-  background-color: var(--wst-primary-background-color, transparent);
-}
-
-.root-OrOWpu[data-checked]:hover {
-  background-color: #0000;
+.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-disabled] {
@@ -60,6 +57,10 @@
   transition: fill .2s linear;
 }
 
+.root-OrOWpu[data-checked]:not([data-disabled]) .indicator-g_8JYy path, .root-OrOWpu[data-checked]:hover .indicator-g_8JYy path {
+  fill: var(--wst-primary-background-color, #fff);
+}
+
 .root-OrOWpu:hover .indicator-g_8JYy path, .root-OrOWpu:focus-within .indicator-g_8JYy path {
   fill: var(--wst-links-and-actions-color, #000);
 }

package/dist/Checkbox/index.d.ts

@@ -5,12 +5,20 @@ import * as React_2 from 'react';
 export declare const Checkbox: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxRootProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        size?: number | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
     Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxIndicatorProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare const CheckboxSize: {
+    readonly small: 12;
+    readonly medium: 16;
+    readonly large: 20;
+};
+
 
 export * from "@base-ui/react/checkbox";
 

package/dist/Checkbox/index.js

@@ -6,9 +6,18 @@ const Checkbox_module = {
     root: "root-OrOWpu",
     indicator: "indicator-g_8JYy"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Checkbox.Root, {
+const CheckboxSize = {
+    small: 12,
+    medium: 16,
+    large: 20
+};
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size = CheckboxSize.medium, style, ...props }, ref)=>/*#__PURE__*/ jsx(Checkbox.Root, {
         ref: ref,
         className: clsx(Checkbox_module.root, className),
+        style: {
+            '--checkbox-size': `${size}px`,
+            ...style
+        },
         ...props
     }));
 const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Checkbox.Indicator, {
@@ -20,4 +29,4 @@ const Checkbox_Checkbox = {
     Root: Root,
     Indicator: Indicator
 };
-export { Checkbox_Checkbox as Checkbox };
+export { CheckboxSize, Checkbox_Checkbox as Checkbox };

package/dist/CheckboxGroup/index.css

@@ -1,5 +1,5 @@
 .root-ZCRH6j {
-  font: var(--wst-paragraph-2);
+  font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color);
   border: none;
   margin: 0;

package/dist/Combobox/index.css

@@ -1,6 +1,6 @@
 .label-AxhKN1 {
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2, normal 14px/1.5 sans-serif);
+  font: var(--wst-paragraph-2-font);
   margin-bottom: 8px;
   display: block;
 }
@@ -13,7 +13,7 @@
   border: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent);
   border-radius: var(--wst-border-radius, 0);
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2, normal 16px/1.5 sans-serif);
+  font: var(--wst-paragraph-2-font);
   transition: border-color .1s, background-color .1s, color .1s;
   display: flex;
 }
@@ -47,7 +47,7 @@
 
 .input-V1lew7::placeholder {
   color: var(--wst-shade-3-color, #aaa);
-  font: var(--wst-paragraph-2, normal 16px/1.5 sans-serif);
+  font: var(--wst-paragraph-2-font);
 }
 
 .trigger-d9xFPE {
@@ -105,7 +105,7 @@
   padding-top: var(--wst-dropdown-option-vertical-padding, 8px);
   padding-bottom: var(--wst-dropdown-option-vertical-padding, 8px);
   color: var(--wst-shade-3-color, #aaa);
-  font: var(--wst-paragraph-2, normal 16px/1.5 sans-serif);
+  font: var(--wst-paragraph-2-font);
   padding-inline-start: var(--wst-dropdown-option-padding-inline-start, 12px);
   padding-inline-end: 12px;
   display: block;
@@ -117,7 +117,7 @@
   padding-top: var(--wst-dropdown-option-vertical-padding, 8px);
   padding-bottom: var(--wst-dropdown-option-vertical-padding, 8px);
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2, normal 16px/1.5 sans-serif);
+  font: var(--wst-paragraph-2-font);
   cursor: pointer;
   user-select: none;
   align-items: center;
@@ -161,7 +161,7 @@
 .chip-YCMHpQ {
   background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 8%, transparent);
   color: var(--wst-paragraph-2-color, #000);
-  font: var(--wst-paragraph-2, normal 14px/1.5 sans-serif);
+  font: var(--wst-paragraph-2-font);
   border-radius: 2px;
   align-items: center;
   gap: 4px;
@@ -194,7 +194,7 @@
   padding-top: var(--wst-dropdown-option-vertical-padding, 8px);
   padding-bottom: var(--wst-dropdown-option-vertical-padding, 8px);
   color: var(--wst-shade-3-color, #aaa);
-  font: var(--wst-paragraph-2, normal 16px/1.5 sans-serif);
+  font: var(--wst-paragraph-2-font);
   padding-inline-start: var(--wst-dropdown-option-padding-inline-start, 12px);
   padding-inline-end: 12px;
 }

package/dist/ContextMenu/index.css

@@ -24,6 +24,12 @@
   margin: 10px 13px;
 }
 
+.groupLabel-nJbnHC {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
+  padding: 4px 24px;
+}
+
 .item-u6sdTm {
   cursor: pointer;
   width: calc(100% + 2px);

package/dist/ContextMenu/index.js

@@ -4,6 +4,7 @@ import clsx from "clsx";
 import * as __rspack_external_react from "react";
 const ContextMenu_module = {
     popup: "popup-exWvLg",
+    groupLabel: "groupLabel-nJbnHC",
     item: "item-u6sdTm",
     checkboxItem: "checkboxItem-lQUwTw",
     linkItem: "linkItem-w7Buqf",

package/dist/Dialog/index.css

@@ -18,11 +18,13 @@
 .popup-RjSkgq {
   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);
-  padding: 80px 32px;
+  padding: 32px;
+  display: flex;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -32,8 +34,17 @@
 
 .close-zqdBdX {
   color: var(--wst-dialog-close-button-color, #000);
-  position: absolute;
-  top: 20px;
-  right: 20px;
+}
+
+.title-U8Hyut {
+  font: var(--wst-heading-6-font);
+  color: var(--wst-heading-6-color);
+  margin: 0 0 8px;
+}
+
+.description-ZV1a4j {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+  margin: 0 0 16px;
 }
 

package/dist/Dialog/index.js

@@ -6,7 +6,9 @@ const Dialog_module = {
     backdrop: "backdrop-EHLKAc",
     viewport: "viewport-nOzLZZ",
     popup: "popup-RjSkgq",
-    close: "close-zqdBdX"
+    close: "close-zqdBdX",
+    title: "title-U8Hyut",
+    description: "description-ZV1a4j"
 };
 const Backdrop = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Backdrop, {
         ref: ref,