@wordpress/components 31.0.1-next.8fd3f8831.0 → 32.0.0

package/build-module/utils/box-sizing.mjs

@@ -0,0 +1,18 @@
+// packages/components/src/utils/box-sizing.ts
+import { css } from "@emotion/react";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+var boxSizingReset = process.env.NODE_ENV === "production" ? {
+  name: "kv6lnz",
+  styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;}"
+} : {
+  name: "1pa5nhz-boxSizingReset",
+  styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;};label:boxSizingReset;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJveC1zaXppbmcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2lDIiwiZmlsZSI6ImJveC1zaXppbmcudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBib3hTaXppbmdSZXNldCA9IGNzc2Bcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblxuXHQqLFxuXHQqOjpiZWZvcmUsXG5cdCo6OmFmdGVyIHtcblx0XHRib3gtc2l6aW5nOiBpbmhlcml0O1xuXHR9XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export {
+  boxSizingReset
+};
+//# sourceMappingURL=box-sizing.mjs.map

package/build-module/utils/breakpoint-values.mjs

@@ -0,0 +1,17 @@
+// packages/components/src/utils/breakpoint-values.js
+var breakpoint_values_default = {
+  huge: "1440px",
+  wide: "1280px",
+  "x-large": "1080px",
+  large: "960px",
+  // admin sidebar auto folds
+  medium: "782px",
+  // Adminbar goes big.
+  small: "600px",
+  mobile: "480px",
+  "zoomed-in": "280px"
+};
+export {
+  breakpoint_values_default as default
+};
+//# sourceMappingURL=breakpoint-values.mjs.map

package/build-module/utils/breakpoint.mjs

@@ -0,0 +1,7 @@
+// packages/components/src/utils/breakpoint.js
+import breakpoints from "./breakpoint-values.mjs";
+var breakpoint = (point) => `@media (min-width: ${breakpoints[point]})`;
+export {
+  breakpoint
+};
+//# sourceMappingURL=breakpoint.mjs.map

package/build-module/utils/colors-values.mjs

@@ -0,0 +1,86 @@
+// packages/components/src/utils/colors-values.js
+var white = "#fff";
+var GRAY = {
+  900: "#1e1e1e",
+  800: "#2f2f2f",
+  /** Meets 4.6:1 text contrast against white. */
+  700: "#757575",
+  /** Meets 3:1 UI or large text contrast against white. */
+  600: "#949494",
+  400: "#ccc",
+  /** Used for most borders. */
+  300: "#ddd",
+  /** Used sparingly for light borders. */
+  200: "#e0e0e0",
+  /** Used for light gray backgrounds. */
+  100: "#f0f0f0"
+};
+var ALERT = {
+  yellow: "#f0b849",
+  red: "#d94f4f",
+  green: "#4ab866"
+};
+var THEME = {
+  accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,
+  accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,
+  accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,
+  /** Used when placing text on the accent color. */
+  accentInverted: `var(--wp-components-color-accent-inverted, ${white})`,
+  background: `var(--wp-components-color-background, ${white})`,
+  foreground: `var(--wp-components-color-foreground, ${GRAY[900]})`,
+  /** Used when placing text on the foreground color. */
+  foregroundInverted: `var(--wp-components-color-foreground-inverted, ${white})`,
+  gray: {
+    /** @deprecated Use `COLORS.theme.foreground` instead. */
+    900: `var(--wp-components-color-foreground, ${GRAY[900]})`,
+    800: `var(--wp-components-color-gray-800, ${GRAY[800]})`,
+    700: `var(--wp-components-color-gray-700, ${GRAY[700]})`,
+    600: `var(--wp-components-color-gray-600, ${GRAY[600]})`,
+    400: `var(--wp-components-color-gray-400, ${GRAY[400]})`,
+    300: `var(--wp-components-color-gray-300, ${GRAY[300]})`,
+    200: `var(--wp-components-color-gray-200, ${GRAY[200]})`,
+    100: `var(--wp-components-color-gray-100, ${GRAY[100]})`
+  }
+};
+var UI = {
+  background: THEME.background,
+  backgroundDisabled: THEME.gray[100],
+  border: THEME.gray[600],
+  borderHover: THEME.gray[700],
+  borderFocus: THEME.accent,
+  borderDisabled: THEME.gray[400],
+  textDisabled: THEME.gray[600],
+  // Matches @wordpress/base-styles
+  darkGrayPlaceholder: `color-mix(in srgb, ${THEME.foreground}, transparent 38%)`,
+  lightGrayPlaceholder: `color-mix(in srgb, ${THEME.background}, transparent 35%)`
+};
+var COLORS = Object.freeze({
+  /**
+   * The main gray color object.
+   *
+   * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.
+   */
+  gray: GRAY,
+  // TODO: Stop exporting this when everything is migrated to `theme` or `ui`
+  /**
+   * @deprecated Prefer theme-ready variables in `COLORS.theme`.
+   */
+  white,
+  alert: ALERT,
+  /**
+   * Theme-ready variables with fallbacks.
+   *
+   * Prefer semantic aliases in `COLORS.ui` when applicable.
+   */
+  theme: THEME,
+  /**
+   * Semantic aliases (prefer these over raw variables when applicable).
+   */
+  ui: UI
+});
+var colors_values_default = COLORS;
+export {
+  COLORS,
+  colors_values_default as default
+};
+//# sourceMappingURL=colors-values.mjs.map

