@automattic/charts 1.4.3 → 1.5.1

package/dist/index.cjs

@@ -2112,20 +2112,94 @@ function useRender(params) {
   return useRenderElement(_nullishCoalesce(params.defaultTagName, () => ( "div")), params, params);
 }
 
-// ../../../node_modules/.pnpm/@wordpress+ui@0.11.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/text/text.mjs
-
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='4130d64bea']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "4130d64bea");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._83ed8a8da5dd50ea__text{margin:0}._14437cfb77831647__heading-2xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-2xl,32px);font-size:var(--wpds-typography-font-size-2xl,32px);line-height:var(--wpds-typography-line-height-2xl,40px)}._14437cfb77831647__heading-2xl,._3c78b7fa9b4072dd__heading-xl{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499)}._3c78b7fa9b4072dd__heading-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-md,24px)}.aa58f227716bcde2__heading-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);font-size:var(--wpds-typography-font-size-lg,15px)}.aa58f227716bcde2__heading-lg,.fc4da56d8dfe52c4__heading-md{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-sm,20px)}.fc4da56d8dfe52c4__heading-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);font-size:var(--wpds-typography-font-size-md,13px)}.a9b78c7c82e8dff7__heading-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-xs,11px);font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-xs,16px);text-transform:uppercase}._305ff559e52180d5__body-xl{--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-xl,32px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-xl,32px)}._305ff559e52180d5__body-xl,.ca1aa3fc2029e958__body-lg{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}.ca1aa3fc2029e958__body-lg{--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-lg,15px);line-height:var(--wpds-typography-line-height-md,24px)}._131101940be12424__body-md{--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-sm,20px)}._0e8d87a42c1f75fa__body-sm,._131101940be12424__body-md{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}._0e8d87a42c1f75fa__body-sm{--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-size:var(--wpds-typography-font-size-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}'));
-  document.head.appendChild(style);
+// ../../../node_modules/.pnpm/@wordpress+ui@0.13.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/text/text.mjs
+
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash2) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(
+    `style[${STYLE_HASH_ATTRIBUTE}]`
+  )) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash2) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash2, css3) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash2)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash2)) {
+    injectedStyles.add(hash2);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash2);
+  style.appendChild(targetDocument.createTextNode(css3));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash2);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(
+    targetDocument,
+    (_nullishCoalesce(runtime.documents.get(targetDocument), () => ( 0))) + 1
+  );
+  for (const [hash2, css3] of runtime.styles) {
+    injectStyle(targetDocument, hash2, css3);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash2, css3) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash2, css3);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash2, css3);
+  }
+}
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("0c8601dd83", '@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._83ed8a8da5dd50ea__text{margin:0}._14437cfb77831647__heading-2xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-2xl,32px);--_gcd-p-line-height:var(--wpds-typography-line-height-2xl,40px);font-size:var(--wpds-typography-font-size-2xl,32px);line-height:var(--wpds-typography-line-height-2xl,40px)}._14437cfb77831647__heading-2xl,._3c78b7fa9b4072dd__heading-xl{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499)}._3c78b7fa9b4072dd__heading-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-md,24px)}.aa58f227716bcde2__heading-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-lg,15px)}.aa58f227716bcde2__heading-lg,.fc4da56d8dfe52c4__heading-md{font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-sm,20px)}.fc4da56d8dfe52c4__heading-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px)}.a9b78c7c82e8dff7__heading-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-medium,499);--_gcd-p-font-size:var(--wpds-typography-font-size-xs,11px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-family:var(--wpds-typography-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-xs,11px);font-weight:var(--wpds-typography-font-weight-medium,499);line-height:var(--wpds-typography-line-height-xs,16px);text-transform:uppercase}._305ff559e52180d5__body-xl{--_gcd-heading-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-xl,20px);--_gcd-p-line-height:var(--wpds-typography-line-height-xl,32px);font-size:var(--wpds-typography-font-size-xl,20px);line-height:var(--wpds-typography-line-height-xl,32px)}._305ff559e52180d5__body-xl,.ca1aa3fc2029e958__body-lg{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}.ca1aa3fc2029e958__body-lg{--_gcd-heading-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-lg,15px);--_gcd-p-line-height:var(--wpds-typography-line-height-md,24px);font-size:var(--wpds-typography-font-size-lg,15px);line-height:var(--wpds-typography-line-height-md,24px)}._131101940be12424__body-md{--_gcd-heading-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-md,13px);--_gcd-p-line-height:var(--wpds-typography-line-height-sm,20px);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-sm,20px)}._0e8d87a42c1f75fa__body-sm,._131101940be12424__body-md{font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-typography-font-weight-regular,400)}._0e8d87a42c1f75fa__body-sm{--_gcd-heading-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-heading-font-weight:var(--wpds-typography-font-weight-regular,400);--_gcd-p-font-size:var(--wpds-typography-font-size-sm,12px);--_gcd-p-line-height:var(--wpds-typography-line-height-xs,16px);font-size:var(--wpds-typography-font-size-sm,12px);line-height:var(--wpds-typography-line-height-xs,16px)}}');
 }
 var style_default = { "text": "_83ed8a8da5dd50ea__text", "heading-2xl": "_14437cfb77831647__heading-2xl", "heading-xl": "_3c78b7fa9b4072dd__heading-xl", "heading-lg": "aa58f227716bcde2__heading-lg", "heading-md": "fc4da56d8dfe52c4__heading-md", "heading-sm": "a9b78c7c82e8dff7__heading-sm", "body-xl": "_305ff559e52180d5__body-xl", "body-lg": "ca1aa3fc2029e958__body-lg", "body-md": "_131101940be12424__body-md", "body-sm": "_0e8d87a42c1f75fa__body-sm" };
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='1fb29d3a3c']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "1fb29d3a3c");
-  style.appendChild(document.createTextNode("._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,#0000);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 #0000);color:var(--_gcd-input-color,var(--wpds-color-fg-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,#0000);border-color:var(--_gcd-input-border-color-disabled,#0000);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid #0000)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-fg-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-typography-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid #0000);transition:var(--_gcd-a-transition,none)}"));
-  document.head.appendChild(style);
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("1fb29d3a3c", "._6defc79820e382c6__button{box-sizing:var(--_gcd-button-box-sizing,border-box);font-family:var(--_gcd-button-font-family,inherit);font-size:var(--_gcd-button-font-size,inherit);font-weight:var(--_gcd-button-font-weight,inherit)}.d2cff2e5dea83bd1__input{box-sizing:var(--_gcd-input-box-sizing,border-box);font-family:var(--_gcd-input-font-family,inherit);font-size:var(--_gcd-input-font-size,inherit);font-weight:var(--_gcd-input-font-weight,inherit);margin:var(--_gcd-input-margin,0);&:is(textarea,[type=text],[type=password],[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){background-color:var(--_gcd-input-background-color,#0000);border:var(--_gcd-input-border,none);border-radius:var(--_gcd-input-border-radius,0);box-shadow:var(--_gcd-input-box-shadow,0 0 0 #0000);color:var(--_gcd-input-color,var(--wpds-color-fg-interactive-neutral,#1e1e1e));&:focus{border-color:var(--_gcd-input-border-color-focus,var(--wp-admin-theme-color));box-shadow:var(--_gcd-input-box-shadow-focus,none);outline:var(--_gcd-input-outline-focus,none)}&:disabled{background:var(--_gcd-input-background-disabled,#0000);border-color:var(--_gcd-input-border-color-disabled,#0000);box-shadow:var(--_gcd-input-box-shadow-disabled,none);color:var(--_gcd-input-color-disabled,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}&::placeholder{color:var(--_gcd-input-placeholder-color,var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d))}}&:is(textarea,[type=text],[type=password],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=search],[type=tel],[type=time],[type=url],[type=week]){line-height:var(--_gcd-input-line-height,inherit);min-height:var(--_gcd-input-min-height,auto);padding:var(--_gcd-input-padding,0)}}._547d86373d02e108__textarea{box-sizing:var(--_gcd-textarea-box-sizing,border-box);overflow:var(--_gcd-textarea-overflow,auto);resize:var(--_gcd-textarea-resize,block)}._8c15fd0ed9f28ba4__div{outline:var(--_gcd-div-outline,0 solid #0000)}p._43cec3e1eec1066d__p{font-size:var(--_gcd-p-font-size,13px);line-height:var(--_gcd-p-line-height,1.5);margin:var(--_gcd-p-margin,0)}:is(h1,h2,h3,h4,h5,h6).e97669c6d9a38497__heading{color:var(--_gcd-heading-color,var(--wpds-color-fg-content-neutral,#1e1e1e));font-size:var(--_gcd-heading-font-size,inherit);font-weight:var(--_gcd-heading-font-weight,var(--wpds-typography-font-weight-medium,499));margin:var(--_gcd-heading-margin,0)}._2c0831b0499dbd6e__a,._2c0831b0499dbd6e__a:is(:hover,:focus,:active){border-radius:var(--_gcd-a-border-radius,0);box-shadow:var(--_gcd-a-box-shadow,none);color:var(--_gcd-a-color,inherit);outline:var(--_gcd-a-outline,0 solid #0000);transition:var(--_gcd-a-transition,none)}");
 }
 var global_css_defense_default = { "button": "_6defc79820e382c6__button", "input": "d2cff2e5dea83bd1__input", "textarea": "_547d86373d02e108__textarea", "div": "_8c15fd0ed9f28ba4__div", "p": "_43cec3e1eec1066d__p", "heading": "e97669c6d9a38497__heading", "a": "_2c0831b0499dbd6e__a" };
 var Text = _react.forwardRef.call(void 0, function Text2({ variant = "body-md", render, className, ...props }, ref) {
@@ -2136,8 +2210,8 @@ var Text = _react.forwardRef.call(void 0, function Text2({ variant = "body-md",
     props: mergeProps(props, {
       className: _clsx2.default.call(void 0, 
         style_default.text,
-        variant.startsWith("heading-") && global_css_defense_default.heading,
-        variant.startsWith("body-") && global_css_defense_default.p,
+        global_css_defense_default.heading,
+        global_css_defense_default.p,
         style_default[variant],
         className
       )
@@ -2146,12 +2220,89 @@ var Text = _react.forwardRef.call(void 0, function Text2({ variant = "body-md",
   return element;
 });
 
-// ../../../node_modules/.pnpm/@wordpress+ui@0.11.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/stack/stack.mjs
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='b51ff41489']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "b51ff41489");
-  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._19ce0419607e1896__stack{display:flex}}"));
-  document.head.appendChild(style);
+// ../../../node_modules/.pnpm/@wordpress+ui@0.13.0_@types+react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@wordpress/ui/build-module/stack/stack.mjs
+var STYLE_HASH_ATTRIBUTE2 = "data-wp-hash";
+function getRuntime2() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument2(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash2(targetDocument, hash2) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(
+    `style[${STYLE_HASH_ATTRIBUTE2}]`
+  )) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE2) === hash2) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle2(targetDocument, hash2, css3) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime2();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash2)) {
+    return;
+  }
+  if (documentContainsStyleHash2(targetDocument, hash2)) {
+    injectedStyles.add(hash2);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE2, hash2);
+  style.appendChild(targetDocument.createTextNode(css3));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash2);
+}
+function registerDocument2(targetDocument) {
+  const runtime = getRuntime2();
+  runtime.documents.set(
+    targetDocument,
+    (_nullishCoalesce(runtime.documents.get(targetDocument), () => ( 0))) + 1
+  );
+  for (const [hash2, css3] of runtime.styles) {
+    injectStyle2(targetDocument, hash2, css3);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle2(hash2, css3) {
+  const runtime = getRuntime2();
+  runtime.styles.set(hash2, css3);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle2(targetDocument, hash2, css3);
+  }
+}
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle2("b51ff41489", "@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._19ce0419607e1896__stack{display:flex}}");
 }
 var style_default2 = { "stack": "_19ce0419607e1896__stack" };
 var gapTokens = {
@@ -3079,6 +3230,155 @@ function withResponsive(WrappedComponent) {
   };
 }
 
