@wix/site-ui 1.12.0 → 1.14.0

package/dist/Accordion/index.css

@@ -1,2 +1,42 @@
+.root-jseiNO {
+  background-color: var(--wst-primary-background-color, #fff);
+}
 
+.item-xwNKIu {
+  border-bottom-color: var(--wst-paragraph-2-color, #000);
+  opacity: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+
+.header-YZESJq {
+  flex-grow: 1;
+  align-items: flex-start;
+  display: flex;
+}
+
+.trigger-cbcjp2 {
+  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 {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.panel-Gp0XFK {
+  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

@@ -2,7 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Accordion_module = {};
+const Accordion_module = {
+    root: "root-jseiNO",
+    item: "item-xwNKIu",
+    header: "header-YZESJq",
+    trigger: "trigger-cbcjp2",
+    panel: "panel-Gp0XFK"
+};
 const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Accordion.Item, {
         ref: ref,
         className: clsx(Accordion_module.item, className),
@@ -29,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

@@ -1,2 +1,50 @@
+.backdrop-uiBfeV {
+  position: fixed;
+  inset: 0;
+}
 
+.viewport-rOzJs7 {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+}
+
+.viewport-rOzJs7 :focus-visible {
+  outline: 2px solid highlight;
+  outline: 2px solid -webkit-focus-ring-color;
+  outline-offset: 2px;
+}
+
+.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: 32px;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  overflow: auto;
+  transform: translate(-50%, -50%);
+}
+
+.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;
+}
+
+.description-imwSAm {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+  margin: 0 0 16px;
+}
 

package/dist/AlertDialog/index.js

@@ -2,7 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const AlertDialog_module = {};
+const AlertDialog_module = {
+    backdrop: "backdrop-uiBfeV",
+    viewport: "viewport-rOzJs7",
+    popup: "popup-L9x90S",
+    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,
         className: clsx(AlertDialog_module.backdrop, className),

package/dist/Autocomplete/index.css

@@ -1,2 +1,116 @@
+.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;
+}
 
+.inputGroup-II6FAN:hover {
+  border-color: var(--wst-paragraph-2-color, #000);
+}
+
+.inputGroup-II6FAN[data-disabled] {
+  border-color: color-mix(in srgb, var(--wst-system-disabled-color, #000) 30%, transparent);
+}
+
+.input-k82Te5 {
+  height: unset;
+  box-sizing: border-box;
+  width: 100%;
+  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;
+}
+
+.input-k82Te5::placeholder {
+  color: var(--wst-shade-3-color, #0006);
+  font: var(--wst-paragraph-2, inherit);
+  font-size: 16px;
+}
+
+.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);
+}
+
+.input-k82Te5:focus {
+  color: var(--wst-paragraph-2-color, #000);
+  background-color: var(--wst-primary-background-color, #fff);
+  outline: 0;
+}
+
+.icon-xxqTKh {
+  fill: var(--wst-paragraph-2-color, #000);
+  display: flex;
+  position: absolute;
+  right: 14px;
+}
+
+.inputGroup-II6FAN[data-disabled] .icon-xxqTKh {
+  fill: var(--wst-system-disabled-color, #0000004d);
+}
+
+.list-D5iucO {
+  border-radius: var(--wst-autocomplete-border-radius, 0px);
+  max-height: 284px;
+  overflow-y: auto;
+}
+
+.list-D5iucO::-webkit-scrollbar {
+  background-color: unset;
+  width: 24px;
+}
+
+.list-D5iucO::-webkit-scrollbar-button {
+  height: 6px;
+}
+
+.list-D5iucO::-webkit-scrollbar-thumb {
+  background-color: #0003;
+  background-clip: padding-box;
+  border: 10px solid #0000;
+  border-radius: 12px;
+  height: 61px;
+}
+
+.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;
+}
+
+.item-MXqW1H {
+  box-sizing: border-box;
+  color: var(--wst-paragraph-2-color, #000);
+  font: var(--wst-paragraph-2, inherit);
+  padding: 10px 14px;
+  font-size: 16px;
+}
+
+.item-MXqW1H[data-highlighted] {
+  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

@@ -2,7 +2,15 @@ import { jsx } from "react/jsx-runtime";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Autocomplete_module = {};
+const Autocomplete_module = {
+    inputGroup: "inputGroup-II6FAN",
+    input: "input-k82Te5",
+    icon: "icon-xxqTKh",
+    list: "list-D5iucO",
+    popup: "popup-w30icg",
+    item: "item-MXqW1H",
+    empty: "empty-P2WjlU"
+};
 const InputGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Autocomplete.InputGroup, {
         ref: ref,
         className: clsx(Autocomplete_module.inputGroup, className),

package/dist/Avatar/index.css

@@ -1,2 +1,36 @@
+.root-uFk_6F {
+  width: var(--avatar-size, 36px);
+  height: var(--avatar-size, 36px);
+  font-size: calc(var(--avatar-size, 36px) / 3);
+  letter-spacing: 0;
+  text-align: center;
+  user-select: none;
+  background-color: var(--wst-secondary-background-color, #e6e6e6);
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
 
+.image-i3BrFP {
+  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/Avatar/index.d.ts

@@ -6,6 +6,8 @@ import * as React_2 from 'react';
 export declare const Avatar: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AvatarRootProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        size?: string | number | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
     Image: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AvatarImageProps, "ref"> & React_2.RefAttributes<HTMLImageElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -15,6 +17,15 @@ export declare const Avatar: {
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare const AvatarSize: {
+    readonly xxSmall: 16;
+    readonly xSmall: 20;
+    readonly small: 28;
+    readonly medium: 36;
+    readonly large: 52;
+    readonly xLarge: 60;
+};
+
 
 export * from "@base-ui/react/avatar";
 

package/dist/Avatar/index.js

@@ -2,10 +2,18 @@ import { jsx } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Avatar_module = {};
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Avatar.Root, {
+const Avatar_module = {
+    root: "root-uFk_6F",
+    image: "image-i3BrFP",
+    fallback: "fallback-r0pagw"
+};
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size, style, ...props }, ref)=>/*#__PURE__*/ jsx(Avatar.Root, {
         ref: ref,
         className: clsx(Avatar_module.root, className),
+        style: {
+            '--avatar-size': 'number' == typeof size ? `${size}px` : size,
+            ...style
+        },
         ...props
     }));
 const Image = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Avatar.Image, {
@@ -18,9 +26,17 @@ const Fallback = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className,
         className: clsx(Avatar_module.fallback, className),
         ...props
     }));
+const AvatarSize = {
+    xxSmall: 16,
+    xSmall: 20,
+    small: 28,
+    medium: 36,
+    large: 52,
+    xLarge: 60
+};
 const Avatar_Avatar = {
     Root: Root,
     Image: Image,
     Fallback: Fallback
 };
-export { Avatar_Avatar as Avatar };
+export { AvatarSize, Avatar_Avatar as Avatar };

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 };