@wix/site-ui 1.17.0 → 1.19.0

package/dist/Accordion/index.css

@@ -2,11 +2,19 @@
   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;
+.line-t3NkfO .item-xwNKIu {
+  border-bottom: var(--wst-system-line-1-width, 1px) solid
+    color-mix(in srgb, var(--wst-paragraph-2-color, #000) 30%, transparent);
+}
+
+.box-IGlTAZ .item-xwNKIu {
+  border: var(--wst-system-line-1-width, 1px) solid
+    color-mix(in srgb, var(--wst-paragraph-2-color, #000) 30%, transparent);
+  margin-bottom: calc(-1 * var(--wst-system-line-1-width, 1px));
+}
+
+.box-IGlTAZ .item-xwNKIu:last-child {
+  margin-bottom: 0;
 }
 
 .header-YZESJq {
@@ -24,19 +32,88 @@
   border: none;
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
   width: 100%;
   padding: 0;
   display: flex;
 }
 
-.trigger-cbcjp2:disabled {
+.trigger-cbcjp2[data-disabled] {
   color: var(--wst-system-disabled-color, #939393);
+  cursor: default;
+  pointer-events: none;
+}
+
+.small-ECItLE .trigger-cbcjp2 {
+  gap: 8px;
+  padding-block: 12px;
+  padding-inline: 0;
+}
+
+.large-FlJRwV .trigger-cbcjp2 {
+  gap: 12px;
+  padding-block: 24px;
+  padding-inline: 0;
+}
+
+.box-IGlTAZ.small-ECItLE .trigger-cbcjp2 {
+  padding-inline: 12px;
+}
+
+.box-IGlTAZ.large-FlJRwV .trigger-cbcjp2 {
+  padding-inline: 24px;
+}
+
+.arrow-yZ7Nq2 {
+  flex-shrink: 0;
+  transition: transform .2s;
+}
+
+[aria-expanded="true"] .arrow-yZ7Nq2 {
+  transform: rotate(180deg);
 }
 
 .panel-Gp0XFK {
   font: var(--wst-paragraph-2-font);
   color: var(--wst-paragraph-2-color, #000);
-  padding-block: 12px;
+  interpolate-size: allow-keywords;
+  height: auto;
+  transition: height .3s cubic-bezier(.39, .11, .37, .99), padding .3s cubic-bezier(.39, .11, .37, .99);
+  overflow: hidden;
+}
+
+.small-ECItLE .panel-Gp0XFK {
+  padding-block: 0 12px;
+  padding-inline: 0;
+}
+
+.large-FlJRwV .panel-Gp0XFK {
+  padding-block: 0 24px;
+  padding-inline: 0;
+}
+
+.box-IGlTAZ.small-ECItLE .panel-Gp0XFK {
+  padding-inline: 12px;
+}
+
+.box-IGlTAZ.large-FlJRwV .panel-Gp0XFK {
+  padding-inline: 24px;
+}
+
+.panel-Gp0XFK.panel-Gp0XFK[data-starting-style], .panel-Gp0XFK.panel-Gp0XFK[data-ending-style] {
+  height: 0;
+  padding-block: 0;
+}
+
+.panel-Gp0XFK > * {
+  transition: opacity .1s linear 50ms;
+}
+
+.panel-Gp0XFK[data-starting-style] > * {
+  opacity: 0;
+}
+
+.panel-Gp0XFK[data-ending-style] > * {
+  opacity: 0;
+  transition-delay: 0s;
 }
 

package/dist/Accordion/index.d.ts

@@ -3,6 +3,7 @@ import { AccordionHeaderProps } from '@base-ui/react/accordion';
 import { AccordionItemProps } from '@base-ui/react/accordion';
 import { AccordionPanelProps } from '@base-ui/react/accordion';
 import { AccordionTriggerProps } from '@base-ui/react/accordion';
+import { ChevronDownProps } from '@wix/wix-ui-icons-common/dist/types/default/general/dist/components/ChevronDown';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 
@@ -20,14 +21,29 @@ export declare const Accordion: {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
     Root: typeof Root;
-    Arrow: React_2.ForwardRefExoticComponent<Omit<ArrowProps, "ref"> & React_2.RefAttributes<SVGSVGElement>>;
+    Arrow: React_2.ForwardRefExoticComponent<ChevronDownProps & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<SVGSVGElement>>;
 };
 
-declare type ArrowProps = React_2.SVGProps<SVGSVGElement> & {
-    className?: string;
+export declare const AccordionSize: {
+    readonly small: "small";
+    readonly large: "large";
+};
+
+export declare const AccordionVariant: {
+    readonly line: "line";
+    readonly box: "box";
 };
 
-declare function Root<Value = any>({ className, ...props }: WithStringClassName<Accordion_2.Root.Props<Value>>): JSX_2.Element;
+declare function Root<Value = any>({ className, size, variant, ...props }: WithStringClassName<Accordion_2.Root.Props<Value>> & {
+    size?: Size;
+    variant?: Variant;
+}): JSX_2.Element;
+
+declare type Size = (typeof AccordionSize)[keyof typeof AccordionSize];
+
+declare type Variant = (typeof AccordionVariant)[keyof typeof AccordionVariant];
 
 declare type WithStringClassName<P> = Omit<P, 'className'> & {
     className?: string;

package/dist/Accordion/index.js

@@ -1,14 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
+import { ChevronDown } from "@wix/wix-ui-icons-common";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
 const Accordion_module = {
     root: "root-jseiNO",
+    line: "line-t3NkfO",
     item: "item-xwNKIu",
+    box: "box-IGlTAZ",
     header: "header-YZESJq",
     trigger: "trigger-cbcjp2",
+    small: "small-ECItLE",
+    large: "large-FlJRwV",
+    arrow: "arrow-yZ7Nq2",
     panel: "panel-Gp0XFK"
 };
+const AccordionSize = {
+    small: 'small',
+    large: 'large'
+};
+const AccordionVariant = {
+    line: 'line',
+    box: 'box'
+};
 const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Accordion.Item, {
         ref: ref,
         className: clsx(Accordion_module.item, className),
@@ -29,25 +43,16 @@ const Panel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...
         className: clsx(Accordion_module.panel, className),
         ...props
     }));
-function Root({ className, ...props }) {
+function Root({ className, size = AccordionSize.small, variant = AccordionVariant.line, ...props }) {
     return /*#__PURE__*/ jsx(Accordion.Root, {
         ...props,
-        className: clsx(Accordion_module.root, className)
+        className: clsx(Accordion_module.root, Accordion_module[size], Accordion_module[variant], className)
     });
 }
-const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("svg", {
-        ref: ref,
+const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, _ref)=>/*#__PURE__*/ jsx(ChevronDown, {
         className: clsx(Accordion_module.arrow, className),
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 16 16",
-        width: "16",
-        height: "16",
-        fill: "currentColor",
         "aria-hidden": "true",
-        ...props,
-        children: /*#__PURE__*/ jsx("path", {
-            d: "M2.293 5.293a1 1 0 0 1 1.414 0L8 9.586l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414z"
-        })
+        ...props
     }));
 const Accordion_Accordion = {
     Item: Item,
@@ -57,4 +62,4 @@ const Accordion_Accordion = {
     Root: Root,
     Arrow: Arrow
 };
-export { Accordion_Accordion as Accordion };
+export { AccordionSize, AccordionVariant, Accordion_Accordion as Accordion };

package/dist/Field/index.css

@@ -1,13 +1,12 @@
 .root-ECdHfF {
   flex-direction: column;
+  gap: 8px;
   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 {
@@ -17,15 +16,11 @@
 .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 {

package/dist/index.d.ts

@@ -35,6 +35,7 @@ import { Button as Button_2 } from '@base-ui/react/button';
 import { CheckboxGroupProps } from '@base-ui/react/checkbox-group';
 import { CheckboxIndicatorProps } from '@base-ui/react/checkbox';
 import { CheckboxRootProps } from '@base-ui/react/checkbox';
+import { ChevronDownProps } from '@wix/wix-ui-icons-common/dist/types/default/general/dist/components/ChevronDown';
 import { CollapsiblePanelProps } from '@base-ui/react/collapsible';
 import { CollapsibleRootProps } from '@base-ui/react/collapsible';
 import { CollapsibleTriggerProps } from '@base-ui/react/collapsible';
@@ -241,7 +242,19 @@ export declare const Accordion: {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
     Root: typeof Root;
-    Arrow: React_2.ForwardRefExoticComponent<Omit<ArrowProps, "ref"> & React_2.RefAttributes<SVGSVGElement>>;
+    Arrow: React_2.ForwardRefExoticComponent<ChevronDownProps & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<SVGSVGElement>>;
+};
+
+export declare const AccordionSize: {
+    readonly small: "small";
+    readonly large: "large";
+};
+
+export declare const AccordionVariant: {
+    readonly line: "line";
+    readonly box: "box";
 };
 
 export declare const AlertDialog: {
@@ -270,10 +283,6 @@ export declare const AlertDialog: {
     createHandle: typeof AlertDialog_2.createHandle;
 };
 
-declare type ArrowProps = React_2.SVGProps<SVGSVGElement> & {
-    className?: string;
-};
-
 export declare const Autocomplete: {
     InputGroup: React_2.ForwardRefExoticComponent<Omit<Omit<AutocompleteInputGroupProps & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -859,7 +868,10 @@ export declare const RadioSize: {
     readonly large: 20;
 };
 
-declare function Root<Value = any>({ className, ...props }: WithStringClassName<Accordion_2.Root.Props<Value>>): JSX_2.Element;
+declare function Root<Value = any>({ className, size, variant, ...props }: WithStringClassName<Accordion_2.Root.Props<Value>> & {
+    size?: Size;
+    variant?: Variant;
+}): JSX_2.Element;
 
 declare function Root_2<Value = any>({ className, ...props }: WithStringClassName<NavigationMenu_2.Root.Props<Value>>): JSX_2.Element;
 
@@ -954,6 +966,8 @@ export declare const Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit
     className?: string | undefined;
 } & React_2.RefAttributes<HTMLDivElement>>;
 
+declare type Size = (typeof AccordionSize)[keyof typeof AccordionSize];
+
 export declare const Slider: {
     Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SliderLabelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -1104,6 +1118,8 @@ export declare interface TypographyProps extends React_2.HTMLAttributes<HTMLElem
 
 export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
 
+declare type Variant = (typeof AccordionVariant)[keyof typeof AccordionVariant];
+
 declare type WithStringClassName<P> = Omit<P, 'className'> & {
     className?: string;
 };

package/dist/index.js

@@ -1,4 +1,4 @@
-export { Accordion } from "./Accordion/index.js";
+export { Accordion, AccordionSize, AccordionVariant } from "./Accordion/index.js";
 export { AlertDialog } from "./AlertDialog/index.js";
 export { Autocomplete } from "./Autocomplete/index.js";
 export { Avatar, AvatarSize } from "./Avatar/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.17.0",
+  "version": "1.19.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
+    "@wix/wix-ui-icons-common": "^3.114.0",
     "clsx": "2.0.0"
   },
   "peerDependencies": {
@@ -77,5 +78,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "a8e93b8a04b6bd9b7dbea47edaf45ce59f109d983f40e5d2332948f4"
+  "falconPackageHash": "17e549237e9918f834dd2c826d1824086f56de229ed0139d0110d879"
 }