+// src/charts/private/x-zoom.tsx
+
+
+
+
+// src/charts/private/x-zoom.module.scss
+var x_zoom_module_default = {
+  "x-zoom__selection": "a8ccharts-KeNSrO",
+  "x-zoom__reset": "a8ccharts-gg6Kte",
+  "x-zoom__reset-icon": "a8ccharts-bQEoeo"
+};
+
+// src/charts/private/x-zoom.tsx
+
+var MIN_DRAG_PIXELS = 6;
+function useXZoom({
+  enabled,
+  chartRef,
+  userHandlers
+}) {
+  const [domain, setDomain] = _react.useState.call(void 0, null);
+  const [drag, setDrag] = _react.useState.call(void 0, null);
+  const reset = _react.useCallback.call(void 0, () => setDomain(null), []);
+  const onPointerDown = _react.useCallback.call(void 0, (params) => {
+    _optionalChain([userHandlers, 'optionalAccess', _140 => _140.onPointerDown, 'optionalCall', _141 => _141(params)]);
+    if (!enabled || !params.svgPoint) return;
+    setDrag({
+      a: params.svgPoint.x,
+      b: params.svgPoint.x
+    });
+  }, [enabled, userHandlers]);
+  const onPointerMove = _react.useCallback.call(void 0, (params) => {
+    _optionalChain([userHandlers, 'optionalAccess', _142 => _142.onPointerMove, 'optionalCall', _143 => _143(params)]);
+    if (!enabled || !params.svgPoint) return;
+    setDrag((current) => current ? {
+      a: current.a,
+      b: params.svgPoint.x
+    } : current);
+  }, [enabled, userHandlers]);
+  const onPointerUp = _react.useCallback.call(void 0, (params) => {
+    _optionalChain([userHandlers, 'optionalAccess', _144 => _144.onPointerUp, 'optionalCall', _145 => _145(params)]);
+    if (!enabled) return;
+    const finalDrag = drag;
+    setDrag(null);
+    if (!finalDrag) return;
+    const lo = Math.min(finalDrag.a, finalDrag.b);
+    const hi = Math.max(finalDrag.a, finalDrag.b);
+    if (hi - lo < MIN_DRAG_PIXELS) return;
+    const xScale = _optionalChain([chartRef, 'access', _146 => _146.current, 'optionalAccess', _147 => _147.getScales, 'call', _148 => _148(), 'optionalAccess', _149 => _149.xScale]);
+    if (!xScale || typeof xScale.invert !== "function") return;
+    setDomain([xScale.invert(lo), xScale.invert(hi)]);
+  }, [enabled, drag, chartRef, userHandlers]);
+  return _react.useMemo.call(void 0, () => ({
+    domain,
+    drag,
+    reset,
+    handlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp
+    }
+  }), [domain, drag, reset, onPointerDown, onPointerMove, onPointerUp]);
+}
+function ZoomSelectionRect({
+  drag
+}) {
+  const {
+    margin,
+    innerHeight
+  } = _react.useContext.call(void 0, _xychart.DataContext);
+  if (!drag || drag.a === drag.b) return null;
+  const x = Math.min(drag.a, drag.b);
+  const w = Math.abs(drag.b - drag.a);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", {
+    className: x_zoom_module_default["x-zoom__selection"],
+    x,
+    y: _nullishCoalesce(_optionalChain([margin, 'optionalAccess', _150 => _150.top]), () => ( 0)),
+    width: w,
+    height: _nullishCoalesce(innerHeight, () => ( 0))
+  });
+}
+function ZoomClip({
+  active,
+  chartId,
+  children
+}) {
+  const {
+    margin,
+    innerWidth,
+    innerHeight
+  } = _react.useContext.call(void 0, _xychart.DataContext);
+  const id = `chart-zoom-clip-${String(_nullishCoalesce(chartId, () => ( ""))).replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const clip = active && (_nullishCoalesce(innerWidth, () => ( 0))) > 0 && (_nullishCoalesce(innerHeight, () => ( 0))) > 0;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
+    children: [clip && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", {
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "clipPath", {
+        id,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", {
+          x: _nullishCoalesce(_optionalChain([margin, 'optionalAccess', _151 => _151.left]), () => ( 0)),
+          y: _nullishCoalesce(_optionalChain([margin, 'optionalAccess', _152 => _152.top]), () => ( 0)),
+          width: innerWidth,
+          height: innerHeight
+        })
+      })
+    }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", {
+      clipPath: clip ? `url(#${id})` : void 0,
+      children
+    })]
+  });
+}
+function ZoomResetButton({
+  onClick
+}) {
+  const label = _i18n.__.call(void 0, "Reset zoom", "jetpack-charts");
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", {
+    type: "button",
+    className: x_zoom_module_default["x-zoom__reset"],
+    onClick,
+    "aria-label": label,
+    title: label,
+    children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", {
+      className: x_zoom_module_default["x-zoom__reset-icon"],
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", {
+        cx: "10",
+        cy: "10",
+        r: "6"
+      }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", {
+        x1: "15",
+        y1: "15",
+        x2: "20",
+        y2: "20"
+      }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", {
+        x1: "7",
+        y1: "10",
+        x2: "13",
+        y2: "10"
+      })]
+    })
+  });
+}
+
 // src/charts/line-chart/line-chart.module.scss
 var line_chart_module_default = {
   "line-chart": "a8ccharts-v-oO8E",
@@ -3209,7 +3509,7 @@ var LineChartAnnotationsOverlay = ({
     return `${xDomain.join(",")}-${yDomain.join(",")}-${xRange.join(",")}-${yRange.join(",")}`;
   }, []);
   const getScalesData = _react.useCallback.call(void 0, () => {
-    if (_optionalChain([chartRef, 'optionalAccess', _140 => _140.current])) {
+    if (_optionalChain([chartRef, 'optionalAccess', _153 => _153.current])) {
       const scaleData = chartRef.current.getScales();
       if (scaleData) {
         const scaleInfo = {
@@ -3386,7 +3686,7 @@ var LineChartAnnotation = ({
   const [height, setHeight] = _react.useState.call(void 0, null);
   const styles = _deepmerge2.default.call(void 0, _nullishCoalesce(providerTheme.annotationStyles, () => ( {})), _nullishCoalesce(datumStyles, () => ( {})));
   _react.useEffect.call(void 0, () => {
-    if (_optionalChain([labelRef, 'access', _141 => _141.current, 'optionalAccess', _142 => _142.getBBox])) {
+    if (_optionalChain([labelRef, 'access', _154 => _154.current, 'optionalAccess', _155 => _155.getBBox])) {
       const bbox = labelRef.current.getBBox();
       setHeight(bbox.height);
     }
@@ -3419,7 +3719,7 @@ var LineChartAnnotation = ({
       y: y2,
       yMin: yMin2,
       yMax: yMax2,
-      maxWidth: _optionalChain([styles, 'optionalAccess', _143 => _143.label, 'optionalAccess', _144 => _144.maxWidth]),
+      maxWidth: _optionalChain([styles, 'optionalAccess', _156 => _156.label, 'optionalAccess', _157 => _157.maxWidth]),
       height
     });
     return {
@@ -3431,7 +3731,7 @@ var LineChartAnnotation = ({
       xMax: xMax2,
       ...position2
     };
-  }, [datum, xScale, yScale, subjectType, _optionalChain([styles, 'optionalAccess', _145 => _145.label, 'optionalAccess', _146 => _146.maxWidth]), height, renderLabel]);
+  }, [datum, xScale, yScale, subjectType, _optionalChain([styles, 'optionalAccess', _158 => _158.label, 'optionalAccess', _159 => _159.maxWidth]), height, renderLabel]);
   if (!positionData) return null;
   const {
     x,
@@ -3446,13 +3746,13 @@ var LineChartAnnotation = ({
     isFlippedVertically
   } = positionData;
   const getLabelY = () => {
-    const labelY = _optionalChain([styles, 'optionalAccess', _147 => _147.label, 'optionalAccess', _148 => _148.y]);
+    const labelY = _optionalChain([styles, 'optionalAccess', _160 => _160.label, 'optionalAccess', _161 => _161.y]);
     if (labelY === "start") return yMax;
     if (labelY === "end") return yMin;
     return labelY;
   };
   const getLabelX = () => {
-    const labelX = _optionalChain([styles, 'optionalAccess', _149 => _149.label, 'optionalAccess', _150 => _150.x]);
+    const labelX = _optionalChain([styles, 'optionalAccess', _162 => _162.label, 'optionalAccess', _163 => _163.x]);
     if (labelX === "start") return xMin;
     if (labelX === "end") return xMax;
     return labelX;
@@ -3477,21 +3777,21 @@ var LineChartAnnotation = ({
       dx,
       dy,
       children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.Connector, {
-        ..._optionalChain([styles, 'optionalAccess', _151 => _151.connector])
+        ..._optionalChain([styles, 'optionalAccess', _164 => _164.connector])
       }), subjectType === "circle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.CircleSubject, {
-        ..._optionalChain([styles, 'optionalAccess', _152 => _152.circleSubject])
+        ..._optionalChain([styles, 'optionalAccess', _165 => _165.circleSubject])
       }), subjectType === "line-vertical" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.LineSubject, {
         min: yMax,
         max: yMin,
-        ..._optionalChain([styles, 'optionalAccess', _153 => _153.lineSubject]),
+        ..._optionalChain([styles, 'optionalAccess', _166 => _166.lineSubject]),
         orientation: "vertical"
       }), subjectType === "line-horizontal" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.LineSubject, {
         min: xMin,
         max: xMax,
-        ..._optionalChain([styles, 'optionalAccess', _154 => _154.lineSubject]),
+        ..._optionalChain([styles, 'optionalAccess', _167 => _167.lineSubject]),
         orientation: "horizontal"
       }), renderLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.HtmlLabel, {
-        ..._optionalChain([styles, 'optionalAccess', _155 => _155.label]),
+        ..._optionalChain([styles, 'optionalAccess', _168 => _168.label]),
         ...labelPosition,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
           style: getSafariHTMLLabelPosition(),
@@ -3510,7 +3810,7 @@ var LineChartAnnotation = ({
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.Label, {
           title,
           subtitle,
-          ..._optionalChain([styles, 'optionalAccess', _156 => _156.label]),
+          ..._optionalChain([styles, 'optionalAccess', _169 => _169.label]),
           ...labelPosition,
           horizontalAnchor: getHorizontalAnchor(subjectType, isFlippedHorizontally),
           verticalAnchor: getVerticalAnchor(subjectType, isFlippedVertically, y, yMax, _nullishCoalesce(height, () => ( ANNOTATION_INIT_HEIGHT)))
@@ -3547,7 +3847,7 @@ var LineChartGlyph = ({
   const x = xScale(accessors.xAccessor(point));
   const y = yScale(accessors.yAccessor(point));
   if (typeof x !== "number" || typeof y !== "number") return null;
-  const size = Math.max(0, _nullishCoalesce(toNumber(_optionalChain([glyphStyle, 'optionalAccess', _157 => _157.radius])), () => ( 4)));
+  const size = Math.max(0, _nullishCoalesce(toNumber(_optionalChain([glyphStyle, 'optionalAccess', _170 => _170.radius])), () => ( 4)));
   return renderGlyph({
     key: `${position2}-glyph-${data.label}`,
     index,
@@ -3578,9 +3878,9 @@ var renderDefaultTooltip = (params) => {
   const {
     tooltipData
   } = params;
-  const nearestDatum = _optionalChain([tooltipData, 'optionalAccess', _158 => _158.nearestDatum, 'optionalAccess', _159 => _159.datum]);
+  const nearestDatum = _optionalChain([tooltipData, 'optionalAccess', _171 => _171.nearestDatum, 'optionalAccess', _172 => _172.datum]);
   if (!nearestDatum) return null;
-  const tooltipPoints = Object.entries(_optionalChain([tooltipData, 'optionalAccess', _160 => _160.datumByKey]) || {}).map(([key, {
+  const tooltipPoints = Object.entries(_optionalChain([tooltipData, 'optionalAccess', _173 => _173.datumByKey]) || {}).map(([key, {
     datum
   }]) => ({
     key,
@@ -3590,7 +3890,7 @@ var renderDefaultTooltip = (params) => {
     className: line_chart_module_default["line-chart__tooltip"],
     children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
       className: line_chart_module_default["line-chart__tooltip-date"],
-      children: _optionalChain([nearestDatum, 'access', _161 => _161.date, 'optionalAccess', _162 => _162.toLocaleDateString, 'call', _163 => _163()])
+      children: _optionalChain([nearestDatum, 'access', _174 => _174.date, 'optionalAccess', _175 => _175.toLocaleDateString, 'call', _176 => _176()])
     }), tooltipPoints.map((point) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Stack, {
       direction: "row",
       align: "center",
@@ -3607,7 +3907,7 @@ var renderDefaultTooltip = (params) => {
   });
 };
 var validateData = (data) => {
-  if (!_optionalChain([data, 'optionalAccess', _164 => _164.length])) return "No data available";
+  if (!_optionalChain([data, 'optionalAccess', _177 => _177.length])) return "No data available";
   const hasInvalidData = data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || "date" in point && point.date && isNaN(point.date.getTime())));
   if (hasInvalidData) return "Invalid data";
   return null;
@@ -3621,7 +3921,7 @@ var LineChartScalesRef = ({
   const context = _react.useContext.call(void 0, _xychart.DataContext);
   _react.useImperativeHandle.call(void 0, chartRef, () => ({
     getScales: () => {
-      if (!_optionalChain([context, 'optionalAccess', _165 => _165.xScale]) || !_optionalChain([context, 'optionalAccess', _166 => _166.yScale])) {
+      if (!_optionalChain([context, 'optionalAccess', _178 => _178.xScale]) || !_optionalChain([context, 'optionalAccess', _179 => _179.yScale])) {
         return null;
       }
       return {
@@ -3663,6 +3963,7 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
   onPointerUp = void 0,
   onPointerMove = void 0,
   onPointerOut = void 0,
+  zoomable = false,
   children,
   gridVisibility,
   gap = "md"
@@ -3677,6 +3978,15 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
   const [selectedIndex, setSelectedIndex] = _react.useState.call(void 0, void 0);
   const [isNavigating, setIsNavigating] = _react.useState.call(void 0, false);
   const internalChartRef = _react.useRef.call(void 0, null);
+  const zoom = useXZoom({
+    enabled: zoomable,
+    chartRef: internalChartRef,
+    userHandlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp
+    }
+  });
   const {
     legendChildren,
     nonLegendChildren
@@ -3687,8 +3997,8 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
     setMeasuredChartHeight(chartHeight);
   }, [height]);
   _react.useImperativeHandle.call(void 0, ref, () => ({
-    getScales: () => _optionalChain([internalChartRef, 'access', _167 => _167.current, 'optionalAccess', _168 => _168.getScales, 'call', _169 => _169()]) || null,
-    getChartDimensions: () => _optionalChain([internalChartRef, 'access', _170 => _170.current, 'optionalAccess', _171 => _171.getChartDimensions, 'call', _172 => _172()]) || {
+    getScales: () => _optionalChain([internalChartRef, 'access', _180 => _180.current, 'optionalAccess', _181 => _181.getScales, 'call', _182 => _182()]) || null,
+    getChartDimensions: () => _optionalChain([internalChartRef, 'access', _183 => _183.current, 'optionalAccess', _184 => _184.getChartDimensions, 'call', _185 => _185()]) || {
       width: 0,
       height: 0,
       margin: {}
@@ -3729,10 +4039,10 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
     isNavigating,
     setIsNavigating,
     chartRef,
-    totalPoints: _optionalChain([dataSorted, 'access', _173 => _173[0], 'optionalAccess', _174 => _174.data, 'access', _175 => _175.length]) || 0
+    totalPoints: _optionalChain([dataSorted, 'access', _186 => _186[0], 'optionalAccess', _187 => _187.data, 'access', _188 => _188.length]) || 0
   });
   const chartOptions = _react.useMemo.call(void 0, () => {
-    const formatter = _optionalChain([options, 'optionalAccess', _176 => _176.axis, 'optionalAccess', _177 => _177.x, 'optionalAccess', _178 => _178.tickFormat]) || getFormatter(dataSorted);
+    const formatter = _optionalChain([options, 'optionalAccess', _189 => _189.axis, 'optionalAccess', _190 => _190.x, 'optionalAccess', _191 => _191.tickFormat]) || getFormatter(dataSorted);
     return {
       axis: {
         x: {
@@ -3740,28 +4050,31 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
           numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
           tickFormat: formatter,
           display: true,
-          ..._optionalChain([options, 'optionalAccess', _179 => _179.axis, 'optionalAccess', _180 => _180.x])
+          ..._optionalChain([options, 'optionalAccess', _192 => _192.axis, 'optionalAccess', _193 => _193.x])
         },
         y: {
           orientation: "left",
           numTicks: 4,
           tickFormat: _numberformatters.formatNumberCompact,
           display: true,
-          ..._optionalChain([options, 'optionalAccess', _181 => _181.axis, 'optionalAccess', _182 => _182.y])
+          ..._optionalChain([options, 'optionalAccess', _194 => _194.axis, 'optionalAccess', _195 => _195.y])
         }
       },
       xScale: {
         type: "time",
-        ..._optionalChain([options, 'optionalAccess', _183 => _183.xScale])
+        ..._optionalChain([options, 'optionalAccess', _196 => _196.xScale]),
+        ...zoom.domain ? {
+          domain: zoom.domain
+        } : {}
       },
       yScale: {
         type: "linear",
         nice: true,
         zero: false,
-        ..._optionalChain([options, 'optionalAccess', _184 => _184.yScale])
+        ..._optionalChain([options, 'optionalAccess', _197 => _197.yScale])
       }
     };
-  }, [options, dataSorted, width]);
+  }, [options, dataSorted, width, zoom.domain]);
   const tooltipRenderGlyph = _react.useMemo.call(void 0, () => {
     return (props) => {
       const seriesIndex = dataSorted.findIndex((series) => series.label === props.key || series.data.includes(props.datum));
@@ -3785,9 +4098,9 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
   const isDataValid = !error;
   const legendOptions = _react.useMemo.call(void 0, () => ({
     withGlyph: withLegendGlyph,
-    glyphSize: Math.max(0, _nullishCoalesce(toNumber2(_optionalChain([glyphStyle, 'optionalAccess', _185 => _185.radius])), () => ( 4))),
+    glyphSize: Math.max(0, _nullishCoalesce(toNumber2(_optionalChain([glyphStyle, 'optionalAccess', _198 => _198.radius])), () => ( 4))),
     renderGlyph
-  }), [withLegendGlyph, _optionalChain([glyphStyle, 'optionalAccess', _186 => _186.radius]), renderGlyph]);
+  }), [withLegendGlyph, _optionalChain([glyphStyle, 'optionalAccess', _199 => _199.radius]), renderGlyph]);
   const legendItems = useChartLegendItems(dataSorted, legendOptions, legendShape);
   const chartMetadata = _react.useMemo.call(void 0, () => ({
     withGradientFill,
@@ -3806,8 +4119,8 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
   });
   const prefersReducedMotion = usePrefersReducedMotion();
   const accessors = {
-    xAccessor: (d) => _optionalChain([d, 'optionalAccess', _187 => _187.date]),
-    yAccessor: (d) => _optionalChain([d, 'optionalAccess', _188 => _188.value])
+    xAccessor: (d) => _optionalChain([d, 'optionalAccess', _200 => _200.date]),
+    yAccessor: (d) => _optionalChain([d, 'optionalAccess', _201 => _201.value])
   };
   if (error) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
@@ -3860,9 +4173,14 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
           onKeyDown: onChartKeyDown,
           onFocus: onChartFocus,
           onBlur: onChartBlur,
-          children: chartHeight > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+          children: chartHeight > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
             ref: chartRef,
-            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _xychart.XYChart, {
+            style: {
+              position: "relative"
+            },
+            children: [zoomable && zoom.domain && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ZoomResetButton, {
+              onClick: zoom.reset
+            }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _xychart.XYChart, {
               theme,
               width,
               height: chartHeight,
@@ -3872,9 +4190,9 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
               },
               xScale: chartOptions.xScale,
               yScale: chartOptions.yScale,
-              onPointerDown,
-              onPointerUp,
-              onPointerMove,
+              onPointerDown: zoom.handlers.onPointerDown,
+              onPointerUp: zoom.handlers.onPointerUp,
+              onPointerMove: zoom.handlers.onPointerMove,
               onPointerOut,
               pointerEventsDataKey: "nearest",
               children: [gridVisibility !== "none" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Grid, {
@@ -3890,65 +4208,69 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
                 width,
                 height: chartHeight,
                 children: _i18n.__.call(void 0, "All series are hidden. Click legend items to show data.", "jetpack-charts")
-              }) : null, seriesWithVisibility.map(({
-                series: seriesData,
-                index,
-                isVisible
-              }) => {
-                if (!isVisible) {
-                  return null;
-                }
-                const {
-                  color,
-                  lineStyles,
-                  glyph
-                } = getElementStyles({
-                  data: seriesData,
-                  index
-                });
-                const lineProps = {
-                  stroke: color,
-                  ...lineStyles
-                };
-                return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", {
-                  children: [withGradientFill && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _gradient.LinearGradient, {
-                    id: `area-gradient-${chartId}-${index + 1}`,
-                    from: color,
-                    fromOpacity: 0.4,
-                    toOpacity: 0.1,
-                    to: providerTheme.backgroundColor,
-                    ..._optionalChain([seriesData, 'access', _189 => _189.options, 'optionalAccess', _190 => _190.gradient]),
-                    children: _optionalChain([seriesData, 'access', _191 => _191.options, 'optionalAccess', _192 => _192.gradient, 'optionalAccess', _193 => _193.stops, 'optionalAccess', _194 => _194.map, 'call', _195 => _195((stop, stopIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", {
-                      offset: stop.offset,
-                      stopColor: stop.color || color,
-                      stopOpacity: _nullishCoalesce(stop.opacity, () => ( 1))
-                    }, `${stop.offset}-${stop.color || color}`))])
-                  }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.AreaSeries, {
-                    dataKey: _optionalChain([seriesData, 'optionalAccess', _196 => _196.label]),
-                    data: seriesData.data,
-                    ...accessors,
-                    fill: withGradientFill ? `url(#area-gradient-${chartId}-${index + 1})` : "transparent",
-                    renderLine: true,
-                    curve: getCurveType(curveType, smoothing),
-                    lineProps
-                  }, _optionalChain([seriesData, 'optionalAccess', _197 => _197.label])), withStartGlyphs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, line_chart_glyph_default, {
-                    index,
-                    data: seriesData,
+              }) : null, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ZoomClip, {
+                active: zoomable && !!zoom.domain,
+                chartId,
+                children: seriesWithVisibility.map(({
+                  series: seriesData,
+                  index,
+                  isVisible
+                }) => {
+                  if (!isVisible) {
+                    return null;
+                  }
+                  const {
                     color,
-                    renderGlyph: _nullishCoalesce(glyph, () => ( renderGlyph)),
-                    accessors,
-                    glyphStyle,
-                    position: "start"
-                  }), withEndGlyphs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, line_chart_glyph_default, {
-                    index,
+                    lineStyles,
+                    glyph
+                  } = getElementStyles({
                     data: seriesData,
-                    color,
-                    renderGlyph: _nullishCoalesce(glyph, () => ( renderGlyph)),
-                    accessors,
-                    glyphStyle,
-                    position: "end"
-                  })]
-                }, _optionalChain([seriesData, 'optionalAccess', _198 => _198.label]) || index);
+                    index
+                  });
+                  const lineProps = {
+                    stroke: color,
+                    ...lineStyles
+                  };
+                  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", {
+                    children: [withGradientFill && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _gradient.LinearGradient, {
+                      id: `area-gradient-${chartId}-${index + 1}`,
+                      from: color,
+                      fromOpacity: 0.4,
+                      toOpacity: 0.1,
+                      to: providerTheme.backgroundColor,
+                      ..._optionalChain([seriesData, 'access', _202 => _202.options, 'optionalAccess', _203 => _203.gradient]),
+                      children: _optionalChain([seriesData, 'access', _204 => _204.options, 'optionalAccess', _205 => _205.gradient, 'optionalAccess', _206 => _206.stops, 'optionalAccess', _207 => _207.map, 'call', _208 => _208((stop, stopIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", {
+                        offset: stop.offset,
+                        stopColor: stop.color || color,
+                        stopOpacity: _nullishCoalesce(stop.opacity, () => ( 1))
+                      }, `${stop.offset}-${stop.color || color}`))])
+                    }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.AreaSeries, {
+                      dataKey: _optionalChain([seriesData, 'optionalAccess', _209 => _209.label]),
+                      data: seriesData.data,
+                      ...accessors,
+                      fill: withGradientFill ? `url(#area-gradient-${chartId}-${index + 1})` : "transparent",
+                      renderLine: true,
+                      curve: getCurveType(curveType, smoothing),
+                      lineProps
+                    }, _optionalChain([seriesData, 'optionalAccess', _210 => _210.label])), withStartGlyphs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, line_chart_glyph_default, {
+                      index,
+                      data: seriesData,
+                      color,
+                      renderGlyph: _nullishCoalesce(glyph, () => ( renderGlyph)),
+                      accessors,
+                      glyphStyle,
+                      position: "start"
+                    }), withEndGlyphs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, line_chart_glyph_default, {
+                      index,
+                      data: seriesData,
+                      color,
+                      renderGlyph: _nullishCoalesce(glyph, () => ( renderGlyph)),
+                      accessors,
+                      glyphStyle,
+                      position: "end"
+                    })]
+                  }, _optionalChain([seriesData, 'optionalAccess', _211 => _211.label]) || index);
+                })
               }), withTooltips && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AccessibleTooltip, {
                 detectBounds: true,
                 snapTooltipToDatumX: true,
@@ -3957,8 +4279,8 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
                 renderTooltip,
                 renderGlyph: tooltipRenderGlyph,
                 glyphStyle,
-                showVerticalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _199 => _199.showVertical]),
-                showHorizontalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _200 => _200.showHorizontal]),
+                showVerticalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _212 => _212.showVertical]),
+                showHorizontalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _213 => _213.showHorizontal]),
                 selectedIndex,
                 tooltipRef,
                 keyboardFocusedClassName: line_chart_module_default["line-chart__tooltip--keyboard-focused"],
@@ -3968,8 +4290,10 @@ var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
                 width,
                 height,
                 margin
+              }), zoomable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ZoomSelectionRect, {
+                drag: zoom.drag
               })]
-            })
+            })]
           })
         });
       }
