@wix/editor-react-components 1.2452.0 → 1.2453.0

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

@@ -36,6 +36,7 @@ const styles = {
 const noop = () => {
 };
 function CheckboxComponent(props) {
+  var _a, _b;
   const environmentService = useService(EnvironmentDefinition);
   const {
     id,
@@ -56,7 +57,8 @@ function CheckboxComponent(props) {
     showValidityIndication,
     onValidate,
     onValidityChange,
-    wix
+    wix,
+    elementProps
   } = props;
   const isControlled = props.checked !== void 0;
   const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
@@ -135,7 +137,8 @@ function CheckboxComponent(props) {
                       className: clsx(
                         styles.indicator,
                         selectors.indicator,
-                        formatClassNames(semanticClassNames.indicator)
+                        formatClassNames(semanticClassNames.indicator),
+                        (_a = elementProps == null ? void 0 : elementProps.indicator) == null ? void 0 : _a.className
                       ),
                       "data-testid": TestIds.indicator,
                       children: /* @__PURE__ */ jsx(
@@ -158,7 +161,8 @@ function CheckboxComponent(props) {
                   className: clsx(
                     styles.label,
                     selectors.label,
-                    formatClassNames(semanticClassNames.label)
+                    formatClassNames(semanticClassNames.label),
+                    (_b = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _b.className
                   ),
                   "data-testid": TestIds.label,
                   children: [

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

@@ -3,6 +3,17 @@ import { SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionC
 import { FieldValidationProps } from '../../../utils/validation/types';
 import { CheckboxGroupOption } from './constants';
 export type { CheckboxGroupOption } from './constants';
+export type CheckboxGroupElementProps = {
+    indicator?: {
+        className?: string;
+    };
+    optionLabel?: {
+        className?: string;
+    };
+    groupLabel?: {
+        className?: string;
+    };
+};
 export type CheckboxGroupProps = SdkFunctionFocusableProps & FieldValidationProps<Array<string>> & {
     id: string;
     className: string;
@@ -19,6 +30,7 @@ export type CheckboxGroupProps = SdkFunctionFocusableProps & FieldValidationProp
     disabled?: boolean;
     direction?: Direction;
     a11y?: Pick<A11y, 'ariaLabel'>;
+    elementProps?: CheckboxGroupElementProps;
     wix?: {
         presetsWrapperProps?: Record<string, unknown>;
     };

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

@@ -53,6 +53,7 @@ const CheckmarkIcon = () => /* @__PURE__ */ jsx(
   }
 );
 function CheckboxGroupComponent(props) {
+  var _a, _b;
   const environmentService = useService(EnvironmentDefinition);
   const {
     id,
@@ -68,6 +69,7 @@ function CheckboxGroupComponent(props) {
     value,
     direction,
     a11y,
+    elementProps,
     onChange = noop,
     onFocus = noop,
     onBlur = noop,
@@ -77,6 +79,7 @@ function CheckboxGroupComponent(props) {
     onValidityChange,
     wix
   } = props;
+  const optionLabelClassName = (_a = elementProps == null ? void 0 : elementProps.optionLabel) == null ? void 0 : _a.className;
   const sourceOptions = Array.isArray(props.options) && props.options.length ? props.options : defaultOptions;
   const options = sourceOptions.filter((option2) => !!option2).map((option2) => ({
     ...option2,
@@ -139,34 +142,38 @@ function CheckboxGroupComponent(props) {
     name,
     parent,
     optionDisabled
-  }) => /* @__PURE__ */ jsx(
-    Checkbox.Root,
-    {
-      name,
-      parent,
-      readOnly,
-      disabled: disabled || !!optionDisabled,
-      className: clsx(
-        styles.control,
-        formatClassNames(semanticClassNames.control)
-      ),
-      "data-testid": TestIds.control,
-      children: /* @__PURE__ */ jsx(
-        Checkbox.Indicator,
-        {
-          keepMounted: true,
-          className: clsx(
-            styles.indicator,
-            selectors.indicator,
-            formatClassNames(semanticClassNames.indicator)
-          ),
-          "data-testid": TestIds.indicator,
-          children: /* @__PURE__ */ jsx(CheckmarkIcon, {})
-        }
-      )
-    },
-    key
-  );
+  }) => {
+    var _a2;
+    return /* @__PURE__ */ jsx(
+      Checkbox.Root,
+      {
+        name,
+        parent,
+        readOnly,
+        disabled: disabled || !!optionDisabled,
+        className: clsx(
+          styles.control,
+          formatClassNames(semanticClassNames.control)
+        ),
+        "data-testid": TestIds.control,
+        children: /* @__PURE__ */ jsx(
+          Checkbox.Indicator,
+          {
+            keepMounted: true,
+            className: clsx(
+              styles.indicator,
+              selectors.indicator,
+              formatClassNames(semanticClassNames.indicator),
+              (_a2 = elementProps == null ? void 0 : elementProps.indicator) == null ? void 0 : _a2.className
+            ),
+            "data-testid": TestIds.indicator,
+            children: /* @__PURE__ */ jsx(CheckmarkIcon, {})
+          }
+        )
+      },
+      key
+    );
+  };
   return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -184,7 +191,8 @@ function CheckboxGroupComponent(props) {
               className: clsx(
                 styles.groupLabel,
                 selectors.groupLabel,
-                formatClassNames(semanticClassNames.groupLabel)
+                formatClassNames(semanticClassNames.groupLabel),
+                (_b = elementProps == null ? void 0 : elementProps.groupLabel) == null ? void 0 : _b.className
               ),
               "data-testid": TestIds.legend,
               children: [
@@ -247,7 +255,8 @@ function CheckboxGroupComponent(props) {
                         className: clsx(
                           styles.label,
                           selectors.label,
-                          formatClassNames(semanticClassNames.label)
+                          formatClassNames(semanticClassNames.label),
+                          optionLabelClassName
                         ),
                         children: selectAllLabel
                       }
@@ -274,7 +283,8 @@ function CheckboxGroupComponent(props) {
                         className: clsx(
                           styles.label,
                           selectors.label,
-                          formatClassNames(semanticClassNames.label)
+                          formatClassNames(semanticClassNames.label),
+                          optionLabelClassName
                         ),
                         "data-testid": TestIds.optionLabel,
                         children: option2.label

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

@@ -81,15 +81,16 @@ function ExpandControl({
 }) {
   const expandControlClassName = clsx(
     manifestClasses.expandControl,
-    styles["expand-control"]
+    styles["expand-control"],
+    buttonProps == null ? void 0 : buttonProps.className
   );
   switch (expandMode) {
     case ExpandModeValues.Expand:
       return /* @__PURE__ */ jsx(
         Button,
         {
-          className: expandControlClassName,
           ...buttonProps,
+          className: expandControlClassName,
           label: isExpanded ? readLessText : readMoreText,
           onClick: onExpandClick
         }
@@ -98,8 +99,8 @@ function ExpandControl({
       return /* @__PURE__ */ jsx(
         Button,
         {
-          className: expandControlClassName,
           ...buttonProps,
+          className: expandControlClassName,
           label: linkText,
           link
         }
@@ -129,7 +130,7 @@ function CollapsibleText(props) {
     onMouseIn = noop,
     onMouseOut = noop
   } = props;
-  const { direction: textDirection } = ((_a = props.elementProps) == null ? void 0 : _a.text) ?? {};
+  const { direction: textDirection, className: textClassNameProp } = ((_a = props.elementProps) == null ? void 0 : _a.text) ?? {};
   const { direction: buttonDirection } = ((_b = props.elementProps) == null ? void 0 : _b.button) ?? {};
   const textRef = useRef(null);
   const [isExpandRedundant, setIsExpandRedundant] = useState(false);
@@ -159,7 +160,8 @@ function CollapsibleText(props) {
       [styles.plain]: textFormat === "plain",
       [styles.withSafariListsFix]: isSafariWithBrokenLineClamp()
     },
-    !textDirection && directionStyles.fallbackDirection
+    !textDirection && directionStyles.fallbackDirection,
+    textClassNameProp
   );
   const onExpandClick = () => {
     setIsExpanded(!isExpanded);

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

@@ -25,6 +25,7 @@ export type CollapsibleTextProps = SdkFunctionClickableProps & SdkFunctionMouseH
     /** Props forwarded to nested elements. `text.direction` sets writing direction on the text wrapper; `button` is the prop bag for the internal Button slot. */
     elementProps: {
         text: {
+            className?: string;
             direction: Direction;
         };
         button: Partial<ButtonProps> & {

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

@@ -20,6 +20,32 @@ export type UnavailableDateRange = {
     from?: string;
     to?: string;
 };
+export type DatePickerElementProps = {
+    label?: {
+        className?: string;
+    };
+    description?: {
+        className?: string;
+    };
+    dateInput?: {
+        className?: string;
+    };
+    calendarButton?: {
+        className?: string;
+    };
+    popover?: {
+        className?: string;
+    };
+    calendar?: {
+        className?: string;
+    };
+    calendarDay?: {
+        className?: string;
+    };
+    today?: {
+        className?: string;
+    };
+};
 export type DatePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & FieldValidationProps<string> & {
     /** Fires with the selected ISO date string (range mode: the start date). */
     onChange?: (value: string) => void;
@@ -93,4 +119,6 @@ export type DatePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & Sdk
         /** Spread on the preset wrapper. */
         presetsWrapperProps?: Record<string, unknown>;
     };
+    /** Per-element className overrides injected by the platform. */
+    elementProps?: DatePickerElementProps;
 };

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

@@ -15,7 +15,7 @@ import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { E as EMPTY_VALUE, T as TestIds, s as selectors, D as DesignStates, A as ARIA_LABEL_NAMESPACE, d as defaultValues, S as SelectionModeValues, G as GranularityValues, V as VALUE_MISSING_MESSAGE, a as AriaLabels } from "../chunks/constants34.js";
+import { E as EMPTY_VALUE, T as TestIds, D as DesignStates, s as selectors, A as ARIA_LABEL_NAMESPACE, d as defaultValues, S as SelectionModeValues, G as GranularityValues, V as VALUE_MISSING_MESSAGE, a as AriaLabels } from "../chunks/constants34.js";
 import { R as RequiredIndicator, u as useValidatedField } from "../chunks/RequiredIndicator.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
@@ -4396,101 +4396,132 @@ const useUnavailableDates = (unavailableDates) => {
   return useMemo(() => buildIsDateUnavailable(unavailableDates), [key]);
 };
 const renderSegments = (segment2) => /* @__PURE__ */ jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { segment: segment2, className: styles.segment });
-const groupClassName = ({
-  isHovered,
-  isFocusWithin,
-  isDisabled
-}) => clsx(
-  styles.group,
-  selectors.group,
-  isHovered && DesignStates.dateInput.hover.className,
-  isFocusWithin && DesignStates.dateInput.focus.className,
-  isDisabled && DesignStates.dateInput.disabled.className
-);
-const calendarButtonClassName = ({ isHovered, isPressed }) => clsx(
-  styles.calendarButton,
-  selectors.calendarButton,
-  isHovered && DesignStates.calendarButton.hover.className,
-  isPressed && DesignStates.calendarButton.selected.className
-);
 const DatePickerField = ({
   isRange,
   clearButton: clearButton2,
-  calendarButtonLabel
-}) => /* @__PURE__ */ jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: groupClassName, "data-testid": TestIds.group, children: [
-  isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      $40825cdb76e74f70$export$7edc06cf1783b30f,
-      {
-        slot: "start",
-        className: styles.field,
-        "data-testid": TestIds.field,
-        children: renderSegments
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.rangeSeparator, children: "–" }),
+  calendarButtonLabel,
+  elementProps
+}) => {
+  const groupClassName = ({
+    isHovered,
+    isFocusWithin,
+    isDisabled
+  }) => {
+    var _a;
+    return clsx(
+      styles.group,
+      selectors.group,
+      isHovered && DesignStates.dateInput.hover.className,
+      isFocusWithin && DesignStates.dateInput.focus.className,
+      isDisabled && DesignStates.dateInput.disabled.className,
+      (_a = elementProps == null ? void 0 : elementProps.dateInput) == null ? void 0 : _a.className
+    );
+  };
+  const calendarButtonClassName = ({ isHovered, isPressed }) => {
+    var _a;
+    return clsx(
+      styles.calendarButton,
+      selectors.calendarButton,
+      isHovered && DesignStates.calendarButton.hover.className,
+      isPressed && DesignStates.calendarButton.selected.className,
+      (_a = elementProps == null ? void 0 : elementProps.calendarButton) == null ? void 0 : _a.className
+    );
+  };
+  return /* @__PURE__ */ jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: groupClassName, "data-testid": TestIds.group, children: [
+    isRange ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        $40825cdb76e74f70$export$7edc06cf1783b30f,
+        {
+          slot: "start",
+          className: styles.field,
+          "data-testid": TestIds.field,
+          children: renderSegments
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.rangeSeparator, children: "–" }),
+      /* @__PURE__ */ jsx(
+        $40825cdb76e74f70$export$7edc06cf1783b30f,
+        {
+          slot: "end",
+          className: styles.field,
+          "data-testid": TestIds.endField,
+          children: renderSegments
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments }),
+    clearButton2,
     /* @__PURE__ */ jsx(
-      $40825cdb76e74f70$export$7edc06cf1783b30f,
+      $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
       {
-        slot: "end",
-        className: styles.field,
-        "data-testid": TestIds.endField,
-        children: renderSegments
+        className: calendarButtonClassName,
+        "data-testid": TestIds.calendarButton,
+        "aria-label": calendarButtonLabel,
+        children: /* @__PURE__ */ jsx(Date_default, { "aria-hidden": true, className: styles.calendarIcon })
       }
     )
-  ] }) : /* @__PURE__ */ jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: styles.field, "data-testid": TestIds.field, children: renderSegments }),
-  clearButton2,
-  /* @__PURE__ */ jsx(
-    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-    {
-      className: calendarButtonClassName,
-      "data-testid": TestIds.calendarButton,
-      "aria-label": calendarButtonLabel,
-      children: /* @__PURE__ */ jsx(Date_default, { "aria-hidden": true, className: styles.calendarIcon })
-    }
-  )
-] });
-const dayClassName = ({
-  isHovered,
-  isSelected,
-  isDisabled
-}) => clsx(
-  styles.calendarCell,
-  selectors.day,
-  isHovered && DesignStates.calendarDay.hover.className,
-  isSelected && DesignStates.calendarDay.selected.className,
-  isDisabled && DesignStates.calendarDay.disabled.className
-);
-const calendarBody = /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsxs("header", { className: styles.calendarHeader, children: [
-    /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { slot: "previous", className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronLeft_default, { "aria-hidden": true, className: styles.navIcon }) }),
-    /* @__PURE__ */ jsx($5cb03073d3f54797$export$a8a3e93435678ff9, { className: styles.calendarHeading }),
-    /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { slot: "next", className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronRight_default, { "aria-hidden": true, className: styles.navIcon }) })
-  ] }),
-  /* @__PURE__ */ jsx($dfd62f934fc76fed$export$5bd780d491cfc46c, { className: styles.calendarGrid, children: (date) => /* @__PURE__ */ jsx($dfd62f934fc76fed$export$5d847498420df57b, { date, className: dayClassName }) })
-] });
-const DatePickerCalendar = ({ isRange }) => {
+  ] });
+};
+const DatePickerCalendar = ({
+  isRange,
+  elementProps
+}) => {
+  var _a, _b;
+  const calendarClassName = clsx(
+    styles.calendar,
+    selectors.calendar,
+    (_a = elementProps == null ? void 0 : elementProps.calendar) == null ? void 0 : _a.className
+  );
+  const dayClassName = ({ isHovered, isSelected, isDisabled, isToday }) => {
+    var _a2, _b2;
+    return clsx(
+      styles.calendarCell,
+      selectors.day,
+      isHovered && DesignStates.calendarDay.hover.className,
+      isSelected && DesignStates.calendarDay.selected.className,
+      isDisabled && DesignStates.calendarDay.disabled.className,
+      (_a2 = elementProps == null ? void 0 : elementProps.calendarDay) == null ? void 0 : _a2.className,
+      isToday && ((_b2 = elementProps == null ? void 0 : elementProps.today) == null ? void 0 : _b2.className)
+    );
+  };
+  const calendarBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.calendarHeader, children: [
+      /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { slot: "previous", className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronLeft_default, { "aria-hidden": true, className: styles.navIcon }) }),
+      /* @__PURE__ */ jsx($5cb03073d3f54797$export$a8a3e93435678ff9, { className: styles.calendarHeading }),
+      /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { slot: "next", className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronRight_default, { "aria-hidden": true, className: styles.navIcon }) })
+    ] }),
+    /* @__PURE__ */ jsx($dfd62f934fc76fed$export$5bd780d491cfc46c, { className: styles.calendarGrid, children: (date) => /* @__PURE__ */ jsx($dfd62f934fc76fed$export$5d847498420df57b, { date, className: dayClassName }) })
+  ] });
   return (
     // Portals to <body> (react-aria default) so the calendar escapes the page
     // section's stacking context — otherwise the section below paints over the
     // part of the popover that overflows past it. The theme CSS vars are applied
     // to `.popover` directly (see defaults.css) since it no longer inherits them
     // from the root; `dir`/locale still flow through the React portal.
-    /* @__PURE__ */ jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { className: clsx(styles.popover, selectors.popover), children: /* @__PURE__ */ jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: styles.dialog, children: isRange ? /* @__PURE__ */ jsx(
-      $dfd62f934fc76fed$export$a4f5c8b89d277a8d,
-      {
-        className: clsx(styles.calendar, selectors.calendar),
-        "data-testid": TestIds.calendar,
-        children: calendarBody
-      }
-    ) : /* @__PURE__ */ jsx(
-      $dfd62f934fc76fed$export$e1aef45b828286de,
+    /* @__PURE__ */ jsx(
+      $07b14b47974efb58$export$5b6b19405a83ff9d,
       {
-        className: clsx(styles.calendar, selectors.calendar),
-        "data-testid": TestIds.calendar,
-        children: calendarBody
+        className: clsx(
+          styles.popover,
+          selectors.popover,
+          (_b = elementProps == null ? void 0 : elementProps.popover) == null ? void 0 : _b.className
+        ),
+        children: /* @__PURE__ */ jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: styles.dialog, children: isRange ? /* @__PURE__ */ jsx(
+          $dfd62f934fc76fed$export$a4f5c8b89d277a8d,
+          {
+            className: calendarClassName,
+            "data-testid": TestIds.calendar,
+            children: calendarBody
+          }
+        ) : /* @__PURE__ */ jsx(
+          $dfd62f934fc76fed$export$e1aef45b828286de,
+          {
+            className: calendarClassName,
+            "data-testid": TestIds.calendar,
+            children: calendarBody
+          }
+        ) })
       }
-    ) }) })
+    )
   );
 };
 const DatePickerTooltip = ({
@@ -4520,13 +4551,14 @@ const DatePickerLabel = ({
   label: label2,
   tooltip: tooltip2,
   required,
-  portalContainer
+  portalContainer,
+  className
 }) => {
   if (!label2 && !tooltip2) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
-    label2 ? /* @__PURE__ */ jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: clsx(styles.label, selectors.label), children: [
+    label2 ? /* @__PURE__ */ jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: clsx(styles.label, selectors.label, className), children: [
       label2,
       required && /* @__PURE__ */ jsx(
         RequiredIndicator,
@@ -4542,6 +4574,7 @@ const DatePickerLabel = ({
 const noop = () => {
 };
 function DatePicker2(props) {
+  var _a, _b;
   const environmentService = useService(EnvironmentDefinition);
   const { translate } = useService(TranslationsDefinition);
   const translateAria = translate(ARIA_LABEL_NAMESPACE);
@@ -4569,7 +4602,8 @@ function DatePicker2(props) {
     showValidityIndication,
     onValidate,
     onValidityChange,
-    wix
+    wix,
+    elementProps
   } = props;
   const label2 = readString(props.label);
   const description2 = readString(props.description);
@@ -4648,7 +4682,8 @@ function DatePicker2(props) {
         label: label2,
         tooltip: tooltip2,
         required: isRequired,
-        portalContainer
+        portalContainer,
+        className: (_a = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _a.className
       }
     ),
     /* @__PURE__ */ jsx(
@@ -4656,14 +4691,19 @@ function DatePicker2(props) {
       {
         isRange,
         clearButton: clearButton2,
-        calendarButtonLabel: t(AriaLabels.openCalendar)
+        calendarButtonLabel: t(AriaLabels.openCalendar),
+        elementProps
       }
     ),
     description2 ? /* @__PURE__ */ jsx(
       $514c0188e459b4c0$export$5f1af8db9871e1d6,
       {
         slot: "description",
-        className: clsx(styles.description, selectors.description),
+        className: clsx(
+          styles.description,
+          selectors.description,
+          (_b = elementProps == null ? void 0 : elementProps.description) == null ? void 0 : _b.className
+        ),
         children: description2
       }
     ) : null,
@@ -4675,7 +4715,7 @@ function DatePicker2(props) {
         children: validity.validationMessage
       }
     ) : null,
-    /* @__PURE__ */ jsx(DatePickerCalendar, { isRange })
+    /* @__PURE__ */ jsx(DatePickerCalendar, { isRange, elementProps })
   ] });
   const sharedProps = {
     granularity,

package/dist/site/components/DatePicker/components/DatePickerCalendar.d.ts

@@ -1,4 +1,6 @@
 import { default as React } from 'react';
-export declare const DatePickerCalendar: ({ isRange }: {
+import { DatePickerElementProps } from '../DatePicker.types';
+export declare const DatePickerCalendar: ({ isRange, elementProps, }: {
     isRange: boolean;
+    elementProps?: DatePickerElementProps;
 }) => React.JSX.Element;

package/dist/site/components/DatePicker/components/DatePickerField.d.ts

@@ -1,6 +1,14 @@
 import { default as React } from 'react';
-export declare const DatePickerField: ({ isRange, clearButton, calendarButtonLabel, }: {
+export declare const DatePickerField: ({ isRange, clearButton, calendarButtonLabel, elementProps, }: {
     isRange: boolean;
     clearButton: React.ReactNode;
     calendarButtonLabel: string;
+    elementProps?: {
+        dateInput?: {
+            className?: string;
+        };
+        calendarButton?: {
+            className?: string;
+        };
+    };
 }) => React.JSX.Element;

package/dist/site/components/DatePicker/components/DatePickerLabel.d.ts

@@ -1,7 +1,8 @@
 import { default as React } from 'react';
-export declare const DatePickerLabel: ({ label, tooltip, required, portalContainer, }: {
+export declare const DatePickerLabel: ({ label, tooltip, required, portalContainer, className, }: {
     label: string;
     tooltip: string;
     required: boolean;
     portalContainer: HTMLElement | null;
+    className?: string;
 }) => React.JSX.Element | null;

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

@@ -17,6 +17,29 @@ export type DropdownValueItem = {
 export type DropdownValue = string | Array<string>;
 /** Match rule for searchable mode; defaults to case-insensitive "contains". */
 export type DropdownFilter = (item: DropdownOption, query: string) => boolean;
+export type DropdownElementProps = {
+    label?: {
+        className?: string;
+    };
+    input?: {
+        className?: string;
+    };
+    trigger?: {
+        className?: string;
+    };
+    clearButton?: {
+        className?: string;
+    };
+    list?: {
+        className?: string;
+    };
+    option?: {
+        className?: string;
+    };
+    chip?: {
+        className?: string;
+    };
+};
 export type DropdownProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & Omit<SdkFunctionInputableProps, 'onInput'> & FieldValidationProps<DropdownValue> & {
     /** DOM `id` on the root `.dropdown` wrapper. */
     id: string;
@@ -103,6 +126,8 @@ export type DropdownProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFu
     direction?: Direction;
     /** Accessibility attributes. `ariaLabel` labels the dropdown for assistive tech. */
     a11y?: A11y;
+    /** Per-element className overrides. Keys match the manifest element keys. */
+    elementProps?: DropdownElementProps;
     /** Platform-provided props. */
     wix?: {
         /** Spread on the preset wrapper. */