@wordpress/components 31.0.1-next.6deb34194.0 → 31.0.1-next.76cff8c98.0

package/build-module/theme/color-algorithms.mjs

@@ -0,0 +1,94 @@
+// packages/components/src/theme/color-algorithms.ts
+import { colord, extend } from "colord";
+import a11yPlugin from "colord/plugins/a11y";
+import namesPlugin from "colord/plugins/names";
+import warning from "@wordpress/warning";
+import { COLORS } from "../utils/index.mjs";
+extend([namesPlugin, a11yPlugin]);
+function generateThemeVariables(inputs) {
+  validateInputs(inputs);
+  const generatedColors = {
+    ...generateAccentDependentColors(inputs.accent),
+    ...generateBackgroundDependentColors(inputs.background)
+  };
+  warnContrastIssues(checkContrasts(inputs, generatedColors));
+  return {
+    colors: generatedColors
+  };
+}
+function validateInputs(inputs) {
+  for (const [key, value] of Object.entries(inputs)) {
+    if (typeof value !== "undefined" && !colord(value).isValid()) {
+      globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.Theme: "${value}" is not a valid color value for the '${key}' prop.`) : void 0;
+    }
+  }
+}
+function checkContrasts(inputs, outputs) {
+  const background = inputs.background || COLORS.white;
+  const accent = inputs.accent || "#3858e9";
+  const foreground = outputs.foreground || COLORS.gray[900];
+  const gray = outputs.gray || COLORS.gray;
+  return {
+    accent: colord(background).isReadable(accent) ? void 0 : `The background color ("${background}") does not have sufficient contrast against the accent color ("${accent}").`,
+    foreground: colord(background).isReadable(foreground) ? void 0 : `The background color provided ("${background}") does not have sufficient contrast against the standard foreground colors.`,
+    grays: colord(background).contrast(gray[600]) >= 3 && colord(background).contrast(gray[700]) >= 4.5 ? void 0 : `The background color provided ("${background}") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.`
+  };
+}
+function warnContrastIssues(issues) {
+  for (const error of Object.values(issues)) {
+    if (error) {
+      globalThis.SCRIPT_DEBUG === true ? warning("wp.components.Theme: " + error) : void 0;
+    }
+  }
+}
+function generateAccentDependentColors(accent) {
+  if (!accent) {
+    return {};
+  }
+  return {
+    accent,
+    accentDarker10: colord(accent).darken(0.1).toHex(),
+    accentDarker20: colord(accent).darken(0.2).toHex(),
+    accentInverted: getForegroundForColor(accent)
+  };
+}
+function generateBackgroundDependentColors(background) {
+  if (!background) {
+    return {};
+  }
+  const foreground = getForegroundForColor(background);
+  return {
+    background,
+    foreground,
+    foregroundInverted: getForegroundForColor(foreground),
+    gray: generateShades(background, foreground)
+  };
+}
+function getForegroundForColor(color) {
+  return colord(color).isDark() ? COLORS.white : COLORS.gray[900];
+}
+function generateShades(background, foreground) {
+  const SHADES = {
+    100: 0.06,
+    200: 0.121,
+    300: 0.132,
+    400: 0.2,
+    600: 0.42,
+    700: 0.543,
+    800: 0.821
+  };
+  const limit = 0.884;
+  const direction = colord(background).isDark() ? "lighten" : "darken";
+  const range = Math.abs(colord(background).toHsl().l - colord(foreground).toHsl().l) / 100;
+  const result = {};
+  Object.entries(SHADES).forEach(([key, value]) => {
+    result[parseInt(key)] = colord(background)[direction](value / limit * range).toHex();
+  });
+  return result;
+}
+export {
+  checkContrasts,
+  generateShades,
+  generateThemeVariables
+};
+//# sourceMappingURL=color-algorithms.mjs.map

package/build-module/theme/index.mjs

@@ -0,0 +1,27 @@
+// packages/components/src/theme/index.tsx
+import { useMemo } from "@wordpress/element";
+import { colorVariables, Wrapper } from "./styles.mjs";
+import { generateThemeVariables } from "./color-algorithms.mjs";
+import { useCx } from "../utils/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Theme({
+  accent,
+  background,
+  className,
+  ...props
+}) {
+  const cx = useCx();
+  const classes = useMemo(() => cx(...colorVariables(generateThemeVariables({
+    accent,
+    background
+  })), className), [accent, background, className, cx]);
+  return /* @__PURE__ */ _jsx(Wrapper, {
+    className: classes,
+    ...props
+  });
+}
+var theme_default = Theme;
+export {
+  theme_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/theme/styles.mjs

@@ -0,0 +1,31 @@
+// packages/components/src/theme/styles.ts
+import _styled from "@emotion/styled/base";
+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 colorVariables = ({
+  colors
+}) => {
+  const shades = Object.entries(colors.gray || {}).map(([k, v]) => `--wp-components-color-gray-${k}: ${v};`).join("");
+  return [/* @__PURE__ */ css("--wp-components-color-accent:", colors.accent, ";--wp-components-color-accent-darker-10:", colors.accentDarker10, ";--wp-components-color-accent-darker-20:", colors.accentDarker20, ";--wp-components-color-accent-inverted:", colors.accentInverted, ";--wp-components-color-background:", colors.background, ";--wp-components-color-foreground:", colors.foreground, ";--wp-components-color-foreground-inverted:", colors.foregroundInverted, ";", shades, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:colorVariables;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQksiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IFRoZW1lT3V0cHV0VmFsdWVzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBjb2xvclZhcmlhYmxlcyA9ICggeyBjb2xvcnMgfTogVGhlbWVPdXRwdXRWYWx1ZXMgKSA9PiB7XG5cdGNvbnN0IHNoYWRlcyA9IE9iamVjdC5lbnRyaWVzKCBjb2xvcnMuZ3JheSB8fCB7fSApXG5cdFx0Lm1hcCggKCBbIGssIHYgXSApID0+IGAtLXdwLWNvbXBvbmVudHMtY29sb3ItZ3JheS0keyBrIH06ICR7IHYgfTtgIClcblx0XHQuam9pbiggJycgKTtcblxuXHRyZXR1cm4gW1xuXHRcdGNzc2Bcblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1hY2NlbnQ6ICR7IGNvbG9ycy5hY2NlbnQgfTtcblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1hY2NlbnQtZGFya2VyLTEwOiAkeyBjb2xvcnMuYWNjZW50RGFya2VyMTAgfTtcblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1hY2NlbnQtZGFya2VyLTIwOiAkeyBjb2xvcnMuYWNjZW50RGFya2VyMjAgfTtcblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1hY2NlbnQtaW52ZXJ0ZWQ6ICR7IGNvbG9ycy5hY2NlbnRJbnZlcnRlZCB9O1xuXG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYmFja2dyb3VuZDogJHsgY29sb3JzLmJhY2tncm91bmQgfTtcblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1mb3JlZ3JvdW5kOiAkeyBjb2xvcnMuZm9yZWdyb3VuZCB9O1xuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWZvcmVncm91bmQtaW52ZXJ0ZWQ6ICR7IGNvbG9ycy5mb3JlZ3JvdW5kSW52ZXJ0ZWQgfTtcblxuXHRcdFx0JHsgc2hhZGVzIH1cblx0XHRgLFxuXHRdO1xufTtcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRjb2xvcjogdmFyKCAtLXdwLWNvbXBvbmVudHMtY29sb3ItZm9yZWdyb3VuZCwgY3VycmVudENvbG9yICk7XG5gO1xuIl19 */")];
+};
+var Wrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1krjpvb0"
+} : {
+  target: "e1krjpvb0",
+  label: "Wrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1a3idx0",
+  styles: "color:var( --wp-components-color-foreground, currentColor )"
+} : {
+  name: "1a3idx0",
+  styles: "color:var( --wp-components-color-foreground, currentColor )",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQ2lDIiwiZmlsZSI6InN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBUaGVtZU91dHB1dFZhbHVlcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgY29sb3JWYXJpYWJsZXMgPSAoIHsgY29sb3JzIH06IFRoZW1lT3V0cHV0VmFsdWVzICkgPT4ge1xuXHRjb25zdCBzaGFkZXMgPSBPYmplY3QuZW50cmllcyggY29sb3JzLmdyYXkgfHwge30gKVxuXHRcdC5tYXAoICggWyBrLCB2IF0gKSA9PiBgLS13cC1jb21wb25lbnRzLWNvbG9yLWdyYXktJHsgayB9OiAkeyB2IH07YCApXG5cdFx0LmpvaW4oICcnICk7XG5cblx0cmV0dXJuIFtcblx0XHRjc3NgXG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50OiAkeyBjb2xvcnMuYWNjZW50IH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0xMDogJHsgY29sb3JzLmFjY2VudERhcmtlcjEwIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0yMDogJHsgY29sb3JzLmFjY2VudERhcmtlcjIwIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWludmVydGVkOiAkeyBjb2xvcnMuYWNjZW50SW52ZXJ0ZWQgfTtcblxuXHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWJhY2tncm91bmQ6ICR7IGNvbG9ycy5iYWNrZ3JvdW5kIH07XG5cdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItZm9yZWdyb3VuZDogJHsgY29sb3JzLmZvcmVncm91bmQgfTtcblx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1mb3JlZ3JvdW5kLWludmVydGVkOiAkeyBjb2xvcnMuZm9yZWdyb3VuZEludmVydGVkIH07XG5cblx0XHRcdCR7IHNoYWRlcyB9XG5cdFx0YCxcblx0XTtcbn07XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Y29sb3I6IHZhciggLS13cC1jb21wb25lbnRzLWNvbG9yLWZvcmVncm91bmQsIGN1cnJlbnRDb2xvciApO1xuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export {
+  Wrapper,
+  colorVariables
+};
+//# sourceMappingURL=styles.mjs.map

package/build-module/theme/types.mjs

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

package/build-module/tip/index.mjs

@@ -0,0 +1,22 @@
+// packages/components/src/tip/index.tsx
+import { Icon, tip } from "@wordpress/icons";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Tip(props) {
+  const {
+    children
+  } = props;
+  return /* @__PURE__ */ _jsxs("div", {
+    className: "components-tip",
+    children: [/* @__PURE__ */ _jsx(Icon, {
+      icon: tip
+    }), /* @__PURE__ */ _jsx("p", {
+      children
+    })]
+  });
+}
+var tip_default = Tip;
+export {
+  Tip,
+  tip_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/tip/types.mjs

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

package/build-module/toggle-control/index.mjs

@@ -0,0 +1,70 @@
+// packages/components/src/toggle-control/index.tsx
+import clsx from "clsx";
+import { forwardRef } from "@wordpress/element";
+import { useInstanceId } from "@wordpress/compose";
+import { FlexBlock } from "../flex/index.mjs";
+import FormToggle from "../form-toggle/index.mjs";
+import BaseControl from "../base-control/index.mjs";
+import { HStack } from "../h-stack/index.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function UnforwardedToggleControl({
+  label,
+  checked,
+  help,
+  className,
+  onChange,
+  disabled
+}, ref) {
+  function onChangeToggle(event) {
+    onChange(event.target.checked);
+  }
+  const instanceId = useInstanceId(ToggleControl);
+  const id = `inspector-toggle-control-${instanceId}`;
+  let describedBy, helpLabel;
+  if (help) {
+    if (typeof help === "function") {
+      if (checked !== void 0) {
+        helpLabel = help(checked);
+      }
+    } else {
+      helpLabel = help;
+    }
+    if (helpLabel) {
+      describedBy = id + "__help";
+    }
+  }
+  return /* @__PURE__ */ _jsx(BaseControl, {
+    id,
+    help: helpLabel && /* @__PURE__ */ _jsx("span", {
+      className: "components-toggle-control__help",
+      children: helpLabel
+    }),
+    className: clsx("components-toggle-control", className),
+    children: /* @__PURE__ */ _jsxs(HStack, {
+      justify: "flex-start",
+      spacing: 2,
+      children: [/* @__PURE__ */ _jsx(FormToggle, {
+        id,
+        checked,
+        onChange: onChangeToggle,
+        "aria-describedby": describedBy,
+        disabled,
+        ref
+      }), /* @__PURE__ */ _jsx(FlexBlock, {
+        as: "label",
+        htmlFor: id,
+        className: clsx("components-toggle-control__label", {
+          "is-disabled": disabled
+        }),
+        children: label
+      })]
+    })
+  });
+}
+var ToggleControl = forwardRef(UnforwardedToggleControl);
+var toggle_control_default = ToggleControl;
+export {
+  ToggleControl,
+  toggle_control_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/toggle-control/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/toggle-control/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedToggleControl({\n  label,\n  checked,\n  help,\n  className,\n  onChange,\n  disabled\n}, ref) {\n  function onChangeToggle(event) {\n    onChange(event.target.checked);\n  }\n  const instanceId = useInstanceId(ToggleControl);\n  const id = `inspector-toggle-control-${instanceId}`;\n  let describedBy, helpLabel;\n  if (help) {\n    if (typeof help === 'function') {\n      // `help` as a function works only for controlled components where\n      // `checked` is passed down from parent component. Uncontrolled\n      // component can show only a static help label.\n      if (checked !== undefined) {\n        helpLabel = help(checked);\n      }\n    } else {\n      helpLabel = help;\n    }\n    if (helpLabel) {\n      describedBy = id + '__help';\n    }\n  }\n  return /*#__PURE__*/_jsx(BaseControl, {\n    id: id,\n    help: helpLabel && /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-toggle-control__help\",\n      children: helpLabel\n    }),\n    className: clsx('components-toggle-control', className),\n    children: /*#__PURE__*/_jsxs(HStack, {\n      justify: \"flex-start\",\n      spacing: 2,\n      children: [/*#__PURE__*/_jsx(FormToggle, {\n        id: id,\n        checked: checked,\n        onChange: onChangeToggle,\n        \"aria-describedby\": describedBy,\n        disabled: disabled,\n        ref: ref\n      }), /*#__PURE__*/_jsx(FlexBlock, {\n        as: \"label\",\n        htmlFor: id,\n        className: clsx('components-toggle-control__label', {\n          'is-disabled': disabled\n        }),\n        children: label\n      })]\n    })\n  });\n}\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n *   const [ value, setValue ] = useState( false );\n *\n *   return (\n *     <ToggleControl\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const ToggleControl = forwardRef(UnforwardedToggleControl);\nexport default ToggleControl;"],
+  "mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAK9B,SAAS,iBAAiB;AAC1B,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,yBAAyB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,WAAS,eAAe,OAAO;AAC7B,aAAS,MAAM,OAAO,OAAO;AAAA,EAC/B;AACA,QAAM,aAAa,cAAc,aAAa;AAC9C,QAAM,KAAK,4BAA4B,UAAU;AACjD,MAAI,aAAa;AACjB,MAAI,MAAM;AACR,QAAI,OAAO,SAAS,YAAY;AAI9B,UAAI,YAAY,QAAW;AACzB,oBAAY,KAAK,OAAO;AAAA,MAC1B;AAAA,IACF,OAAO;AACL,kBAAY;AAAA,IACd;AACA,QAAI,WAAW;AACb,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AACA,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA,MAAM,aAA0B,qBAAK,QAAQ;AAAA,MAC3C,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC;AAAA,IACD,WAAW,KAAK,6BAA6B,SAAS;AAAA,IACtD,UAAuB,sBAAM,QAAQ;AAAA,MACnC,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU,CAAc,qBAAK,YAAY;AAAA,QACvC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,MACF,CAAC,GAAgB,qBAAK,WAAW;AAAA,QAC/B,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,WAAW,KAAK,oCAAoC;AAAA,UAClD,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;AAsBO,IAAM,gBAAgB,WAAW,wBAAwB;AAChE,IAAO,yBAAQ;",
+  "names": []
+}

package/build-module/toggle-control/types.mjs

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

package/build-module/toggle-group-control/context.mjs

@@ -0,0 +1,11 @@
+// packages/components/src/toggle-group-control/context.ts
+import { createContext, useContext } from "@wordpress/element";
+var ToggleGroupControlContext = createContext({});
+ToggleGroupControlContext.displayName = "ToggleGroupControlContext";
+var useToggleGroupControlContext = () => useContext(ToggleGroupControlContext);
+var context_default = ToggleGroupControlContext;
+export {
+  context_default as default,
+  useToggleGroupControlContext
+};
+//# sourceMappingURL=context.mjs.map

package/build-module/toggle-group-control/index.mjs

@@ -0,0 +1,10 @@
+// packages/components/src/toggle-group-control/index.ts
+import { ToggleGroupControl } from "./toggle-group-control/index.mjs";
+import { ToggleGroupControlOption } from "./toggle-group-control-option/index.mjs";
+import { ToggleGroupControlOptionIcon } from "./toggle-group-control-option-icon/index.mjs";
+export {
+  ToggleGroupControl,
+  ToggleGroupControlOption,
+  ToggleGroupControlOptionIcon
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/toggle-group-control/toggle-group-control/as-button-group.mjs

@@ -0,0 +1,55 @@
+// packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
+import { useInstanceId } from "@wordpress/compose";
+import { forwardRef, useMemo } from "@wordpress/element";
+import { View } from "../../view/index.mjs";
+import { useControlledValue } from "../../utils/index.mjs";
+import ToggleGroupControlContext from "../context.mjs";
+import { useComputeControlledOrUncontrolledValue } from "./utils.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function UnforwardedToggleGroupControlAsButtonGroup({
+  children,
+  isAdaptiveWidth,
+  label,
+  onChange,
+  size,
+  value: valueProp,
+  id: idProp,
+  setSelectedElement,
+  ...otherProps
+}, forwardedRef) {
+  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, "toggle-group-control-as-button-group");
+  const baseId = idProp || generatedId;
+  const {
+    value,
+    defaultValue
+  } = useComputeControlledOrUncontrolledValue(valueProp);
+  const [selectedValue, setSelectedValue] = useControlledValue({
+    defaultValue,
+    value,
+    onChange
+  });
+  const groupContextValue = useMemo(() => ({
+    baseId,
+    value: selectedValue,
+    setValue: setSelectedValue,
+    isBlock: !isAdaptiveWidth,
+    isDeselectable: true,
+    size,
+    setSelectedElement
+  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size, setSelectedElement]);
+  return /* @__PURE__ */ _jsx(ToggleGroupControlContext.Provider, {
+    value: groupContextValue,
+    children: /* @__PURE__ */ _jsx(View, {
+      "aria-label": label,
+      ...otherProps,
+      ref: forwardedRef,
+      role: "group",
+      children
+    })
+  });
+}
+var ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);
+export {
+  ToggleGroupControlAsButtonGroup
+};
+//# sourceMappingURL=as-button-group.mjs.map

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.mjs

@@ -0,0 +1,71 @@
+// packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
+import * as Ariakit from "@ariakit/react";
+import { useInstanceId } from "@wordpress/compose";
+import { forwardRef, useEffect, useMemo } from "@wordpress/element";
+import { isRTL } from "@wordpress/i18n";
+import { View } from "../../view/index.mjs";
+import ToggleGroupControlContext from "../context.mjs";
+import { useComputeControlledOrUncontrolledValue } from "./utils.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function UnforwardedToggleGroupControlAsRadioGroup({
+  children,
+  isAdaptiveWidth,
+  label,
+  onChange: onChangeProp,
+  size,
+  value: valueProp,
+  id: idProp,
+  setSelectedElement,
+  ...otherProps
+}, forwardedRef) {
+  const generatedId = useInstanceId(ToggleGroupControlAsRadioGroup, "toggle-group-control-as-radio-group");
+  const baseId = idProp || generatedId;
+  const {
+    value,
+    defaultValue
+  } = useComputeControlledOrUncontrolledValue(valueProp);
+  const wrappedOnChangeProp = onChangeProp ? (v) => {
+    onChangeProp(v !== null && v !== void 0 ? v : void 0);
+  } : void 0;
+  const radio = Ariakit.useRadioStore({
+    defaultValue,
+    value,
+    setValue: wrappedOnChangeProp,
+    rtl: isRTL()
+  });
+  const selectedValue = Ariakit.useStoreState(radio, "value");
+  const setValue = radio.setValue;
+  useEffect(() => {
+    if (selectedValue === "") {
+      radio.setActiveId(void 0);
+    }
+  }, [radio, selectedValue]);
+  const groupContextValue = useMemo(() => ({
+    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),
+    baseId,
+    isBlock: !isAdaptiveWidth,
+    size,
+    // @ts-expect-error - This is wrong and we should fix it.
+    value: selectedValue,
+    // @ts-expect-error - This is wrong and we should fix it.
+    setValue,
+    setSelectedElement
+  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, size]);
+  return /* @__PURE__ */ _jsx(ToggleGroupControlContext.Provider, {
+    value: groupContextValue,
+    children: /* @__PURE__ */ _jsx(Ariakit.RadioGroup, {
+      store: radio,
+      "aria-label": label,
+      render: /* @__PURE__ */ _jsx(View, {}),
+      ...otherProps,
+      id: baseId,
+      ref: forwardedRef,
+      children
+    })
+  });
+}
+var ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);
+export {
+  ToggleGroupControlAsRadioGroup
+};
+//# sourceMappingURL=as-radio-group.mjs.map

package/build-module/toggle-group-control/toggle-group-control/component.mjs

@@ -0,0 +1,84 @@
+// packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+import { useMemo, useState } from "@wordpress/element";
+import { useMergeRefs } from "@wordpress/compose";
+import { contextConnect, useContextSystem } from "../../context/index.mjs";
+import { useCx } from "../../utils/hooks/index.mjs";
+import BaseControl from "../../base-control/index.mjs";
+import { VisualLabelWrapper } from "./styles.mjs";
+import * as styles from "./styles.mjs";
+import { ToggleGroupControlAsRadioGroup } from "./as-radio-group.mjs";
+import { ToggleGroupControlAsButtonGroup } from "./as-button-group.mjs";
+import { useTrackElementOffsetRect } from "../../utils/element-rect.mjs";
+import { useAnimatedOffsetRect } from "../../utils/hooks/use-animated-offset-rect.mjs";
+import { maybeWarnDeprecated36pxSize } from "../../utils/deprecated-36px-size.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function UnconnectedToggleGroupControl(props, forwardedRef) {
+  const {
+    __nextHasNoMarginBottom: _,
+    // Prevent passing this to the internal component
+    __next40pxDefaultSize = false,
+    __shouldNotWarnDeprecated36pxSize,
+    className,
+    isAdaptiveWidth = false,
+    isBlock = false,
+    isDeselectable = false,
+    label,
+    hideLabelFromVision = false,
+    help,
+    onChange,
+    size = "default",
+    value,
+    children,
+    ...otherProps
+  } = useContextSystem(props, "ToggleGroupControl");
+  const normalizedSize = __next40pxDefaultSize && size === "default" ? "__unstable-large" : size;
+  const [selectedElement, setSelectedElement] = useState();
+  const [controlElement, setControlElement] = useState();
+  const refs = useMergeRefs([setControlElement, forwardedRef]);
+  const selectedRect = useTrackElementOffsetRect(value !== null && value !== void 0 ? selectedElement : void 0);
+  useAnimatedOffsetRect(controlElement, selectedRect, {
+    prefix: "selected",
+    dataAttribute: "indicator-animated",
+    transitionEndFilter: (event) => event.pseudoElement === "::before",
+    roundRect: false
+  });
+  const cx = useCx();
+  const classes = useMemo(() => cx(styles.toggleGroupControl({
+    isBlock,
+    isDeselectable,
+    size: normalizedSize
+  }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);
+  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;
+  maybeWarnDeprecated36pxSize({
+    componentName: "ToggleGroupControl",
+    size,
+    __next40pxDefaultSize,
+    __shouldNotWarnDeprecated36pxSize
+  });
+  return /* @__PURE__ */ _jsxs(BaseControl, {
+    help,
+    children: [!hideLabelFromVision && /* @__PURE__ */ _jsx(VisualLabelWrapper, {
+      children: /* @__PURE__ */ _jsx(BaseControl.VisualLabel, {
+        children: label
+      })
+    }), /* @__PURE__ */ _jsx(MainControl, {
+      ...otherProps,
+      setSelectedElement,
+      className: classes,
+      isAdaptiveWidth,
+      label,
+      onChange,
+      ref: refs,
+      size: normalizedSize,
+      value,
+      children
+    })]
+  });
+}
+var ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, "ToggleGroupControl");
+var component_default = ToggleGroupControl;
+export {
+  ToggleGroupControl,
+  component_default as default
+};
+//# sourceMappingURL=component.mjs.map

package/build-module/toggle-group-control/toggle-group-control/component.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/toggle-group-control/toggle-group-control/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnconnectedToggleGroupControl(props, forwardedRef) {\n  const {\n    __nextHasNoMarginBottom: _,\n    // Prevent passing this to the internal component\n    __next40pxDefaultSize = false,\n    __shouldNotWarnDeprecated36pxSize,\n    className,\n    isAdaptiveWidth = false,\n    isBlock = false,\n    isDeselectable = false,\n    label,\n    hideLabelFromVision = false,\n    help,\n    onChange,\n    size = 'default',\n    value,\n    children,\n    ...otherProps\n  } = useContextSystem(props, 'ToggleGroupControl');\n  const normalizedSize = __next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n  const [selectedElement, setSelectedElement] = useState();\n  const [controlElement, setControlElement] = useState();\n  const refs = useMergeRefs([setControlElement, forwardedRef]);\n  const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);\n  useAnimatedOffsetRect(controlElement, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: false\n  });\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.toggleGroupControl({\n    isBlock,\n    isDeselectable,\n    size: normalizedSize\n  }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);\n  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;\n  maybeWarnDeprecated36pxSize({\n    componentName: 'ToggleGroupControl',\n    size,\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsxs(BaseControl, {\n    help: help,\n    children: [!hideLabelFromVision && /*#__PURE__*/_jsx(VisualLabelWrapper, {\n      children: /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n        children: label\n      })\n    }), /*#__PURE__*/_jsx(MainControl, {\n      ...otherProps,\n      setSelectedElement: setSelectedElement,\n      className: classes,\n      isAdaptiveWidth: isAdaptiveWidth,\n      label: label,\n      onChange: onChange,\n      ref: refs,\n      size: normalizedSize,\n      value: value,\n      children: children\n    })]\n  });\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *       __next40pxDefaultSize\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');\nexport default ToggleGroupControl;"],
+  "mappings": ";AAOA,SAAS,SAAS,gBAAgB;AAClC,SAAS,oBAAoB;AAM7B,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,aAAa;AACtB,OAAO,iBAAiB;AACxB,SAAS,0BAA0B;AACnC,YAAY,YAAY;AACxB,SAAS,sCAAsC;AAC/C,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,mCAAmC;AAC5C,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,8BAA8B,OAAO,cAAc;AAC1D,QAAM;AAAA,IACJ,yBAAyB;AAAA;AAAA,IAEzB,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,oBAAoB;AAChD,QAAM,iBAAiB,yBAAyB,SAAS,YAAY,qBAAqB;AAC1F,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AACrD,QAAM,OAAO,aAAa,CAAC,mBAAmB,YAAY,CAAC;AAC3D,QAAM,eAAe,0BAA0B,UAAU,QAAQ,UAAU,SAAY,kBAAkB,MAAS;AAClH,wBAAsB,gBAAgB,cAAc;AAAA,IAClD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,qBAAqB,WAAS,MAAM,kBAAkB;AAAA,IACtD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM,GAAU,0BAAmB;AAAA,IACzD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,CAAC,GAAG,WAAkB,cAAO,SAAS,GAAG,CAAC,WAAW,IAAI,SAAS,gBAAgB,cAAc,CAAC;AACjG,QAAM,cAAc,iBAAiB,kCAAkC;AACvE,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,sBAAM,aAAa;AAAA,IACrC;AAAA,IACA,UAAU,CAAC,CAAC,uBAAoC,qBAAK,oBAAoB;AAAA,MACvE,UAAuB,qBAAK,YAAY,aAAa;AAAA,QACnD,UAAU;AAAA,MACZ,CAAC;AAAA,IACH,CAAC,GAAgB,qBAAK,aAAa;AAAA,MACjC,GAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAoCO,IAAM,qBAAqB,eAAe,+BAA+B,oBAAoB;AACpG,IAAO,oBAAQ;",
+  "names": []
+}

package/build-module/toggle-group-control/toggle-group-control/index.mjs

@@ -0,0 +1,6 @@
+// packages/components/src/toggle-group-control/toggle-group-control/index.ts
+import { default as default2 } from "./component.mjs";
+export {
+  default2 as ToggleGroupControl
+};
+//# sourceMappingURL=index.mjs.map