package/build-module/utils/colors.mjs

@@ -0,0 +1,65 @@
+// packages/components/src/utils/colors.js
+import memoize from "memize";
+import { colord, extend } from "colord";
+import namesPlugin from "colord/plugins/names";
+var colorComputationNode;
+extend([namesPlugin]);
+function rgba(hexValue = "", alpha = 1) {
+  return colord(hexValue).alpha(alpha).toRgbString();
+}
+function getColorComputationNode() {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (!colorComputationNode) {
+    const el = document.createElement("div");
+    el.setAttribute("data-g2-color-computation-node", "");
+    document.body.appendChild(el);
+    colorComputationNode = el;
+  }
+  return colorComputationNode;
+}
+function isColor(value) {
+  if (typeof value !== "string") {
+    return false;
+  }
+  const test = colord(value);
+  return test.isValid();
+}
+function _getComputedBackgroundColor(backgroundColor) {
+  if (typeof backgroundColor !== "string") {
+    return "";
+  }
+  if (isColor(backgroundColor)) {
+    return backgroundColor;
+  }
+  if (!backgroundColor.includes("var(")) {
+    return "";
+  }
+  if (typeof document === "undefined") {
+    return "";
+  }
+  const el = getColorComputationNode();
+  if (!el) {
+    return "";
+  }
+  el.style.background = backgroundColor;
+  const computedColor = window?.getComputedStyle(el).background;
+  el.style.background = "";
+  return computedColor || "";
+}
+var getComputedBackgroundColor = memoize(_getComputedBackgroundColor);
+function getOptimalTextColor(backgroundColor) {
+  const background = getComputedBackgroundColor(backgroundColor);
+  return colord(background).isLight() ? "#000000" : "#ffffff";
+}
+function getOptimalTextShade(backgroundColor) {
+  const result = getOptimalTextColor(backgroundColor);
+  return result === "#000000" ? "dark" : "light";
+}
+export {
+  getOptimalTextColor,
+  getOptimalTextShade,
+  rgba
+};
+//# sourceMappingURL=colors.mjs.map

package/build-module/utils/config-values.mjs

