@wordpress/preferences 3.26.0 → 3.28.0

package/build-module/components/preference-base-option/index.js

@@ -0,0 +1,24 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+function BaseOption({
+  help,
+  label,
+  isChecked,
+  onChange,
+  children
+}) {
+  return createElement("div", {
+    className: "preference-base-option"
+  }, createElement(ToggleControl, {
+    __nextHasNoMarginBottom: true,
+    help: help,
+    label: label,
+    checked: isChecked,
+    onChange: onChange
+  }), children);
+}
+export default BaseOption;
+//# sourceMappingURL=index.js.map

package/build-module/components/preference-base-option/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ToggleControl","BaseOption","help","label","isChecked","onChange","children","createElement","className","__nextHasNoMarginBottom","checked"],"sources":["@wordpress/preferences/src/components/preference-base-option/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\n\nfunction BaseOption( { help, label, isChecked, onChange, children } ) {\n\treturn (\n\t\t<div className=\"preference-base-option\">\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\thelp={ help }\n\t\t\t\tlabel={ label }\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default BaseOption;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,UAAUA,CAAE;EAAEC,IAAI;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAEC;AAAS,CAAC,EAAG;EACrE,OACCC,aAAA;IAAKC,SAAS,EAAC;EAAwB,GACtCD,aAAA,CAACP,aAAa;IACbS,uBAAuB;IACvBP,IAAI,EAAGA,IAAM;IACbC,KAAK,EAAGA,KAAO;IACfO,OAAO,EAAGN,SAAW;IACrBC,QAAQ,EAAGA;EAAU,CACrB,CAAC,EACAC,QACE,CAAC;AAER;AAEA,eAAeL,UAAU"}

package/build-module/components/preference-toggle-control/index.js

@@ -0,0 +1,34 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as preferencesStore } from '../../store';
+import PreferenceBaseOption from '../preference-base-option';
+function PreferenceToggleControl(props) {
+  const {
+    scope,
+    featureName,
+    onToggle = () => {},
+    ...remainingProps
+  } = props;
+  const isChecked = useSelect(select => !!select(preferencesStore).get(scope, featureName), [scope, featureName]);
+  const {
+    toggle
+  } = useDispatch(preferencesStore);
+  const onChange = () => {
+    onToggle();
+    toggle(scope, featureName);
+  };
+  return createElement(PreferenceBaseOption, {
+    onChange: onChange,
+    isChecked: isChecked,
+    ...remainingProps
+  });
+}
+export default PreferenceToggleControl;
+//# sourceMappingURL=index.js.map

package/build-module/components/preference-toggle-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useSelect","useDispatch","store","preferencesStore","PreferenceBaseOption","PreferenceToggleControl","props","scope","featureName","onToggle","remainingProps","isChecked","select","get","toggle","onChange","createElement"],"sources":["@wordpress/preferences/src/components/preference-toggle-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\nimport PreferenceBaseOption from '../preference-base-option';\n\nfunction PreferenceToggleControl( props ) {\n\tconst {\n\t\tscope,\n\t\tfeatureName,\n\t\tonToggle = () => {},\n\t\t...remainingProps\n\t} = props;\n\tconst isChecked = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, featureName ),\n\t\t[ scope, featureName ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst onChange = () => {\n\t\tonToggle();\n\t\ttoggle( scope, featureName );\n\t};\n\n\treturn (\n\t\t<PreferenceBaseOption\n\t\t\tonChange={ onChange }\n\t\t\tisChecked={ isChecked }\n\t\t\t{ ...remainingProps }\n\t\t/>\n\t);\n}\n\nexport default PreferenceToggleControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;;AAExD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AACvD,OAAOC,oBAAoB,MAAM,2BAA2B;AAE5D,SAASC,uBAAuBA,CAAEC,KAAK,EAAG;EACzC,MAAM;IACLC,KAAK;IACLC,WAAW;IACXC,QAAQ,GAAGA,CAAA,KAAM,CAAC,CAAC;IACnB,GAAGC;EACJ,CAAC,GAAGJ,KAAK;EACT,MAAMK,SAAS,GAAGX,SAAS,CACxBY,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAET,gBAAiB,CAAC,CAACU,GAAG,CAAEN,KAAK,EAAEC,WAAY,CAAC,EACrE,CAAED,KAAK,EAAEC,WAAW,CACrB,CAAC;EACD,MAAM;IAAEM;EAAO,CAAC,GAAGb,WAAW,CAAEE,gBAAiB,CAAC;EAClD,MAAMY,QAAQ,GAAGA,CAAA,KAAM;IACtBN,QAAQ,CAAC,CAAC;IACVK,MAAM,CAAEP,KAAK,EAAEC,WAAY,CAAC;EAC7B,CAAC;EAED,OACCQ,aAAA,CAACZ,oBAAoB;IACpBW,QAAQ,EAAGA,QAAU;IACrBJ,SAAS,EAAGA,SAAW;IAAA,GAClBD;EAAc,CACnB,CAAC;AAEJ;AAEA,eAAeL,uBAAuB"}

package/build-module/components/preference-toggle-menu-item/index.js

