@wix/editor-react-components 1.2637.0 → 1.2639.0

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

@@ -4,7 +4,7 @@ import React__default, { useRef, useEffect, useMemo, useState, useCallback } fro
 import "react-dom";
 import { c as clsx } from "../chunks/clsx.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
-import { D as DesignStates, a as DEFAULT_PROPS } from "../chunks/constants42.js";
+import { D as DesignStates, a as DEFAULT_PROPS } from "../chunks/constants43.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { a as requireEq, d as requireIsFunction, r as requireIsObject, e as requireIsLength, c as require_isIndex, b as requireIsArrayLike } from "../chunks/isArrayLike.js";
 import { c as require_root, r as require_Symbol, a as require_baseGetTag, b as requireIsObjectLike, d as require_freeGlobal } from "../chunks/isObjectLike.js";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, a as ACTIONS, E as ELEMENTS, N as NativeStateType, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
-import { D as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants42.js";
+import { D as DesignStates, b as DISPLAY_NAMES, c as accordionManifestDefaults, C as CONTAINER_INITIAL_HEIGHT } from "../chunks/constants43.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";

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

@@ -6,7 +6,7 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import Image3 from "../Image3/component.js";
-import { A as ARIA_LABELS, s as selectors, d as dataDefaults } from "../chunks/constants41.js";
+import { A as ARIA_LABELS, s as selectors, d as dataDefaults } from "../chunks/constants42.js";
 import { c as commonjsGlobal } from "../chunks/_commonjsHelpers.js";
 import { x as $48a7d519b337145d$export$4eaf04e54aa8eed6, v as $fe16bffc7a557bf0$export$7f54fc3180508a52, S as $cbf007e418543821$export$b0d6fa1ab32e3295, r as $d447af545b77c9f1$export$f21a1ffae260145a, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, T as $cbf007e418543821$export$16a4697467175487, G as $0beb20c9744a2065$export$8467354a121f1b9f, J as $240e9101ba2842f5$export$7d15b64cf5a3a4c4, F as $8f5a2122b0992be3$export$8397ddfc504fdb9a, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, N as $1969ac565cfec8d0$export$de79e2c695e052f3, U as $8296dad1a4c5e0dc$export$8f71654801c2f7cd, d as $d1116acdf220c2da$export$4c014de7c8940b4c, e as $3274bf1495747a7b$export$5add1d006293d136, V as $240e9101ba2842f5$export$cb6e0bb50bc19463, c as $3e6197669829fe11$export$40bfa8c7b0832715, h as $01b77f81d0f07f68$export$75b6ee27786ba447, E as $e969f22b6713ca4a$export$ae780daf29e6d456, D as $0c4a58759813079a$export$4e328f61c538687f, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../chunks/Group.js";
 import { k as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7, c as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a, d as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../chunks/filterDOMProps.js";

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

@@ -1,6 +1,6 @@
 import { b as DISPLAY_GROUPS, N as NativeStateType, C as CSS_PROPERTIES, E as ELEMENTS, D as DATA, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
 import { c as manifestMouseHover, f as manifestMediaProgress, e as manifestPlayable } from "../chunks/manifestSdkMixins.js";
-import { D as DesignStates, a as DisplayNames, s as selectors, b as borderDefaultValue } from "../chunks/constants41.js";
+import { D as DesignStates, a as DisplayNames, s as selectors, b as borderDefaultValue } from "../chunks/constants42.js";
 import manifest$1 from "../Image3/manifest.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
-import { A as ARIA_LABEL_NAMESPACE } from "../chunks/constants34.js";
+import { A as ARIA_LABEL_NAMESPACE } from "../chunks/constants35.js";
 import { e as getTabIndexAttribute, f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 const root = "root__eLvEL";
 const styles = {

package/dist/site/components/BoxContainer/manifest.js

@@ -1,5 +1,5 @@
 import { a as ACTIONS, I as INTERACTIONS, D as DATA, c as ContainerType, A as Archetype, L as LAYOUT } from "../chunks/chunk-ZHYIPFVN.js";
-import { D as DisplayNames } from "../chunks/constants34.js";
+import { D as DisplayNames } from "../chunks/constants35.js";
 const manifest = {
   id: "1f0108be-06bb-4a81-9c55-a1cbd223926c",
   type: "wixEditorElements.BoxContainer",

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

@@ -6,7 +6,7 @@ import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLoc
 import { createPortal } from "react-dom";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
-import { s as semanticClassNames, D as DesignStates } from "../chunks/constants40.js";
+import { s as semanticClassNames, D as DesignStates } from "../chunks/constants41.js";
 import { A as AnimatedIcon } from "../chunks/AnimatedIcon.js";
 import { useService } from "@wix/services-manager-react";
 import { d as defineService } from "../chunks/index8.js";

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

@@ -1,7 +1,7 @@
 import { L as LAYOUT, a as ACTIONS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, E as ELEMENTS, N as NativeStateType, D as DATA, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
-import { D as DesignStates, a as DisplayNames, h as homepageModeValues, d as defaultStateValues, b as separatorValues, c as componentMetadata, s as semanticClassNames } from "../chunks/constants40.js";
+import { D as DesignStates, a as DisplayNames, h as homepageModeValues, d as defaultStateValues, b as separatorValues, c as componentMetadata, s as semanticClassNames } from "../chunks/constants41.js";
 import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: componentMetadata.id,

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

@@ -9,7 +9,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { d as defaultValues, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants39.js";
+import { d as defaultValues, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants40.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__0DpH8";
 const field = "field__R0D8f";

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

@@ -1,5 +1,5 @@
 import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
-import { D as DesignStates, b as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants39.js";
+import { D as DesignStates, b as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants40.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

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

@@ -9,7 +9,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants38.js";
+import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants39.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__raraS";
 const fieldset = "fieldset__pDERL";

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

@@ -1,5 +1,5 @@
 import { E as ELEMENTS, C as CSS_PROPERTIES, N as NativeStateType, b as DISPLAY_GROUPS, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
-import { D as DesignStates, c as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants38.js";
+import { D as DesignStates, c as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants39.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

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

@@ -9,7 +9,7 @@ import { e as getTabIndexAttribute } from "../chunks/a11y.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
-import { L as LINE_HEIGHT_ROUNDING_ERROR_TOLERANCE, F as FALLBACK_LINE_HEIGHT, m as manifestClasses, E as ExpandModeValues, T as TestIds, s as semanticClassNames } from "../chunks/constants37.js";
+import { L as LINE_HEIGHT_ROUNDING_ERROR_TOLERANCE, F as FALLBACK_LINE_HEIGHT, m as manifestClasses, E as ExpandModeValues, T as TestIds, s as semanticClassNames } from "../chunks/constants38.js";
 import { B as Button } from "../chunks/Button.js";
 const root = "root__kOEn9";
 const text = "text__rjuUh";

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

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, E as ELEMENTS, D as DATA, b as DISPLAY_GROUPS, L as LAYOUT, I as INTERACTIONS, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
-import { D as DisplayNames, d as defaultValues, m as manifestClasses } from "../chunks/constants37.js";
+import { D as DisplayNames, d as defaultValues, m as manifestClasses } from "../chunks/constants38.js";
 import { g as getSelector } from "../chunks/manifest.js";
 import { c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const manifest = {

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, 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/constants36.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/constants37.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";

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

@@ -1,5 +1,5 @@
 import { N as NativeStateType, b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
-import { D as DesignStates, P as PREVIEW_CALENDAR_OPEN, b as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants36.js";
+import { D as DesignStates, P as PREVIEW_CALENDAR_OPEN, b as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants37.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

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

@@ -11,7 +11,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { A as ALL_VALUE, s as selectors, a as semanticClassNames, T as TestIds, d as defaultValues, b as TriggerModeValues, c as ARIA_LABEL_NAMESPACE, e as AriaLabels, V as VALUE_MISSING_MESSAGE } from "../chunks/constants35.js";
+import { A as ALL_VALUE, s as selectors, a as semanticClassNames, T as TestIds, d as defaultValues, b as TriggerModeValues, c as ARIA_LABEL_NAMESPACE, e as AriaLabels, V as VALUE_MISSING_MESSAGE } from "../chunks/constants36.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";

package/dist/site/components/Dropdown/manifest.js

@@ -1,5 +1,5 @@
 import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, N as NativeStateType, E as ELEMENTS, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
-import { D as DesignStates, f as DisplayNames, d as defaultValues, F as FunctionalStateKeys, s as selectors } from "../chunks/constants35.js";
+import { D as DesignStates, f as DisplayNames, d as defaultValues, F as FunctionalStateKeys, s as selectors } from "../chunks/constants36.js";
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

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

@@ -9,7 +9,7 @@ import { useService } from "@wix/services-manager-react";
 import { d as defineStaticService } from "../chunks/staticService.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
-import { A as ARIA_LABEL_NAMESPACE } from "../chunks/constants34.js";
+import { A as ARIA_LABEL_NAMESPACE } from "../chunks/constants35.js";
 const isBrowser = () => typeof window !== "undefined";
 function useIFrame({
   reducer = () => ({}),

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

@@ -1,50 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import "../chunks/index12.js";
-import * as React from "react";
+import "react";
+import { T as Typography } from "../chunks/index14.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { d as defaultValues, m as manifestClasses } from "../chunks/constants33.js";
-const Typography_module = {
-  h1: "h1-go2_mI",
-  h2: "h2-dAyvwd",
-  h3: "h3-LClqyK",
-  h4: "h4-pzBHGr",
-  h5: "h5-HOx5Wp",
-  h6: "h6-zCNm1M",
-  p1: "p1-pY02jM",
-  p2: "p2-TsZIq5",
-  p3: "p3-N6QdAQ"
-};
-const variantToElementTagMap = {
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  h4: "h4",
-  h5: "h5",
-  h6: "h6",
-  p1: "p",
-  p2: "p",
-  p3: "p"
-};
-const Typography = /* @__PURE__ */ React.forwardRef(({ variant = "p2", render: renderProp, className, ...props }, ref) => {
-  const variantClass = Typography_module[variant];
-  if (renderProp) {
-    const { className: renderClassName, ...renderElementProps } = renderProp.props;
-    return /* @__PURE__ */ React.cloneElement(renderProp, {
-      ...renderElementProps,
-      ...props,
-      ref,
-      className: clsx(variantClass, renderClassName, className)
-    });
-  }
-  const Tag = variantToElementTagMap[variant];
-  return /* @__PURE__ */ jsx(Tag, {
-    ref,
-    className: clsx(variantClass, className),
-    ...props
-  });
-});
+import { d as defaultValues, m as manifestClasses } from "../chunks/constants34.js";
 const headingTextBlock = "headingTextBlock__UKpAZ";
 const heading = "heading__GFN0u";
 const title = "title__azLiO";

package/dist/site/components/HeadingTextBlock/css.css

@@ -1,3 +1,23 @@
+.headingTextBlock__UKpAZ {
+  display: var(--display);
+  --display: flex;
+  flex-direction: var(--parts-flex-direction, column);
+  row-gap: var(--parts-row-gap, 12px);
+  column-gap: var(--parts-column-gap, 12px);
+  margin: 0;
+  padding: 24px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+}
+
+.heading__GFN0u,
+.title__azLiO,
+.subtitle__PpUYb,
+.caption__2F5RC {
+  display: block;
+}
 .h1-go2_mI {
   font: var(--wst-heading-1-font);
   color: var(--wst-heading-1-color);
@@ -42,27 +62,6 @@
   font: var(--wst-paragraph-3-font);
   color: var(--wst-paragraph-3-color);
 }
-
-.headingTextBlock__UKpAZ {
-  display: var(--display);
-  --display: flex;
-  flex-direction: var(--parts-flex-direction, column);
-  row-gap: var(--parts-row-gap, 12px);
-  column-gap: var(--parts-column-gap, 12px);
-  margin: 0;
-  padding: 24px;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  overflow-wrap: break-word;
-}
-
-.heading__GFN0u,
-.title__azLiO,
-.subtitle__PpUYb,
-.caption__2F5RC {
-  display: block;
-}
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);
 }

package/dist/site/components/HeadingTextBlock/manifest.js

@@ -1,6 +1,6 @@
 import { C as CSS_PROPERTIES, L as LAYOUT, a as ACTIONS, b as DISPLAY_GROUPS, D as DATA, A as Archetype, E as ELEMENTS } from "../chunks/chunk-ZHYIPFVN.js";
 import { g as getSelector } from "../chunks/manifest.js";
-import { p as presets, D as DisplayNames, d as defaultValues, m as manifestClasses } from "../chunks/constants33.js";
+import { p as presets, D as DisplayNames, d as defaultValues, m as manifestClasses } from "../chunks/constants34.js";
 const ORIENTATION_PANEL_ID = "2a2f4252-217b-413a-8717-a1d0e1cc2470";
 const TEXT_CSS_PROPERTIES = {
   display: {

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

@@ -3,7 +3,7 @@ import { c as clsx } from "../chunks/clsx.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { d as defineService } from "../chunks/index8.js";
-import { T as TranslationKeys, D as DefaultTranslations, a as TRANSLATIONS_NAMESPACE } from "../chunks/constants32.js";
+import { T as TranslationKeys, D as DefaultTranslations, a as TRANSLATIONS_NAMESPACE } from "../chunks/constants33.js";
 const RendererConfigurationDefinition = defineService("@wix/viewer-service-renderer-configuration");
 const hipaaIcon = "hipaaIcon__VA3L3";
 const compliant = "compliant__1NZWT";

package/dist/site/components/HipaaIcon/manifest.js

@@ -1,5 +1,5 @@
 import { D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
-import { b as DisplayNames, H as HIPAA_SETTINGS_PANEL_ID } from "../chunks/constants32.js";
+import { b as DisplayNames, H as HIPAA_SETTINGS_PANEL_ID } from "../chunks/constants33.js";
 const manifest = {
   id: "c82c4153-edcc-4b6f-8c99-8d021e3bf5ab",
   type: "wixEditorElements.HipaaIcon",

package/dist/site/components/ImageReveal/ImageReveal.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ImageRevealProps } from './types';
+declare const ImageReveal: FC<ImageRevealProps>;
+export default ImageReveal;

package/dist/site/components/ImageReveal/component.d.ts

@@ -0,0 +1,2 @@
+import { default as ImageReveal } from './ImageReveal';
+export default ImageReveal;

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

@@ -0,0 +1,317 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import Image3 from "../Image3/component.js";
+import { c as clsx } from "../chunks/clsx.js";
+import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
+import "../chunks/index12.js";
+import { T as Typography } from "../chunks/index14.js";
+import { d as directionStyles } from "../chunks/direction.module.js";
+import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import { D as DEFAULT_SLIDER_POSITION, A as ARIA_LABELS, m as manifestClasses, C as CHEVRON_PATH, d as defaultValues, S as SLIDER_STEP } from "../chunks/constants32.js";
+const root = "root__hnYp0";
+const imageContainer = "imageContainer__sTfbZ";
+const before = "before__x99i-";
+const after = "after__EMOb9";
+const handle = "handle__I7Ck5";
+const dragControl = "dragControl__gopA-";
+const divider = "divider__6oJYS";
+const buttonGroup = "buttonGroup__0RZrR";
+const btn = "btn__uzPRE";
+const icon = "icon__eetK8";
+const iconFlipped = "iconFlipped__dXYVO";
+const labelBefore = "labelBefore__oqyAj";
+const labelAfter = "labelAfter__bwrPv";
+const labelBeforeVertical = "labelBeforeVertical__y6xqy";
+const labelAfterVertical = "labelAfterVertical__KD2TH";
+const styles = {
+  root,
+  imageContainer,
+  before,
+  after,
+  handle,
+  dragControl,
+  divider,
+  buttonGroup,
+  btn,
+  icon,
+  iconFlipped,
+  labelBefore,
+  labelAfter,
+  labelBeforeVertical,
+  labelAfterVertical
+};
+const ImageReveal = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    id,
+    className,
+    direction,
+    a11y,
+    beforeImage,
+    afterImage,
+    beforeLabel,
+    afterLabel,
+    labelPosition,
+    buttonsDisabled = false,
+    elementProps,
+    wix
+  } = props;
+  const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
+  const imageContainerRef = useRef(null);
+  const isDragging = useRef(false);
+  const [sliderPosition, setSliderPosition] = useState(DEFAULT_SLIDER_POSITION);
+  const updatePosition = (clientX) => {
+    var _a2;
+    const rect = (_a2 = imageContainerRef.current) == null ? void 0 : _a2.getBoundingClientRect();
+    if (!rect || rect.width === 0) return;
+    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+    setSliderPosition(x / rect.width * 100);
+  };
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      if (isDragging.current) updatePosition(e.clientX);
+    };
+    const onMouseUp = () => {
+      isDragging.current = false;
+    };
+    const onTouchMove = (e) => {
+      if (isDragging.current && e.touches[0])
+        updatePosition(e.touches[0].clientX);
+    };
+    const onTouchEnd = () => {
+      isDragging.current = false;
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("touchmove", onTouchMove, { passive: true });
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("touchcancel", onTouchEnd);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onTouchEnd);
+      document.removeEventListener("touchcancel", onTouchEnd);
+    };
+  }, []);
+  const handleDragStart = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.currentTarget.focus();
+    isDragging.current = true;
+    updatePosition(e.clientX);
+  };
+  const handleTouchStart = (e) => {
+    isDragging.current = true;
+    if (e.touches[0]) updatePosition(e.touches[0].clientX);
+  };
+  const handlePrev = (e) => {
+    e.stopPropagation();
+    setSliderPosition((position) => Math.max(0, position - SLIDER_STEP));
+  };
+  const handleNext = (e) => {
+    e.stopPropagation();
+    setSliderPosition((position) => Math.min(100, position + SLIDER_STEP));
+  };
+  const handleKeyDown = (event) => {
+    const changes = {
+      ArrowLeft: -1,
+      ArrowDown: -1,
+      ArrowRight: 1,
+      ArrowUp: 1,
+      PageDown: -SLIDER_STEP,
+      PageUp: SLIDER_STEP
+    };
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      setSliderPosition(event.key === "Home" ? 0 : 100);
+    } else if (changes[event.key] !== void 0) {
+      event.preventDefault();
+      setSliderPosition(
+        (position) => Math.max(0, Math.min(100, position + changes[event.key]))
+      );
+    }
+  };
+  const resolvedLabelPosition = labelPosition ?? defaultValues.labelPosition;
+  return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      dir: direction,
+      style: { "--slider-position": `${sliderPosition}%` },
+      className: clsx(
+        manifestClasses.root,
+        styles.root,
+        directionStyles.fallbackDirection,
+        className
+      ),
+      ...a11y && convertA11yKeysToHtmlFormat(a11y),
+      children: [
+        /* @__PURE__ */ jsxs("div", { ref: imageContainerRef, className: styles.imageContainer, children: [
+          beforeImage && /* @__PURE__ */ jsx(
+            Image3,
+            {
+              id: `${id}-before`,
+              className: styles.before,
+              image: beforeImage
+            }
+          ),
+          afterImage && /* @__PURE__ */ jsx(
+            Image3,
+            {
+              id: `${id}-after`,
+              className: styles.after,
+              image: afterImage
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles.handle, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.dragControl,
+                onMouseDown: handleDragStart,
+                onTouchStart: handleTouchStart,
+                onKeyDown: handleKeyDown,
+                tabIndex: 0,
+                role: "separator",
+                "aria-label": ARIA_LABELS.handle,
+                "aria-orientation": "vertical",
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": sliderPosition
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...elementProps == null ? void 0 : elementProps.imageRevealDivider,
+                className: clsx(
+                  manifestClasses.divider,
+                  styles.divider,
+                  (_a = elementProps == null ? void 0 : elementProps.imageRevealDivider) == null ? void 0 : _a.className
+                ),
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: styles.buttonGroup, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  ...elementProps == null ? void 0 : elementProps.imageRevealBtn,
+                  onMouseDown: (e) => e.stopPropagation(),
+                  disabled: buttonsDisabled || sliderPosition === 0,
+                  onClick: handlePrev,
+                  "aria-label": ARIA_LABELS.prevButton,
+                  className: clsx(
+                    manifestClasses.btn,
+                    styles.btn,
+                    (_b = elementProps == null ? void 0 : elementProps.imageRevealBtn) == null ? void 0 : _b.className
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      ...elementProps == null ? void 0 : elementProps.imageRevealArrowIcon,
+                      className: clsx(
+                        manifestClasses.arrowIcon,
+                        styles.icon,
+                        (_c = elementProps == null ? void 0 : elementProps.imageRevealArrowIcon) == null ? void 0 : _c.className
+                      ),
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true",
+                      focusable: "false",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: CHEVRON_PATH,
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  ...elementProps == null ? void 0 : elementProps.imageRevealBtn,
+                  onMouseDown: (e) => e.stopPropagation(),
+                  disabled: buttonsDisabled || sliderPosition === 100,
+                  onClick: handleNext,
+                  "aria-label": ARIA_LABELS.nextButton,
+                  className: clsx(
+                    manifestClasses.btn,
+                    styles.btn,
+                    (_d = elementProps == null ? void 0 : elementProps.imageRevealBtn) == null ? void 0 : _d.className
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      ...elementProps == null ? void 0 : elementProps.imageRevealArrowIcon,
+                      className: clsx(
+                        manifestClasses.arrowIcon,
+                        styles.icon,
+                        styles.iconFlipped,
+                        (_e = elementProps == null ? void 0 : elementProps.imageRevealArrowIcon) == null ? void 0 : _e.className
+                      ),
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true",
+                      focusable: "false",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: CHEVRON_PATH,
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            ...elementProps == null ? void 0 : elementProps.imageRevealLabelBefore,
+            variant: "p2",
+            className: clsx(
+              manifestClasses.labelBefore,
+              styles.labelBefore,
+              resolvedLabelPosition === "vertical" && styles.labelBeforeVertical,
+              (_f = elementProps == null ? void 0 : elementProps.imageRevealLabelBefore) == null ? void 0 : _f.className
+            ),
+            children: beforeLabel ?? defaultValues.beforeLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            ...elementProps == null ? void 0 : elementProps.imageRevealLabelAfter,
+            variant: "p2",
+            className: clsx(
+              manifestClasses.labelAfter,
+              styles.labelAfter,
+              resolvedLabelPosition === "vertical" && styles.labelAfterVertical,
+              (_g = elementProps == null ? void 0 : elementProps.imageRevealLabelAfter) == null ? void 0 : _g.className
+            ),
+            children: afterLabel ?? defaultValues.afterLabel
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  ImageReveal as default
+};