@wix/editor-react-components 1.2761.0 → 1.2763.0

package/dist/site/components/chunks/constants14.js

@@ -1,19 +1,23 @@
-import { S as SharedDisplayNames } from "./constants10.js";
+import { S as SharedDisplayNames } from "./constants9.js";
 const TestIds = {
   viewer: {
-    container: "TextEffectsLetterPress-container",
-    text: "TextEffectsLetterPress-text"
+    container: "TextEffectsGlitch-container",
+    text: "TextEffectsGlitch-text"
   }
 };
-const COMPONENT_ID = "9d2a5c8f-e4b1-4f6d-b7a3-8e1c9f5d2b4a";
-const TEXT_TWIST_PANEL_ID = "4f36b4fa-893a-4eb2-a1b3-7c82351f063b";
+const COMPONENT_ID = "1e3b6d9a-f5c2-4a8e-9c4b-2d7f8a1e5c3b";
+const TEXT_TWIST_PANEL_ID = "dde110d1-a3b1-4ba3-91d1-7c2face79c7b";
 const DisplayNames = {
   ...SharedDisplayNames,
   cssCustomProperties: {
-    shadow: "Shadow",
-    layerBlendMode: "Blend mode",
-    textEffectsColor1: "Color",
-    textEffectsOpacityColor1: "opacity"
+    textEffectsColor1: "Color 1",
+    textEffectsColor2: "Color 2",
+    textEffectsColor3: "Color 3",
+    layerAngle: "Angle",
+    layerDistance: "Space between layers",
+    shadowBlur: "Blur",
+    disableInnerAnimation: "Animation",
+    innerAnimationSpeed: "Speed"
   }
 };
 export {

package/dist/site/components/chunks/constants15.js

@@ -1,28 +1,31 @@
-import { S as SharedDisplayNames } from "./constants10.js";
+import { S as SharedDisplayNames } from "./constants9.js";
+const COMPONENT_ID = "d578a270-a696-4e0f-a876-bd47dc8c62b3";
+const TEXT_TWIST_PANEL_ID = "279c908d-b75f-4111-bbf1-7745ec173bc0";
 const TestIds = {
   viewer: {
-    container: "TextEffectsGlitch-container",
-    text: "TextEffectsGlitch-text"
+    container: "TextEffectsGlass-container",
+    text: "TextEffectsGlass-text"
   }
 };
-const COMPONENT_ID = "1e3b6d9a-f5c2-4a8e-9c4b-2d7f8a1e5c3b";
-const TEXT_TWIST_PANEL_ID = "dde110d1-a3b1-4ba3-91d1-7c2face79c7b";
+const blurConfig = {
+  start: 2,
+  end: 10,
+  step: 1
+};
 const DisplayNames = {
   ...SharedDisplayNames,
   cssCustomProperties: {
-    textEffectsColor1: "Color 1",
-    textEffectsColor2: "Color 2",
-    textEffectsColor3: "Color 3",
-    layerAngle: "Angle",
-    layerDistance: "Space between layers",
-    shadowBlur: "Blur",
-    disableInnerAnimation: "Animation",
-    innerAnimationSpeed: "Speed"
+    textColor: "Color",
+    stroke: "Color",
+    strokeWidth: "width",
+    shadowBlur: "Spread",
+    shadowColor: "Color"
   }
 };
 export {
   COMPONENT_ID as C,
   DisplayNames as D,
   TestIds as T,
-  TEXT_TWIST_PANEL_ID as a
+  TEXT_TWIST_PANEL_ID as a,
+  blurConfig as b
 };

package/dist/site/components/chunks/constants16.js

@@ -1,31 +1,26 @@
-import { S as SharedDisplayNames } from "./constants10.js";
-const COMPONENT_ID = "d578a270-a696-4e0f-a876-bd47dc8c62b3";
-const TEXT_TWIST_PANEL_ID = "279c908d-b75f-4111-bbf1-7745ec173bc0";
+import { S as SharedDisplayNames } from "./constants9.js";
 const TestIds = {
   viewer: {
-    container: "TextEffectsGlass-container",
-    text: "TextEffectsGlass-text"
+    container: "TextEffectsBauhaus-container",
+    text: "TextEffectsBauhaus-text"
   }
 };
-const blurConfig = {
-  start: 2,
-  end: 10,
-  step: 1
-};
+const COMPONENT_ID = "8c22adab-12f9-43ee-80c8-6f5dbe19eabe";
+const TEXT_TWIST_PANEL_ID = "cdacc489-4176-4558-97f3-0a23662a15ba";
 const DisplayNames = {
   ...SharedDisplayNames,
   cssCustomProperties: {
-    textColor: "Color",
-    stroke: "Color",
-    strokeWidth: "width",
-    shadowBlur: "Spread",
-    shadowColor: "Color"
+    bevelAngle: "Angle",
+    textEffectsColor1: "Color 1",
+    textEffectsColor2: "Color 2",
+    textEffectsColor3: "Color 3",
+    shadowDistance: "Distance",
+    layerBlendMode: "Blend mode"
   }
 };
 export {
   COMPONENT_ID as C,
   DisplayNames as D,
   TestIds as T,
-  TEXT_TWIST_PANEL_ID as a,
-  blurConfig as b
+  TEXT_TWIST_PANEL_ID as a
 };

package/dist/site/components/chunks/constants17.js

@@ -1,21 +1,23 @@
-import { S as SharedDisplayNames } from "./constants10.js";
+import { S as SharedDisplayNames } from "./constants9.js";
+const COMPONENT_ID = "90c63713-61c9-4284-8e13-a4a2f1b7559d";
+const TEXT_TWIST_PANEL_ID = "ba438bb1-6b58-427d-9c54-5516cb94840e";
 const TestIds = {
   viewer: {
-    container: "TextEffectsBauhaus-container",
-    text: "TextEffectsBauhaus-text"
+    container: "TextEffects3d-container",
+    text: "TextEffects3d-text"
   }
 };
-const COMPONENT_ID = "8c22adab-12f9-43ee-80c8-6f5dbe19eabe";
-const TEXT_TWIST_PANEL_ID = "cdacc489-4176-4558-97f3-0a23662a15ba";
 const DisplayNames = {
   ...SharedDisplayNames,
   cssCustomProperties: {
-    bevelAngle: "Angle",
-    textEffectsColor1: "Color 1",
-    textEffectsColor2: "Color 2",
-    textEffectsColor3: "Color 3",
-    shadowDistance: "Distance",
-    layerBlendMode: "Blend mode"
+    fillColor: "Color",
+    fillOpacity: "opacity",
+    textStroke: "Width",
+    textStrokeColor: "Color",
+    textStrokeOpacity: "opacity",
+    textShadow1: "Shadow 1",
+    textShadow2: "Shadow 2",
+    textShadow3: "Shadow 3"
   }
 };
 export {

package/dist/site/components/chunks/constants18.js

@@ -1,28 +1,103 @@
-import { S as SharedDisplayNames } from "./constants10.js";
-const COMPONENT_ID = "90c63713-61c9-4284-8e13-a4a2f1b7559d";
-const TEXT_TWIST_PANEL_ID = "ba438bb1-6b58-427d-9c54-5516cb94840e";
-const TestIds = {
-  viewer: {
-    container: "TextEffects3d-container",
-    text: "TextEffects3d-text"
+const DisplayNames = {
+  root: {
+    elementDisplayName: "Text Box",
+    data: {
+      value: "Value",
+      defaultValue: "Default text",
+      label: "Label",
+      tooltip: "Tooltip",
+      placeholder: "Placeholder",
+      required: "Required",
+      readOnly: "Read only",
+      disabled: "Disabled",
+      minLength: "Minimum characters",
+      maxLength: "Maximum characters",
+      description: "Helper text"
+    },
+    cssCustomProperties: {
+      gap: "Space between label and field",
+      labelAlignment: "Label alignment",
+      descriptionSpacing: "Space between field and helper text"
+    }
+  },
+  input: {
+    elementDisplayName: "Input",
+    cssCustomProperties: {
+      placeholderTextColor: "Placeholder text color",
+      borderColor: "Border color",
+      borderWidth: "Border width",
+      resize: "Resize"
+    },
+    options: {
+      resizeOff: "Off",
+      resizeVertical: "Vertical",
+      resizeBoth: "Both"
+    },
+    displayGroups: {
+      borderGroup: "Border"
+    }
+  },
+  label: {
+    elementDisplayName: "Label"
+  },
+  description: {
+    elementDisplayName: "Helper text"
   }
 };
-const DisplayNames = {
-  ...SharedDisplayNames,
-  cssCustomProperties: {
-    fillColor: "Color",
-    fillOpacity: "opacity",
-    textStroke: "Width",
-    textStrokeColor: "Color",
-    textStrokeOpacity: "opacity",
-    textShadow1: "Shadow 1",
-    textShadow2: "Shadow 2",
-    textShadow3: "Shadow 3"
+const DesignStates = {
+  input: {
+    hover: { displayName: "Hover", className: "textbox__input--hover" },
+    focus: { displayName: "Focus", className: "textbox__input--focus" },
+    disabled: {
+      displayName: "Disabled",
+      className: "textbox__input--disabled"
+    },
+    invalid: { displayName: "Error", className: "textbox__input--invalid" }
   }
 };
+const defaultValues = {
+  defaultValue: "",
+  label: "Label",
+  tooltip: "",
+  placeholder: "Enter your text here...",
+  description: "",
+  required: false,
+  readOnly: false,
+  disabled: false
+};
+const VALIDATION_MESSAGES = {
+  valueMissing: "This field is required",
+  tooShort: (minLength) => `Please use at least ${minLength} characters`,
+  tooLong: (maxLength) => `Please use no more than ${maxLength} characters`
+};
+const TestIds = {
+  root: "textbox-root",
+  input: "textbox-input",
+  label: "textbox-label",
+  requiredIndicator: "textbox-required-indicator",
+  tooltipButton: "textbox-tooltip-button",
+  description: "textbox-description",
+  errorMessage: "textbox-error-message"
+};
+const selectors = {
+  root: "textbox",
+  input: "textbox__input",
+  label: "textbox__label",
+  description: "textbox__description"
+};
+const semanticClassNames = {
+  input: "textbox__input",
+  label: "textbox__label",
+  requiredIndicator: "textbox__required-indicator",
+  description: "textbox__description",
+  errorMessage: "textbox__error-message"
+};
 export {
-  COMPONENT_ID as C,
-  DisplayNames as D,
+  DesignStates as D,
   TestIds as T,
-  TEXT_TWIST_PANEL_ID as a
+  VALIDATION_MESSAGES as V,
+  semanticClassNames as a,
+  DisplayNames as b,
+  defaultValues as d,
+  selectors as s
 };

package/dist/site/components/chunks/constants19.js

@@ -1,103 +1,61 @@
+const DEFAULT_ANIMATION_DURATION = 0.2;
+const AnimatedSvgIds = {
+  animatedSvg: "animatedSvg",
+  animatedTagPath: "animatedPath",
+  animateTagForward: "animateForward",
+  animateTagBackward: "animateBackward"
+};
+var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
+  AnimationDirection2["FORWARD"] = "Forward";
+  AnimationDirection2["BACKWARD"] = "Backward";
+  return AnimationDirection2;
+})(AnimationDirection || {});
+const AnimatedDataAttributes = {
+  [
+    "Forward"
+    /* FORWARD */
+  ]: "data-animated-end-path",
+  [
+    "Backward"
+    /* BACKWARD */
+  ]: "data-animated-start-path"
+};
+const TestIds = {
+  animatedSvg: "animated-svg",
+  animateTagForward: "animate-tag-forward",
+  animateTagBackward: "animate-tag-backward"
+};
+const DesignStates = {
+  root: {
+    hover: { displayName: "Hover", className: "animated-icon--hover" },
+    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
+    selected: { displayName: "Selected", className: "animated-icon--selected" }
+  }
+};
 const DisplayNames = {
   root: {
-    elementDisplayName: "Text Box",
+    elementDisplayName: "Animated Icon",
+    customActions: {
+      animatedIcon: {
+        displayName: "Icon"
+      }
+    },
     data: {
-      value: "Value",
-      defaultValue: "Default text",
-      label: "Label",
-      tooltip: "Tooltip",
-      placeholder: "Placeholder",
-      required: "Required",
-      readOnly: "Read only",
-      disabled: "Disabled",
-      minLength: "Minimum characters",
-      maxLength: "Maximum characters",
-      description: "Helper text"
+      duration: "Duration"
     },
     cssCustomProperties: {
-      gap: "Space between label and field",
-      labelAlignment: "Label alignment",
-      descriptionSpacing: "Space between field and helper text"
-    }
-  },
-  input: {
-    elementDisplayName: "Input",
-    cssCustomProperties: {
-      placeholderTextColor: "Placeholder text color",
-      borderColor: "Border color",
-      borderWidth: "Border width",
-      resize: "Resize"
-    },
-    options: {
-      resizeOff: "Off",
-      resizeVertical: "Vertical",
-      resizeBoth: "Both"
-    },
-    displayGroups: {
-      borderGroup: "Border"
+      size: "Size",
+      fill: "Color",
+      rotation: "Rotation"
     }
-  },
-  label: {
-    elementDisplayName: "Label"
-  },
-  description: {
-    elementDisplayName: "Helper text"
-  }
-};
-const DesignStates = {
-  input: {
-    hover: { displayName: "Hover", className: "textbox__input--hover" },
-    focus: { displayName: "Focus", className: "textbox__input--focus" },
-    disabled: {
-      displayName: "Disabled",
-      className: "textbox__input--disabled"
-    },
-    invalid: { displayName: "Error", className: "textbox__input--invalid" }
   }
 };
-const defaultValues = {
-  defaultValue: "",
-  label: "Label",
-  tooltip: "",
-  placeholder: "Enter your text here...",
-  description: "",
-  required: false,
-  readOnly: false,
-  disabled: false
-};
-const VALIDATION_MESSAGES = {
-  valueMissing: "This field is required",
-  tooShort: (minLength) => `Please use at least ${minLength} characters`,
-  tooLong: (maxLength) => `Please use no more than ${maxLength} characters`
-};
-const TestIds = {
-  root: "textbox-root",
-  input: "textbox-input",
-  label: "textbox-label",
-  requiredIndicator: "textbox-required-indicator",
-  tooltipButton: "textbox-tooltip-button",
-  description: "textbox-description",
-  errorMessage: "textbox-error-message"
-};
-const selectors = {
-  root: "textbox",
-  input: "textbox__input",
-  label: "textbox__label",
-  description: "textbox__description"
-};
-const semanticClassNames = {
-  input: "textbox__input",
-  label: "textbox__label",
-  requiredIndicator: "textbox__required-indicator",
-  description: "textbox__description",
-  errorMessage: "textbox__error-message"
-};
 export {
-  DesignStates as D,
+  AnimatedSvgIds as A,
+  DEFAULT_ANIMATION_DURATION as D,
   TestIds as T,
-  VALIDATION_MESSAGES as V,
-  semanticClassNames as a,
-  DisplayNames as b,
-  defaultValues as d,
-  selectors as s
+  AnimatedDataAttributes as a,
+  AnimationDirection as b,
+  DesignStates as c,
+  DisplayNames as d
 };

package/dist/site/components/chunks/constants2.js

@@ -1,52 +1,131 @@
-var ScrollSpeed = /* @__PURE__ */ ((ScrollSpeed2) => {
-  ScrollSpeed2["slow"] = "slow";
-  ScrollSpeed2["normal"] = "normal";
-  ScrollSpeed2["fast"] = "fast";
-  return ScrollSpeed2;
-})(ScrollSpeed || {});
-const ROOT_CLASS = "video-scrub";
-const DEFAULT_VIDEO_RATIO = 9 / 16;
-const SCROLL_VH_PER_SECOND = {
-  [ScrollSpeed.slow]: 30,
-  [ScrollSpeed.normal]: 20.8,
-  [ScrollSpeed.fast]: 12
-};
-const MIN_SCROLL_VH = 50;
-const MAX_SCROLL_VH = 1e3;
-const mp4 = (quality, width, height) => ({
-  quality,
-  width,
-  height,
-  types: [
-    {
-      format: "mp4",
-      uri: `video/11062b_953b517691e34052afc53ccacc33fc67/${quality}/mp4/file.mp4`
+const DisplayNames = {
+  root: {
+    elementDisplayName: "Time Picker",
+    data: {
+      value: "Selected time",
+      defaultValue: "Default time",
+      granularity: {
+        displayName: "Time precision",
+        options: {
+          hour: "Hours only",
+          minute: "Hours and minutes",
+          second: "Hours, minutes and seconds"
+        }
+      },
+      hourCycle: {
+        displayName: "Hour format",
+        options: {
+          auto: "Auto (locale)",
+          h12: "12-hour",
+          h24: "24-hour"
+        }
+      },
+      shouldForceLeadingZeros: "Always show leading zeros",
+      tooltip: "Tooltip",
+      label: "Label",
+      description: "Helper text",
+      minTime: "Earliest time (HH:MM)",
+      maxTime: "Latest time (HH:MM)",
+      required: "Required",
+      readOnly: "Read only",
+      disabled: "Disabled",
+      clearable: "Show clear button"
+    },
+    designStates: {
+      hover: "Hover",
+      focus: "Focus",
+      disabled: "Disabled"
+    },
+    elements: {
+      label: "Label",
+      timeInput: "Time input",
+      description: "Helper text",
+      segment: "Segment"
+    },
+    cssCustomProperties: {
+      labelSpacing: "Label spacing"
     }
-  ]
-});
-const DEFAULT_VIDEO = {
-  name: "Neutral Living Room",
-  uri: "",
-  duration: 12.5,
-  hasAudio: false,
-  sources: [
-    mp4("360p", 640, 360),
-    mp4("480p", 854, 480),
-    mp4("720p", 1280, 720),
-    mp4("1080p", 1920, 1080)
-  ],
-  poster: {
-    uri: "11062b_953b517691e34052afc53ccacc33fc67f000.jpg",
-    width: 2560,
-    height: 1440
   }
 };
+const defaultValues = {
+  granularity: "minute",
+  hourCycle: "auto",
+  shouldForceLeadingZeros: false,
+  tooltip: "",
+  label: "",
+  description: "",
+  required: false,
+  readOnly: false,
+  disabled: false,
+  clearable: false
+};
+var HourCycleValues = /* @__PURE__ */ ((HourCycleValues2) => {
+  HourCycleValues2["Auto"] = "auto";
+  HourCycleValues2["H12"] = "12";
+  HourCycleValues2["H24"] = "24";
+  return HourCycleValues2;
+})(HourCycleValues || {});
+const DesignStates = {
+  timeInput: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "timePicker__group--hover"
+    },
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "timePicker__group--focus"
+    },
+    disabled: {
+      displayName: DisplayNames.root.designStates.disabled,
+      className: "timePicker__group--disabled"
+    }
+  },
+  segment: {
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "timePicker__segment--focus"
+    }
+  }
+};
+const EMPTY_VALUE = "";
+const TRANSLATIONS_NAMESPACE = "timePicker";
+const TranslationKeys = {
+  ariaLabel: "timePicker_aria_label",
+  clearButton: "timePicker_clear_button"
+};
+const DefaultTranslations = {
+  ariaLabel: "Time picker",
+  clearButton: "Clear"
+};
+const TestIds = {
+  root: "timepicker-root",
+  group: "timepicker-group",
+  field: "timepicker-field",
+  clearButton: "timepicker-clear-button",
+  tooltipButton: "timepicker-tooltip-button",
+  errorMessage: "timepicker-error-message",
+  requiredIndicator: "timepicker-required-indicator"
+};
+const selectors = {
+  root: "timePicker",
+  label: "timePicker__label",
+  requiredIndicator: "timePicker__required-indicator",
+  group: "timePicker__group",
+  description: "timePicker__description",
+  segment: "timePicker__segment",
+  errorMessage: "timePicker__error-message"
+};
+const VALUE_MISSING_MESSAGE = "This field is required";
 export {
-  DEFAULT_VIDEO as D,
-  MAX_SCROLL_VH as M,
-  ROOT_CLASS as R,
-  ScrollSpeed as S,
-  SCROLL_VH_PER_SECOND as a,
-  MIN_SCROLL_VH as b,
-  DEFAULT_VIDEO_RATIO as c
+  DefaultTranslations as D,
+  EMPTY_VALUE as E,
+  HourCycleValues as H,
+  TestIds as T,
+  VALUE_MISSING_MESSAGE as V,
+  TRANSLATIONS_NAMESPACE as a,
+  TranslationKeys as b,
+  DisplayNames as c,
+  defaultValues as d,
+  DesignStates as e,
+  selectors as s
 };