@wix/site-ui 1.12.0 → 1.13.0

package/dist/Menu/index.css

@@ -1,2 +1,76 @@
+.popup-VQm6g1 {
+  background-color: var(--wst-primary-background-color, #fff);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--wst-paragraph-2-color, #fff6);
+  box-sizing: border-box;
+  max-width: 320px;
+  margin: 0;
+  padding: 12px 0;
+  list-style: none;
+  box-shadow: 0 0 4px #0000001a, 0 4px 8px #0000001a;
+}
 
+.popup-VQm6g1 * {
+  box-sizing: border-box;
+}
+
+.item-toMw6N {
+  cursor: pointer;
+  width: calc(100% + 2px);
+  color: var(--wst-paragraph-2-color, #000);
+  font: var(--wst-paragraph-2, inherit);
+  text-align: initial;
+  align-items: center;
+  padding: 8px 24px;
+  font-size: 16px;
+  line-height: 24px;
+  display: flex;
+  position: relative;
+  left: -1px;
+  right: -1px;
+}
+
+.item-toMw6N[data-highlighted] {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+}
+
+.item-toMw6N[data-disabled] {
+  opacity: .3;
+  cursor: default;
+}
+
+.item-toMw6N[data-disabled]:hover {
+  background-color: inherit;
+}
+
+.linkItem-UZphBs {
+  cursor: pointer;
+  width: calc(100% + 2px);
+  color: var(--wst-paragraph-2-color, #000);
+  font: var(--wst-paragraph-2, inherit);
+  text-align: initial;
+  align-items: center;
+  padding: 8px 24px;
+  font-size: 16px;
+  line-height: 24px;
+  text-decoration: none;
+  display: flex;
+  position: relative;
+  left: -1px;
+  right: -1px;
+}
+
+.linkItem-UZphBs[data-highlighted] {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+}
+
+.linkItem-UZphBs[data-disabled] {
+  opacity: .3;
+  cursor: default;
+}
+
+.linkItem-UZphBs[data-disabled]:hover {
+  background-color: inherit;
+}
 

package/dist/Menu/index.js

@@ -2,7 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Menu_module = {};
+const Menu_module = {
+    popup: "popup-VQm6g1",
+    item: "item-toMw6N",
+    linkItem: "linkItem-UZphBs"
+};
 const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Menu.Arrow, {
         ref: ref,
         className: clsx(Menu_module.arrow, className),

package/dist/Meter/index.css

@@ -1,2 +1,37 @@
+.root-bc9hfF {
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
 
+.track-BJK3T1 {
+  background: #fff3;
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 20%, transparent);
+  width: 100%;
+  height: 6px;
+  position: relative;
+}
+
+.indicator-YaPgI9 {
+  background-color: var(--wst-links-and-actions-color, #116dff);
+  height: 100%;
+  transition: width .5s ease-in-out;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.value-Uz_0kH {
+  color: var(--wst-paragraph-2-color, #000);
+  padding-inline-start: 8px;
+  font-size: 12px;
+  line-height: 1.4em;
+}
+
+.label-yJGBDG {
+  color: var(--wst-paragraph-2-color, #000);
+  padding-inline-end: 8px;
+  font-size: 12px;
+  line-height: 1.4em;
+}
 

package/dist/Meter/index.js

@@ -2,7 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react/meter";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Meter_module = {};
+const Meter_module = {
+    root: "root-bc9hfF",
+    track: "track-BJK3T1",
+    indicator: "indicator-YaPgI9",
+    value: "value-Uz_0kH",
+    label: "label-yJGBDG"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Meter.Root, {
         ref: ref,
         className: clsx(Meter_module.root, className),

package/dist/NumberField/index.css

@@ -1,2 +1,109 @@
+.root-XA6trs {
+  flex-direction: column;
+  display: inline-flex;
+}
 
+.group-lqMZOf {
+  box-sizing: border-box;
+  border: 1px solid var(--wst-paragraph-2-color, #0009);
+  background-color: var(--wst-primary-background-color, #fff);
+  border-radius: 0;
+  align-items: center;
+  font-size: 16px;
+  line-height: 24px;
+  transition: border-color .1s ease-in;
+  display: flex;
+}
+
+.group-lqMZOf:hover, .group-lqMZOf:focus-within {
+  border-color: var(--wst-paragraph-2-color, #000);
+}
+
+.root-XA6trs[data-disabled] .group-lqMZOf {
+  background-color: var(--wst-primary-background-color, #fff);
+  border-color: #0009;
+}
+
+.root-XA6trs[data-invalid] .group-lqMZOf, .root-XA6trs[data-invalid] .group-lqMZOf:hover, .root-XA6trs[data-invalid] .group-lqMZOf:focus-within {
+  border-color: var(--wst-system-error-color, #df3131);
+}
+
+.input-BRhN7p {
+  box-sizing: border-box;
+  vertical-align: middle;
+  width: 100%;
+  min-width: 0;
+  color: var(--wst-paragraph-2-color, #000);
+  background-color: #0000;
+  border: 0;
+  outline: 0;
+  margin: 0;
+  padding-block: 8px;
+  padding-inline: 12px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.group-lqMZOf:hover .input-BRhN7p, .group-lqMZOf:focus-within .input-BRhN7p {
+  color: var(--wst-paragraph-2-color, #000);
+}
+
+.root-XA6trs[data-disabled] .input-BRhN7p {
+  color: var(--wst-system-disabled-color, #ccc);
+  cursor: not-allowed;
+}
+
+.input-BRhN7p:focus {
+  outline: 0;
+}
+
+.input-BRhN7p::selection {
+  background: var(--wst-paragraph-2-color, #0003);
+  opacity: .2;
+}
+
+.input-BRhN7p::placeholder {
+  color: var(--wst-shade-3-color, #0006);
+}
+
+.root-XA6trs[data-disabled] .input-BRhN7p::placeholder {
+  color: var(--wst-system-disabled-color, #ccc);
+}
+
+.input-BRhN7p:-webkit-autofill {
+  -webkit-text-fill-color: var(--wst-paragraph-2-color, #000);
+  -webkit-box-shadow: 0 0 0 1.5em var(--wst-primary-background-color, #fff) inset !important;
+}
+
+.input-BRhN7p[type="number"]::-webkit-inner-spin-button, .input-BRhN7p[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+.input-BRhN7p[type="number"] {
+  appearance: textfield;
+}
+
+.increment-qnw0yh, .decrement-zkpqlA {
+  all: unset;
+  cursor: pointer;
+  height: 16px;
+  color: var(--wst-paragraph-2-color, #000);
+  justify-content: center;
+  align-items: center;
+  line-height: 16px;
+  display: flex;
+}
+
+.increment-qnw0yh:hover, .decrement-zkpqlA:hover {
+  opacity: .7;
+}
+
+.root-XA6trs[data-disabled] .increment-qnw0yh, .root-XA6trs[data-disabled] .decrement-zkpqlA {
+  color: var(--wst-system-disabled-color, #ccc);
+  cursor: not-allowed;
+}
+
+.scrubArea-XsXHM_ {
+  cursor: ew-resize;
+}
 

package/dist/NumberField/index.js

@@ -2,7 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import { NumberField } from "@base-ui/react/number-field";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const NumberField_module = {};
+const NumberField_module = {
+    root: "root-XA6trs",
+    group: "group-lqMZOf",
+    input: "input-BRhN7p",
+    increment: "increment-qnw0yh",
+    decrement: "decrement-zkpqlA",
+    scrubArea: "scrubArea-XsXHM_"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(NumberField.Root, {
         ref: ref,
         className: clsx(NumberField_module.root, className),

package/dist/Popover/index.css

@@ -1,2 +1,78 @@
+.popup-Wrjs4v {
+  padding: var(--wst-popover-padding, 20px);
+  background-color: var(--wst-primary-background-color, #fff);
+  border: 0;
+  border-color: var(--wst-primary-background-color, #fff6);
+  border-radius: var(--wst-popover-border-radius, 0px);
+  border-style: solid;
+  border-width: 1px;
+  min-width: 40px;
+  max-width: 320px;
+  min-height: 20px;
+  box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
+}
 
+.arrow-FmdRXW {
+  border-color: #0000;
+}
+
+.arrow-FmdRXW:after, .arrow-FmdRXW:before {
+  content: "";
+  background: none;
+  position: absolute;
+  inset: 0;
+  transform: rotate(45deg);
+}
+
+.arrow-FmdRXW:before {
+  z-index: -1;
+}
+
+.positioner-t0X5uo[data-side="right"] .arrow-FmdRXW {
+  border-right-color: var(--wst-primary-background-color, #fff);
+}
+
+.positioner-t0X5uo[data-side="left"] .arrow-FmdRXW {
+  border-left-color: var(--wst-primary-background-color, #fff);
+}
+
+.positioner-t0X5uo[data-side="bottom"] .arrow-FmdRXW {
+  border-bottom-color: var(--wst-primary-background-color, #fff);
+}
+
+.positioner-t0X5uo[data-side="top"] .arrow-FmdRXW {
+  border-top-color: var(--wst-primary-background-color, #fff);
+}
+
+.positioner-t0X5uo[data-side="right"] .arrow-FmdRXW:before {
+  box-shadow: 5px -5px 0 6px var(--wst-primary-background-color, #fff6);
+}
+
+.positioner-t0X5uo[data-side="right"] .arrow-FmdRXW:after {
+  box-shadow: 5px -5px 0 5px var(--wst-primary-background-color, #fff);
+}
+
+.positioner-t0X5uo[data-side="left"] .arrow-FmdRXW:before {
+  box-shadow: -5px 5px 0 6px var(--wst-primary-background-color, #fff6);
+}
+
+.positioner-t0X5uo[data-side="left"] .arrow-FmdRXW:after {
+  box-shadow: -5px 5px 0 5px var(--wst-primary-background-color, #fff);
+}
+
+.positioner-t0X5uo[data-side="top"] .arrow-FmdRXW:before {
+  box-shadow: -5px -5px 0 6px var(--wst-primary-background-color, #fff6);
+}
+
+.positioner-t0X5uo[data-side="top"] .arrow-FmdRXW:after {
+  box-shadow: -5px -5px 0 5px var(--wst-primary-background-color, #fff);
+}
+
+.positioner-t0X5uo[data-side="bottom"] .arrow-FmdRXW:before {
+  box-shadow: 5px 5px 0 6px var(--wst-primary-background-color, #fff6);
+}
+
+.positioner-t0X5uo[data-side="bottom"] .arrow-FmdRXW:after {
+  box-shadow: 5px 5px 0 5px var(--wst-primary-background-color, #fff);
+}
 

package/dist/Popover/index.js

@@ -2,7 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Popover_module = {};
+const Popover_module = {
+    popup: "popup-Wrjs4v",
+    arrow: "arrow-FmdRXW",
+    positioner: "positioner-t0X5uo"
+};
 const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Positioner, {
         ref: ref,
         className: clsx(Popover_module.positioner, className),

package/dist/PreviewCard/index.css

@@ -1,2 +1,75 @@
+.popup-s3Cjfv {
+  background-color: var(--wst-preview-card-background-color, #212121);
+  color: var(--wst-preview-card-text-color, #fff);
+  padding: var(--wst-preview-card-padding, 4px 12px);
+  border: 1px solid var(--wst-preview-card-border-color, #757575);
+  border-radius: var(--wst-preview-card-border-radius, 3px);
+  -webkit-font-smoothing: auto;
+  font-size: 14px;
+  line-height: 20px;
+  box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
+}
 
+.arrow-FRR3yT {
+  margin: 0;
+  display: block;
+  position: absolute;
+}
+
+.arrow-FRR3yT svg {
+  display: block;
+}
+
+.positioner-Gzwwg3[data-side="top"] .popup-s3Cjfv {
+  padding-bottom: 6px;
+}
+
+.positioner-Gzwwg3[data-side="bottom"] .popup-s3Cjfv {
+  padding-top: 6px;
+}
+
+.positioner-Gzwwg3[data-side="left"] .popup-s3Cjfv {
+  padding-right: 6px;
+}
+
+.positioner-Gzwwg3[data-side="right"] .popup-s3Cjfv {
+  padding-left: 6px;
+}
+
+.positioner-Gzwwg3[data-side="top"] .arrow-FRR3yT {
+  width: 12px;
+  height: 7px;
+  bottom: -1px;
+}
+
+.positioner-Gzwwg3[data-side="bottom"] .arrow-FRR3yT {
+  width: 12px;
+  height: 7px;
+  top: -1px;
+}
+
+.positioner-Gzwwg3[data-side="left"] .arrow-FRR3yT {
+  width: 7px;
+  height: 12px;
+  right: -1px;
+}
+
+.positioner-Gzwwg3[data-side="right"] .arrow-FRR3yT {
+  width: 7px;
+  height: 12px;
+  left: -1px;
+}
+
+.arrow-FRR3yT path {
+  fill: var(--wst-preview-card-background-color, #212121);
+  stroke: var(--wst-preview-card-border-color, #757575);
+}
+
+.arrow-FRR3yT path:first-child {
+  stroke: none;
+}
+
+.arrow-FRR3yT path:last-child {
+  stroke-dasharray: 0 17 17;
+}
 

package/dist/PreviewCard/index.js

@@ -2,7 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const PreviewCard_module = {};
+const PreviewCard_module = {
+    popup: "popup-s3Cjfv",
+    arrow: "arrow-FRR3yT",
+    positioner: "positioner-Gzwwg3"
+};
 const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCard.Positioner, {
         ref: ref,
         className: clsx(PreviewCard_module.positioner, className),

package/dist/Progress/index.css

@@ -1,2 +1,26 @@
+.root-VDHmKD {
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
 
+.track-_XqaKn {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #333) 20%, transparent);
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.indicator-lfO9jO {
+  background: var(--wst-links-and-actions-color, #116dff);
+  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;
+}
 

package/dist/Progress/index.js

@@ -2,7 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { Progress } from "@base-ui/react/progress";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Progress_module = {};
+const Progress_module = {
+    root: "root-VDHmKD",
+    track: "track-_XqaKn",
+    indicator: "indicator-lfO9jO",
+    value: "value-SBk4OI",
+    label: "label-HqgXxt"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Progress.Root, {
         ref: ref,
         className: clsx(Progress_module.root, className),

package/dist/Radio/index.css

@@ -1,2 +1,49 @@
+.root-Lal8hj {
+  background-color: var(--wst-primary-background-color, transparent);
+  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;
+}
 
+.root-Lal8hj:hover, .root-Lal8hj:focus-visible {
+  border-color: var(--wst-paragraph-2-color, #000);
+  background-color: var(--wst-primary-background-color, transparent);
+  transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
+}
+
+.root-Lal8hj[data-checked] {
+  border-color: var(--wst-links-and-actions-color, #000);
+}
+
+.root-Lal8hj[data-disabled] {
+  cursor: default;
+  pointer-events: none;
+  border-color: var(--wst-system-disabled-color, #ccc);
+}
+
+.indicator-YyFvol {
+  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);
+}
+
+.indicator-YyFvol[data-checked] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.indicator-YyFvol[data-disabled] {
+  background-color: var(--wst-system-disabled-color, #ccc);
+}
 

package/dist/Radio/index.js

@@ -2,7 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Radio_module = {};
+const Radio_module = {
+    root: "root-Lal8hj",
+    indicator: "indicator-YyFvol"
+};
 const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Radio.Indicator, {
         ref: ref,
         className: clsx(Radio_module.indicator, className),

package/dist/RadioGroup/index.css

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

package/dist/RadioGroup/index.js

@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { RadioGroup } from "@base-ui/react/radio-group";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const RadioGroup_module = {};
+const RadioGroup_module = {
+    root: "root-kKvIZ_"
+};
 const RadioGroup_RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(RadioGroup, {
         ref: ref,
         className: clsx(RadioGroup_module.root, className),