@wix/editor-react-components 1.2452.0 → 1.2453.0

package/dist/site/components/AccordionComponent/AccordionItem.d.ts

@@ -6,7 +6,7 @@ export interface AccordionItemProps {
     };
     isOpen?: boolean;
     titleHtmlTag?: string;
-    elementProps?: Pick<AccordionElementProps, 'animatedIcon'>;
+    elementProps?: AccordionElementProps;
 }
 declare const AccordionItem: React.FC<AccordionItemProps>;
 export default AccordionItem;

package/dist/site/components/AccordionComponent/component.js

@@ -2439,10 +2439,11 @@ const styles = {
 const AccordionItem = (props) => {
   var _a, _b, _c, _d, _e;
   const { item, isOpen, titleHtmlTag, elementProps } = props;
+  const { animatedIcon: animatedIconProps } = elementProps ?? {};
   const animatedIconRef = useRef(null);
   const isInitialRender = useRef(true);
   const HeaderTag = titleHtmlTag;
-  const isAnimatedIcon = ((_b = (_a = elementProps == null ? void 0 : elementProps.animatedIcon) == null ? void 0 : _a.svg) == null ? void 0 : _b.uri) != null && elementProps.animatedIcon.svg.uri === ((_c = elementProps.animatedIcon.svgLastAnimatedSelected) == null ? void 0 : _c.uri);
+  const isAnimatedIcon = ((_a = animatedIconProps == null ? void 0 : animatedIconProps.svg) == null ? void 0 : _a.uri) != null && animatedIconProps.svg.uri === ((_b = animatedIconProps.svgLastAnimatedSelected) == null ? void 0 : _b.uri);
   useEffect(() => {
     var _a2, _b2;
     if (isInitialRender.current) {
@@ -2457,38 +2458,62 @@ const AccordionItem = (props) => {
       (_b2 = animatedIconRef.current) == null ? void 0 : _b2.runAnimationBackward();
     }
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs(Item, { className: "accordion-item", value: item.id, children: [
-    /* @__PURE__ */ jsx(Header, { asChild: true, children: /* @__PURE__ */ jsx(HeaderTag, { children: /* @__PURE__ */ jsxs(
-      Trigger2,
-      {
-        className: clsx("item-title", styles["accordion-header"]),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: styles["accordion-item-label"], children: item.name }),
-          /* @__PURE__ */ jsx(
-            AnimatedIconWithReducedMotion,
-            {
-              ref: animatedIconRef,
-              id: `${item.id}-icon`,
-              duration: ((_d = elementProps == null ? void 0 : elementProps.animatedIcon) == null ? void 0 : _d.duration) ?? 0.2,
-              svg: (_e = elementProps == null ? void 0 : elementProps.animatedIcon) == null ? void 0 : _e.svg,
-              className: clsx("animated-icon", styles.icon, {
-                [styles["icon-open"]]: !isAnimatedIcon && isOpen
-              })
-            }
-          )
-        ]
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(
-      Content2,
-      {
-        forceMount: true,
-        dir: "ltr",
-        className: clsx("item-content", styles["accordion-content"]),
-        children: item.content
-      }
-    )
-  ] }, item.id);
+  return /* @__PURE__ */ jsxs(
+    Item,
+    {
+      className: clsx(
+        "accordion-item",
+        (_c = elementProps == null ? void 0 : elementProps.accordionItem) == null ? void 0 : _c.className
+      ),
+      value: item.id,
+      children: [
+        /* @__PURE__ */ jsx(Header, { asChild: true, children: /* @__PURE__ */ jsx(HeaderTag, { children: /* @__PURE__ */ jsxs(
+          Trigger2,
+          {
+            className: clsx(
+              "item-title",
+              styles["accordion-header"],
+              (_d = elementProps == null ? void 0 : elementProps.itemTitle) == null ? void 0 : _d.className
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: styles["accordion-item-label"], children: item.name }),
+              /* @__PURE__ */ jsx(
+                AnimatedIconWithReducedMotion,
+                {
+                  ref: animatedIconRef,
+                  id: `${item.id}-icon`,
+                  duration: (animatedIconProps == null ? void 0 : animatedIconProps.duration) ?? 0.2,
+                  svg: animatedIconProps == null ? void 0 : animatedIconProps.svg,
+                  className: clsx(
+                    "animated-icon",
+                    styles.icon,
+                    animatedIconProps == null ? void 0 : animatedIconProps.className,
+                    {
+                      [styles["icon-open"]]: !isAnimatedIcon && isOpen
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          Content2,
+          {
+            forceMount: true,
+            dir: "ltr",
+            className: clsx(
+              "item-content",
+              styles["accordion-content"],
+              (_e = elementProps == null ? void 0 : elementProps.itemContent) == null ? void 0 : _e.className
+            ),
+            children: item.content
+          }
+        )
+      ]
+    },
+    item.id
+  );
 };
 function calculateInitialOpenedItems(items, defaultOpen, allowMultipleOpen) {
   let initialItems = [];
@@ -2625,7 +2650,7 @@ const AccordionContainer = (props) => {
       item: { ...item, id: index.toString() },
       isOpen: openedItems.includes(index.toString()),
       titleHtmlTag,
-      elementProps: { animatedIcon: elementProps == null ? void 0 : elementProps.animatedIcon }
+      elementProps
     },
     index
   ));

package/dist/site/components/AccordionComponent/manifestConfigs/iconPositionConfig.d.ts

@@ -1,6 +1,6 @@
 export declare const iconPositionConfig: {
     customEnum: {
-        cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+        cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
         options: {
             value: string;
             displayName: string;
@@ -12,5 +12,5 @@ export declare const iconPositionConfig: {
     };
     displayName: string;
     defaultValue: string;
-    cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+    cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
 };

package/dist/site/components/AccordionComponent/types.d.ts

@@ -1,16 +1,22 @@
 import { A11y, Direction, VectorArt } from '@wix/editor-react-types';
 import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { AnimatedIconElementProps } from '../Button/Button.types';
 export interface AccordionItem {
     name: string;
     content: React.ReactNode;
 }
 export interface AccordionElementProps {
+    accordionItem?: {
+        className?: string;
+    };
     itemTitle?: {
+        className?: string;
         a11y?: A11y;
     };
-    animatedIcon?: {
-        svg?: VectorArt;
-        duration?: number;
+    itemContent?: {
+        className?: string;
+    };
+    animatedIcon?: AnimatedIconElementProps & {
         svgLastAnimatedSelected?: VectorArt;
     };
 }

package/dist/site/components/AudioPlayer/component.js

@@ -3405,14 +3405,20 @@ const ProgressSlider = ({
   currentTime,
   duration,
   hasError,
-  onSeek
+  onSeek,
+  elementProps
 }) => {
+  var _a, _b;
   const timeText = `${formatTime(currentTime)} / ${formatTime(duration)}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       $6f909507e6374d18$export$472062a354075cee,
       {
-        className: clsx(selectors.progressBar, styles.progressBar),
+        className: clsx(
+          selectors.progressBar,
+          styles.progressBar,
+          (_a = elementProps == null ? void 0 : elementProps.progressBar) == null ? void 0 : _a.className
+        ),
         minValue: 0,
         maxValue: duration || 1,
         value: currentTime,
@@ -3439,7 +3445,17 @@ const ProgressSlider = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: clsx(selectors.timeDisplay, styles.timeDisplay), children: timeText })
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(
+          selectors.timeDisplay,
+          styles.timeDisplay,
+          (_b = elementProps == null ? void 0 : elementProps.timeDisplay) == null ? void 0 : _b.className
+        ),
+        children: timeText
+      }
+    )
   ] });
 };
 const SoundOn = (props) => /* @__PURE__ */ jsx(
@@ -3493,11 +3509,16 @@ const VolumeControls = ({
   currentVolume,
   isMuted,
   onToggleMute,
-  onVolumeChange
+  onVolumeChange,
+  className
 }) => /* @__PURE__ */ jsxs(
   $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
   {
-    className: clsx(selectors.volumeControls, styles.volumeControls),
+    className: clsx(
+      selectors.volumeControls,
+      styles.volumeControls,
+      className
+    ),
     "aria-label": ARIA_LABELS.volumeControls,
     children: [
       /* @__PURE__ */ jsx(
@@ -3535,7 +3556,7 @@ const VolumeControls = ({
   }
 );
 const AudioPlayer = (props) => {
-  var _a;
+  var _a, _b, _c, _d, _e, _f;
   const {
     id,
     className,
@@ -3551,7 +3572,8 @@ const AudioPlayer = (props) => {
     onEnded,
     onTimeupdate,
     onMouseIn,
-    onMouseOut
+    onMouseOut,
+    elementProps
   } = props;
   const audioUrl = audio == null ? void 0 : audio.url;
   const title = audio == null ? void 0 : audio.title;
@@ -3602,13 +3624,26 @@ const AudioPlayer = (props) => {
           Image3,
           {
             id: `${id}-cover`,
-            className: clsx(selectors.coverMedia, styles.coverMediaWrapper),
+            className: clsx(
+              selectors.coverMedia,
+              styles.coverMediaWrapper,
+              (_b = elementProps == null ? void 0 : elementProps.coverArt) == null ? void 0 : _b.className
+            ),
             image: coverImage,
             displayMode
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: clsx(selectors.audioTitle, styles.audioTitle), children: [
-          /* @__PURE__ */ jsx("span", { className: selectors.title, children: title }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(
+                selectors.title,
+                (_c = elementProps == null ? void 0 : elementProps.audioTitle) == null ? void 0 : _c.className
+              ),
+              children: title
+            }
+          ),
           isSSR && /* @__PURE__ */ jsx(
             "a",
             {
@@ -3619,36 +3654,58 @@ const AudioPlayer = (props) => {
               children: title
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: clsx(selectors.artistName, styles.artistName), children: artist })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: clsx(selectors.controls, styles.controls), children: [
-          /* @__PURE__ */ jsx(
-            PlayButton,
-            {
-              isPlaying,
-              hasError,
-              onTogglePlay: togglePlay
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ProgressSlider,
-            {
-              currentTime,
-              duration,
-              hasError,
-              onSeek: seekTo
-            }
-          ),
           /* @__PURE__ */ jsx(
-            VolumeControls,
+            "span",
             {
-              currentVolume,
-              isMuted,
-              onToggleMute: toggleMute,
-              onVolumeChange: setVolume
+              className: clsx(
+                selectors.artistName,
+                styles.artistName,
+                (_d = elementProps == null ? void 0 : elementProps.artistName) == null ? void 0 : _d.className
+              ),
+              children: artist
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              selectors.controls,
+              styles.controls,
+              (_e = elementProps == null ? void 0 : elementProps.controls) == null ? void 0 : _e.className
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                PlayButton,
+                {
+                  isPlaying,
+                  hasError,
+                  onTogglePlay: togglePlay
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ProgressSlider,
+                {
+                  currentTime,
+                  duration,
+                  hasError,
+                  onSeek: seekTo,
+                  elementProps
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                VolumeControls,
+                {
+                  currentVolume,
+                  isMuted,
+                  onToggleMute: toggleMute,
+                  onVolumeChange: setVolume,
+                  className: (_f = elementProps == null ? void 0 : elementProps.volumeControls) == null ? void 0 : _f.className
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );

package/dist/site/components/AudioPlayer/manifestConfigs/controlsConfig.d.ts

@@ -1,6 +1,6 @@
 import { NATIVE_STATE_TYPE } from '@wix/component-protocol/schema';
 export declare const controlsConfig: {
-    elementType: import('@wix/ambassador-devcenter-v1-component-type-data/types').ElementTypeEnumElementType;
+    elementType: import('@wix/component-protocol/schema').ElementTypeEnumElementType;
     inlineElement: {
         selector: string;
         displayName: string;
@@ -10,27 +10,27 @@ export declare const controlsConfig: {
         };
         cssCustomProperties: {
             'progress-fill-color': {
-                cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+                cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
                 displayName: string;
                 defaultValue: string;
             };
             'volume-control-color': {
-                cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+                cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
                 displayName: string;
                 defaultValue: string;
             };
             'time-display-color': {
-                cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+                cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
                 displayName: string;
                 defaultValue: string;
             };
             'play-icon-color': {
-                cssPropertyType: import('@wix/ambassador-devcenter-v1-component-type-data/types').CssPropertyEnumCssPropertyType;
+                cssPropertyType: import('@wix/component-protocol/schema').CssPropertyEnumCssPropertyType;
                 displayName: string;
                 defaultValue: string;
             };
             'play-icon-size': {
-                cssPropertyType: import("@wix/ambassador-devcenter-v1-component-type-data/types").CssPropertyEnumCssPropertyType.length;
+                cssPropertyType: import("@wix/component-protocol/schema").CssPropertyEnumCssPropertyType.length;
                 displayName: string;
                 defaultValue: string;
             };
@@ -46,14 +46,14 @@ export declare const controlsConfig: {
         displayGroups: {
             fillColors: {
                 displayName: string;
-                groupType: import('@wix/ambassador-devcenter-v1-component-type-data/types').GroupType;
+                groupType: import('@wix/component-protocol/schema').GroupType;
                 cssDataType: {
                     items: string[];
                 };
             };
             icon: {
                 displayName: string;
-                groupType: import('@wix/ambassador-devcenter-v1-component-type-data/types').GroupType;
+                groupType: import('@wix/component-protocol/schema').GroupType;
                 cssDataType: {
                     items: string[];
                 };

package/dist/site/components/AudioPlayer/manifestConfigs/coverMediaConfig.d.ts

@@ -1,5 +1,5 @@
 export declare const coverMediaConfig: {
-    elementType: import('@wix/ambassador-devcenter-v1-component-type-data/types').ElementTypeEnumElementType;
+    elementType: import('@wix/component-protocol/schema').ElementTypeEnumElementType;
     refElement: {
         selector: string;
         type: string;

package/dist/site/components/AudioPlayer/types.d.ts

@@ -1,6 +1,29 @@
 import { A11y, Audio, Direction, Image } from '@wix/editor-react-types';
 import { Image3Props } from '../Image3/Image3.types';
 import { SdkFunctionMouseHoverProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+export interface AudioPlayerElementProps {
+    controls?: {
+        className?: string;
+    };
+    coverArt?: {
+        className?: string;
+    };
+    audioTitle?: {
+        className?: string;
+    };
+    artistName?: {
+        className?: string;
+    };
+    progressBar?: {
+        className?: string;
+    };
+    timeDisplay?: {
+        className?: string;
+    };
+    volumeControls?: {
+        className?: string;
+    };
+}
 export interface AudioPlayerProps extends SdkFunctionMouseHoverProps {
     id?: string;
     className?: string;
@@ -15,6 +38,7 @@ export interface AudioPlayerProps extends SdkFunctionMouseHoverProps {
     onPause?: () => void;
     onEnded?: () => void;
     onTimeupdate?: () => void;
+    elementProps?: AudioPlayerElementProps;
 }
 export interface UseAudioPlayerOptions {
     /** Distinct per mounted player so underlying Howl cache does not merge instances. */
@@ -37,10 +61,12 @@ export interface ProgressSliderProps {
     duration: number;
     hasError: boolean;
     onSeek: (value: number) => void;
+    elementProps?: AudioPlayerElementProps;
 }
 export interface VolumeControlsProps {
     currentVolume: number;
     isMuted: boolean;
     onToggleMute: () => void;
     onVolumeChange: (value: number) => void;
+    className?: string;
 }

package/dist/site/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { BreadcrumbItemProps } from './types';
-export default function BreadcrumbItemComponent({ item, index, isCurrent, isHomepageItem, homeIconProps, collapsedRange, }: BreadcrumbItemProps): React.JSX.Element;
+export default function BreadcrumbItemComponent({ item, index, isCurrent, isHomepageItem, collapsedRange, elementProps, }: BreadcrumbItemProps): React.JSX.Element;

package/dist/site/components/Breadcrumbs/Separator.d.ts

@@ -1,2 +1,4 @@
 import { default as React } from 'react';
-export default function Separator(): React.JSX.Element;
+export default function Separator({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/dist/site/components/Breadcrumbs/component.js

@@ -1306,11 +1306,15 @@ function getItemHref(link) {
   return (link == null ? void 0 : link.href) || void 0;
 }
 const uniqueKey = (index, id) => id ? `${id}-${index}` : index.toString();
-function Separator() {
+function Separator({ className }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: clsx(semanticClassNames.separator, styles.separator),
+      className: clsx(
+        semanticClassNames.separator,
+        styles.separator,
+        className
+      ),
       "aria-hidden": "true"
     }
   );
@@ -1320,11 +1324,12 @@ function BreadcrumbItemComponent({
   index = 0,
   isCurrent,
   isHomepageItem = false,
-  homeIconProps,
-  collapsedRange
+  collapsedRange,
+  elementProps
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const href = item2 ? getItemHref(item2.link) : void 0;
+  const homeIconProps = elementProps == null ? void 0 : elementProps.animatedHomeIcon;
   const hasIcon = !!((_b = (_a = homeIconProps == null ? void 0 : homeIconProps.svg) == null ? void 0 : _a.svgContent) == null ? void 0 : _b.trim());
   const iconDomId = isHomepageItem ? `home-icon-${uniqueKey(index, item2 == null ? void 0 : item2.id)}` : "";
   const oneBasedIndex = index + 1;
@@ -1347,7 +1352,8 @@ function BreadcrumbItemComponent({
       svg: homeIconProps == null ? void 0 : homeIconProps.svg,
       className: clsx(
         semanticClassNames.animatedHomeIcon,
-        styles.homeIcon
+        styles.homeIcon,
+        homeIconProps == null ? void 0 : homeIconProps.className
       )
     }
   ) }) : null;
@@ -1371,14 +1377,18 @@ function BreadcrumbItemComponent({
           {
             ...href && { href },
             "aria-current": isCurrent ? "page" : void 0,
-            className: clsx(semanticClassNames.itemLabel, styles.label),
+            className: clsx(
+              semanticClassNames.itemLabel,
+              styles.label,
+              (_c = elementProps == null ? void 0 : elementProps.item) == null ? void 0 : _c.className
+            ),
             children: [
               homeIcon2,
               itemContent
             ]
           }
         ),
-        !isCurrent && /* @__PURE__ */ jsx(Separator, {})
+        !isCurrent && /* @__PURE__ */ jsx(Separator, { className: (_d = elementProps == null ? void 0 : elementProps.separator) == null ? void 0 : _d.className })
       ]
     }
   );
@@ -1503,7 +1513,6 @@ function Breadcrumbs2({
   items: itemsFromProps
 }) {
   const rootRef = useRef(null);
-  const iconProps = elementProps == null ? void 0 : elementProps.animatedHomeIcon;
   const generatedItems = useBreadcrumbItems();
   const items = itemsFromProps ?? generatedItems;
   const collapsedRange = useCollapsedRange(rootRef, items.length);
@@ -1532,8 +1541,8 @@ function Breadcrumbs2({
             index,
             isCurrent: index === items.length - 1,
             isHomepageItem: index === 0,
-            homeIconProps: iconProps,
-            collapsedRange
+            collapsedRange,
+            elementProps
           },
           uniqueKey(index, item2.id)
         )) }),

package/dist/site/components/Breadcrumbs/types.d.ts

@@ -1,16 +1,19 @@
-import { A11y, Direction, Link as LinkType, VectorArt } from '@wix/editor-react-types';
+import { A11y, Direction, Link as LinkType } from '@wix/editor-react-types';
 import { SdkFunctionMouseHoverProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { AnimatedIconElementProps } from '../Button/Button.types';
 export interface BreadcrumbItem {
     id?: string;
     label: string;
     link?: LinkType | string;
 }
-export interface HomeIconElementProps {
-    svg?: VectorArt;
-    duration?: number;
-}
 export interface ElementProps {
-    animatedHomeIcon?: HomeIconElementProps;
+    animatedHomeIcon?: AnimatedIconElementProps;
+    item?: {
+        className?: string;
+    };
+    separator?: {
+        className?: string;
+    };
 }
 export interface BreadcrumbsProps extends SdkFunctionMouseHoverProps {
     /** DOM `id` on the root `<nav>`. */
@@ -35,6 +38,6 @@ export interface BreadcrumbItemProps {
     index?: number;
     isCurrent?: boolean;
     isHomepageItem?: boolean;
-    homeIconProps?: HomeIconElementProps;
     collapsedRange?: CollapsedRange | null;
+    elementProps?: ElementProps;
 }

package/dist/site/components/Button/Button.types.d.ts

@@ -44,8 +44,13 @@ export interface AnimatedIconElementProps {
     svg?: VectorArt;
     duration?: number;
     trigger?: TriggerType;
+    className?: string;
+}
+export interface LabelElementProps {
+    className?: string;
 }
 export interface ElementProps {
+    label?: LabelElementProps;
     animatedIcon?: AnimatedIconElementProps;
 }
 export type ButtonProps = {

package/dist/site/components/Checkbox/Checkbox.types.d.ts

@@ -15,6 +15,14 @@ export type CheckboxProps = SdkFunctionFocusableProps & FieldValidationProps<boo
     onChange?: (checked: boolean) => void;
     direction?: Direction;
     a11y?: A11y;
+    elementProps?: {
+        indicator?: {
+            className?: string;
+        };
+        label?: {
+            className?: string;
+        };
+    };
     wix?: {
         presetsWrapperProps?: Record<string, unknown>;
     };