@wix/site-ui 1.108.0 → 1.110.0

package/dist/8027.js

@@ -0,0 +1,4 @@
+function toCssLength(value) {
+    return 'number' == typeof value ? `${value}px` : value;
+}
+export { toCssLength };

package/dist/Checkbox/index.css

@@ -1,94 +1,86 @@
 .root-OrOWpu {
+  --checkbox-size: 14px;
+  --checkbox-border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, black) 60%,
+    transparent);
+  --checkbox-icon-color: var(--wst-links-and-actions-color, #116dff);
   box-sizing: border-box;
   cursor: pointer;
-  font: var(--wst-paragraph-2-font);
-  color: var(--wst-paragraph-2-color, #000);
-  --indicator-bg: var(--wst-primary-background-color, #fff);
-  --indicator-border: color-mix(in srgb,
-    var(--wst-system-line-1-color, #000) 60%,
-    transparent);
   align-items: center;
-  gap: 8px;
-  transition: color .2s linear;
+  transition: background-color .2s linear, border-color .2s linear, color .2s linear;
   display: inline-flex;
+  position: relative;
 }
 
 .root-OrOWpu:hover, .root-OrOWpu:focus-within {
-  --indicator-border: var(--wst-system-line-1-color, #000);
-  outline: none;
+  --checkbox-border-color: var(--wst-system-line-1-color, black);
 }
 
-.root-OrOWpu[data-checked]:not([data-disabled]) {
-  --indicator-bg: var(--wst-links-and-actions-color, #116dff);
-  --indicator-border: var(--wst-links-and-actions-color, #116dff);
-}
-
-.root-OrOWpu[data-checked]:hover {
-  --indicator-bg: color-mix(in srgb,
-    var(--wst-links-and-actions-color, #116dff) 85%,
-    #000);
-  --indicator-border: color-mix(in srgb,
-    var(--wst-links-and-actions-color, #116dff) 85%,
-    #000);
-}
-
-.root-OrOWpu[data-disabled] {
-  cursor: default;
-  pointer-events: none;
-  color: var(--wst-system-disabled-color, #939393);
-  --indicator-bg: var(--wst-primary-background-color, #fff);
-  --indicator-border: color-mix(in srgb,
-    var(--wst-system-disabled-color, #939393) 60%,
-    transparent);
+.root-OrOWpu:focus-visible {
+  z-index: 1;
+  box-shadow: var(--wst-primary-background-color, white) 0 0 0 1px,
+    var(--wst-links-and-actions-color, #116dff) 0 0 0 3px;
+  outline: none;
 }
 
 .root-OrOWpu[data-invalid]:not([data-checked]) {
-  --indicator-border: var(--wst-system-error-color, #df3131);
+  --checkbox-border-color: var(--wst-system-error-color, #df3131);
 }
 
-.root-OrOWpu[data-invalid]:not([data-checked]):hover, .root-OrOWpu[data-invalid]:not([data-checked]):focus-within {
-  --indicator-border: color-mix(in srgb,
+.root-OrOWpu[data-invalid][data-checked] {
+  --checkbox-icon-color: var(--wst-system-error-color, #df3131);
+  --checkbox-border-color: color-mix(in srgb,
     var(--wst-system-error-color, #df3131) 70%,
     transparent);
 }
 
-.root-OrOWpu[data-invalid][data-checked] {
-  --indicator-bg: var(--wst-system-error-color, #df3131);
-  --indicator-border: var(--wst-system-error-color, #df3131);
+.root-OrOWpu[data-disabled] {
+  --checkbox-border-color: color-mix(in srgb,
+    var(--wst-system-disabled-color, #939393) 60%,
+    transparent);
+  --checkbox-icon-color: var(--wst-system-disabled-color, #939393);
+  cursor: default;
+  pointer-events: none;
 }
 
 .indicator-g_8JYy {
   box-sizing: content-box;
-  width: var(--checkbox-size, 16px);
-  height: var(--checkbox-size, 16px);
-  border: var(--wst-system-line-1-width, 1px) solid var(--indicator-border);
-  background-color: var(--indicator-bg);
-  border-radius: 2px;
+  width: var(--checkbox-size, 14px);
+  height: var(--checkbox-size, 14px);
+  border: var(--wst-system-line-1-width, 1px) solid var(--checkbox-border-color);
+  background-color: var(--wst-primary-background-color, white);
+  color: #0000;
+  border-radius: 4px;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  transition: background-color .2s linear, border-color .2s linear;
+  transition: background-color .2s linear, border-color .2s linear, color .2s linear;
   display: inline-flex;
+  position: relative;
 }
 
-.indicator-g_8JYy path {
-  fill: #0000;
-  transition: fill .2s linear;
+.indicator-g_8JYy svg {
+  width: calc(var(--checkbox-size, 14px) * .72);
+  height: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
-.root-OrOWpu[data-checked]:not([data-disabled]) .indicator-g_8JYy path, .root-OrOWpu[data-checked]:hover .indicator-g_8JYy path {
-  fill: var(--wst-primary-background-color, #fff);
+.indicator-g_8JYy path {
+  fill: currentColor;
 }
 
-.root-OrOWpu:hover .indicator-g_8JYy path, .root-OrOWpu:focus-within .indicator-g_8JYy path {
-  fill: #0000;
+.indicatorIcon-6oqHA9 {
+  opacity: 0;
 }
 
-.root-OrOWpu[data-disabled] .indicator-g_8JYy path {
-  fill: var(--wst-system-disabled-color, #939393);
+.root-OrOWpu[data-checked] .indicator-g_8JYy, .root-OrOWpu[data-indeterminate] .indicator-g_8JYy {
+  color: var(--checkbox-icon-color);
 }
 
-.root-OrOWpu[data-invalid][data-checked] .indicator-g_8JYy path {
-  fill: var(--wst-primary-background-color, #fff);
+.root-OrOWpu[data-checked]:not([data-indeterminate]) .checkmarkIcon-MX0Ccp, .root-OrOWpu[data-indeterminate] .indeterminateIcon-_b18QI {
+  opacity: 1;
 }
 

package/dist/Checkbox/index.d.ts

@@ -80,6 +80,13 @@ export declare const Checkbox: {
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare namespace Checkbox_2 {
+    export {
+        CheckboxRoot as Root,
+        CheckboxIndicator as Indicator
+    }
+}
+
 /**
  * Indicates whether the checkbox is ticked.
  * Renders a `<span>` element.
@@ -227,7 +234,7 @@ export declare interface CheckboxRootState extends FieldRootState {
 
 export declare const CheckboxSize: {
     readonly small: 12;
-    readonly medium: 16;
+    readonly medium: 14;
     readonly large: 20;
 };
 
@@ -415,6 +422,10 @@ declare interface ReasonToEventMap {
     [REASONS.windowResize]: UIEvent;
 }
 
+export declare type RootProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Checkbox_2.Root>> & {
+    size?: number;
+};
+
 declare const scrub: "scrub";
 
 declare const siblingOpen: "sibling-open";
@@ -442,4 +453,8 @@ declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K
 
 declare type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React_2.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
 
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
+
 export { }

package/dist/Checkbox/index.js

@@ -1,4 +1,5 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckboxChecked, CheckboxIndeterminate } from "@wix/wix-ui-icons-common/system";
 import clsx from "clsx";
 import { CheckboxRoot_CheckboxRoot, useCheckboxRootContext, useStateAttributesMapping } from "../3248.js";
 import { useOpenChangeComplete, transitionStatusMapping, useTransitionStatus } from "../880.js";
@@ -44,27 +45,45 @@ const CheckboxIndicator_CheckboxIndicator = /*#__PURE__*/ __rspack_external_reac
 if ("production" !== process.env.NODE_ENV) CheckboxIndicator_CheckboxIndicator.displayName = "CheckboxIndicator";
 const Checkbox_module = {
     root: "root-OrOWpu",
-    indicator: "indicator-g_8JYy"
+    indicator: "indicator-g_8JYy",
+    indicatorIcon: "indicatorIcon-6oqHA9",
+    checkmarkIcon: "checkmarkIcon-MX0Ccp",
+    indeterminateIcon: "indeterminateIcon-_b18QI"
 };
 const CheckboxSize = {
     small: 12,
-    medium: 16,
+    medium: 14,
     large: 20
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size = CheckboxSize.medium, style, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxRoot_CheckboxRoot, {
         ref: ref,
-        className: clsx(Checkbox_module.root, className),
+        className: clsx(Checkbox_module.root, className, 'has-custom-focus'),
         style: {
             '--checkbox-size': `${size}px`,
             ...style
         },
         ...props
     }));
-const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxIndicator_CheckboxIndicator, {
+Root.displayName = 'Checkbox.Root';
+const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxIndicator_CheckboxIndicator, {
         ref: ref,
+        keepMounted: true,
         className: clsx(Checkbox_module.indicator, className),
-        ...props
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(CheckboxChecked, {
+                    "aria-hidden": "true",
+                    className: clsx(Checkbox_module.indicatorIcon, Checkbox_module.checkmarkIcon)
+                }),
+                /*#__PURE__*/ jsx(CheckboxIndeterminate, {
+                    "aria-hidden": "true",
+                    className: clsx(Checkbox_module.indicatorIcon, Checkbox_module.indeterminateIcon)
+                })
+            ]
+        })
     }));
+Indicator.displayName = 'Checkbox.Indicator';
 const Checkbox = {
     Root: Root,
     Indicator: Indicator

package/dist/CheckboxField/index.css

@@ -0,0 +1,93 @@
+.option-o8pAcb {
+  width: var(--checkbox-option-width, auto);
+  gap: 8px;
+  max-width: 100%;
+  display: inline-block;
+}
+
+.option-o8pAcb[data-variant="box"], .option-o8pAcb[data-has-error-message] {
+  width: var(--checkbox-option-width, 100%);
+  display: flex;
+}
+
+.root-tqmYsF {
+  --checkbox-box-border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, black) 60%,
+    transparent);
+  max-width: 100%;
+  color: var(--wst-paragraph-2-color, black);
+  font: var(--wst-paragraph-2-font, normal normal 400 16px / 24px Madefor,
+    "Helvetica Neue",
+    Arial,
+    sans-serif);
+  user-select: none;
+  gap: 12px;
+  line-height: 24px;
+  text-decoration: none;
+}
+
+.root-tqmYsF[data-vertical-alignment="top"] {
+  align-items: flex-start;
+}
+
+.root-tqmYsF[data-vertical-alignment="top"] .indicator-_WzHbq {
+  margin-top: calc((
+        24px - var(--checkbox-size, 14px) - 2 *
+          var(--wst-system-line-1-width, 1px)
+      ) /
+      2);
+}
+
+.root-tqmYsF[data-variant="box"] {
+  width: var(--checkbox-option-width, 100%);
+  border: var(--wst-system-line-1-width, 1px) solid
+    var(--checkbox-box-border-color);
+  background-color: var(--wst-primary-background-color, white);
+  border-radius: 4px;
+  padding: 15px 16px;
+  display: flex;
+}
+
+.root-tqmYsF[data-variant="box"]:hover, .root-tqmYsF[data-variant="box"]:focus-within {
+  --checkbox-box-border-color: var(--wst-system-line-1-color, black);
+}
+
+.root-tqmYsF[data-variant="box"][data-checked]:not([data-disabled]) {
+  --checkbox-box-border-color: var(--wst-links-and-actions-color, #116dff);
+  background-color: color-mix(in srgb,
+    var(--wst-links-and-actions-color, #116dff) 10%,
+    transparent);
+}
+
+.root-tqmYsF[data-variant="box"][data-invalid]:not([data-checked]) {
+  --checkbox-box-border-color: var(--wst-system-error-color, #df3131);
+}
+
+.root-tqmYsF[data-variant="box"][data-disabled] {
+  --checkbox-box-border-color: var(--wst-system-disabled-color, #939393);
+}
+
+.root-tqmYsF[data-disabled] {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.optionContent-inaJL9 {
+  flex: auto;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+.optionLabel-fJWxkM {
+  overflow-wrap: anywhere;
+  flex: auto;
+  min-width: 0;
+  display: block;
+}
+
+.optionSuffix-AJytXe {
+  white-space: nowrap;
+  flex: none;
+  margin-inline-start: 5px;
+}
+