@@ -0,0 +1,72 @@
+// packages/components/src/utils/config-values.js
+import { COLORS } from "./colors-values.mjs";
+var CONTROL_HEIGHT = "36px";
+var CONTROL_PROPS = {
+  // These values should be shared with TextControl.
+  controlPaddingX: 12,
+  controlPaddingXSmall: 8,
+  controlPaddingXLarge: 12 * 1.3334,
+  // TODO: Deprecate
+  controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,
+  controlHeight: CONTROL_HEIGHT,
+  controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,
+  controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,
+  controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,
+  controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`
+};
+var config_values_default = Object.assign({}, CONTROL_PROPS, {
+  colorDivider: "rgba(0, 0, 0, 0.1)",
+  colorScrollbarThumb: "rgba(0, 0, 0, 0.2)",
+  colorScrollbarThumbHover: "rgba(0, 0, 0, 0.5)",
+  colorScrollbarTrack: "rgba(0, 0, 0, 0.04)",
+  elevationIntensity: 1,
+  radiusXSmall: "1px",
+  radiusSmall: "2px",
+  radiusMedium: "4px",
+  radiusLarge: "8px",
+  radiusFull: "9999px",
+  radiusRound: "50%",
+  borderWidth: "1px",
+  borderWidthFocus: "1.5px",
+  borderWidthTab: "4px",
+  spinnerSize: 16,
+  fontSize: "13px",
+  fontSizeH1: "calc(2.44 * 13px)",
+  fontSizeH2: "calc(1.95 * 13px)",
+  fontSizeH3: "calc(1.56 * 13px)",
+  fontSizeH4: "calc(1.25 * 13px)",
+  fontSizeH5: "13px",
+  fontSizeH6: "calc(0.8 * 13px)",
+  fontSizeInputMobile: "16px",
+  fontSizeMobile: "15px",
+  fontSizeSmall: "calc(0.92 * 13px)",
+  fontSizeXSmall: "calc(0.75 * 13px)",
+  fontLineHeightBase: "1.4",
+  fontWeight: "normal",
+  fontWeightMedium: "499",
+  // ensures fallback to 400 (instead of 600)
+  fontWeightHeading: "600",
+  gridBase: "4px",
+  elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
+  elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
+  elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
+  elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
+  surfaceBackgroundColor: COLORS.white,
+  surfaceBackgroundSubtleColor: "#F3F3F3",
+  surfaceBackgroundTintColor: "#F5F5F5",
+  surfaceBorderColor: "rgba(0, 0, 0, 0.1)",
+  surfaceBorderBoldColor: "rgba(0, 0, 0, 0.15)",
+  surfaceBorderSubtleColor: "rgba(0, 0, 0, 0.05)",
+  surfaceBackgroundTertiaryColor: COLORS.white,
+  surfaceColor: COLORS.white,
+  transitionDuration: "200ms",
+  transitionDurationFast: "160ms",
+  transitionDurationFaster: "120ms",
+  transitionDurationFastest: "100ms",
+  transitionTimingFunction: "cubic-bezier(0.08, 0.52, 0.52, 1)",
+  transitionTimingFunctionControl: "cubic-bezier(0.12, 0.8, 0.32, 1)"
+});
+export {
+  config_values_default as default
+};
+//# sourceMappingURL=config-values.mjs.map

package/build-module/utils/deprecated-36px-size.mjs

@@ -0,0 +1,21 @@
+// packages/components/src/utils/deprecated-36px-size.ts
+import deprecated from "@wordpress/deprecated";
+function maybeWarnDeprecated36pxSize({
+  componentName,
+  __next40pxDefaultSize,
+  size,
+  __shouldNotWarnDeprecated36pxSize
+}) {
+  if (__shouldNotWarnDeprecated36pxSize || __next40pxDefaultSize || size !== void 0 && size !== "default") {
+    return;
+  }
+  deprecated(`36px default size for wp.components.${componentName}`, {
+    since: "6.8",
+    version: "7.1",
+    hint: "Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version."
+  });
+}
+export {
+  maybeWarnDeprecated36pxSize
+};
+//# sourceMappingURL=deprecated-36px-size.mjs.map

package/build-module/utils/dropdown-motion.mjs

@@ -0,0 +1,31 @@
+// packages/components/src/utils/dropdown-motion.ts
+var DROPDOWN_MOTION = Object.freeze({
+  SLIDE_DISTANCE: 4,
+  SLIDE_DURATION: 200,
+  SLIDE_EASING: {
+    function: "cubic-bezier",
+    args: [0, 0, 0, 1]
+  },
+  FADE_DURATION: 80,
+  FADE_EASING: {
+    function: "linear"
+  }
+});
+var convertEasingToString = (easing) => {
+  if (easing.args?.length) {
+    return `${easing.function}(${easing.args.join(",")})`;
+  }
+  return easing.function;
+};
+var DROPDOWN_MOTION_CSS = Object.freeze({
+  SLIDE_DISTANCE: `${DROPDOWN_MOTION.SLIDE_DISTANCE}px`,
+  SLIDE_DURATION: `${DROPDOWN_MOTION.SLIDE_DURATION}ms`,
+  SLIDE_EASING: convertEasingToString(DROPDOWN_MOTION.SLIDE_EASING),
+  FADE_DURATION: `${DROPDOWN_MOTION.FADE_DURATION}ms`,
+  FADE_EASING: convertEasingToString(DROPDOWN_MOTION.FADE_EASING)
+});
+export {
+  DROPDOWN_MOTION,
+  DROPDOWN_MOTION_CSS
+};
+//# sourceMappingURL=dropdown-motion.mjs.map

package/build-module/utils/element-rect.mjs

@@ -0,0 +1,84 @@
+// packages/components/src/utils/element-rect.ts
+import { useLayoutEffect, useRef, useState } from "@wordpress/element";
+import { useEvent, useResizeObserver } from "@wordpress/compose";
+var NULL_ELEMENT_OFFSET_RECT = {
+  element: void 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+function getElementOffsetRect(element) {
+  var _offsetParent$getBoun, _offsetParent$scrollL, _offsetParent$scrollT;
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return;
+  }
+  const offsetParent = element.offsetParent;
+  const offsetParentRect = (_offsetParent$getBoun = offsetParent?.getBoundingClientRect()) !== null && _offsetParent$getBoun !== void 0 ? _offsetParent$getBoun : NULL_ELEMENT_OFFSET_RECT;
+  const offsetParentScrollX = (_offsetParent$scrollL = offsetParent?.scrollLeft) !== null && _offsetParent$scrollL !== void 0 ? _offsetParent$scrollL : 0;
+  const offsetParentScrollY = (_offsetParent$scrollT = offsetParent?.scrollTop) !== null && _offsetParent$scrollT !== void 0 ? _offsetParent$scrollT : 0;
+  const computedWidth = parseFloat(getComputedStyle(element).width);
+  const computedHeight = parseFloat(getComputedStyle(element).height);
+  const scaleX = computedWidth / rect.width;
+  const scaleY = computedHeight / rect.height;
+  return {
+    element,
+    // To obtain the adjusted values for the position:
+    // 1. Compute the element's position relative to the offset parent.
+    // 2. Correct for the scale factor.
+    // 3. Adjust for the scroll position of the offset parent.
+    top: (rect.top - offsetParentRect?.top) * scaleY + offsetParentScrollY,
+    right: (offsetParentRect?.right - rect.right) * scaleX - offsetParentScrollX,
+    bottom: (offsetParentRect?.bottom - rect.bottom) * scaleY - offsetParentScrollY,
+    left: (rect.left - offsetParentRect?.left) * scaleX + offsetParentScrollX,
+    // Computed dimensions don't need any adjustments.
+    width: computedWidth,
+    height: computedHeight
+  };
+}
+var POLL_RATE = 100;
+function useTrackElementOffsetRect(targetElement, deps = []) {
+  const [indicatorPosition, setIndicatorPosition] = useState(NULL_ELEMENT_OFFSET_RECT);
+  const intervalRef = useRef();
+  const measure = useEvent(() => {
+    if (targetElement && targetElement.isConnected) {
+      const elementOffsetRect = getElementOffsetRect(targetElement);
+      if (elementOffsetRect) {
+        setIndicatorPosition(elementOffsetRect);
+        clearInterval(intervalRef.current);
+        return true;
+      }
+    } else {
+      clearInterval(intervalRef.current);
+    }
+    return false;
+  });
+  const setElement = useResizeObserver(() => {
+    if (!measure()) {
+      requestAnimationFrame(() => {
+        if (!measure()) {
+          intervalRef.current = setInterval(measure, POLL_RATE);
+        }
+      });
+    }
+  });
+  useLayoutEffect(() => {
+    setElement(targetElement);
+    if (!targetElement) {
+      setIndicatorPosition(NULL_ELEMENT_OFFSET_RECT);
+    }
+  }, [setElement, targetElement]);
+  useLayoutEffect(() => {
+    measure();
+  }, deps);
+  return indicatorPosition;
+}
+export {
+  NULL_ELEMENT_OFFSET_RECT,
+  getElementOffsetRect,
+  useTrackElementOffsetRect
+};
+//# sourceMappingURL=element-rect.mjs.map

package/build-module/utils/font-size.mjs

@@ -0,0 +1,41 @@
+// packages/components/src/utils/font-size.ts
+import CONFIG from "./config-values.mjs";
+var BASE_FONT_SIZE = 13;
+var PRESET_FONT_SIZES = {
+  body: BASE_FONT_SIZE,
+  caption: 10,
+  footnote: 11,
+  largeTitle: 28,
+  subheadline: 12,
+  title: 20
+};
+var HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap((n) => [n, n.toString()]);
+function getFontSize(size = BASE_FONT_SIZE) {
+  if (size in PRESET_FONT_SIZES) {
+    return getFontSize(PRESET_FONT_SIZES[size]);
+  }
+  if (typeof size !== "number") {
+    const parsed = parseFloat(size);
+    if (Number.isNaN(parsed)) {
+      return size;
+    }
+    size = parsed;
+  }
+  const ratio = `(${size} / ${BASE_FONT_SIZE})`;
+  return `calc(${ratio} * ${CONFIG.fontSize})`;
+}
+function getHeadingFontSize(size = 3) {
+  if (!HEADING_FONT_SIZES.includes(size)) {
+    return getFontSize(size);
+  }
+  const headingSize = `fontSizeH${size}`;
+  return CONFIG[headingSize];
+}
+export {
+  BASE_FONT_SIZE,
+  HEADING_FONT_SIZES,
+  PRESET_FONT_SIZES,
+  getFontSize,
+  getHeadingFontSize
+};
+//# sourceMappingURL=font-size.mjs.map

package/build-module/utils/font-values.mjs

@@ -0,0 +1,11 @@
+// packages/components/src/utils/font-values.js
+var font_values_default = {
+  "default.fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+  "default.fontSize": "13px",
+  "helpText.fontSize": "12px",
+  mobileTextMinFontSize: "16px"
+};
+export {
+  font_values_default as default
+};
+//# sourceMappingURL=font-values.mjs.map

package/build-module/utils/font.mjs

@@ -0,0 +1,10 @@
+// packages/components/src/utils/font.js
+import FONT from "./font-values.mjs";
+function font(value) {
+  var _FONT$value;
+  return (_FONT$value = FONT[value]) !== null && _FONT$value !== void 0 ? _FONT$value : "";
+}
+export {
+  font
+};
+//# sourceMappingURL=font.mjs.map

package/build-module/utils/get-node-text.mjs

@@ -0,0 +1,27 @@
+// packages/components/src/utils/get-node-text.ts
+var getNodeText = (node) => {
+  if (node === null) {
+    return "";
+  }
+  switch (typeof node) {
+    case "string":
+    case "number":
+      return node.toString();
+    case "object": {
+      if (node instanceof Array) {
+        return node.map(getNodeText).join("");
+      }
+      if ("props" in node) {
+        return getNodeText(node.props.children);
+      }
+      return "";
+    }
+    default:
+      return "";
+  }
+};
+var get_node_text_default = getNodeText;
+export {
+  get_node_text_default as default
+};
+//# sourceMappingURL=get-node-text.mjs.map

package/build-module/utils/get-valid-children.mjs

@@ -0,0 +1,12 @@
+// packages/components/src/utils/get-valid-children.ts
+import { Children, isValidElement } from "@wordpress/element";
+function getValidChildren(children) {
+  if (typeof children === "string") {
+    return [children];
+  }
+  return Children.toArray(children).filter((child) => isValidElement(child));
+}
+export {
+  getValidChildren
+};
+//# sourceMappingURL=get-valid-children.mjs.map

package/build-module/utils/hooks/emotion.d.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=emotion.d.mjs.map

package/build-module/utils/hooks/index.mjs

@@ -0,0 +1,12 @@
+// packages/components/src/utils/hooks/index.js
+import { default as default2 } from "./use-controlled-state.mjs";
+import { default as default3 } from "./use-update-effect.mjs";
+import { useControlledValue } from "./use-controlled-value.mjs";
+import { useCx } from "./use-cx.mjs";
+export {
+  default2 as useControlledState,
+  useControlledValue,
+  useCx,
+  default3 as useUpdateEffect
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/utils/hooks/use-animated-offset-rect.mjs

@@ -0,0 +1,37 @@
+// packages/components/src/utils/hooks/use-animated-offset-rect.ts
+import { useEvent } from "@wordpress/compose";
+import { useLayoutEffect } from "@wordpress/element";
+import { useOnValueUpdate } from "./use-on-value-update.mjs";
+function useAnimatedOffsetRect(container, rect, {
+  prefix = "subelement",
+  dataAttribute = `${prefix}-animated`,
+  transitionEndFilter = () => true,
+  roundRect = false
+} = {}) {
+  const setProperties = useEvent(() => {
+    Object.keys(rect).forEach((property) => property !== "element" && container?.style.setProperty(`--${prefix}-${property}`, String(roundRect ? Math.floor(rect[property]) : rect[property])));
+  });
+  useLayoutEffect(() => {
+    setProperties();
+  }, [rect, setProperties]);
+  useOnValueUpdate(rect.element, ({
+    previousValue
+  }) => {
+    if (rect.element && previousValue) {
+      container?.setAttribute(`data-${dataAttribute}`, "");
+    }
+  });
+  useLayoutEffect(() => {
+    function onTransitionEnd(event) {
+      if (transitionEndFilter(event)) {
+        container?.removeAttribute(`data-${dataAttribute}`);
+      }
+    }
+    container?.addEventListener("transitionend", onTransitionEnd);
+    return () => container?.removeEventListener("transitionend", onTransitionEnd);
+  }, [dataAttribute, container, transitionEndFilter]);
+}
+export {
+  useAnimatedOffsetRect
+};
+//# sourceMappingURL=use-animated-offset-rect.mjs.map

package/build-module/utils/hooks/use-controlled-state.mjs

@@ -0,0 +1,39 @@
+// packages/components/src/utils/hooks/use-controlled-state.js
+import { useEffect, useState, useCallback } from "@wordpress/element";
+import { isValueDefined, getDefinedValue } from "../values.mjs";
+var defaultOptions = {
+  initial: void 0,
+  /**
+   * Defaults to empty string, as that is preferred for usage with
+   * <input />, <textarea />, and <select /> form elements.
+   */
+  fallback: ""
+};
+function useControlledState(currentState, options = defaultOptions) {
+  const {
+    initial,
+    fallback
+  } = {
+    ...defaultOptions,
+    ...options
+  };
+  const [internalState, setInternalState] = useState(currentState);
+  const hasCurrentState = isValueDefined(currentState);
+  useEffect(() => {
+    if (hasCurrentState && internalState) {
+      setInternalState(void 0);
+    }
+  }, [hasCurrentState, internalState]);
+  const state = getDefinedValue([currentState, internalState, initial], fallback);
+  const setState = useCallback((nextState) => {
+    if (!hasCurrentState) {
+      setInternalState(nextState);
+    }
+  }, [hasCurrentState]);
+  return [state, setState];
+}
+var use_controlled_state_default = useControlledState;
+export {
+  use_controlled_state_default as default
+};
+//# sourceMappingURL=use-controlled-state.mjs.map

package/build-module/utils/hooks/use-controlled-value.mjs

@@ -0,0 +1,29 @@
+// packages/components/src/utils/hooks/use-controlled-value.ts
+import { useCallback, useState } from "@wordpress/element";
+function useControlledValue({
+  defaultValue,
+  onChange,
+  value: valueProp
+}) {
+  const hasValue = typeof valueProp !== "undefined";
+  const initialValue = hasValue ? valueProp : defaultValue;
+  const [state, setState] = useState(initialValue);
+  const value = hasValue ? valueProp : state;
+  const uncontrolledSetValue = useCallback((nextValue, ...args) => {
+    setState(nextValue);
+    onChange?.(nextValue, ...args);
+  }, [onChange]);
+  let setValue;
+  if (hasValue && typeof onChange === "function") {
+    setValue = onChange;
+  } else if (!hasValue && typeof onChange === "function") {
+    setValue = uncontrolledSetValue;
+  } else {
+    setValue = setState;
+  }
+  return [value, setValue];
+}
+export {
+  useControlledValue
+};
+//# sourceMappingURL=use-controlled-value.mjs.map

package/build-module/utils/hooks/use-cx.mjs

@@ -0,0 +1,26 @@
+// packages/components/src/utils/hooks/use-cx.ts
+import { __unsafe_useEmotionCache as useEmotionCache } from "@emotion/react";
+import { insertStyles } from "@emotion/utils";
+import { cx as innerCx } from "@emotion/css";
+import { useCallback } from "@wordpress/element";
+var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
+var useCx = () => {
+  const cache = useEmotionCache();
+  const cx = useCallback((...classNames) => {
+    if (cache === null) {
+      throw new Error("The `useCx` hook should be only used within a valid Emotion Cache Context");
+    }
+    return innerCx(...classNames.map((arg) => {
+      if (isSerializedStyles(arg)) {
+        insertStyles(cache, arg, false);
+        return `${cache.key}-${arg.name}`;
+      }
+      return arg;
+    }));
+  }, [cache]);
+  return cx;
+};
+export {
+  useCx
+};
+//# sourceMappingURL=use-cx.mjs.map