@wordpress/ui 0.4.0 → 0.5.0

package/build/form/primitives/input-layout/slot.cjs

@@ -0,0 +1,165 @@
+"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);
+
+// packages/ui/src/form/primitives/input-layout/slot.tsx
+var slot_exports = {};
+__export(slot_exports, {
+  InputLayoutSlot: () => InputLayoutSlot
+});
+module.exports = __toCommonJS(slot_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+
+// packages/ui/src/form/primitives/input-layout/style.module.css
+var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.style-module__input-layout__yyuq- {
+		/* TODO: Use padding tokens */
+		--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);
+
+		display: flex;
+		height: 40px;
+		background-color: var(--wpds-color-bg-interactive-neutral-weak);
+		border-width: var(--wpds-border-width-surface-xs);
+		border-style: solid;
+		border-color: var(--wpds-color-stroke-interactive-neutral);
+		border-radius: var(--wpds-border-radius-surface-sm);
+		font-family: var(--wpds-font-family-body);
+		font-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */
+		line-height: 1;
+		color: var(--wpds-color-fg-interactive-neutral);
+
+		@media (min-width: 600px) {
+			font-size: var(--wpds-font-size-md);
+		}
+
+		&.style-module__is-size-compact__DIB6h {
+			/* TODO: Use padding tokens */
+			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			height: 32px;
+		}
+
+		&.style-module__is-size-small__7WfNo {
+			/* TODO: Use padding tokens */
+			--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);
+			height: 24px;
+		}
+
+		&.style-module__is-disabled__b7cQR {
+			background-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);
+			border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
+			color: var(--wpds-color-fg-interactive-neutral-disabled);
+
+			@media (forced-colors: active) {
+				border-color: GrayText;
+				color: GrayText;
+			}
+		}
+
+		&.style-module__is-borderless__gJcnB {
+			border-color: transparent;
+		}
+
+		/* Don't show focus ring when the focus is in the prefix or suffix slots */
+		&:has(.style-module__input-layout-slot__DXr61:focus-within) {
+			outline: none;
+		}
+
+		&:hover:not(.style-module__is-disabled__b7cQR, .style-module__is-borderless__gJcnB) {
+			border-color: var(--wpds-color-stroke-interactive-neutral-active);
+		}
+	}
+
+	.style-module__input-layout-slot__DXr61 {
+		display: flex;
+		align-items: center;
+
+		&.style-module__is-padding-minimal__DJUmg {
+			--wp-ui-input-layout-prefix-padding-start:
+				calc(var(--wp-ui-input-layout-padding-inline) -
+				var(--wpds-dimension-base));
+			--wp-ui-input-layout-suffix-padding-end:
+				calc(var(--wp-ui-input-layout-padding-inline) -
+				var(--wpds-dimension-base));
+		}
+
+		&.style-module__is-prefix__ezQzb {
+			padding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));
+		}
+
+		&.style-module__is-suffix__R6el3 {
+			padding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));
+		}
+	}
+}
+`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+var style_default = {
+  "input-layout": "style-module__input-layout__yyuq-",
+  "is-size-compact": "style-module__is-size-compact__DIB6h",
+  "is-size-small": "style-module__is-size-small__7WfNo",
+  "is-disabled": "style-module__is-disabled__b7cQR",
+  "is-borderless": "style-module__is-borderless__gJcnB",
+  "input-layout-slot": "style-module__input-layout-slot__DXr61",
+  "is-padding-minimal": "style-module__is-padding-minimal__DJUmg",
+  "is-prefix": "style-module__is-prefix__ezQzb",
+  "is-suffix": "style-module__is-suffix__R6el3"
+};
+
+// packages/ui/src/form/primitives/input-layout/slot.tsx
+var import_context = require("./context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+var InputLayoutSlot = (0, import_element.forwardRef)(function InputLayoutSlot2({ type: typeProp, padding = "default", ...restProps }, ref) {
+  const typeContext = (0, import_context.useInputLayoutSlotContext)();
+  const type = typeProp ?? typeContext;
+  if (!type) {
+    throw new Error(
+      "InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot."
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: (0, import_clsx.default)(
+        style_default["input-layout-slot"],
+        style_default[`is-${type}`],
+        style_default[`is-padding-${padding}`]
+      ),
+      ...restProps
+    }
+  );
+});
+InputLayoutSlot.displayName = "InputLayout.Slot";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputLayoutSlot
+});
+//# sourceMappingURL=slot.cjs.map

package/build/form/primitives/input-layout/slot.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/form/primitives/input-layout/slot.tsx", "../../../../src/form/primitives/input-layout/style.module.css"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport styles from './style.module.css';\nimport type { InputLayoutSlotProps } from './types';\nimport { useInputLayoutSlotContext } from './context';\n\n/**\n * A layout helper to add paddings in a prefix or suffix.\n */\nexport const InputLayoutSlot = forwardRef<\n\tHTMLDivElement,\n\tInputLayoutSlotProps\n>( function InputLayoutSlot(\n\t{ type: typeProp, padding = 'default', ...restProps },\n\tref\n) {\n\tconst typeContext = useInputLayoutSlotContext();\n\tconst type = typeProp ?? typeContext;\n\n\tif ( ! type ) {\n\t\tthrow new Error(\n\t\t\t'InputLayoutSlot requires a `type` prop or must be used within an InputLayout prefix/suffix slot.'\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tstyles[ 'input-layout-slot' ],\n\t\t\t\tstyles[ `is-${ type }` ],\n\t\t\t\tstyles[ `is-padding-${ padding }` ]\n\t\t\t) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n\nInputLayoutSlot.displayName = 'InputLayout.Slot';\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-components {\n\t.style-module__input-layout__yyuq- {\n\t\t/* TODO: Use padding tokens */\n\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 3);\n\n\t\tdisplay: flex;\n\t\theight: 40px;\n\t\tbackground-color: var(--wpds-color-bg-interactive-neutral-weak);\n\t\tborder-width: var(--wpds-border-width-surface-xs);\n\t\tborder-style: solid;\n\t\tborder-color: var(--wpds-color-stroke-interactive-neutral);\n\t\tborder-radius: var(--wpds-border-radius-surface-sm);\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: max(var(--wpds-font-size-md), 16px); /* avoid mobile zoom */\n\t\tline-height: 1;\n\t\tcolor: var(--wpds-color-fg-interactive-neutral);\n\n\t\t@media (min-width: 600px) {\n\t\t\tfont-size: var(--wpds-font-size-md);\n\t\t}\n\n\t\t&.style-module__is-size-compact__DIB6h {\n\t\t\t/* TODO: Use padding tokens */\n\t\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);\n\t\t\theight: 32px;\n\t\t}\n\n\t\t&.style-module__is-size-small__7WfNo {\n\t\t\t/* TODO: Use padding tokens */\n\t\t\t--wp-ui-input-layout-padding-inline: calc(var(--wpds-dimension-base) * 2);\n\t\t\theight: 24px;\n\t\t}\n\n\t\t&.style-module__is-disabled__b7cQR {\n\t\t\tbackground-color: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t\tborder-color: var(--wpds-color-stroke-interactive-neutral-disabled);\n\t\t\tcolor: var(--wpds-color-fg-interactive-neutral-disabled);\n\n\t\t\t@media (forced-colors: active) {\n\t\t\t\tborder-color: GrayText;\n\t\t\t\tcolor: GrayText;\n\t\t\t}\n\t\t}\n\n\t\t&.style-module__is-borderless__gJcnB {\n\t\t\tborder-color: transparent;\n\t\t}\n\n\t\t/* Don't show focus ring when the focus is in the prefix or suffix slots */\n\t\t&:has(.style-module__input-layout-slot__DXr61:focus-within) {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:hover:not(.style-module__is-disabled__b7cQR, .style-module__is-borderless__gJcnB) {\n\t\t\tborder-color: var(--wpds-color-stroke-interactive-neutral-active);\n\t\t}\n\t}\n\n\t.style-module__input-layout-slot__DXr61 {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&.style-module__is-padding-minimal__DJUmg {\n\t\t\t--wp-ui-input-layout-prefix-padding-start:\n\t\t\t\tcalc(var(--wp-ui-input-layout-padding-inline) -\n\t\t\t\tvar(--wpds-dimension-base));\n\t\t\t--wp-ui-input-layout-suffix-padding-end:\n\t\t\t\tcalc(var(--wp-ui-input-layout-padding-inline) -\n\t\t\t\tvar(--wpds-dimension-base));\n\t\t}\n\n\t\t&.style-module__is-prefix__ezQzb {\n\t\t\tpadding-inline-start: var(--wp-ui-input-layout-prefix-padding-start, var(--wp-ui-input-layout-padding-inline));\n\t\t}\n\n\t\t&.style-module__is-suffix__R6el3 {\n\t\t\tpadding-inline-end: var(--wp-ui-input-layout-suffix-padding-end, var(--wp-ui-input-layout-padding-inline));\n\t\t}\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"input-layout\": \"style-module__input-layout__yyuq-\",\n  \"is-size-compact\": \"style-module__is-size-compact__DIB6h\",\n  \"is-size-small\": \"style-module__is-size-small__7WfNo\",\n  \"is-disabled\": \"style-module__is-disabled__b7cQR\",\n  \"is-borderless\": \"style-module__is-borderless__gJcnB\",\n  \"input-layout-slot\": \"style-module__input-layout-slot__DXr61\",\n  \"is-padding-minimal\": \"style-module__is-padding-minimal__DJUmg\",\n  \"is-prefix\": \"style-module__is-prefix__ezQzb\",\n  \"is-suffix\": \"style-module__is-suffix__R6el3\"\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAA2B;;;ACD3B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmFZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,aAAa;AACf;;;AD7FA,qBAA0C;AAsBxC;AAjBK,IAAM,sBAAkB,2BAG5B,SAASA,iBACX,EAAE,MAAM,UAAU,UAAU,WAAW,GAAG,UAAU,GACpD,KACC;AACD,QAAM,kBAAc,0CAA0B;AAC9C,QAAM,OAAO,YAAY;AAEzB,MAAK,CAAE,MAAO;AACb,UAAM,IAAI;AAAA,MACT;AAAA,IACD;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAY,YAAAC;AAAA,QACX,cAAQ,mBAAoB;AAAA,QAC5B,cAAQ,MAAO,IAAK,EAAG;AAAA,QACvB,cAAQ,cAAe,OAAQ,EAAG;AAAA,MACnC;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;AAEF,gBAAgB,cAAc;",
+  "names": ["InputLayoutSlot", "clsx"]
+}

package/build/form/primitives/input-layout/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// packages/ui/src/form/primitives/input-layout/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/build/form/primitives/input-layout/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/form/primitives/input-layout/types.ts"],
+  "sourcesContent": ["export interface InputLayoutProps\n\textends Omit< React.HTMLAttributes< HTMLDivElement >, 'prefix' > {\n\t/**\n\t * Whether the field should be visually styled as disabled.\n\t */\n\tvisuallyDisabled?: boolean;\n\t/**\n\t * The size of the field.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'compact' | 'small';\n\t/**\n\t * Whether the field should hide the border.\n\t */\n\tisBorderless?: boolean;\n\t/**\n\t * Element to render before the input.\n\t */\n\tprefix?: React.ReactNode;\n\t/**\n\t * Element to render after the input.\n\t */\n\tsuffix?: React.ReactNode;\n}\n\nexport type InputLayoutSlotType = 'prefix' | 'suffix';\n\nexport interface InputLayoutSlotProps\n\textends Omit< React.HTMLAttributes< HTMLDivElement >, 'type' > {\n\t/**\n\t * The type of the slot.\n\t *\n\t * When not provided, the type will be automatically inferred from the\n\t * `InputLayout` context if the slot is used within a `prefix` or `suffix`.\n\t */\n\ttype?: InputLayoutSlotType;\n\t/**\n\t * The padding of the slot.\n\t *\n\t * `minimal` will work best when the slot content is a button or icon.\n\t */\n\tpadding?: 'default' | 'minimal';\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/icon/icon.cjs

@@ -0,0 +1,46 @@
+"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);
+
+// packages/ui/src/icon/icon.tsx
+var icon_exports = {};
+__export(icon_exports, {
+  Icon: () => Icon
+});
+module.exports = __toCommonJS(icon_exports);
+var import_element = require("@wordpress/element");
+var import_primitives = require("@wordpress/primitives");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Icon = (0, import_element.forwardRef)(function Icon2({ icon, size = 24, ...restProps }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_primitives.SVG,
+    {
+      ref,
+      fill: "currentColor",
+      ...icon.props,
+      ...restProps,
+      width: size,
+      height: size
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Icon
+});
+//# sourceMappingURL=icon.cjs.map

package/build/icon/icon.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/icon/icon.tsx"],
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { SVG } from '@wordpress/primitives';\nimport type { IconProps } from './types';\n\n/**\n * Renders an SVG icon with a 24px default size.\n *\n * If no `fill` colors are explicitly set on the icon itself, it will be rendered with a `currentColor` fill.\n *\n * ```jsx\n * import { wordpress } from '@wordpress/icons';\n *\n * <Icon icon={ wordpress } />\n * ```\n */\nexport const Icon = forwardRef< SVGSVGElement, IconProps >( function Icon(\n\t{ icon, size = 24, ...restProps },\n\tref\n) {\n\treturn (\n\t\t<SVG\n\t\t\tref={ ref }\n\t\t\tfill=\"currentColor\"\n\t\t\t{ ...icon.props }\n\t\t\t{ ...restProps }\n\t\t\twidth={ size }\n\t\t\theight={ size }\n\t\t/>\n\t);\n} );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2B;AAC3B,wBAAoB;AAmBlB;AALK,IAAM,WAAO,2BAAwC,SAASA,MACpE,EAAE,MAAM,OAAO,IAAI,GAAG,UAAU,GAChC,KACC;AACD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACH,GAAG,KAAK;AAAA,MACR,GAAG;AAAA,MACL,OAAQ;AAAA,MACR,QAAS;AAAA;AAAA,EACV;AAEF,CAAE;",
+  "names": ["Icon"]
+}

package/build/{index.js → icon/index.cjs}

@@ -3,6 +3,10 @@ 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))
@@ -11,15 +15,17 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/ui/src/index.ts
-var index_exports = {};
-module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("./box"), module.exports);
+// packages/ui/src/icon/index.ts
+var icon_exports = {};
+__export(icon_exports, {
+  Icon: () => import_icon.Icon
+});
+module.exports = __toCommonJS(icon_exports);
+var import_icon = require("./icon.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("./box")
+  Icon
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/icon/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/icon/index.ts"],
+  "sourcesContent": ["export { Icon } from './icon';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqB;",
+  "names": []
+}

package/build/icon/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// packages/ui/src/icon/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/build/icon/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/icon/types.ts"],
+  "sourcesContent": ["export type IconProps = React.ComponentProps< 'svg' > & {\n\t/**\n\t * The icon to render, which must be an svg element or an `SVG` from `@wordpress/primitives`.\n\t *\n\t * In most cases, you should use an icon from\n\t * [the `@wordpress/icons` package](https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library).\n\t */\n\ticon: React.ReactElement< React.ComponentProps< 'svg' > >;\n\t/**\n\t * The size (width and height) of the icon.\n\t * @default 24\n\t */\n\tsize?: number;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/index.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/index.ts
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./badge/index.cjs"), module.exports);
+__reExport(index_exports, require("./box/index.cjs"), module.exports);
+__reExport(index_exports, require("./button/index.cjs"), module.exports);
+__reExport(index_exports, require("./form/primitives/index.cjs"), module.exports);
+__reExport(index_exports, require("./icon/index.cjs"), module.exports);
+__reExport(index_exports, require("./stack/index.cjs"), module.exports);
+__reExport(index_exports, require("./visually-hidden/index.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./badge/index.cjs"),
+  ...require("./box/index.cjs"),
+  ...require("./button/index.cjs"),
+  ...require("./form/primitives/index.cjs"),
+  ...require("./icon/index.cjs"),
+  ...require("./stack/index.cjs"),
+  ...require("./visually-hidden/index.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/build/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export * from './badge';\nexport * from './box';\nexport * from './button';\nexport * from './form/primitives';\nexport * from './icon';\nexport * from './stack';\nexport * from './visually-hidden';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,8BAAd;AACA,0BAAc,4BADd;AAEA,0BAAc,+BAFd;AAGA,0BAAc,wCAHd;AAIA,0BAAc,6BAJd;AAKA,0BAAc,8BALd;AAMA,0BAAc,wCANd;",
+  "names": []
+}

package/build/stack/{index.js → index.cjs}

@@ -23,9 +23,9 @@ __export(stack_exports, {
   Stack: () => import_stack.Stack
 });
 module.exports = __toCommonJS(stack_exports);
-var import_stack = require("./stack");
+var import_stack = require("./stack.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Stack
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map

package/build/stack/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stack/index.ts"],
+  "sourcesContent": ["export { Stack } from './stack';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;",
+  "names": []
+}

package/build/stack/{stack.js → stack.cjs}

@@ -1,9 +1,7 @@
 "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)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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);
 
 // packages/ui/src/stack/stack.tsx
@@ -33,9 +23,8 @@ __export(stack_exports, {
   Stack: () => Stack
 });
 module.exports = __toCommonJS(stack_exports);
-var import_clsx = __toESM(require("clsx"));
+var import_react = require("@base-ui/react");
 var import_element = require("@wordpress/element");
-var import_element2 = require("../utils/element");
 
 // packages/ui/src/stack/style.module.css
 var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
@@ -53,23 +42,22 @@ var style_default = {
 
 // packages/ui/src/stack/stack.tsx
 var Stack = (0, import_element.forwardRef)(function Stack2({ direction, gap, align, justify, wrap, render, ...props }, ref) {
-  const className = (0, import_clsx.default)(props.className, style_default.stack);
   const style = {
     gap: gap && `var(--wpds-dimension-gap-${gap})`,
     alignItems: align,
     justifyContent: justify,
     flexDirection: direction,
-    flexWrap: wrap,
-    ...props.style
+    flexWrap: wrap
   };
-  return (0, import_element2.renderElement)({
+  const element = (0, import_react.useRender)({
     render,
     ref,
-    props: { ...props, style, className }
+    props: (0, import_react.mergeProps)(props, { style, className: style_default.stack })
   });
+  return element;
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Stack
 });
-//# sourceMappingURL=stack.js.map
+//# sourceMappingURL=stack.cjs.map

package/build/stack/stack.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stack/stack.tsx", "../../src/stack/style.module.css"],
+  "sourcesContent": ["import { useRender, mergeProps } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport { type StackProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A flexible layout component using CSS Flexbox for consistent spacing and alignment.\n * Built on design tokens for predictable spacing values.\n */\nexport const Stack = forwardRef< HTMLDivElement, StackProps >( function Stack(\n\t{ direction, gap, align, justify, wrap, render, ...props },\n\tref\n) {\n\tconst style: React.CSSProperties = {\n\t\tgap: gap && `var(--wpds-dimension-gap-${ gap })`,\n\t\talignItems: align,\n\t\tjustifyContent: justify,\n\t\tflexDirection: direction,\n\t\tflexWrap: wrap,\n\t};\n\n\tconst element = useRender( {\n\t\trender,\n\t\tref,\n\t\tprops: mergeProps< 'div' >( props, { style, className: styles.stack } ),\n\t} );\n\n\treturn element;\n} );\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-components {\n\t.style-module__stack__Gc4EG {\n\t\tdisplay: flex;\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"stack\": \"style-module__stack__Gc4EG\"\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsC;AACtC,qBAA2B;;;ACD3B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,SAAS;AACX;;;ADLO,IAAM,YAAQ,2BAA0C,SAASA,OACvE,EAAE,WAAW,KAAK,OAAO,SAAS,MAAM,QAAQ,GAAG,MAAM,GACzD,KACC;AACD,QAAM,QAA6B;AAAA,IAClC,KAAK,OAAO,4BAA6B,GAAI;AAAA,IAC7C,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,EACX;AAEA,QAAM,cAAU,wBAAW;AAAA,IAC1B;AAAA,IACA;AAAA,IACA,WAAO,yBAAqB,OAAO,EAAE,OAAO,WAAW,cAAO,MAAM,CAAE;AAAA,EACvE,CAAE;AAEF,SAAO;AACR,CAAE;",
+  "names": ["Stack"]
+}

package/build/stack/{types.js → types.cjs}

@@ -16,4 +16,4 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/ui/src/stack/types.ts
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.cjs.map

package/build/stack/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/stack/types.ts"],
+  "sourcesContent": ["import { type GapSize } from '@wordpress/theme';\nimport { type ComponentProps } from '../utils/types';\n\nexport interface StackProps extends ComponentProps< 'div' > {\n\t/**\n\t * The direction of the stack.\n\t */\n\tdirection?: Exclude<\n\t\tReact.CSSProperties[ 'flexDirection' ],\n\t\t'row-reverse' | 'column-reverse'\n\t>;\n\n\t/**\n\t * The amount of space between each child element using design system tokens.\n\t *\n\t * @default undefined\n\t */\n\tgap?: GapSize;\n\n\t/**\n\t * The alignment of the stack items along the cross axis.\n\t *\n\t * @default 'initial'\n\t */\n\talign?: React.CSSProperties[ 'alignItems' ];\n\n\t/**\n\t * The alignment of the stack items along the main axis.\n\t *\n\t * @default 'initial'\n\t */\n\tjustify?: React.CSSProperties[ 'justifyContent' ];\n\n\t/**\n\t * Whether the stack items should wrap to the next line.\n\t */\n\twrap?: Exclude< React.CSSProperties[ 'flexWrap' ], 'wrap-reverse' >;\n\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: React.ReactNode;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/types/css-modules.d.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=css-modules.d.cjs.map

package/build/types/css-modules.d.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build/types/{react.d.js → react.d.cjs}

@@ -2,4 +2,4 @@
 
 // packages/ui/src/types/react.d.ts
 var import_react = require("react");
-//# sourceMappingURL=react.d.js.map
+//# sourceMappingURL=react.d.cjs.map

package/build/utils/{types.js → types.cjs}

@@ -16,4 +16,4 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/ui/src/utils/types.ts
 var types_exports = {};
 module.exports = __toCommonJS(types_exports);
-//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.cjs.map

package/build/visually-hidden/index.cjs

@@ -0,0 +1,31 @@
+"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);
+
+// packages/ui/src/visually-hidden/index.ts
+var visually_hidden_exports = {};
+__export(visually_hidden_exports, {
+  VisuallyHidden: () => import_visually_hidden.VisuallyHidden
+});
+module.exports = __toCommonJS(visually_hidden_exports);
+var import_visually_hidden = require("./visually-hidden.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VisuallyHidden
+});
+//# sourceMappingURL=index.cjs.map

package/build/visually-hidden/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/visually-hidden/index.ts"],
+  "sourcesContent": ["export { VisuallyHidden } from './visually-hidden';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAA+B;",
+  "names": []
+}

package/build/visually-hidden/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// packages/ui/src/visually-hidden/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/build/visually-hidden/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/visually-hidden/types.ts"],
+  "sourcesContent": ["import type { ComponentProps } from '../utils/types';\n\nexport interface VisuallyHiddenProps extends ComponentProps< 'div' > {\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: React.ReactNode;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}