@wix/site-ui 1.83.0 → 1.84.0

package/dist/Select/index.css

@@ -1,62 +1,143 @@
+.root-Pyk3SP {
+  display: contents;
+}
+
 .label-UrIm_f {
-  font: var(--wst-paragraph-2-font);
+  font: var(--wst-paragraph-3-font);
   color: var(--wst-paragraph-2-color, #000);
   padding-bottom: 8px;
   display: block;
 }
 
+.requiredMarker-ZRoZQT {
+  color: var(--wst-system-error-color, #df3131);
+  margin-inline-start: 2px;
+}
+
 .trigger-UPubf5 {
   appearance: none;
   font: inherit;
   box-sizing: border-box;
   padding: 0;
-  width: 100%;
+  width: auto;
+  max-width: 100%;
   font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color, #000);
+  cursor: pointer;
   background: none;
-  background-color: var(--wst-primary-background-color, #fff);
   border: none;
-  border: var(--wst-system-line-1-width, 1px) solid
-    color-mix(in srgb, var(--wst-system-line-1-color, #000) 60%, transparent);
-  cursor: pointer;
-  border-radius: 0;
-  justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   margin: 0;
-  padding-block: 10px;
-  padding-inline: 14px;
-  transition: border-color .1s ease-in;
+  padding-block: 8px;
+  padding-inline: 0;
+  line-height: 1.5em;
+  transition: opacity .1s ease-in;
   display: inline-flex;
 }
 
-.trigger-UPubf5:not([disabled]):not([data-popup-open]):hover, .trigger-UPubf5:not([disabled]):not([data-popup-open]):focus-visible {
-  border-color: var(--wst-paragraph-2-color, #000);
+.trigger-UPubf5[data-variant="box"], .trigger-UPubf5[data-variant="line"] {
+  justify-content: space-between;
+  width: 220px;
+  min-width: 220px;
+  padding-inline: 12px;
+}
+
+.trigger-UPubf5[data-variant="box"] {
+  border-width: var(--wst-system-line-1-width, 1px);
+  border-style: solid;
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+  background-color: var(--wst-primary-background-color, #fff);
+}
+
+.trigger-UPubf5[data-variant="line"] {
+  border-bottom-width: var(--wst-system-line-1-width, 1px);
+  border-bottom-style: solid;
+  border-bottom-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+  background-color: #0000;
+}
+
+.trigger-UPubf5[data-alignment="center"], .trigger-UPubf5[data-alignment="center"] .value-fKND1Z {
+  text-align: center;
+}
+
+.trigger-UPubf5[data-variant="box"]:not([data-alignment="center"]) .value-fKND1Z, .trigger-UPubf5[data-variant="line"]:not([data-alignment="center"]) .value-fKND1Z {
+  flex-grow: 0;
+}
+
+.trigger-UPubf5:not([disabled]):hover, .trigger-UPubf5:not([disabled]):focus-visible {
+  opacity: .7;
   outline: none;
 }
 
+.trigger-UPubf5[data-variant="box"]:not([disabled]):hover, .trigger-UPubf5[data-variant="box"]:not([disabled]):focus-visible {
+  border-color: var(--wst-system-line-1-color, #000);
+}
+
+.trigger-UPubf5[data-variant="line"]:not([disabled]):hover, .trigger-UPubf5[data-variant="line"]:not([disabled]):focus-visible {
+  border-bottom-color: var(--wst-system-line-1-color, #000);
+}
+
 .trigger-UPubf5[data-popup-open] {
-  border-color: var(--wst-links-and-actions-color, #116dff);
   outline: none;
 }
 
+.trigger-UPubf5[data-invalid][data-variant="box"] {
+  border-color: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 60%,
+    transparent);
+}
+
+.trigger-UPubf5[data-invalid][data-variant="box"]:not([disabled]):hover, .trigger-UPubf5[data-invalid][data-variant="box"]:not([disabled]):focus-visible {
+  border-color: var(--wst-system-error-color, #df3131);
+}
+
+.trigger-UPubf5[data-invalid][data-variant="line"] {
+  border-bottom-color: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 60%,
+    transparent);
+}
+
+.trigger-UPubf5[data-invalid][data-variant="line"]:not([disabled]):hover, .trigger-UPubf5[data-invalid][data-variant="line"]:not([disabled]):focus-visible {
+  border-bottom-color: var(--wst-system-error-color, #df3131);
+}
+
 .trigger-UPubf5[disabled] {
-  opacity: .3;
+  color: var(--wst-system-disabled-color, #939393);
   cursor: default;
+  opacity: 1;
   pointer-events: none;
 }
 
+.trigger-UPubf5[data-readonly], .trigger-UPubf5[data-loading] {
+  cursor: default;
+}
+
+.trigger-UPubf5[data-loading] .icon-_ToIv8 {
+  transform: none;
+}
+
+.trigger-UPubf5 > span {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 .value-fKND1Z[data-placeholder] {
   color: var(--wst-shade-3-color, #939393);
 }
 
 .icon-_ToIv8 {
-  width: 24px;
-  height: 24px;
-  color: var(--wst-paragraph-2-color, #000);
+  color: currentColor;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
+  width: 24px;
+  height: 24px;
+  margin-inline: 4px;
   transition: transform .2s;
   display: flex;
 }
@@ -65,18 +146,10 @@
   transform: rotate(180deg);
 }
 
-.trigger-UPubf5:not([disabled]):hover .icon-_ToIv8, .trigger-UPubf5:not([disabled]):focus-visible .icon-_ToIv8 {
-  color: var(--wst-paragraph-2-color, #000);
-}
-
-.trigger-UPubf5[disabled] .icon-_ToIv8 {
-  color: var(--wst-system-disabled-color, #939393);
-}
-
 .value-fKND1Z {
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1;
+  flex: auto;
   min-width: 0;
   overflow: hidden;
 }
@@ -94,12 +167,61 @@
 
 .popup-BEvbSY {
   background-color: var(--wst-primary-background-color, #fff);
-  min-width: var(--anchor-width);
+  min-width: max(var(--anchor-width), 220px);
   box-sizing: border-box;
-  border-radius: 6px;
-  padding-block: 4px;
+  border: 0;
+  max-width: 320px;
   overflow: hidden;
-  box-shadow: 0 4px 16px #0000001f, 0 0 0 1px #00000014;
+  box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
+}
+
+.popup-BEvbSY[data-variant="box"], .popup-BEvbSY[data-variant="line"] {
+  min-width: max(var(--anchor-width), 220px);
+}
+
+.popup-BEvbSY[data-outer-border] {
+  border-width: var(--wst-system-line-1-width, 1px);
+  border-style: solid;
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+}
+
+.popupDynamicWidth-XmkrCB {
+  width: max-content;
+}
+
+.narrowTrigger-sSpJ7t {
+  justify-content: space-between;
+  width: 200px;
+}
+
+.narrowTrigger-sSpJ7t .value-fKND1Z {
+  flex-shrink: 1;
+  flex-basis: 0;
+}
+
+.blockTrigger-FJvDrq {
+  justify-content: space-between;
+  width: 320px;
+}
+
+.exampleStack-urnxUp {
+  flex-direction: column;
+  gap: 10px;
+  display: flex;
+}
+
+.counter-vIhcIf {
+  min-width: 20px;
+  height: 20px;
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-2-color, #000);
+  background-color: color-mix(in srgb,
+    var(--wst-base-2-color, #000) 8%,
+    transparent);
+  border-radius: 10px;
+  padding-inline: 6px;
 }
 
 .list-fTpwcL {
@@ -113,6 +235,7 @@
 }
 
 .item-SBIvtk {
+  min-height: 35px;
   font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color, #000);
   cursor: pointer;
@@ -120,11 +243,22 @@
   box-sizing: border-box;
   align-items: center;
   gap: 8px;
-  padding-block: 10px;
-  padding-inline: 14px;
+  padding-block: 6px;
+  padding-inline: 24px 20px;
+  line-height: 1.5em;
   display: flex;
 }
 
+.item-SBIvtk:focus, .item-SBIvtk:focus-visible {
+  outline: none;
+  box-shadow: none !important;
+}
+
+body .item-SBIvtk.item-SBIvtk.item-SBIvtk.item-SBIvtk:focus, body .item-SBIvtk.item-SBIvtk.item-SBIvtk.item-SBIvtk:focus-visible {
+  z-index: auto;
+  box-shadow: none !important;
+}
+
 .item-SBIvtk[data-highlighted] {
   background-color: color-mix(in srgb,
     var(--wst-base-2-color, #000) 6%,
@@ -140,7 +274,7 @@
 
 .item-SBIvtk[data-selected][data-highlighted] {
   background-color: color-mix(in srgb,
-    var(--wst-base-2-color, #000) 18%,
+    var(--wst-base-2-color, #000) 16%,
     transparent);
 }
 
@@ -158,6 +292,37 @@
   overflow: hidden;
 }
 
+.itemContent-N1nRUK {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+.itemContent-N1nRUK .itemText-tVdjcF {
+  flex: none;
+}
+
+.itemDescription-MNvNbs {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-shade-3-color, #767676);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.itemIcon-ASIDFq, .itemSuffix-h2RKor {
+  color: currentColor;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.itemIcon-ASIDFq {
+  width: 20px;
+  height: 20px;
+}
+
 .itemIndicator-qlxJA4 {
   width: 16px;
   height: 16px;
@@ -185,11 +350,53 @@
 }
 
 .groupLabel-GC3RgN {
-  font: var(--wst-paragraph-3-font);
+  font: var(--wst-paragraph-2-font);
   color: var(--wst-shade-3-color, #939393);
-  text-transform: uppercase;
-  letter-spacing: .05em;
   padding-block: 6px;
-  padding-inline: 14px;
+  padding-inline: 24px 20px;
+}
+
+.separator-XEtOy2 {
+  background-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 30%,
+    transparent);
+  flex-shrink: 0;
+  height: 1px;
+  margin-block: 4px;
+}
+
+.error-rsn7w1 {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-system-error-color, #df3131);
+  margin: 4px 0 0;
+}
+
+.description-WHObss {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-shade-3-color, #767676);
+  margin: 4px 0 0;
+}
+
+.loadingIndicator-X_6SEg {
+  border: 2px solid;
+  border-block-start-color: #0000;
+  border-radius: 50%;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  animation: .8s linear infinite loadingIndicatorSpin-xPUyVe;
+  display: inline-block;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loadingIndicator-X_6SEg {
+    animation: none;
+  }
+}
+
+@keyframes loadingIndicatorSpin-xPUyVe {
+  to {
+    transform: rotate(360deg);
+  }
 }
 

package/dist/Select/index.d.ts

@@ -543,6 +543,7 @@ declare interface ReasonToEventMap {
 declare const scrub: "scrub";
 
 export declare const Select: {
+    Root: typeof Select_2.Root;
     Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectLabelProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
@@ -555,6 +556,7 @@ export declare const Select: {
     Icon: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectIconProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
+    Portal: React_2.ForwardRefExoticComponent<Omit<SelectPortalProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
     Backdrop: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectBackdropProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
@@ -591,9 +593,9 @@ export declare const Select: {
     GroupLabel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectGroupLabelProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Root: typeof Select_2.Root;
-    Portal: React_2.ForwardRefExoticComponent<Omit<SelectPortalProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
-    Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+    Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>>;
 };
 
 export declare namespace Select_2 {

package/dist/Select/index.js

@@ -48,7 +48,7 @@ import { useClick } from "../5864.js";
 import { useListNavigation, useTypeahead } from "../5299.js";
 import { FOCUSABLE_POPUP_PROPS, useOnFirstRender } from "../8106.js";
 import { visuallyHiddenInput, visuallyHidden } from "../8225.js";
-import { Separator } from "../9635.js";
+import { Separator as Separator_Separator } from "../9635.js";
 import * as __rspack_external_react from "react";
 const SelectRootContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
 if ("production" !== process.env.NODE_ENV) SelectRootContext.displayName = "SelectRootContext";
@@ -1804,21 +1804,37 @@ const SelectPortal_SelectPortal = /*#__PURE__*/ __rspack_external_react.forwardR
 });
 if ("production" !== process.env.NODE_ENV) SelectPortal_SelectPortal.displayName = "SelectPortal";
 const Select_module = {
+    root: "root-Pyk3SP",
     label: "label-UrIm_f",
+    requiredMarker: "requiredMarker-ZRoZQT",
     trigger: "trigger-UPubf5",
     value: "value-fKND1Z",
     icon: "icon-_ToIv8",
     backdrop: "backdrop-kGw5mZ",
     positioner: "positioner-rz27gX",
     popup: "popup-BEvbSY",
+    popupDynamicWidth: "popupDynamicWidth-XmkrCB",
+    narrowTrigger: "narrowTrigger-sSpJ7t",
+    blockTrigger: "blockTrigger-FJvDrq",
+    exampleStack: "exampleStack-urnxUp",
+    counter: "counter-vIhcIf",
     list: "list-fTpwcL",
     item: "item-SBIvtk",
     itemText: "itemText-tVdjcF",
+    itemContent: "itemContent-N1nRUK",
+    itemDescription: "itemDescription-MNvNbs",
+    itemIcon: "itemIcon-ASIDFq",
+    itemSuffix: "itemSuffix-h2RKor",
     itemIndicator: "itemIndicator-qlxJA4",
     arrow: "arrow-TRzfpO",
     scrollDownArrow: "scrollDownArrow-mffvLs",
     scrollUpArrow: "scrollUpArrow-P67Eti",
-    groupLabel: "groupLabel-GC3RgN"
+    groupLabel: "groupLabel-GC3RgN",
+    separator: "separator-XEtOy2",
+    error: "error-rsn7w1",
+    description: "description-WHObss",
+    loadingIndicator: "loadingIndicator-X_6SEg",
+    loadingIndicatorSpin: "loadingIndicatorSpin-xPUyVe"
 };
 const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SelectLabel_SelectLabel, {
         ref: ref,
@@ -1900,11 +1916,18 @@ const GroupLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className
         className: clsx(Select_module.groupLabel, className),
         ...props
     }));
+const Separator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Separator_Separator, {
+        ref: ref,
+        className: clsx(Select_module.separator, className),
+        ...props
+    }));
 const Select = {
+    Root: SelectRoot,
     Label: Label,
     Trigger: Trigger,
     Value: Value,
     Icon: Icon,
+    Portal: SelectPortal_SelectPortal,
     Backdrop: Backdrop,
     Positioner: Positioner,
     Popup: Popup,
@@ -1917,8 +1940,6 @@ const Select = {
     ScrollUpArrow: ScrollUpArrow,
     Group: Group,
     GroupLabel: GroupLabel,
-    Root: SelectRoot,
-    Portal: SelectPortal_SelectPortal,
     Separator: Separator
 };
-export { Select };
+export { Select, Select_module };