@wix/site-ui 1.12.0 → 1.14.0

package/dist/Drawer/index.css

@@ -1,2 +1,48 @@
+.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);
+  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"] {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.popup-FjIEpg[data-swipe-direction="down"] {
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.popup-FjIEpg[data-swipe-direction="left"] {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.popup-FjIEpg[data-swipe-direction="right"] {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
 

package/dist/Drawer/index.js

@@ -2,7 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react/drawer";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Drawer_module = {};
+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, {
         ref: ref,
         className: clsx(Drawer_module.backdrop, className),

package/dist/Field/index.css

@@ -1,2 +1,36 @@
+.root-ECdHfF {
+  flex-direction: column;
+  display: flex;
+}
 
+.label-YSWZBs {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
+  margin-bottom: 8px;
+  display: inline-block;
+}
+
+.root-ECdHfF:has([disabled]) .label-YSWZBs, .root-ECdHfF[data-disabled] .label-YSWZBs {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.error-BUDKWp {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-system-error-color);
+  margin-top: 8px;
+  display: block;
+}
+
+.description-IVviYU {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
+  margin-top: 8px;
+  display: block;
+}
+
+.item-kQeHOQ {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
 

package/dist/Field/index.js

@@ -2,7 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Field_module = {};
+const Field_module = {
+    root: "root-ECdHfF",
+    label: "label-YSWZBs",
+    error: "error-BUDKWp",
+    description: "description-IVviYU",
+    item: "item-kQeHOQ"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Field.Root, {
         ref: ref,
         className: clsx(Field_module.root, className),

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

@@ -1,2 +1,72 @@
+.root-Y7wYn3 {
+  box-sizing: border-box;
+  border: 1px solid var(--wst-paragraph-2-color, #0009);
+  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;
+  outline: 0;
+  margin: 0;
+  padding-block: 8px;
+  padding-inline: 12px;
+  transition: border-color .1s ease-in;
+}
 
+.root-Y7wYn3:hover {
+  border-color: var(--wst-paragraph-2-color, #000);
+}
+
+.root-Y7wYn3:focus {
+  border-color: var(--wst-paragraph-2-color, #000);
+  outline: 0;
+}
+
+.root-Y7wYn3:focus-visible {
+  border-color: var(--wst-links-and-actions-color, #116dff);
+  outline: none;
+}
+
+.root-Y7wYn3:disabled {
+  color: var(--wst-system-disabled-color, #ccc);
+  background-color: var(--wst-primary-background-color, #fff);
+  cursor: not-allowed;
+  border-color: #0009;
+}
+
+.root-Y7wYn3[aria-invalid="true"], .root-Y7wYn3[aria-invalid="true"]:hover, .root-Y7wYn3[aria-invalid="true"]:focus {
+  border-color: var(--wst-system-error-color, #df3131);
+}
+
+.root-Y7wYn3[data-valid] {
+  border-color: var(--wst-system-success-color, #60d1a8);
+}
+
+.root-Y7wYn3::selection {
+  background: var(--wst-paragraph-2-color, #0003);
+  opacity: .2;
+}
+
+.root-Y7wYn3::placeholder {
+  color: var(--wst-shade-3-color, #0006);
+}
+
+.root-Y7wYn3:disabled::placeholder {
+  color: var(--wst-system-disabled-color, #ccc);
+}
+
+.root-Y7wYn3:-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;
+}
+
+.root-Y7wYn3[type="number"]::-webkit-inner-spin-button, .root-Y7wYn3[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+
+.root-Y7wYn3[type="number"] {
+  appearance: textfield;
+}
 

package/dist/Input/index.js

@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { Input } from "@base-ui/react/input";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Input_module = {};
+const Input_module = {
+    root: "root-Y7wYn3"
+};
 const Input_Input = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Input, {
         ref: ref,
         className: clsx(Input_module.root, className),

package/dist/Menu/index.css

@@ -1,2 +1,85 @@
+.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;
+  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-font);
+  text-align: initial;
+  align-items: center;
+  padding: 8px 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-font);
+  text-align: initial;
+  align-items: center;
+  padding: 8px 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,13 @@ 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 = {
+    trigger: "trigger-OltV1Y",
+    groupLabel: "groupLabel-_L41zu",
+    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,40 @@
+.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);
+  flex: 1;
+  min-width: 0;
+  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);
+  flex-shrink: 0;
+  padding-inline-start: 8px;
+  font-size: 12px;
+  line-height: 1.4em;
+}
+
+.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/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/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

@@ -1,2 +1,116 @@
+.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;
+  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;
+  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;
+}
+
+.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,90 @@
+.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);
+}
+
+.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

@@ -2,7 +2,13 @@ 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",
+    title: "title-kQ490g",
+    description: "description-IgC4Ak"
+};
 const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Popover.Positioner, {
         ref: ref,
         className: clsx(Popover_module.positioner, className),