@wordpress/admin-ui 1.0.1-next.47f435fc9.0

package/README.md

@@ -0,0 +1,33 @@
+# Admin UI
+
+Generic components to be used to build the Admin UI.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/admin-ui --save
+```
+
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### NavigableRegion
+
+Undocumented declaration.
+
+### Page
+
+Undocumented declaration.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

package/build/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  NavigableRegion: () => import_navigable_region.default,
+  Page: () => import_page.default
+});
+module.exports = __toCommonJS(index_exports);
+var import_navigable_region = __toESM(require("./navigable-region"));
+var import_page = __toESM(require("./page"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavigableRegion,
+  Page
+});
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export { default as NavigableRegion } from './navigable-region';\nexport { default as Page } from './page';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA2C;AAC3C,kBAAgC;",
+  "names": []
+}

package/build/navigable-region/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var navigable_region_exports = {};
+__export(navigable_region_exports, {
+  default: () => navigable_region_default
+});
+module.exports = __toCommonJS(navigable_region_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+const NavigableRegion = (0, import_element.forwardRef)(
+  ({ children, className, ariaLabel, as: Tag = "div", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Tag,
+      {
+        ref,
+        className: (0, import_clsx.default)("admin-ui-navigable-region", className),
+        "aria-label": ariaLabel,
+        role: "region",
+        tabIndex: "-1",
+        ...props,
+        children
+      }
+    );
+  }
+);
+NavigableRegion.displayName = "NavigableRegion";
+var navigable_region_default = NavigableRegion;
+//# sourceMappingURL=index.js.map

package/build/navigable-region/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/navigable-region/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Type definitions\n */\ntype NavigableRegionProps = {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tariaLabel: string;\n\tas?: React.ElementType;\n\t[ key: string ]: any;\n};\n\n// This is a copy of the private `NavigableRegion` component from the '@wordpress/editor' private APIs.\nconst NavigableRegion = forwardRef< HTMLElement, NavigableRegionProps >(\n\t( { children, className, ariaLabel, as: Tag = 'div', ...props }, ref ) => {\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( 'admin-ui-navigable-region', className ) }\n\t\t\t\taria-label={ ariaLabel }\n\t\t\t\trole=\"region\"\n\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Tag>\n\t\t);\n\t}\n);\n\nNavigableRegion.displayName = 'NavigableRegion';\n\nexport default NavigableRegion;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBG;AAtBH,kBAAiB;AAKjB,qBAA2B;AAc3B,MAAM,sBAAkB;AAAA,EACvB,CAAE,EAAE,UAAU,WAAW,WAAW,IAAI,MAAM,OAAO,GAAG,MAAM,GAAG,QAAS;AACzE,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,eAAY,YAAAA,SAAM,6BAA6B,SAAU;AAAA,QACzD,cAAa;AAAA,QACb,MAAK;AAAA,QACL,UAAS;AAAA,QACP,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;AAEA,gBAAgB,cAAc;AAE9B,IAAO,2BAAQ;",
+  "names": ["clsx"]
+}

package/build/page/header.js

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var header_exports = {};
+__export(header_exports, {
+  default: () => Header
+});
+module.exports = __toCommonJS(header_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+function Header({
+  breadcrumbs,
+  badges,
+  title,
+  subTitle,
+  actions
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { className: "admin-ui-page__header", as: "header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.__experimentalHStack,
+      {
+        className: "admin-ui-page__header-title",
+        justify: "space-between",
+        spacing: 2,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 2, children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { as: "h2", level: 3, weight: 500, truncate: true, children: title }),
+            breadcrumbs,
+            badges
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalHStack,
+            {
+              style: { width: "auto", flexShrink: 0 },
+              spacing: 2,
+              className: "admin-ui-page__header-actions",
+              children: actions
+            }
+          )
+        ]
+      }
+    ),
+    subTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "admin-ui-page__header-subtitle", children: subTitle })
+  ] });
+}
+//# sourceMappingURL=header.js.map

package/build/page/header.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/page/header.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\treturn (\n\t\t<VStack className=\"admin-ui-page__header\" as=\"header\">\n\t\t\t<HStack\n\t\t\t\tclassName=\"admin-ui-page__header-title\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tspacing={ 2 }\n\t\t\t>\n\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<Heading as=\"h2\" level={ 3 } weight={ 500 } truncate>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BI;AA3BJ,wBAIO;AAEQ,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAOI;AACH,SACC,6CAAC,kBAAAA,sBAAA,EAAO,WAAU,yBAAwB,IAAG,UAC5C;AAAA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,SAAU;AAAA,QAEV;AAAA,uDAAC,kBAAAA,sBAAA,EAAO,SAAU,GACf;AAAA,qBACD,4CAAC,kBAAAC,uBAAA,EAAQ,IAAG,MAAK,OAAQ,GAAI,QAAS,KAAM,UAAQ,MACjD,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC,kBAAAD;AAAA,YAAA;AAAA,cACA,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,SAAU;AAAA,cACV,WAAU;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACD;AAAA,IACE,YACD,4CAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA,KAE5D;AAEF;",
+  "names": ["VStack", "HStack", "Heading"]
+}

package/build/page/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var page_exports = {};
+__export(page_exports, {
+  default: () => page_default
+});
+module.exports = __toCommonJS(page_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_header = __toESM(require("./header"));
+var import_navigable_region = __toESM(require("../navigable-region"));
+function Page({
+  breadcrumbs,
+  badges,
+  title,
+  subTitle,
+  children,
+  className,
+  actions,
+  hasPadding = false
+}) {
+  const classes = (0, import_clsx.default)("admin-ui-page", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_navigable_region.default, { className: classes, ariaLabel: title, children: [
+    (title || breadcrumbs || badges) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_header.default,
+      {
+        breadcrumbs,
+        badges,
+        title,
+        subTitle,
+        actions
+      }
+    ),
+    hasPadding ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "admin-ui-page__content has-padding", children }) : children
+  ] });
+}
+var page_default = Page;
+//# sourceMappingURL=index.js.map

package/build/page/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/page/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\thasPadding = false,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\thasPadding?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ title }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nexport default Page;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCE;AA9BF,kBAAiB;AAKjB,oBAAmB;AACnB,8BAA4B;AAE5B,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACd,GASI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AAEjD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,OAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,4CAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,IAAO,eAAQ;",
+  "names": ["clsx", "NavigableRegion", "Header"]
+}

package/build-module/index.js

@@ -0,0 +1,7 @@
+import { default as default2 } from "./navigable-region";
+import { default as default3 } from "./page";
+export {
+  default2 as NavigableRegion,
+  default3 as Page
+};
+//# sourceMappingURL=index.js.map

package/build-module/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export { default as NavigableRegion } from './navigable-region';\nexport { default as Page } from './page';\n"],
+  "mappings": "AAAA,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAAuB;",
+  "names": ["default"]
+}

package/build-module/navigable-region/index.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "@wordpress/element";
+const NavigableRegion = forwardRef(
+  ({ children, className, ariaLabel, as: Tag = "div", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        className: clsx("admin-ui-navigable-region", className),
+        "aria-label": ariaLabel,
+        role: "region",
+        tabIndex: "-1",
+        ...props,
+        children
+      }
+    );
+  }
+);
+NavigableRegion.displayName = "NavigableRegion";
+var navigable_region_default = NavigableRegion;
+export {
+  navigable_region_default as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/navigable-region/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/navigable-region/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Type definitions\n */\ntype NavigableRegionProps = {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tariaLabel: string;\n\tas?: React.ElementType;\n\t[ key: string ]: any;\n};\n\n// This is a copy of the private `NavigableRegion` component from the '@wordpress/editor' private APIs.\nconst NavigableRegion = forwardRef< HTMLElement, NavigableRegionProps >(\n\t( { children, className, ariaLabel, as: Tag = 'div', ...props }, ref ) => {\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( 'admin-ui-navigable-region', className ) }\n\t\t\t\taria-label={ ariaLabel }\n\t\t\t\trole=\"region\"\n\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Tag>\n\t\t);\n\t}\n);\n\nNavigableRegion.displayName = 'NavigableRegion';\n\nexport default NavigableRegion;\n"],
+  "mappings": "AAyBG;AAtBH,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAc3B,MAAM,kBAAkB;AAAA,EACvB,CAAE,EAAE,UAAU,WAAW,WAAW,IAAI,MAAM,OAAO,GAAG,MAAM,GAAG,QAAS;AACzE,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAY,KAAM,6BAA6B,SAAU;AAAA,QACzD,cAAa;AAAA,QACb,MAAK;AAAA,QACL,UAAS;AAAA,QACP,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;AAEA,gBAAgB,cAAc;AAE9B,IAAO,2BAAQ;",
+  "names": []
+}

package/build-module/page/header.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  __experimentalHeading as Heading,
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack
+} from "@wordpress/components";
+function Header({
+  breadcrumbs,
+  badges,
+  title,
+  subTitle,
+  actions
+}) {
+  return /* @__PURE__ */ jsxs(VStack, { className: "admin-ui-page__header", as: "header", children: [
+    /* @__PURE__ */ jsxs(
+      HStack,
+      {
+        className: "admin-ui-page__header-title",
+        justify: "space-between",
+        spacing: 2,
+        children: [
+          /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
+            title && /* @__PURE__ */ jsx(Heading, { as: "h2", level: 3, weight: 500, truncate: true, children: title }),
+            breadcrumbs,
+            badges
+          ] }),
+          /* @__PURE__ */ jsx(
+            HStack,
+            {
+              style: { width: "auto", flexShrink: 0 },
+              spacing: 2,
+              className: "admin-ui-page__header-actions",
+              children: actions
+            }
+          )
+        ]
+      }
+    ),
+    subTitle && /* @__PURE__ */ jsx("p", { className: "admin-ui-page__header-subtitle", children: subTitle })
+  ] });
+}
+export {
+  Header as default
+};
+//# sourceMappingURL=header.js.map

package/build-module/page/header.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/page/header.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\treturn (\n\t\t<VStack className=\"admin-ui-page__header\" as=\"header\">\n\t\t\t<HStack\n\t\t\t\tclassName=\"admin-ui-page__header-title\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tspacing={ 2 }\n\t\t\t>\n\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<Heading as=\"h2\" level={ 3 } weight={ 500 } truncate>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": "AA8BI,SAEE,KAFF;AA3BJ;AAAA,EACC,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAEQ,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAOI;AACH,SACC,qBAAC,UAAO,WAAU,yBAAwB,IAAG,UAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,SAAU;AAAA,QAEV;AAAA,+BAAC,UAAO,SAAU,GACf;AAAA,qBACD,oBAAC,WAAQ,IAAG,MAAK,OAAQ,GAAI,QAAS,KAAM,UAAQ,MACjD,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,SAAU;AAAA,cACV,WAAU;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACD;AAAA,IACE,YACD,oBAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA,KAE5D;AAEF;",
+  "names": []
+}

package/build-module/page/index.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import Header from "./header";
+import NavigableRegion from "../navigable-region";
+function Page({
+  breadcrumbs,
+  badges,
+  title,
+  subTitle,
+  children,
+  className,
+  actions,
+  hasPadding = false
+}) {
+  const classes = clsx("admin-ui-page", className);
+  return /* @__PURE__ */ jsxs(NavigableRegion, { className: classes, ariaLabel: title, children: [
+    (title || breadcrumbs || badges) && /* @__PURE__ */ jsx(
+      Header,
+      {
+        breadcrumbs,
+        badges,
+        title,
+        subTitle,
+        actions
+      }
+    ),
+    hasPadding ? /* @__PURE__ */ jsx("div", { className: "admin-ui-page__content has-padding", children }) : children
+  ] });
+}
+var page_default = Page;
+export {
+  page_default as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/page/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\thasPadding = false,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\thasPadding?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ title }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nexport default Page;\n"],
+  "mappings": "AAiCE,SAEE,KAFF;AA9BF,OAAO,UAAU;AAKjB,OAAO,YAAY;AACnB,OAAO,qBAAqB;AAE5B,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACd,GASI;AACH,QAAM,UAAU,KAAM,iBAAiB,SAAU;AAEjD,SACC,qBAAC,mBAAgB,WAAY,SAAU,WAAY,OAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,oBAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,IAAO,eAAQ;",
+  "names": []
+}

package/build-style/style-rtl.css

@@ -0,0 +1,150 @@
+/**
+ * Colors
+ */
+/**
+ * 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.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  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.
+ */
+.admin-ui-page {
+  display: flex;
+  height: 100%;
+  background-color: #fff;
+  color: #2f2f2f;
+  position: relative;
+  z-index: 1;
+  flex-flow: column;
+  container: admin-ui-page/inline-size;
+}
+@media not (prefers-reduced-motion) {
+  .admin-ui-page {
+    transition: width ease-out 0.2s;
+  }
+}
+
+.admin-ui-page__header {
+  padding: 16px 48px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fff;
+  position: sticky;
+  top: 0;
+}
+@container (max-width: 430px) {
+  .admin-ui-page__header {
+    padding: 16px 24px;
+  }
+}
+
+.admin-ui-page__header-subtitle {
+  padding-block-end: 8px;
+  color: #757575;
+  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+}
+
+.admin-ui-page__content {
+  flex-grow: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.admin-ui-page__content.has-padding {
+  padding: 16px 20px;
+}
+@container (max-width: 430px) {
+  .admin-ui-page__content.has-padding {
+    padding: 16px 24px;
+  }
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
+  width: auto;
+  padding: 0 8px;
+}
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
+  display: none;
+}
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}