@@ -4013,8 +4337,8 @@ var area_chart_module_default = {
 // src/charts/area-chart/private/validate-data.ts
 
 var validateData2 = (data) => {
-  if (!_optionalChain([data, 'optionalAccess', _201 => _201.length])) return _i18n.__.call(void 0, "No data available", "jetpack-charts");
-  const hasEmptySeries = data.some((series) => !_optionalChain([series, 'access', _202 => _202.data, 'optionalAccess', _203 => _203.length]));
+  if (!_optionalChain([data, 'optionalAccess', _214 => _214.length])) return _i18n.__.call(void 0, "No data available", "jetpack-charts");
+  const hasEmptySeries = data.some((series) => !_optionalChain([series, 'access', _215 => _215.data, 'optionalAccess', _216 => _216.length]));
   if (hasEmptySeries) return _i18n.__.call(void 0, "No data available", "jetpack-charts");
   const hasInvalidData = data.some(
     (series) => series.data.some(
@@ -4038,7 +4362,7 @@ var AreaChartScalesRef = ({
   const context = _react.useContext.call(void 0, _xychart.DataContext);
   _react.useImperativeHandle.call(void 0, chartRef, () => ({
     getScales: () => {
-      if (!_optionalChain([context, 'optionalAccess', _204 => _204.xScale]) || !_optionalChain([context, 'optionalAccess', _205 => _205.yScale])) return null;
+      if (!_optionalChain([context, 'optionalAccess', _217 => _217.xScale]) || !_optionalChain([context, 'optionalAccess', _218 => _218.yScale])) return null;
       return {
         xScale: context.xScale,
         yScale: context.yScale
@@ -4061,10 +4385,10 @@ var HoverGlyphs = ({
 }) => {
   const dataContext = _react.useContext.call(void 0, _xychart.DataContext);
   const tooltipContext = _react.useContext.call(void 0, _xychart.TooltipContext);
-  const xScale = _optionalChain([dataContext, 'optionalAccess', _206 => _206.xScale]);
-  const yScale = _optionalChain([dataContext, 'optionalAccess', _207 => _207.yScale]);
-  const tooltipOpen = _optionalChain([tooltipContext, 'optionalAccess', _208 => _208.tooltipOpen]);
-  const nearestDatum = _optionalChain([tooltipContext, 'optionalAccess', _209 => _209.tooltipData, 'optionalAccess', _210 => _210.nearestDatum, 'optionalAccess', _211 => _211.datum]);
+  const xScale = _optionalChain([dataContext, 'optionalAccess', _219 => _219.xScale]);
+  const yScale = _optionalChain([dataContext, 'optionalAccess', _220 => _220.yScale]);
+  const tooltipOpen = _optionalChain([tooltipContext, 'optionalAccess', _221 => _221.tooltipOpen]);
+  const nearestDatum = _optionalChain([tooltipContext, 'optionalAccess', _222 => _222.tooltipData, 'optionalAccess', _223 => _223.nearestDatum, 'optionalAccess', _224 => _224.datum]);
   if (!tooltipOpen || !xScale || !yScale || !nearestDatum || !nearestDatum.date || stacked && stackOffset !== "none") {
     return null;
   }
@@ -4077,8 +4401,8 @@ var HoverGlyphs = ({
     series,
     index
   } of visibleSeries) {
-    const datum = series.data.find((d) => _optionalChain([d, 'access', _212 => _212.date, 'optionalAccess', _213 => _213.getTime, 'call', _214 => _214()]) === hoveredTime);
-    const value = _nullishCoalesce(_optionalChain([datum, 'optionalAccess', _215 => _215.value]), () => ( 0));
+    const datum = series.data.find((d) => _optionalChain([d, 'access', _225 => _225.date, 'optionalAccess', _226 => _226.getTime, 'call', _227 => _227()]) === hoveredTime);
+    const value = _nullishCoalesce(_optionalChain([datum, 'optionalAccess', _228 => _228.value]), () => ( 0));
     if (stacked) {
       cumulative += value;
     }
@@ -4137,6 +4461,8 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
   onPointerUp,
   onPointerMove,
   onPointerOut,
+  zoomable = false,
+  rescaleYOnLegendToggle = true,
   children,
   gridVisibility,
   gap = "md"
@@ -4151,6 +4477,15 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
   const [selectedIndex, setSelectedIndex] = _react.useState.call(void 0, void 0);
   const [isNavigating, setIsNavigating] = _react.useState.call(void 0, false);
   const internalChartRef = _react.useRef.call(void 0, null);
+  const zoom = useXZoom({
+    enabled: zoomable,
+    chartRef: internalChartRef,
+    userHandlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp
+    }
+  });
   const {
     legendChildren,
     nonLegendChildren
@@ -4161,8 +4496,8 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
     setMeasuredChartHeight(chartHeight);
   }, [height]);
   _react.useImperativeHandle.call(void 0, ref, () => ({
-    getScales: () => _optionalChain([internalChartRef, 'access', _216 => _216.current, 'optionalAccess', _217 => _217.getScales, 'call', _218 => _218()]) || null,
-    getChartDimensions: () => _optionalChain([internalChartRef, 'access', _219 => _219.current, 'optionalAccess', _220 => _220.getChartDimensions, 'call', _221 => _221()]) || {
+    getScales: () => _optionalChain([internalChartRef, 'access', _229 => _229.current, 'optionalAccess', _230 => _230.getScales, 'call', _231 => _231()]) || null,
+    getChartDimensions: () => _optionalChain([internalChartRef, 'access', _232 => _232.current, 'optionalAccess', _233 => _233.getChartDimensions, 'call', _234 => _234()]) || {
       width: 0,
       height: 0,
       margin: {}
@@ -4201,10 +4536,10 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
     isNavigating,
     setIsNavigating,
     chartRef,
-    totalPoints: _optionalChain([dataSorted, 'access', _222 => _222[0], 'optionalAccess', _223 => _223.data, 'access', _224 => _224.length]) || 0
+    totalPoints: _optionalChain([dataSorted, 'access', _235 => _235[0], 'optionalAccess', _236 => _236.data, 'access', _237 => _237.length]) || 0
   });
   const fixedYDomain = _react.useMemo.call(void 0, () => {
-    if (!legendInteractive || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") {
+    if (rescaleYOnLegendToggle || !legendInteractive || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") {
       return void 0;
     }
     if (stacked) {
@@ -4215,7 +4550,7 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
         let posSum = 0;
         let negSum = 0;
         for (const series of dataSorted) {
-          const v = Number(_optionalChain([series, 'access', _225 => _225.data, 'access', _226 => _226[i], 'optionalAccess', _227 => _227.value]));
+          const v = Number(_optionalChain([series, 'access', _238 => _238.data, 'access', _239 => _239[i], 'optionalAccess', _240 => _240.value]));
           if (Number.isNaN(v)) continue;
           if (v >= 0) posSum += v;
           else negSum += v;
@@ -4229,7 +4564,7 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
     let min = Infinity;
     for (const series of dataSorted) {
       for (const point of series.data) {
-        const v = Number(_optionalChain([point, 'optionalAccess', _228 => _228.value]));
+        const v = Number(_optionalChain([point, 'optionalAccess', _241 => _241.value]));
         if (!Number.isNaN(v)) {
           if (v > max) max = v;
           if (v < min) min = v;
@@ -4238,9 +4573,9 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
     }
     if (max === -Infinity) return void 0;
     return [Math.min(0, min), max];
-  }, [dataSorted, stacked, stackOffset, legendInteractive]);
+  }, [dataSorted, stacked, stackOffset, legendInteractive, rescaleYOnLegendToggle]);
   const chartOptions = _react.useMemo.call(void 0, () => {
-    const formatter = _optionalChain([options, 'optionalAccess', _229 => _229.axis, 'optionalAccess', _230 => _230.x, 'optionalAccess', _231 => _231.tickFormat]) || getFormatter(dataSorted);
+    const formatter = _optionalChain([options, 'optionalAccess', _242 => _242.axis, 'optionalAccess', _243 => _243.x, 'optionalAccess', _244 => _244.tickFormat]) || getFormatter(dataSorted);
     return {
       axis: {
         x: {
@@ -4248,19 +4583,22 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
           numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
           tickFormat: formatter,
           display: true,
-          ..._optionalChain([options, 'optionalAccess', _232 => _232.axis, 'optionalAccess', _233 => _233.x])
+          ..._optionalChain([options, 'optionalAccess', _245 => _245.axis, 'optionalAccess', _246 => _246.x])
         },
         y: {
           orientation: "left",
           numTicks: 4,
           tickFormat: _numberformatters.formatNumberCompact,
           display: true,
-          ..._optionalChain([options, 'optionalAccess', _234 => _234.axis, 'optionalAccess', _235 => _235.y])
+          ..._optionalChain([options, 'optionalAccess', _247 => _247.axis, 'optionalAccess', _248 => _248.y])
         }
       },
       xScale: {
         type: "time",
-        ..._optionalChain([options, 'optionalAccess', _236 => _236.xScale])
+        ..._optionalChain([options, 'optionalAccess', _249 => _249.xScale]),
+        ...zoom.domain ? {
+          domain: zoom.domain
+        } : {}
       },
       yScale: {
         type: "linear",
@@ -4270,10 +4608,10 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
         ...fixedYDomain ? {
           domain: fixedYDomain
         } : {},
-        ..._optionalChain([options, 'optionalAccess', _237 => _237.yScale])
+        ..._optionalChain([options, 'optionalAccess', _250 => _250.yScale])
       }
     };
-  }, [options, dataSorted, width, stacked, fixedYDomain]);
+  }, [options, dataSorted, width, stacked, fixedYDomain, zoom.domain]);
   const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme);
   const error = validateData2(dataSorted);
   const isDataValid = !error;
@@ -4298,21 +4636,21 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
   const prefersReducedMotion = usePrefersReducedMotion();
   const animationEnabled = !!animation && !prefersReducedMotion;
   const accessors = {
-    xAccessor: (d) => _optionalChain([d, 'optionalAccess', _238 => _238.date]),
-    yAccessor: (d) => _optionalChain([d, 'optionalAccess', _239 => _239.value])
+    xAccessor: (d) => _optionalChain([d, 'optionalAccess', _251 => _251.date]),
+    yAccessor: (d) => _optionalChain([d, 'optionalAccess', _252 => _252.value])
   };
   const zeroYAccessor = _react.useCallback.call(void 0, () => 0, []);
   const visibleLabels = _react.useMemo.call(void 0, () => new Set(seriesWithVisibility.filter((s) => s.isVisible).map((s) => s.series.label)), [seriesWithVisibility]);
   const filteredRenderTooltip = _react.useCallback.call(void 0, (params) => {
     if (!legendInteractive) return renderTooltip(params);
-    const datumByKey = _optionalChain([params, 'optionalAccess', _240 => _240.tooltipData, 'optionalAccess', _241 => _241.datumByKey]);
+    const datumByKey = _optionalChain([params, 'optionalAccess', _253 => _253.tooltipData, 'optionalAccess', _254 => _254.datumByKey]);
     if (!datumByKey) return renderTooltip(params);
     const filtered = Object.fromEntries(Object.entries(datumByKey).filter(([key]) => visibleLabels.has(key)));
     if (Object.keys(filtered).length === 0) return null;
-    const nearestDatum = _optionalChain([params, 'optionalAccess', _242 => _242.tooltipData, 'optionalAccess', _243 => _243.nearestDatum]);
+    const nearestDatum = _optionalChain([params, 'optionalAccess', _255 => _255.tooltipData, 'optionalAccess', _256 => _256.nearestDatum]);
     const nextNearest = nearestDatum && visibleLabels.has(nearestDatum.key) ? nearestDatum : {
       ...Object.values(filtered)[0],
-      distance: _nullishCoalesce(_optionalChain([nearestDatum, 'optionalAccess', _244 => _244.distance]), () => ( 0))
+      distance: _nullishCoalesce(_optionalChain([nearestDatum, 'optionalAccess', _257 => _257.distance]), () => ( 0))
     };
     return renderTooltip({
       ...params,
@@ -4361,7 +4699,7 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
       index
     });
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.AnimatedAreaSeries, {
-      dataKey: _optionalChain([seriesData, 'optionalAccess', _245 => _245.label]),
+      dataKey: _optionalChain([seriesData, 'optionalAccess', _258 => _258.label]),
       data: seriesData.data,
       xAccessor: accessors.xAccessor,
       yAccessor: isVisible || !legendInteractive ? accessors.yAccessor : zeroYAccessor,
@@ -4375,7 +4713,7 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
         stroke: color,
         ...lineStyles
       }
-    }, _optionalChain([seriesData, 'optionalAccess', _246 => _246.label]) || index);
+    }, _optionalChain([seriesData, 'optionalAccess', _259 => _259.label]) || index);
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SingleChartContext.Provider, {
     value: {
@@ -4409,9 +4747,14 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
           onKeyDown: onChartKeyDown,
           onFocus: onChartFocus,
           onBlur: onChartBlur,
-          children: chartHeight > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
+          children: chartHeight > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
             ref: chartRef,
-            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _xychart.XYChart, {
+            style: {
+              position: "relative"
+            },
+            children: [zoomable && zoom.domain && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ZoomResetButton, {
+              onClick: zoom.reset
+            }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _xychart.XYChart, {
               theme,
               width,
               height: chartHeight,
@@ -4421,9 +4764,9 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
               },
               xScale: chartOptions.xScale,
               yScale: chartOptions.yScale,
-              onPointerDown,
-              onPointerUp,
-              onPointerMove,
+              onPointerDown: zoom.handlers.onPointerDown,
+              onPointerUp: zoom.handlers.onPointerUp,
+              onPointerMove: zoom.handlers.onPointerMove,
               onPointerOut,
               pointerEventsDataKey: "nearest",
               children: [gridVisibility !== "none" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Grid, {
@@ -4439,19 +4782,23 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
                 width,
                 height: chartHeight,
                 children: _i18n.__.call(void 0, "All series are hidden. Click legend items to show data.", "jetpack-charts")
-              }) : null, !allSeriesHidden && stacked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.AnimatedAreaStack, {
-                curve,
-                offset: stackOffset,
-                renderLine: resolvedWithStroke,
-                children: seriesWithVisibility.map(renderSeries)
-              }), !allSeriesHidden && !stacked && seriesWithVisibility.map(renderSeries), withTooltips && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
+              }) : null, /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ZoomClip, {
+                active: zoomable,
+                chartId,
+                children: [!allSeriesHidden && stacked && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.AnimatedAreaStack, {
+                  curve,
+                  offset: stackOffset,
+                  renderLine: resolvedWithStroke,
+                  children: seriesWithVisibility.map(renderSeries)
+                }), !allSeriesHidden && !stacked && seriesWithVisibility.map(renderSeries)]
+              }), withTooltips && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
                 children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, AccessibleTooltip, {
                   detectBounds: true,
                   snapTooltipToDatumX: true,
                   snapTooltipToDatumY: !stacked,
                   renderTooltip: filteredRenderTooltip,
-                  showVerticalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _247 => _247.showVertical]),
-                  showHorizontalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _248 => _248.showHorizontal]),
+                  showVerticalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _260 => _260.showVertical]),
+                  showHorizontalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _261 => _261.showHorizontal]),
                   selectedIndex,
                   tooltipRef,
                   keyboardFocusedClassName: area_chart_module_default["area-chart__tooltip--keyboard-focused"],
@@ -4468,8 +4815,10 @@ var AreaChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
                 width,
                 height: height || chartHeight,
                 margin
+              }), zoomable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ZoomSelectionRect, {
+                drag: zoom.drag
               })]
