@wordpress/preferences 3.26.0 → 3.27.0

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;
+}

package/build-style/style.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-left: 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;
+  left: 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-left: 24px;
+  margin-left: 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;
+}