@@ -20,6 +20,7 @@ export default function PreferenceToggleMenuItem({
   messageActivated,
   messageDeactivated,
   shortcut,
+  handleToggling = true,
   onToggle = () => null,
   disabled = false
 }) {
@@ -43,7 +44,9 @@ export default function PreferenceToggleMenuItem({
     isSelected: isActive,
     onClick: () => {
       onToggle();
-      toggle(scope, name);
+      if (handleToggling) {
+        toggle(scope, name);
+      }
       speakMessage();
     },
     role: "menuitemcheckbox",

package/build-module/components/preference-toggle-menu-item/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelect","useDispatch","MenuItem","__","sprintf","check","speak","store","preferencesStore","PreferenceToggleMenuItem","scope","name","label","info","messageActivated","messageDeactivated","shortcut","onToggle","disabled","isActive","select","get","toggle","speakMessage","message","createElement","icon","isSelected","onClick","role"],"sources":["@wordpress/preferences/src/components/preference-toggle-menu-item/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\n\nexport default function PreferenceToggleMenuItem( {\n\tscope,\n\tname,\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n\tshortcut,\n\tonToggle = () => null,\n\tdisabled = false,\n} ) {\n\tconst isActive = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, name ),\n\t\t[ scope, name ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tconst message =\n\t\t\t\tmessageDeactivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference deactivated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t} else {\n\t\t\tconst message =\n\t\t\t\tmessageActivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference activated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ () => {\n\t\t\t\tonToggle();\n\t\t\t\ttoggle( scope, name );\n\t\t\t\tspeakMessage();\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t\tshortcut={ shortcut }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AAEvD,eAAe,SAASC,wBAAwBA,CAAE;EACjDC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,gBAAgB;EAChBC,kBAAkB;EAClBC,QAAQ;EACRC,QAAQ,GAAGA,CAAA,KAAM,IAAI;EACrBC,QAAQ,GAAG;AACZ,CAAC,EAAG;EACH,MAAMC,QAAQ,GAAGnB,SAAS,CACvBoB,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAEZ,gBAAiB,CAAC,CAACa,GAAG,CAAEX,KAAK,EAAEC,IAAK,CAAC,EAC9D,CAAED,KAAK,EAAEC,IAAI,CACd,CAAC;EACD,MAAM;IAAEW;EAAO,CAAC,GAAGrB,WAAW,CAAEO,gBAAiB,CAAC;EAClD,MAAMe,YAAY,GAAGA,CAAA,KAAM;IAC1B,IAAKJ,QAAQ,EAAG;MACf,MAAMK,OAAO,GACZT,kBAAkB,IAClBX,OAAO,EACN;MACAD,EAAE,CAAE,6BAA8B,CAAC,EACnCS,KACD,CAAC;MACFN,KAAK,CAAEkB,OAAQ,CAAC;IACjB,CAAC,MAAM;MACN,MAAMA,OAAO,GACZV,gBAAgB,IAChBV,OAAO,EACN;MACAD,EAAE,CAAE,2BAA4B,CAAC,EACjCS,KACD,CAAC;MACFN,KAAK,CAAEkB,OAAQ,CAAC;IACjB;EACD,CAAC;EAED,OACCC,aAAA,CAACvB,QAAQ;IACRwB,IAAI,EAAGP,QAAQ,IAAId,KAAO;IAC1BsB,UAAU,EAAGR,QAAU;IACvBS,OAAO,EAAGA,CAAA,KAAM;MACfX,QAAQ,CAAC,CAAC;MACVK,MAAM,CAAEZ,KAAK,EAAEC,IAAK,CAAC;MACrBY,YAAY,CAAC,CAAC;IACf,CAAG;IACHM,IAAI,EAAC,kBAAkB;IACvBhB,IAAI,EAAGA,IAAM;IACbG,QAAQ,EAAGA,QAAU;IACrBE,QAAQ,EAAGA;EAAU,GAEnBN,KACO,CAAC;AAEb"}
+{"version":3,"names":["useSelect","useDispatch","MenuItem","__","sprintf","check","speak","store","preferencesStore","PreferenceToggleMenuItem","scope","name","label","info","messageActivated","messageDeactivated","shortcut","handleToggling","onToggle","disabled","isActive","select","get","toggle","speakMessage","message","createElement","icon","isSelected","onClick","role"],"sources":["@wordpress/preferences/src/components/preference-toggle-menu-item/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as preferencesStore } from '../../store';\n\nexport default function PreferenceToggleMenuItem( {\n\tscope,\n\tname,\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n\tshortcut,\n\thandleToggling = true,\n\tonToggle = () => null,\n\tdisabled = false,\n} ) {\n\tconst isActive = useSelect(\n\t\t( select ) => !! select( preferencesStore ).get( scope, name ),\n\t\t[ scope, name ]\n\t);\n\tconst { toggle } = useDispatch( preferencesStore );\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tconst message =\n\t\t\t\tmessageDeactivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference deactivated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t} else {\n\t\t\tconst message =\n\t\t\t\tmessageActivated ||\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s: preference name, e.g. 'Fullscreen mode' */\n\t\t\t\t\t__( 'Preference activated - %s' ),\n\t\t\t\t\tlabel\n\t\t\t\t);\n\t\t\tspeak( message );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ () => {\n\t\t\t\tonToggle();\n\t\t\t\tif ( handleToggling ) {\n\t\t\t\t\ttoggle( scope, name );\n\t\t\t\t}\n\t\t\t\tspeakMessage();\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t\tshortcut={ shortcut }\n\t\t\tdisabled={ disabled }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,KAAK,QAAQ,iBAAiB;;AAEvC;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AAEvD,eAAe,SAASC,wBAAwBA,CAAE;EACjDC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,gBAAgB;EAChBC,kBAAkB;EAClBC,QAAQ;EACRC,cAAc,GAAG,IAAI;EACrBC,QAAQ,GAAGA,CAAA,KAAM,IAAI;EACrBC,QAAQ,GAAG;AACZ,CAAC,EAAG;EACH,MAAMC,QAAQ,GAAGpB,SAAS,CACvBqB,MAAM,IAAM,CAAC,CAAEA,MAAM,CAAEb,gBAAiB,CAAC,CAACc,GAAG,CAAEZ,KAAK,EAAEC,IAAK,CAAC,EAC9D,CAAED,KAAK,EAAEC,IAAI,CACd,CAAC;EACD,MAAM;IAAEY;EAAO,CAAC,GAAGtB,WAAW,CAAEO,gBAAiB,CAAC;EAClD,MAAMgB,YAAY,GAAGA,CAAA,KAAM;IAC1B,IAAKJ,QAAQ,EAAG;MACf,MAAMK,OAAO,GACZV,kBAAkB,IAClBX,OAAO,EACN;MACAD,EAAE,CAAE,6BAA8B,CAAC,EACnCS,KACD,CAAC;MACFN,KAAK,CAAEmB,OAAQ,CAAC;IACjB,CAAC,MAAM;MACN,MAAMA,OAAO,GACZX,gBAAgB,IAChBV,OAAO,EACN;MACAD,EAAE,CAAE,2BAA4B,CAAC,EACjCS,KACD,CAAC;MACFN,KAAK,CAAEmB,OAAQ,CAAC;IACjB;EACD,CAAC;EAED,OACCC,aAAA,CAACxB,QAAQ;IACRyB,IAAI,EAAGP,QAAQ,IAAIf,KAAO;IAC1BuB,UAAU,EAAGR,QAAU;IACvBS,OAAO,EAAGA,CAAA,KAAM;MACfX,QAAQ,CAAC,CAAC;MACV,IAAKD,cAAc,EAAG;QACrBM,MAAM,CAAEb,KAAK,EAAEC,IAAK,CAAC;MACtB;MACAa,YAAY,CAAC,CAAC;IACf,CAAG;IACHM,IAAI,EAAC,kBAAkB;IACvBjB,IAAI,EAAGA,IAAM;IACbG,QAAQ,EAAGA,QAAU;IACrBG,QAAQ,EAAGA;EAAU,GAEnBP,KACO,CAAC;AAEb"}

package/build-module/components/preferences-modal/index.js

@@ -0,0 +1,17 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+export default function PreferencesModal({
+  closeModal,
+  children
+}) {
+  return createElement(Modal, {
+    className: "preferences-modal",
+    title: __('Preferences'),
+    onRequestClose: closeModal
+  }, children);
+}
+//# sourceMappingURL=index.js.map

package/build-module/components/preferences-modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Modal","__","PreferencesModal","closeModal","children","createElement","className","title","onRequestClose"],"sources":["@wordpress/preferences/src/components/preferences-modal/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function PreferencesModal( { closeModal, children } ) {\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"preferences-modal\"\n\t\t\ttitle={ __( 'Preferences' ) }\n\t\t\tonRequestClose={ closeModal }\n\t\t>\n\t\t\t{ children }\n\t\t</Modal>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,EAAE,QAAQ,iBAAiB;AAEpC,eAAe,SAASC,gBAAgBA,CAAE;EAAEC,UAAU;EAAEC;AAAS,CAAC,EAAG;EACpE,OACCC,aAAA,CAACL,KAAK;IACLM,SAAS,EAAC,mBAAmB;IAC7BC,KAAK,EAAGN,EAAE,CAAE,aAAc,CAAG;IAC7BO,cAAc,EAAGL;EAAY,GAE3BC,QACI,CAAC;AAEV"}

package/build-module/components/preferences-modal-section/index.js

@@ -0,0 +1,18 @@
+import { createElement } from "react";
+const Section = ({
+  description,
+  title,
+  children
+}) => createElement("fieldset", {
+  className: "preferences-modal__section"
+}, createElement("legend", {
+  className: "preferences-modal__section-legend"
+}, createElement("h2", {
+  className: "preferences-modal__section-title"
+}, title), description && createElement("p", {
+  className: "preferences-modal__section-description"
+}, description)), createElement("div", {
+  className: "preferences-modal__section-content"
+}, children));
+export default Section;
+//# sourceMappingURL=index.js.map

package/build-module/components/preferences-modal-section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Section","description","title","children","createElement","className"],"sources":["@wordpress/preferences/src/components/preferences-modal-section/index.js"],"sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"preferences-modal__section\">\n\t\t<legend className=\"preferences-modal__section-legend\">\n\t\t\t<h2 className=\"preferences-modal__section-title\">{ title }</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"preferences-modal__section-description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</legend>\n\t\t<div className=\"preferences-modal__section-content\">{ children }</div>\n\t</fieldset>\n);\n\nexport default Section;\n"],"mappings":";AAAA,MAAMA,OAAO,GAAGA,CAAE;EAAEC,WAAW;EAAEC,KAAK;EAAEC;AAAS,CAAC,KACjDC,aAAA;EAAUC,SAAS,EAAC;AAA4B,GAC/CD,aAAA;EAAQC,SAAS,EAAC;AAAmC,GACpDD,aAAA;EAAIC,SAAS,EAAC;AAAkC,GAAGH,KAAW,CAAC,EAC7DD,WAAW,IACZG,aAAA;EAAGC,SAAS,EAAC;AAAwC,GAClDJ,WACA,CAEG,CAAC,EACTG,aAAA;EAAKC,SAAS,EAAC;AAAoC,GAAGF,QAAe,CAC5D,CACV;AAED,eAAeH,OAAO"}

package/build-module/components/preferences-modal-tabs/index.js

@@ -0,0 +1,122 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, __experimentalNavigatorButton as NavigatorButton, __experimentalNavigatorBackButton as NavigatorBackButton, __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, __experimentalText as Text, __experimentalTruncate as Truncate, FlexItem, Card, CardHeader, CardBody, privateApis as componentsPrivateApis } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+const {
+  Tabs
+} = unlock(componentsPrivateApis);
+const PREFERENCES_MENU = 'preferences-menu';
+export default function PreferencesModalTabs({
+  sections
+}) {
+  const isLargeViewport = useViewportMatch('medium');
+
+  // This is also used to sync the two different rendered components
+  // between small and large viewports.
+  const [activeMenu, setActiveMenu] = useState(PREFERENCES_MENU);
+  /**
+   * Create helper objects from `sections` for easier data handling.
+   * `tabs` is used for creating the `Tabs` and `sectionsContentMap`
+   * is used for easier access to active tab's content.
+   */
+  const {
+    tabs,
+    sectionsContentMap
+  } = useMemo(() => {
+    let mappedTabs = {
+      tabs: [],
+      sectionsContentMap: {}
+    };
+    if (sections.length) {
+      mappedTabs = sections.reduce((accumulator, {
+        name,
+        tabLabel: title,
+        content
+      }) => {
+        accumulator.tabs.push({
+          name,
+          title
+        });
+        accumulator.sectionsContentMap[name] = content;
+        return accumulator;
+      }, {
+        tabs: [],
+        sectionsContentMap: {}
+      });
+    }
+    return mappedTabs;
+  }, [sections]);
+  let modalContent;
+  // We render different components based on the viewport size.
+  if (isLargeViewport) {
+    modalContent = createElement("div", {
+      className: "preferences__tabs"
+    }, createElement(Tabs, {
+      initialTabId: activeMenu !== PREFERENCES_MENU ? activeMenu : undefined,
+      onSelect: setActiveMenu,
+      orientation: "vertical"
+    }, createElement(Tabs.TabList, {
+      className: "preferences__tabs-tablist"
+    }, tabs.map(tab => createElement(Tabs.Tab, {
+      tabId: tab.name,
+      key: tab.name,
+      className: "preferences__tabs-tab"
+    }, tab.title))), tabs.map(tab => createElement(Tabs.TabPanel, {
+      tabId: tab.name,
+      key: tab.name,
+      className: "preferences__tabs-tabpanel",
+      focusable: false
+    }, sectionsContentMap[tab.name] || null))));
+  } else {
+    modalContent = createElement(NavigatorProvider, {
+      initialPath: "/",
+      className: "preferences__provider"
+    }, createElement(NavigatorScreen, {
+      path: "/"
+    }, createElement(Card, {
+      isBorderless: true,
+      size: "small"
+    }, createElement(CardBody, null, createElement(ItemGroup, null, tabs.map(tab => {
+      return createElement(NavigatorButton, {
+        key: tab.name,
+        path: tab.name,
+        as: Item,
+        isAction: true
+      }, createElement(HStack, {
+        justify: "space-between"
+      }, createElement(FlexItem, null, createElement(Truncate, null, tab.title)), createElement(FlexItem, null, createElement(Icon, {
+        icon: isRTL() ? chevronLeft : chevronRight
+      }))));
+    }))))), sections.length && sections.map(section => {
+      return createElement(NavigatorScreen, {
+        key: `${section.name}-menu`,
+        path: section.name
+      }, createElement(Card, {
+        isBorderless: true,
+        size: "large"
+      }, createElement(CardHeader, {
+        isBorderless: false,
+        justify: "left",
+        size: "small",
+        gap: "6"
+      }, createElement(NavigatorBackButton, {
+        icon: isRTL() ? chevronRight : chevronLeft,
+        "aria-label": __('Navigate to the previous view')
+      }), createElement(Text, {
+        size: "16"
+      }, section.tabLabel)), createElement(CardBody, null, section.content)));
+    }));
+  }
+  return modalContent;
+}
+//# sourceMappingURL=index.js.map

package/build-module/components/preferences-modal-tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useViewportMatch","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorBackButton","NavigatorBackButton","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalText","Text","__experimentalTruncate","Truncate","FlexItem","Card","CardHeader","CardBody","privateApis","componentsPrivateApis","useMemo","useState","chevronLeft","chevronRight","Icon","isRTL","__","unlock","Tabs","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","modalContent","createElement","className","initialTabId","undefined","onSelect","orientation","TabList","map","tab","Tab","tabId","key","TabPanel","focusable","initialPath","path","isBorderless","size","as","isAction","justify","icon","section","gap"],"sources":["@wordpress/preferences/src/components/preferences-modal-tabs/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\tFlexItem,\n\tCard,\n\tCardHeader,\n\tCardBody,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst PREFERENCES_MENU = 'preferences-menu';\n\nexport default function PreferencesModalTabs( { sections } ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\t// This is also used to sync the two different rendered components\n\t// between small and large viewports.\n\tconst [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );\n\t/**\n\t * Create helper objects from `sections` for easier data handling.\n\t * `tabs` is used for creating the `Tabs` and `sectionsContentMap`\n\t * is used for easier access to active tab's content.\n\t */\n\tconst { tabs, sectionsContentMap } = useMemo( () => {\n\t\tlet mappedTabs = {\n\t\t\ttabs: [],\n\t\t\tsectionsContentMap: {},\n\t\t};\n\t\tif ( sections.length ) {\n\t\t\tmappedTabs = sections.reduce(\n\t\t\t\t( accumulator, { name, tabLabel: title, content } ) => {\n\t\t\t\t\taccumulator.tabs.push( { name, title } );\n\t\t\t\t\taccumulator.sectionsContentMap[ name ] = content;\n\t\t\t\t\treturn accumulator;\n\t\t\t\t},\n\t\t\t\t{ tabs: [], sectionsContentMap: {} }\n\t\t\t);\n\t\t}\n\t\treturn mappedTabs;\n\t}, [ sections ] );\n\n\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<div className=\"preferences__tabs\">\n\t\t\t\t<Tabs\n\t\t\t\t\tinitialTabId={\n\t\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t\t}\n\t\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t>\n\t\t\t\t\t<Tabs.TabList className=\"preferences__tabs-tablist\">\n\t\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\tclassName=\"preferences__tabs-tab\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\tclassName=\"preferences__tabs-tabpanel\"\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sectionsContentMap[ tab.name ] || null }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"preferences__provider\"\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t\t<Card isBorderless size=\"small\">\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tpath={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tas={ Item }\n\t\t\t\t\t\t\t\t\t\t\tisAction\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t</NavigatorButton>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t</Card>\n\t\t\t\t</NavigatorScreen>\n\t\t\t\t{ sections.length &&\n\t\t\t\t\tsections.map( ( section ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigatorScreen\n\t\t\t\t\t\t\t\tkey={ `${ section.name }-menu` }\n\t\t\t\t\t\t\t\tpath={ section.name }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Card isBorderless size=\"large\">\n\t\t\t\t\t\t\t\t\t<CardHeader\n\t\t\t\t\t\t\t\t\t\tisBorderless={ false }\n\t\t\t\t\t\t\t\t\t\tjustify=\"left\"\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\tgap=\"6\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<NavigatorBackButton\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Navigate to the previous view'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Text size=\"16\">\n\t\t\t\t\t\t\t\t\t\t\t{ section.tabLabel }\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t<CardBody>{ section.content }</CardBody>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t</NavigatorScreen>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t</NavigatorProvider>\n\t\t);\n\t}\n\n\treturn modalContent;\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,QAAQ,oBAAoB;AACrD,SACCC,+BAA+B,IAAIC,iBAAiB,EACpDC,6BAA6B,IAAIC,eAAe,EAChDC,6BAA6B,IAAIC,eAAe,EAChDC,iCAAiC,IAAIC,mBAAmB,EACxDC,uBAAuB,IAAIC,SAAS,EACpCC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BC,kBAAkB,IAAIC,IAAI,EAC1BC,sBAAsB,IAAIC,QAAQ,EAClCC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,QAAQ,EACRC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;AAC9B,SAASC,OAAO,EAAEC,QAAQ,QAAQ,oBAAoB;AACtD,SAASC,WAAW,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AAClE,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;;AAE3C;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EAAEC;AAAK,CAAC,GAAGD,MAAM,CAAER,qBAAsB,CAAC;AAEhD,MAAMU,gBAAgB,GAAG,kBAAkB;AAE3C,eAAe,SAASC,oBAAoBA,CAAE;EAAEC;AAAS,CAAC,EAAG;EAC5D,MAAMC,eAAe,GAAGrC,gBAAgB,CAAE,QAAS,CAAC;;EAEpD;EACA;EACA,MAAM,CAAEsC,UAAU,EAAEC,aAAa,CAAE,GAAGb,QAAQ,CAAEQ,gBAAiB,CAAC;EAClE;AACD;AACA;AACA;AACA;EACC,MAAM;IAAEM,IAAI;IAAEC;EAAmB,CAAC,GAAGhB,OAAO,CAAE,MAAM;IACnD,IAAIiB,UAAU,GAAG;MAChBF,IAAI,EAAE,EAAE;MACRC,kBAAkB,EAAE,CAAC;IACtB,CAAC;IACD,IAAKL,QAAQ,CAACO,MAAM,EAAG;MACtBD,UAAU,GAAGN,QAAQ,CAACQ,MAAM,CAC3B,CAAEC,WAAW,EAAE;QAAEC,IAAI;QAAEC,QAAQ,EAAEC,KAAK;QAAEC;MAAQ,CAAC,KAAM;QACtDJ,WAAW,CAACL,IAAI,CAACU,IAAI,CAAE;UAAEJ,IAAI;UAAEE;QAAM,CAAE,CAAC;QACxCH,WAAW,CAACJ,kBAAkB,CAAEK,IAAI,CAAE,GAAGG,OAAO;QAChD,OAAOJ,WAAW;MACnB,CAAC,EACD;QAAEL,IAAI,EAAE,EAAE;QAAEC,kBAAkB,EAAE,CAAC;MAAE,CACpC,CAAC;IACF;IACA,OAAOC,UAAU;EAClB,CAAC,EAAE,CAAEN,QAAQ,CAAG,CAAC;EAEjB,IAAIe,YAAY;EAChB;EACA,IAAKd,eAAe,EAAG;IACtBc,YAAY,GACXC,aAAA;MAAKC,SAAS,EAAC;IAAmB,GACjCD,aAAA,CAACnB,IAAI;MACJqB,YAAY,EACXhB,UAAU,KAAKJ,gBAAgB,GAAGI,UAAU,GAAGiB,SAC/C;MACDC,QAAQ,EAAGjB,aAAe;MAC1BkB,WAAW,EAAC;IAAU,GAEtBL,aAAA,CAACnB,IAAI,CAACyB,OAAO;MAACL,SAAS,EAAC;IAA2B,GAChDb,IAAI,CAACmB,GAAG,CAAIC,GAAG,IAChBR,aAAA,CAACnB,IAAI,CAAC4B,GAAG;MACRC,KAAK,EAAGF,GAAG,CAACd,IAAM;MAClBiB,GAAG,EAAGH,GAAG,CAACd,IAAM;MAChBO,SAAS,EAAC;IAAuB,GAE/BO,GAAG,CAACZ,KACG,CACT,CACW,CAAC,EACbR,IAAI,CAACmB,GAAG,CAAIC,GAAG,IAChBR,aAAA,CAACnB,IAAI,CAAC+B,QAAQ;MACbF,KAAK,EAAGF,GAAG,CAACd,IAAM;MAClBiB,GAAG,EAAGH,GAAG,CAACd,IAAM;MAChBO,SAAS,EAAC,4BAA4B;MACtCY,SAAS,EAAG;IAAO,GAEjBxB,kBAAkB,CAAEmB,GAAG,CAACd,IAAI,CAAE,IAAI,IACtB,CACd,CACG,CACF,CACL;EACF,CAAC,MAAM;IACNK,YAAY,GACXC,aAAA,CAAClD,iBAAiB;MACjBgE,WAAW,EAAC,GAAG;MACfb,SAAS,EAAC;IAAuB,GAEjCD,aAAA,CAAChD,eAAe;MAAC+D,IAAI,EAAC;IAAG,GACxBf,aAAA,CAAChC,IAAI;MAACgD,YAAY;MAACC,IAAI,EAAC;IAAO,GAC9BjB,aAAA,CAAC9B,QAAQ,QACR8B,aAAA,CAAC1C,SAAS,QACP8B,IAAI,CAACmB,GAAG,CAAIC,GAAG,IAAM;MACtB,OACCR,aAAA,CAAC9C,eAAe;QACfyD,GAAG,EAAGH,GAAG,CAACd,IAAM;QAChBqB,IAAI,EAAGP,GAAG,CAACd,IAAM;QACjBwB,EAAE,EAAG1D,IAAM;QACX2D,QAAQ;MAAA,GAERnB,aAAA,CAACtC,MAAM;QAAC0D,OAAO,EAAC;MAAe,GAC9BpB,aAAA,CAACjC,QAAQ,QACRiC,aAAA,CAAClC,QAAQ,QACN0C,GAAG,CAACZ,KACG,CACD,CAAC,EACXI,aAAA,CAACjC,QAAQ,QACRiC,aAAA,CAACvB,IAAI;QACJ4C,IAAI,EACH3C,KAAK,CAAC,CAAC,GACJH,WAAW,GACXC;MACH,CACD,CACQ,CACH,CACQ,CAAC;IAEpB,CAAE,CACQ,CACF,CACL,CACU,CAAC,EAChBQ,QAAQ,CAACO,MAAM,IAChBP,QAAQ,CAACuB,GAAG,CAAIe,OAAO,IAAM;MAC5B,OACCtB,aAAA,CAAChD,eAAe;QACf2D,GAAG,EAAI,GAAGW,OAAO,CAAC5B,IAAM,OAAQ;QAChCqB,IAAI,EAAGO,OAAO,CAAC5B;MAAM,GAErBM,aAAA,CAAChC,IAAI;QAACgD,YAAY;QAACC,IAAI,EAAC;MAAO,GAC9BjB,aAAA,CAAC/B,UAAU;QACV+C,YAAY,EAAG,KAAO;QACtBI,OAAO,EAAC,MAAM;QACdH,IAAI,EAAC,OAAO;QACZM,GAAG,EAAC;MAAG,GAEPvB,aAAA,CAAC5C,mBAAmB;QACnBiE,IAAI,EACH3C,KAAK,CAAC,CAAC,GACJF,YAAY,GACZD,WACH;QACD,cAAaI,EAAE,CACd,+BACD;MAAG,CACH,CAAC,EACFqB,aAAA,CAACpC,IAAI;QAACqD,IAAI,EAAC;MAAI,GACZK,OAAO,CAAC3B,QACL,CACK,CAAC,EACbK,aAAA,CAAC9B,QAAQ,QAAGoD,OAAO,CAACzB,OAAmB,CAClC,CACU,CAAC;IAEpB,CAAE,CACe,CACnB;EACF;EAEA,OAAOE,YAAY;AACpB"}

package/build-module/index.js

@@ -1,3 +1,4 @@
 export * from './components';
 export { store } from './store';
+export * from './private-apis';
 //# sourceMappingURL=index.js.map

package/build-module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["store"],"sources":["@wordpress/preferences/src/index.js"],"sourcesContent":["export * from './components';\nexport { store } from './store';\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,SAASA,KAAK,QAAQ,SAAS"}
+{"version":3,"names":["store"],"sources":["@wordpress/preferences/src/index.js"],"sourcesContent":["export * from './components';\nexport { store } from './store';\nexport * from './private-apis';\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,SAASA,KAAK,QAAQ,SAAS;AAC/B,cAAc,gBAAgB"}

package/build-module/lock-unlock.js

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+export const {
+  lock,
+  unlock
+} = __dangerousOptInToUnstableAPIsOnlyForCoreModules('I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.', '@wordpress/preferences');
+//# sourceMappingURL=lock-unlock.js.map

package/build-module/lock-unlock.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__dangerousOptInToUnstableAPIsOnlyForCoreModules","lock","unlock"],"sources":["@wordpress/preferences/src/lock-unlock.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',\n\t\t'@wordpress/preferences'\n\t);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gDAAgD,QAAQ,yBAAyB;AAC1F,OAAO,MAAM;EAAEC,IAAI;EAAEC;AAAO,CAAC,GAC5BF,gDAAgD,CAC/C,iHAAiH,EACjH,wBACD,CAAC"}

package/build-module/private-apis.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import PreferenceBaseOption from './components/preference-base-option';
+import PreferenceToggleControl from './components/preference-toggle-control';
+import PreferencesModal from './components/preferences-modal';
+import PreferencesModalSection from './components/preferences-modal-section';
+import PreferencesModalTabs from './components/preferences-modal-tabs';
+import { lock } from './lock-unlock';
+export const privateApis = {};
+lock(privateApis, {
+  PreferenceBaseOption,
+  PreferenceToggleControl,
+  PreferencesModal,
+  PreferencesModalSection,
+  PreferencesModalTabs
+});
+//# sourceMappingURL=private-apis.js.map

package/build-module/private-apis.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PreferenceBaseOption","PreferenceToggleControl","PreferencesModal","PreferencesModalSection","PreferencesModalTabs","lock","privateApis"],"sources":["@wordpress/preferences/src/private-apis.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport PreferenceBaseOption from './components/preference-base-option';\nimport PreferenceToggleControl from './components/preference-toggle-control';\nimport PreferencesModal from './components/preferences-modal';\nimport PreferencesModalSection from './components/preferences-modal-section';\nimport PreferencesModalTabs from './components/preferences-modal-tabs';\nimport { lock } from './lock-unlock';\n\nexport const privateApis = {};\nlock( privateApis, {\n\tPreferenceBaseOption,\n\tPreferenceToggleControl,\n\tPreferencesModal,\n\tPreferencesModalSection,\n\tPreferencesModalTabs,\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,oBAAoB,MAAM,qCAAqC;AACtE,OAAOC,uBAAuB,MAAM,wCAAwC;AAC5E,OAAOC,gBAAgB,MAAM,gCAAgC;AAC7D,OAAOC,uBAAuB,MAAM,wCAAwC;AAC5E,OAAOC,oBAAoB,MAAM,qCAAqC;AACtE,SAASC,IAAI,QAAQ,eAAe;AAEpC,OAAO,MAAMC,WAAW,GAAG,CAAC,CAAC;AAC7BD,IAAI,CAAEC,WAAW,EAAE;EAClBN,oBAAoB;EACpBC,uBAAuB;EACvBC,gBAAgB;EAChBC,uBAAuB;EACvBC;AACD,CAAE,CAAC"}

package/build-module/store/index.js

@@ -12,7 +12,7 @@ import * as selectors from './selectors';
 import { STORE_NAME } from './constants';
 
 /**
- * Store definition for the interface namespace.
+ * Store definition for the preferences namespace.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
  *

package/build-module/store/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createReduxStore","register","reducer","actions","selectors","STORE_NAME","store"],"sources":["@wordpress/preferences/src/store/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport { STORE_NAME } from './constants';\n\n/**\n * Store definition for the interface namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gBAAgB,EAAEC,QAAQ,QAAQ,iBAAiB;;AAE5D;AACA;AACA;AACA,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,SAAS,MAAM,aAAa;AACxC,SAASC,UAAU,QAAQ,aAAa;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAGN,gBAAgB,CAAEK,UAAU,EAAE;EAClDH,OAAO;EACPC,OAAO;EACPC;AACD,CAAE,CAAC;AAEHH,QAAQ,CAAEK,KAAM,CAAC"}
+{"version":3,"names":["createReduxStore","register","reducer","actions","selectors","STORE_NAME","store"],"sources":["@wordpress/preferences/src/store/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createReduxStore, register } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport reducer from './reducer';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport { STORE_NAME } from './constants';\n\n/**\n * Store definition for the preferences namespace.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore\n *\n * @type {Object}\n */\nexport const store = createReduxStore( STORE_NAME, {\n\treducer,\n\tactions,\n\tselectors,\n} );\n\nregister( store );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,gBAAgB,EAAEC,QAAQ,QAAQ,iBAAiB;;AAE5D;AACA;AACA;AACA,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,SAAS,MAAM,aAAa;AACxC,SAASC,UAAU,QAAQ,aAAa;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAGN,gBAAgB,CAAEK,UAAU,EAAE;EAClDH,OAAO;EACPC,OAAO;EACPC;AACD,CAAE,CAAC;AAEHH,QAAQ,CAAEK,KAAM,CAAC"}

package/build-module/store/selectors.js

@@ -1,3 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+const withDeprecatedKeys = originalGet => (state, scope, name) => {
+  const settingsToMoveToCore = ['allowRightClickOverrides', 'distractionFree', 'editorMode', 'fixedToolbar', 'focusMode', 'hiddenBlockTypes', 'inactivePanels', 'keepCaretInsideBlock', 'mostUsedBlocks', 'openPanels', 'showBlockBreadcrumbs', 'showIconLabels', 'showListViewByDefault'];
+  if (settingsToMoveToCore.includes(name) && ['core/edit-post', 'core/edit-site'].includes(scope)) {
+    deprecated(`wp.data.select( 'core/preferences' ).get( '${scope}', '${name}' )`, {
+      since: '6.5',
+      alternative: `wp.data.select( 'core/preferences' ).get( 'core', '${name}' )`
+    });
+    return originalGet(state, 'core', name);
+  }
+  return originalGet(state, scope, name);
+};
+
 /**
  * Returns a boolean indicating whether a prefer is active for a particular
  * scope.
@@ -8,8 +24,8 @@
  *
  * @return {*} Is the feature enabled?
  */
-export function get(state, scope, name) {
+export const get = withDeprecatedKeys((state, scope, name) => {
   const value = state.preferences[scope]?.[name];
   return value !== undefined ? value : state.defaults[scope]?.[name];
-}
+});
 //# sourceMappingURL=selectors.js.map

package/build-module/store/selectors.js.map

@@ -1 +1 @@
-{"version":3,"names":["get","state","scope","name","value","preferences","undefined","defaults"],"sources":["@wordpress/preferences/src/store/selectors.js"],"sourcesContent":["/**\n * Returns a boolean indicating whether a prefer is active for a particular\n * scope.\n *\n * @param {Object} state The store state.\n * @param {string} scope The scope of the feature (e.g. core/edit-post).\n * @param {string} name  The name of the feature.\n *\n * @return {*} Is the feature enabled?\n */\nexport function get( state, scope, name ) {\n\tconst value = state.preferences[ scope ]?.[ name ];\n\treturn value !== undefined ? value : state.defaults[ scope ]?.[ name ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,GAAGA,CAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAG;EACzC,MAAMC,KAAK,GAAGH,KAAK,CAACI,WAAW,CAAEH,KAAK,CAAE,GAAIC,IAAI,CAAE;EAClD,OAAOC,KAAK,KAAKE,SAAS,GAAGF,KAAK,GAAGH,KAAK,CAACM,QAAQ,CAAEL,KAAK,CAAE,GAAIC,IAAI,CAAE;AACvE"}
+{"version":3,"names":["deprecated","withDeprecatedKeys","originalGet","state","scope","name","settingsToMoveToCore","includes","since","alternative","get","value","preferences","undefined","defaults"],"sources":["@wordpress/preferences/src/store/selectors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nconst withDeprecatedKeys = ( originalGet ) => ( state, scope, name ) => {\n\tconst settingsToMoveToCore = [\n\t\t'allowRightClickOverrides',\n\t\t'distractionFree',\n\t\t'editorMode',\n\t\t'fixedToolbar',\n\t\t'focusMode',\n\t\t'hiddenBlockTypes',\n\t\t'inactivePanels',\n\t\t'keepCaretInsideBlock',\n\t\t'mostUsedBlocks',\n\t\t'openPanels',\n\t\t'showBlockBreadcrumbs',\n\t\t'showIconLabels',\n\t\t'showListViewByDefault',\n\t];\n\n\tif (\n\t\tsettingsToMoveToCore.includes( name ) &&\n\t\t[ 'core/edit-post', 'core/edit-site' ].includes( scope )\n\t) {\n\t\tdeprecated(\n\t\t\t`wp.data.select( 'core/preferences' ).get( '${ scope }', '${ name }' )`,\n\t\t\t{\n\t\t\t\tsince: '6.5',\n\t\t\t\talternative: `wp.data.select( 'core/preferences' ).get( 'core', '${ name }' )`,\n\t\t\t}\n\t\t);\n\n\t\treturn originalGet( state, 'core', name );\n\t}\n\n\treturn originalGet( state, scope, name );\n};\n\n/**\n * Returns a boolean indicating whether a prefer is active for a particular\n * scope.\n *\n * @param {Object} state The store state.\n * @param {string} scope The scope of the feature (e.g. core/edit-post).\n * @param {string} name  The name of the feature.\n *\n * @return {*} Is the feature enabled?\n */\nexport const get = withDeprecatedKeys( ( state, scope, name ) => {\n\tconst value = state.preferences[ scope ]?.[ name ];\n\treturn value !== undefined ? value : state.defaults[ scope ]?.[ name ];\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,uBAAuB;AAE9C,MAAMC,kBAAkB,GAAKC,WAAW,IAAM,CAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,KAAM;EACvE,MAAMC,oBAAoB,GAAG,CAC5B,0BAA0B,EAC1B,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,YAAY,EACZ,sBAAsB,EACtB,gBAAgB,EAChB,uBAAuB,CACvB;EAED,IACCA,oBAAoB,CAACC,QAAQ,CAAEF,IAAK,CAAC,IACrC,CAAE,gBAAgB,EAAE,gBAAgB,CAAE,CAACE,QAAQ,CAAEH,KAAM,CAAC,EACvD;IACDJ,UAAU,CACR,8CAA8CI,KAAO,OAAOC,IAAM,KAAI,EACvE;MACCG,KAAK,EAAE,KAAK;MACZC,WAAW,EAAG,sDAAsDJ,IAAM;IAC3E,CACD,CAAC;IAED,OAAOH,WAAW,CAAEC,KAAK,EAAE,MAAM,EAAEE,IAAK,CAAC;EAC1C;EAEA,OAAOH,WAAW,CAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAK,CAAC;AACzC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,GAAG,GAAGT,kBAAkB,CAAE,CAAEE,KAAK,EAAEC,KAAK,EAAEC,IAAI,KAAM;EAChE,MAAMM,KAAK,GAAGR,KAAK,CAACS,WAAW,CAAER,KAAK,CAAE,GAAIC,IAAI,CAAE;EAClD,OAAOM,KAAK,KAAKE,SAAS,GAAGF,KAAK,GAAGR,KAAK,CAACW,QAAQ,CAAEV,KAAK,CAAE,GAAIC,IAAI,CAAE;AACvE,CAAE,CAAC"}

package/build-style/style-rtl.css

@@ -0,0 +1,199 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: #006ba1;
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+}
+@media (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+.preference-base-option + .preference-base-option {
+  margin-top: 16px;
+}
+.preference-base-option .components-base-control__help {
+  margin-top: 0;
+  margin-right: 48px;
+}
+
+@media (min-width: 600px) {
+  .preferences-modal {
+    width: calc(100% - 32px);
+    height: calc(100% - 120px);
+  }
+}
+@media (min-width: 782px) {
+  .preferences-modal {
+    width: 750px;
+  }
+}
+@media (min-width: 960px) {
+  .preferences-modal {
+    height: 70%;
+  }
+}
+@media (max-width: 781px) {
+  .preferences-modal .components-modal__content {
+    padding: 0;
+  }
+}
+
+.preferences__tabs-tablist {
+  position: absolute;
+  top: 84px;
+  right: 16px;
+  width: 160px;
+}
+
+.preferences__tabs-tab {
+  border-radius: 2px;
+  font-weight: 400;
+}
+.preferences__tabs-tab[aria-selected=true] {
+  background: #f0f0f0;
+  box-shadow: none;
+  font-weight: 500;
+}
+.preferences__tabs-tab[aria-selected=true]::after {
+  content: none;
+}
+.preferences__tabs-tab[role=tab]:focus:not(:disabled) {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.preferences__tabs-tab:focus-visible::before {
+  content: none;
+}
+
+.preferences__tabs-tabpanel {
+  padding-right: 24px;
+  margin-right: 160px;
+}
+
+@media (max-width: 781px) {
+  .preferences__provider {
+    height: 100%;
+  }
+}
+.preferences-modal__section {
+  margin: 0 0 2.5rem 0;
+}
+.preferences-modal__section:last-child {
+  margin: 0;
+}
+
+.preferences-modal__section-legend {
+  margin-bottom: 8px;
+}
+
+.preferences-modal__section-title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin-top: 0;
+}
+
+.preferences-modal__section-description {
+  margin: -8px 0 8px 0;
+  font-size: 12px;
+  font-style: normal;
+  color: #757575;
+}
+
+.preferences-modal__section:has(.preferences-modal__section-content:empty) {
+  display: none;
+}