-            })
+            })]
           })
         });
       }
@@ -4642,12 +4991,12 @@ function useBarChartOptions(data, horizontal, options = {}) {
       nice: true,
       zero: false
     };
-    const labelFormatter = _optionalChain([data, 'optionalAccess', _249 => _249[0], 'optionalAccess', _250 => _250.data, 'optionalAccess', _251 => _251[0], 'optionalAccess', _252 => _252.label]) ? (label) => label : formatDateTick2;
+    const labelFormatter = _optionalChain([data, 'optionalAccess', _262 => _262[0], 'optionalAccess', _263 => _263.data, 'optionalAccess', _264 => _264[0], 'optionalAccess', _265 => _265.label]) ? (label) => label : formatDateTick2;
     const valueFormatter = _numberformatters.formatNumberCompact;
-    const labelAccessor = (d) => _optionalChain([d, 'optionalAccess', _253 => _253.label]) || _optionalChain([d, 'optionalAccess', _254 => _254.date]);
+    const labelAccessor = (d) => _optionalChain([d, 'optionalAccess', _266 => _266.label]) || _optionalChain([d, 'optionalAccess', _267 => _267.date]);
     const valueAccessor = (d) => {
       const enhancedPoint = d;
-      return _optionalChain([enhancedPoint, 'optionalAccess', _255 => _255.visualValue]) !== void 0 ? enhancedPoint.visualValue : _optionalChain([d, 'optionalAccess', _256 => _256.value]);
+      return _optionalChain([enhancedPoint, 'optionalAccess', _268 => _268.visualValue]) !== void 0 ? enhancedPoint.visualValue : _optionalChain([d, 'optionalAccess', _269 => _269.value]);
     };
     return {
       vertical: {
@@ -4686,9 +5035,9 @@ function useBarChartOptions(data, horizontal, options = {}) {
     } = defaultOptions[orientationKey];
     const xScale = { ...baseXScale, ...options.xScale || {} };
     const yScale = { ...baseYScale, ...options.yScale || {} };
-    const providedToolTipLabelFormatter = horizontal ? _optionalChain([options, 'access', _257 => _257.axis, 'optionalAccess', _258 => _258.y, 'optionalAccess', _259 => _259.tickFormat]) : _optionalChain([options, 'access', _260 => _260.axis, 'optionalAccess', _261 => _261.x, 'optionalAccess', _262 => _262.tickFormat]);
-    const { labelOverflow: xLabelOverflow, ...xAxisOptions } = _optionalChain([options, 'access', _263 => _263.axis, 'optionalAccess', _264 => _264.x]) || {};
-    const { labelOverflow: yLabelOverflow, ...yAxisOptions } = _optionalChain([options, 'access', _265 => _265.axis, 'optionalAccess', _266 => _266.y]) || {};
+    const providedToolTipLabelFormatter = horizontal ? _optionalChain([options, 'access', _270 => _270.axis, 'optionalAccess', _271 => _271.y, 'optionalAccess', _272 => _272.tickFormat]) : _optionalChain([options, 'access', _273 => _273.axis, 'optionalAccess', _274 => _274.x, 'optionalAccess', _275 => _275.tickFormat]);
+    const { labelOverflow: xLabelOverflow, ...xAxisOptions } = _optionalChain([options, 'access', _276 => _276.axis, 'optionalAccess', _277 => _277.x]) || {};
+    const { labelOverflow: yLabelOverflow, ...yAxisOptions } = _optionalChain([options, 'access', _278 => _278.axis, 'optionalAccess', _279 => _279.y]) || {};
     return {
       gridVisibility,
       xScale,
@@ -4726,7 +5075,7 @@ function useBarChartOptions(data, horizontal, options = {}) {
 // src/charts/bar-chart/bar-chart.tsx
 
 var validateData3 = (data) => {
-  if (!_optionalChain([data, 'optionalAccess', _267 => _267.length])) return "No data available";
+  if (!_optionalChain([data, 'optionalAccess', _280 => _280.length])) return "No data available";
   const hasInvalidData = data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || !point.label && (!("date" in point && point.date) || isNaN(point.date.getTime()))));
   if (hasInvalidData) return "Invalid data";
   return null;
@@ -4776,7 +5125,7 @@ var BarChartInternal = ({
   }, [height]);
   const [selectedIndex, setSelectedIndex] = _react.useState.call(void 0, void 0);
   const [isNavigating, setIsNavigating] = _react.useState.call(void 0, false);
-  const totalPoints = Math.max(0, ...data.map((series) => _optionalChain([series, 'access', _268 => _268.data, 'optionalAccess', _269 => _269.length]) || 0)) * data.length;
+  const totalPoints = Math.max(0, ...data.map((series) => _optionalChain([series, 'access', _281 => _281.data, 'optionalAccess', _282 => _282.length]) || 0)) * data.length;
   const {
     tooltipRef,
     onChartFocus,
@@ -4820,13 +5169,13 @@ var BarChartInternal = ({
   const renderDefaultTooltip2 = _react.useCallback.call(void 0, ({
     tooltipData
   }) => {
-    const nearestDatum = _optionalChain([tooltipData, 'optionalAccess', _270 => _270.nearestDatum, 'optionalAccess', _271 => _271.datum]);
+    const nearestDatum = _optionalChain([tooltipData, 'optionalAccess', _283 => _283.nearestDatum, 'optionalAccess', _284 => _284.datum]);
     if (!nearestDatum) return null;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
       className: bar_chart_module_default["bar-chart__tooltip"],
       children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
         className: bar_chart_module_default["bar-chart__tooltip-header"],
-        children: _optionalChain([tooltipData, 'optionalAccess', _272 => _272.nearestDatum, 'optionalAccess', _273 => _273.key])
+        children: _optionalChain([tooltipData, 'optionalAccess', _285 => _285.nearestDatum, 'optionalAccess', _286 => _286.key])
       }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
         className: bar_chart_module_default["bar-chart__tooltip-row"],
         children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", {
@@ -5025,12 +5374,12 @@ var BarChartInternal = ({
                     return null;
                   }
                   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.BarSeries, {
-                    dataKey: _optionalChain([seriesData, 'optionalAccess', _274 => _274.label]),
+                    dataKey: _optionalChain([seriesData, 'optionalAccess', _287 => _287.label]),
                     data: seriesData.data,
                     yAccessor: chartOptions.accessors.yAccessor,
                     xAccessor: chartOptions.accessors.xAccessor,
                     colorAccessor: getBarBackground(index)
-                  }, _optionalChain([seriesData, 'optionalAccess', _275 => _275.label]));
+                  }, _optionalChain([seriesData, 'optionalAccess', _288 => _288.label]));
                 })
               }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, {
                 ...chartOptions.axis.x
@@ -5084,7 +5433,7 @@ var BarChartResponsive = attachSubComponents(withResponsive(BarChartWithProvider
 
 var getScaleBandwidth2 = (scale) => {
   const s = scale;
-  return s && "bandwidth" in s ? _nullishCoalesce(_optionalChain([s, 'optionalAccess', _276 => _276.bandwidth, 'call', _277 => _277()]), () => ( 0)) : 0;
+  return s && "bandwidth" in s ? _nullishCoalesce(_optionalChain([s, 'optionalAccess', _289 => _289.bandwidth, 'call', _290 => _290()]), () => ( 0)) : 0;
 };
 var DefaultLabelComponent = ({
   textProps,
@@ -5145,7 +5494,7 @@ var AxisRenderer = ({
     delete textProps.dx;
     const sum = data.reduce((acc, {
       data: seriesData
-    }) => acc + (_nullishCoalesce(_optionalChain([seriesData, 'access', _278 => _278[index], 'optionalAccess', _279 => _279.value]), () => ( 0))), 0);
+    }) => acc + (_nullishCoalesce(_optionalChain([seriesData, 'access', _291 => _291[index], 'optionalAccess', _292 => _292.value]), () => ( 0))), 0);
     const y = from2.y + yOffset;
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _group.Group, {
       children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, LabelComponent, {
@@ -5313,7 +5662,7 @@ var useFunnelSelection = (hideTooltip) => {
     (stepId) => {
       if (clickedStep === stepId) {
         setClickedStep(null);
-        _optionalChain([hideTooltip, 'optionalCall', _280 => _280()]);
+        _optionalChain([hideTooltip, 'optionalCall', _293 => _293()]);
       } else {
         setClickedStep(stepId);
       }
@@ -5326,21 +5675,21 @@ var useFunnelSelection = (hideTooltip) => {
         event.preventDefault();
         if (clickedStep === stepId) {
           setClickedStep(null);
-          _optionalChain([hideTooltip, 'optionalCall', _281 => _281()]);
+          _optionalChain([hideTooltip, 'optionalCall', _294 => _294()]);
         } else {
           setClickedStep(stepId);
         }
       } else if (event.key === "Escape") {
         event.preventDefault();
         setClickedStep(null);
-        _optionalChain([hideTooltip, 'optionalCall', _282 => _282()]);
+        _optionalChain([hideTooltip, 'optionalCall', _295 => _295()]);
       }
     },
     [clickedStep, hideTooltip]
   );
   const clearSelection = _react.useCallback.call(void 0, () => {
     setClickedStep(null);
-    _optionalChain([hideTooltip, 'optionalCall', _283 => _283()]);
+    _optionalChain([hideTooltip, 'optionalCall', _296 => _296()]);
   }, [hideTooltip]);
   const getStepState = _react.useCallback.call(void 0, 
     (stepId) => ({
@@ -5502,7 +5851,7 @@ var ConversionFunnelChartInternal = ({
       document.removeEventListener("mousedown", handleDocumentClick);
     };
   }, [clearSelectionAndRef]);
-  const resolvedHeight = _nullishCoalesce(_nullishCoalesce(height, () => ( _optionalChain([style, 'optionalAccess', _284 => _284.height]))), () => ( "100%"));
+  const resolvedHeight = _nullishCoalesce(_nullishCoalesce(height, () => ( _optionalChain([style, 'optionalAccess', _297 => _297.height]))), () => ( "100%"));
   const {
     primaryColor,
     backgroundColor,
@@ -5517,7 +5866,7 @@ var ConversionFunnelChartInternal = ({
   }) : {
     color: primaryColor || "#000000"
   };
-  const isPositiveChange = _optionalChain([changeIndicator, 'optionalAccess', _285 => _285.startsWith, 'call', _286 => _286("+")]);
+  const isPositiveChange = _optionalChain([changeIndicator, 'optionalAccess', _298 => _298.startsWith, 'call', _299 => _299("+")]);
   const changeColor = isPositiveChange ? positiveChangeColor : negativeChangeColor;
   const barBackgroundColor = backgroundColor || hexToRgba(barColor, 0.08) || "rgba(0, 0, 0, 0.08)";
   const renderDefaultMainMetric = () => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
@@ -5548,8 +5897,8 @@ var ConversionFunnelChartInternal = ({
   const chartMetadata = _react.useMemo.call(void 0, () => ({
     mainRate,
     changeIndicator,
-    stepsCount: _optionalChain([steps, 'optionalAccess', _287 => _287.length]) || 0
-  }), [mainRate, changeIndicator, _optionalChain([steps, 'optionalAccess', _288 => _288.length])]);
+    stepsCount: _optionalChain([steps, 'optionalAccess', _300 => _300.length]) || 0
+  }), [mainRate, changeIndicator, _optionalChain([steps, 'optionalAccess', _301 => _301.length])]);
   useChartRegistration({
     chartId,
     legendItems: [],
@@ -5635,8 +5984,8 @@ var ConversionFunnelChartInternal = ({
               direction: "column",
               justify: "flex-end",
               className: conversion_funnel_chart_module_default["bar-container"],
-              onClick: _optionalChain([stepHandlers, 'access', _289 => _289.get, 'call', _290 => _290(step.id), 'optionalAccess', _291 => _291.onClick]),
-              onKeyDown: _optionalChain([stepHandlers, 'access', _292 => _292.get, 'call', _293 => _293(step.id), 'optionalAccess', _294 => _294.onKeyDown]),
+              onClick: _optionalChain([stepHandlers, 'access', _302 => _302.get, 'call', _303 => _303(step.id), 'optionalAccess', _304 => _304.onClick]),
+              onKeyDown: _optionalChain([stepHandlers, 'access', _305 => _305.get, 'call', _306 => _306(step.id), 'optionalAccess', _307 => _307.onKeyDown]),
               role: "button",
               tabIndex: isBlurred ? -1 : 0,
               "aria-label": step.label,
@@ -7186,10 +7535,10 @@ var jsx = function jsx2(type, props) {
   }
   return React7.createElement.apply(null, createElementArgArray);
 };
-(function(_jsx32) {
+(function(_jsx33) {
   var JSX;
   /* @__PURE__ */ (function(_JSX) {
-  })(JSX || (JSX = _jsx32.JSX || (_jsx32.JSX = {})));
+  })(JSX || (JSX = _jsx33.JSX || (_jsx33.JSX = {})));
 })(jsx || (jsx = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -7649,7 +7998,7 @@ function contextConnect(Component2, namespace) {
   });
 }
 function _contextConnect(Component2, namespace, options) {
-  const WrappedComponent = _optionalChain([options, 'optionalAccess', _295 => _295.forwardsRef]) ? _react.forwardRef.call(void 0, Component2) : Component2;
+  const WrappedComponent = _optionalChain([options, 'optionalAccess', _308 => _308.forwardsRef]) ? _react.forwardRef.call(void 0, Component2) : Component2;
   if (typeof namespace === "undefined") {
     globalThis.SCRIPT_DEBUG === true ? warning("contextConnect: Please provide a namespace") : void 0;
   }
@@ -7685,7 +8034,7 @@ function useContextSystem(props, namespace) {
   if (typeof namespace === "undefined") {
     globalThis.SCRIPT_DEBUG === true ? warning("useContextSystem: Please provide a namespace") : void 0;
   }
-  const contextProps = _optionalChain([contextSystemProps, 'optionalAccess', _296 => _296[namespace]]) || {};
+  const contextProps = _optionalChain([contextSystemProps, 'optionalAccess', _309 => _309[namespace]]) || {};
   const finalComponentProps = {
     ...getConnectedNamespace(),
     ...getNamespace(namespace)
@@ -8066,7 +8415,7 @@ function useLeaderboardLegendItems({
       overrideColor: primaryColor || leaderboardChartSettings.primaryColor
     });
     items.push({
-      label: _optionalChain([legendLabels, 'optionalAccess', _297 => _297.primary]) || _i18n.__.call(void 0, "Current period", "jetpack-charts"),
+      label: _optionalChain([legendLabels, 'optionalAccess', _310 => _310.primary]) || _i18n.__.call(void 0, "Current period", "jetpack-charts"),
       color: resolvedPrimaryColor
     });
     if (withComparison && !withOverlayLabel) {
@@ -8075,7 +8424,7 @@ function useLeaderboardLegendItems({
         overrideColor: secondaryColor || leaderboardChartSettings.secondaryColor
       });
       items.push({
-        label: _optionalChain([legendLabels, 'optionalAccess', _298 => _298.comparison]) || _i18n.__.call(void 0, "Previous period", "jetpack-charts"),
+        label: _optionalChain([legendLabels, 'optionalAccess', _311 => _311.comparison]) || _i18n.__.call(void 0, "Previous period", "jetpack-charts"),
         color: resolvedSecondaryColor
       });
     }
@@ -8734,11 +9083,11 @@ var PieChartInternal = ({
                       groupProps.onMouseLeave = onMouseLeave;
                     }
                     const svgLabelSmall = providerTheme.svgLabelSmall;
-                    const fontSize = _nullishCoalesce(resolveFontSize(_optionalChain([svgLabelSmall, 'optionalAccess', _299 => _299.fontSize])), () => ( 12));
+                    const fontSize = _nullishCoalesce(resolveFontSize(_optionalChain([svgLabelSmall, 'optionalAccess', _312 => _312.fontSize])), () => ( 12));
                     const estimatedTextWidth = _chunk7OZEQ5HEcjs.getStringWidth.call(void 0, arc.data.label, {
                       fontSize,
-                      fontFamily: _optionalChain([svgLabelSmall, 'optionalAccess', _300 => _300.fontFamily]),
-                      fontWeight: _optionalChain([svgLabelSmall, 'optionalAccess', _301 => _301.fontWeight])
+                      fontFamily: _optionalChain([svgLabelSmall, 'optionalAccess', _313 => _313.fontFamily]),
+                      fontWeight: _optionalChain([svgLabelSmall, 'optionalAccess', _314 => _314.fontWeight])
                     });
                     const labelPadding = 6;
                     const backgroundWidth = estimatedTextWidth + labelPadding * 2;
@@ -9188,7 +9537,7 @@ var SparklineComponent = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
   animation
 }, ref) => {
   const theme = useGlobalChartsTheme();
-  const themeStrokeWidth = _nullishCoalesce(_optionalChain([theme, 'access', _302 => _302.sparkline, 'optionalAccess', _303 => _303.strokeWidth]), () => ( 1.5));
+  const themeStrokeWidth = _nullishCoalesce(_optionalChain([theme, 'access', _315 => _315.sparkline, 'optionalAccess', _316 => _316.strokeWidth]), () => ( 1.5));
   const strokeWidth = _nullishCoalesce(strokeWidthProp, () => ( themeStrokeWidth));
   const seriesData = _react.useMemo.call(void 0, () => {
     if (!data || data.length === 0) {
@@ -9197,7 +9546,7 @@ var SparklineComponent = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
     return transformToSeriesData(data, color, strokeWidth);
   }, [data, color, strokeWidth]);
   const finalMargin = _react.useMemo.call(void 0, () => {
-    const themeMargin = _nullishCoalesce(_optionalChain([theme, 'access', _304 => _304.sparkline, 'optionalAccess', _305 => _305.margin]), () => ( {
+    const themeMargin = _nullishCoalesce(_optionalChain([theme, 'access', _317 => _317.sparkline, 'optionalAccess', _318 => _318.margin]), () => ( {
       top: 2,
       right: 2,
       bottom: 2,
@@ -9208,7 +9557,7 @@ var SparklineComponent = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
       ...themeMargin,
       ...margin
     };
-  }, [marginProp, _optionalChain([theme, 'access', _306 => _306.sparkline, 'optionalAccess', _307 => _307.margin])]);
+  }, [marginProp, _optionalChain([theme, 'access', _319 => _319.sparkline, 'optionalAccess', _320 => _320.margin])]);
   const seriesWithGradient = _react.useMemo.call(void 0, () => {
     if (!gradient || seriesData.length === 0) {
       return seriesData;