@wix/site-ui 1.12.0 → 1.13.0

package/dist/Accordion/index.css

@@ -1,2 +1,45 @@
+.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-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);
+  color: var(--wst-paragraph-2-color, #000);
+  text-align: start;
+  cursor: pointer;
+  background: none;
+  border: none;
+  width: 100%;
+  padding: 0;
+}
+
+.trigger-cbcjp2:disabled {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.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);
+  color: var(--wst-paragraph-2-color, #000);
+}
 

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),

package/dist/AlertDialog/index.css

@@ -1,2 +1,39 @@
+.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);
+  min-width: 280px;
+  max-width: 980px;
+  min-height: 240px;
+  max-height: min(100vh, 620px);
+  padding: 80px 32px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  overflow: auto;
+  transform: translate(-50%, -50%);
+}
+
+.close-ws9ziC {
+  color: var(--wst-dialog-close-button-color, #000);
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
 

package/dist/AlertDialog/index.js

@@ -2,7 +2,12 @@ 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"
+};
 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,109 @@
+.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);
+  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);
+}
 

package/dist/Autocomplete/index.js

@@ -2,7 +2,14 @@ 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"
+};
 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,34 @@
+.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;
+  background-color: #d8d8d8;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
 
+.image-i3BrFP {
+  width: 100%;
+  height: 100%;
+  font-size: initial;
+  border-radius: 50%;
+}
+
+.fallback-r0pagw {
+  color: #979797;
+  font-family: var(--wst-font-family, sans-serif);
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-weight: 500;
+  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/Checkbox/index.css

@@ -1,2 +1,74 @@
+.root-OrOWpu {
+  box-sizing: border-box;
+  width: var(--wst-checkbox-input-size, 14px);
+  height: var(--wst-checkbox-input-size, 14px);
+  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;
+  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);
+}
+
+.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-disabled] {
+  cursor: default;
+  pointer-events: none;
+  border-color: var(--wst-system-disabled-color, #ccc);
+  background-color: var(--wst-primary-background-color, transparent);
+}
+
+.root-OrOWpu[data-invalid]:not([data-checked]) {
+  border-color: var(--wst-system-error-color, #df3131) !important;
+}
+
+.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;
+}
+
+.indicator-g_8JYy {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  transition: opacity .2s linear;
+  display: inline-flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.indicator-g_8JYy path {
+  fill: var(--wst-links-and-actions-color, #000);
+  transition: fill .2s linear;
+}
+
+.root-OrOWpu:hover .indicator-g_8JYy path, .root-OrOWpu:focus-within .indicator-g_8JYy path {
+  fill: var(--wst-links-and-actions-color, #000);
+}
+
+.root-OrOWpu[data-disabled] .indicator-g_8JYy path {
+  fill: var(--wst-system-disabled-color, #ccc);
+}
+
+.root-OrOWpu[data-invalid][data-checked] .indicator-g_8JYy path {
+  fill: var(--wst-system-error-color, #df3131);
+}
 

package/dist/Checkbox/index.js

@@ -2,7 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Checkbox_module = {};
+const Checkbox_module = {
+    root: "root-OrOWpu",
+    indicator: "indicator-g_8JYy"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Checkbox.Root, {
         ref: ref,
         className: clsx(Checkbox_module.root, className),

package/dist/CheckboxGroup/index.css

@@ -1,2 +1,9 @@
-
+.root-ZCRH6j {
+  font: var(--wst-paragraph-2);
+  color: var(--wst-paragraph-2-color);
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}
 

package/dist/CheckboxGroup/index.js

@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const CheckboxGroup_module = {};
+const CheckboxGroup_module = {
+    root: "root-ZCRH6j"
+};
 const CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxGroup, {
         ref: ref,
         className: clsx(CheckboxGroup_module.root, className),

package/dist/Collapsible/index.css

@@ -1,2 +1,47 @@
+.root-D02Wtj {
+  background-color: var(--wst-primary-background-color, #fff);
+}
 
+.trigger-jzj48r {
+  text-align: start;
+  color: var(--wst-paragraph-2-color, #000);
+  font: inherit;
+  cursor: pointer;
+  width: 100%;
+  padding: 0;
+  padding-inline-start: var(--wst-collapsible-trigger-padding-inline-start, 0px);
+  padding-inline-end: var(--wst-collapsible-trigger-padding-inline-end, 0px);
+  padding-top: var(--wst-collapsible-trigger-padding-top, 12px);
+  padding-bottom: var(--wst-collapsible-trigger-padding-bottom, 12px);
+  background: none;
+  border: none;
+  align-items: flex-start;
+  font-size: 16px;
+  display: flex;
+}
+
+.trigger-jzj48r:disabled {
+  color: var(--wst-disabled-color, #c1c1c1);
+  cursor: not-allowed;
+}
+
+.panel-TIli5f {
+  padding-inline-start: var(--wst-collapsible-content-padding-inline-start, 0px);
+  padding-inline-end: var(--wst-collapsible-content-padding-inline-end, 0px);
+  padding-top: var(--wst-collapsible-content-padding-top, 0px);
+  padding-bottom: var(--wst-collapsible-content-padding-bottom, 12px);
+  color: var(--wst-paragraph-2-color, #000);
+  font-size: 16px;
+}
+
+.root-D02Wtj:after {
+  content: "";
+  border-bottom-style: solid;
+  border-bottom-color: var(--wst-paragraph-2-color, #000);
+  border-bottom-width: var(--wst-collapsible-divider-width, 1px);
+  width: 100%;
+  opacity: var(--wst-collapsible-divider-opacity, .3);
+  border-radius: var(--wst-collapsible-divider-radius, 0px);
+  display: block;
+}
 

package/dist/Collapsible/index.js

@@ -2,7 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Collapsible_module = {};
+const Collapsible_module = {
+    root: "root-D02Wtj",
+    trigger: "trigger-jzj48r",
+    panel: "panel-TIli5f"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Collapsible.Root, {
         ref: ref,
         className: clsx(Collapsible_module.root, className),