@wordpress/components 39.0.0 → 40.1.0

package/build/utils/colors-values.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/colors-values.js"],
-  "sourcesContent": ["/* eslint-disable @wordpress/no-ds-tokens -- This file is the JS counterpart of\n   theme-variables.scss and the package's single mapping to the design system.\n   The rule guards against bare `--wpds-*` references, which the build can't\n   inject fallbacks into for Emotion/JS files; here every reference carries an\n   explicit fallback, so that concern doesn't apply.\n\n   IMPORTANT: because this file's source contains `--wpds-` text, the\n   design-system fallback build plugin claims it (it matches any file whose\n   source includes `--wpds-`, comments included) and, in doing so, displaces\n   the Emotion transform for this file. That is harmless ONLY because this file\n   holds plain value constants and no Emotion `css`/styled component selectors.\n   Do not add any here: a co-located component selector would silently fail to\n   compile and break the build, with no lint signal (see #79245). Keep this\n   file selector-free — define styles elsewhere and consume these constants. */\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Should match packages/components/src/utils/theme-variables.scss.\n//\n// Mirrors the Sass structure: each non-accent value resolves through a design\n// system (`--wpds-*`) token, then a hardcoded fallback. The hardcoded values\n// match what the design-system fallback plugin injects into the Sass version,\n// so JS behaves consistently with the Sass variables. Keep both the token\n// references and the fallbacks in sync with the Sass version.\nconst THEME = {\n\taccent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,\n\taccentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,\n\taccentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,\n\t/** Used when placing text on the accent color. */\n\taccentInverted: `var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff))`,\n\n\tbackground: `var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))`,\n\n\tforeground: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t/** Used when placing text on the foreground color. */\n\tforegroundInverted: `var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\n\tgray: {\n\t\t/** @deprecated Use `COLORS.theme.foreground` instead. */\n\t\t900: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t800: `var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t700: `var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070))`,\n\t\t600: `var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t400: `var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t300: `var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t200: `var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t100: `var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\t},\n};\n\n/* eslint-enable @wordpress/no-ds-tokens */\n\nconst UI = {\n\tbackground: THEME.background,\n\tbackgroundDisabled: THEME.gray[ 100 ],\n\tborder: THEME.gray[ 600 ],\n\tborderHover: THEME.gray[ 700 ],\n\tborderFocus: THEME.accent,\n\tborderDisabled: THEME.gray[ 400 ],\n\ttextDisabled: THEME.gray[ 600 ],\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`,\n\tlightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`,\n};\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t *\n\t * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.\n\t */\n\tgray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`\n\t/**\n\t * @deprecated Prefer theme-ready variables in `COLORS.theme`.\n\t */\n\twhite,\n\talert: ALERT,\n\t/**\n\t * Theme-ready variables with fallbacks.\n\t *\n\t * Prefer semantic aliases in `COLORS.ui` when applicable.\n\t */\n\ttheme: THEME,\n\t/**\n\t * Semantic aliases (prefer these over raw variables when applicable).\n\t */\n\tui: UI,\n} );\n\nexport default COLORS;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA,IAAM,QAAQ;AAGd,IAAM,OAAO;AAAA,EACZ,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AACN;AAGA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AACR;AASA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;AAAA,EAEhB,gBAAgB;AAAA,EAEhB,YAAY;AAAA,EAEZ,YAAY;AAAA;AAAA,EAEZ,oBAAoB;AAAA,EAEpB,MAAM;AAAA;AAAA,IAEL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACN;AACD;AAIA,IAAM,KAAK;AAAA,EACV,YAAY,MAAM;AAAA,EAClB,oBAAoB,MAAM,KAAM,GAAI;AAAA,EACpC,QAAQ,MAAM,KAAM,GAAI;AAAA,EACxB,aAAa,MAAM,KAAM,GAAI;AAAA,EAC7B,aAAa,MAAM;AAAA,EACnB,gBAAgB,MAAM,KAAM,GAAI;AAAA,EAChC,cAAc,MAAM,KAAM,GAAI;AAAA;AAAA,EAG9B,qBAAqB,sBAAuB,MAAM,UAAW;AAAA,EAC7D,sBAAsB,sBAAuB,MAAM,UAAW;AAC/D;AAEO,IAAM,SAAS,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAIN;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMP,OAAO;AAAA;AAAA;AAAA;AAAA,EAIP,IAAI;AACL,CAAE;AAEF,IAAO,wBAAQ;",
+  "sourcesContent": ["/* eslint-disable @wordpress/no-ds-tokens -- This file is the JS counterpart of\n   theme-variables.scss and the package's single mapping to the design system.\n   The rule guards against bare `--wpds-*` references, which the build can't\n   inject fallbacks into for Emotion/JS files; here every reference carries an\n   explicit fallback, so that concern doesn't apply.\n\n   IMPORTANT: because this file's source contains `--wpds-` text, the\n   design-system fallback build plugin claims it (it matches any file whose\n   source includes `--wpds-`, comments included) and, in doing so, displaces\n   the Emotion transform for this file. That is harmless ONLY because this file\n   holds plain value constants and no Emotion `css`/styled component selectors.\n   Do not add any here: a co-located component selector would silently fail to\n   compile and break the build, with no lint signal (see #79245). Keep this\n   file selector-free — define styles elsewhere and consume these constants. */\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Should match packages/components/src/utils/theme-variables.scss.\n//\n// Mirrors the Sass structure: each non-accent value resolves through a design\n// system (`--wpds-*`) token, then a hardcoded fallback. The hardcoded values\n// match what the design-system fallback plugin injects into the Sass version,\n// so JS behaves consistently with the Sass variables. Keep both the token\n// references and the fallbacks in sync with the Sass version.\nconst THEME = {\n\taccent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,\n\taccentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,\n\taccentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,\n\t/** Used when placing text on the accent color. */\n\taccentInverted: `var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff))`,\n\n\tbackground: `var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))`,\n\n\tforeground: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t/** Used when placing text on the foreground color. */\n\tforegroundInverted: `var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\n\tgray: {\n\t\t/** @deprecated Use `COLORS.theme.foreground` instead. */\n\t\t900: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t800: `var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,\n\t\t700: `var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070))`,\n\t\t600: `var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t400: `var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,\n\t\t300: `var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t200: `var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,\n\t\t100: `var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc))`,\n\t},\n};\n\nconst UI = {\n\tbackground: THEME.background,\n\tbackgroundDisabled: THEME.gray[ 100 ],\n\tborder: THEME.gray[ 600 ],\n\tborderHover: THEME.gray[ 700 ],\n\tborderFocus: THEME.accent,\n\t// The gray ramp above has no disabled step to map these through.\n\tborderDisabled: `var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb)`,\n\ttextDisabled: `var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d)`,\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`,\n\tlightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`,\n};\n\n/* eslint-enable @wordpress/no-ds-tokens */\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t *\n\t * @deprecated Use semantic aliases in `COLORS.ui` or theme-ready variables in `COLORS.theme.gray`.\n\t */\n\tgray: GRAY, // TODO: Stop exporting this when everything is migrated to `theme` or `ui`\n\t/**\n\t * @deprecated Prefer theme-ready variables in `COLORS.theme`.\n\t */\n\twhite,\n\talert: ALERT,\n\t/**\n\t * Theme-ready variables with fallbacks.\n\t *\n\t * Prefer semantic aliases in `COLORS.ui` when applicable.\n\t */\n\ttheme: THEME,\n\t/**\n\t * Semantic aliases (prefer these over raw variables when applicable).\n\t */\n\tui: UI,\n} );\n\nexport default COLORS;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA,IAAM,QAAQ;AAGd,IAAM,OAAO;AAAA,EACZ,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AAAA;AAAA,EAEL,KAAK;AACN;AAGA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,OAAO;AACR;AASA,IAAM,QAAQ;AAAA,EACb,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,gBAAgB;AAAA;AAAA,EAEhB,gBAAgB;AAAA,EAEhB,YAAY;AAAA,EAEZ,YAAY;AAAA;AAAA,EAEZ,oBAAoB;AAAA,EAEpB,MAAM;AAAA;AAAA,IAEL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACN;AACD;AAEA,IAAM,KAAK;AAAA,EACV,YAAY,MAAM;AAAA,EAClB,oBAAoB,MAAM,KAAM,GAAI;AAAA,EACpC,QAAQ,MAAM,KAAM,GAAI;AAAA,EACxB,aAAa,MAAM,KAAM,GAAI;AAAA,EAC7B,aAAa,MAAM;AAAA;AAAA,EAEnB,gBAAgB;AAAA,EAChB,cAAc;AAAA;AAAA,EAGd,qBAAqB,sBAAuB,MAAM,UAAW;AAAA,EAC7D,sBAAsB,sBAAuB,MAAM,UAAW;AAC/D;AAIO,IAAM,SAAS,OAAO,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMpC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAIN;AAAA,EACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMP,OAAO;AAAA;AAAA;AAAA;AAAA,EAIP,IAAI;AACL,CAAE;AAEF,IAAO,wBAAQ;",
   "names": []
 }

package/build/utils/config-values.cjs

@@ -40,9 +40,6 @@ var CONTROL_PROPS = {
 };
 var config_values_default = Object.assign({}, CONTROL_PROPS, {
   colorDivider: "rgba(0, 0, 0, 0.1)",
-  colorScrollbarThumb: "rgba(0, 0, 0, 0.2)",
-  colorScrollbarThumbHover: "rgba(0, 0, 0, 0.5)",
-  colorScrollbarTrack: "rgba(0, 0, 0, 0.04)",
   elevationIntensity: 1,
   radiusXSmall: "1px",
   radiusSmall: "2px",

package/build/utils/config-values.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/config-values.js"],
-  "sourcesContent": ["import { COLORS } from './colors-values';\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PROPS = {\n  // These values should be shared with TextControl.\n  controlPaddingX: 12,\n  controlPaddingXSmall: 8,\n  controlPaddingXLarge: 12 * 1.3334,\n  // TODO: Deprecate\n\n  controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,\n  controlHeight: CONTROL_HEIGHT,\n  controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,\n  controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,\n  controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,\n  controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign({}, CONTROL_PROPS, {\n  colorDivider: 'rgba(0, 0, 0, 0.1)',\n  colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n  colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n  colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n  elevationIntensity: 1,\n  radiusXSmall: '1px',\n  radiusSmall: '2px',\n  radiusMedium: '4px',\n  radiusLarge: '8px',\n  radiusFull: '9999px',\n  radiusRound: '50%',\n  borderWidth: '1px',\n  borderWidthFocus: '1.5px',\n  borderWidthTab: '4px',\n  fontSize: '13px',\n  fontSizeH1: 'calc(2.44 * 13px)',\n  fontSizeH2: 'calc(1.95 * 13px)',\n  fontSizeH3: 'calc(1.56 * 13px)',\n  fontSizeH4: 'calc(1.25 * 13px)',\n  fontSizeH5: '13px',\n  fontSizeH6: 'calc(0.8 * 13px)',\n  fontSizeInputMobile: '16px',\n  fontSizeMobile: '15px',\n  fontSizeSmall: 'calc(0.92 * 13px)',\n  fontSizeXSmall: 'calc(0.75 * 13px)',\n  fontLineHeightBase: '1.4',\n  fontWeight: 'normal',\n  fontWeightEmphasis: '600',\n  gridBase: '4px',\n  elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,\n  elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,\n  elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,\n  elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,\n  surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n  surfaceColor: COLORS.white,\n  // Modal exit animation: `use-modal-exit-animation` parses this for the\n  // `animationend` timeout race; keep the numeric duration equal to the WPDS\n  // `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.\n  transitionDuration: '200ms',\n  transitionDurationFast: '160ms',\n  transitionDurationFaster: '120ms',\n  transitionDurationFastest: '100ms',\n  transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n  transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AACvB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB;AAAA;AAAA,EAEpB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,sBAAsB,KAAK;AAAA;AAAA,EAG3B,uBAAuB,eAAe,4BAAO,MAAM,MAAM;AAAA,EACzD,eAAe;AAAA,EACf,qBAAqB,SAAS,cAAc;AAAA,EAC5C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,qBAAqB,SAAS,cAAc;AAC9C;AAIA,IAAO,wBAAQ,OAAO,OAAO,CAAC,GAAG,eAAe;AAAA,EAC9C,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc,4BAAO;AAAA;AAAA;AAAA;AAAA,EAIrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AACnC,CAAC;",
+  "sourcesContent": ["import { COLORS } from './colors-values';\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PROPS = {\n  // These values should be shared with TextControl.\n  controlPaddingX: 12,\n  controlPaddingXSmall: 8,\n  controlPaddingXLarge: 12 * 1.3334,\n  // TODO: Deprecate\n\n  controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,\n  controlHeight: CONTROL_HEIGHT,\n  controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,\n  controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,\n  controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,\n  controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign({}, CONTROL_PROPS, {\n  colorDivider: 'rgba(0, 0, 0, 0.1)',\n  elevationIntensity: 1,\n  radiusXSmall: '1px',\n  radiusSmall: '2px',\n  radiusMedium: '4px',\n  radiusLarge: '8px',\n  radiusFull: '9999px',\n  radiusRound: '50%',\n  borderWidth: '1px',\n  borderWidthFocus: '1.5px',\n  borderWidthTab: '4px',\n  fontSize: '13px',\n  fontSizeH1: 'calc(2.44 * 13px)',\n  fontSizeH2: 'calc(1.95 * 13px)',\n  fontSizeH3: 'calc(1.56 * 13px)',\n  fontSizeH4: 'calc(1.25 * 13px)',\n  fontSizeH5: '13px',\n  fontSizeH6: 'calc(0.8 * 13px)',\n  fontSizeInputMobile: '16px',\n  fontSizeMobile: '15px',\n  fontSizeSmall: 'calc(0.92 * 13px)',\n  fontSizeXSmall: 'calc(0.75 * 13px)',\n  fontLineHeightBase: '1.4',\n  fontWeight: 'normal',\n  fontWeightEmphasis: '600',\n  gridBase: '4px',\n  elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,\n  elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,\n  elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,\n  elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,\n  surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n  surfaceColor: COLORS.white,\n  // Modal exit animation: `use-modal-exit-animation` parses this for the\n  // `animationend` timeout race; keep the numeric duration equal to the WPDS\n  // `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.\n  transitionDuration: '200ms',\n  transitionDurationFast: '160ms',\n  transitionDurationFaster: '120ms',\n  transitionDurationFastest: '100ms',\n  transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n  transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AACvB,IAAM,iBAAiB;AACvB,IAAM,gBAAgB;AAAA;AAAA,EAEpB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,sBAAsB,KAAK;AAAA;AAAA,EAG3B,uBAAuB,eAAe,4BAAO,MAAM,MAAM;AAAA,EACzD,eAAe;AAAA,EACf,qBAAqB,SAAS,cAAc;AAAA,EAC5C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,oBAAoB,SAAS,cAAc;AAAA,EAC3C,qBAAqB,SAAS,cAAc;AAC9C;AAIA,IAAO,wBAAQ,OAAO,OAAO,CAAC,GAAG,eAAe;AAAA,EAC9C,cAAc;AAAA,EACd,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,cAAc,4BAAO;AAAA;AAAA;AAAA;AAAA,EAIrB,oBAAoB;AAAA,EACpB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,iCAAiC;AACnC,CAAC;",
   "names": []
 }

package/build/validated-form-controls/components/content-editable-control.cjs

@@ -35,7 +35,7 @@ __export(content_editable_control_exports, {
 module.exports = __toCommonJS(content_editable_control_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_element = require("@wordpress/element");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_ui = require("@wordpress/ui");
 var import_content_editable_control = __toESM(require("../../content-editable-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedContentEditableControl = ({
@@ -49,7 +49,8 @@ var UnforwardedValidatedContentEditableControl = ({
   const validityTargetRef = (0, import_element.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
     className: "components-validated-control__wrapper-with-error-delegate",
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+      className: "components-validated-control",
       required,
       markWhenOptional,
       customValidity,

package/build/validated-form-controls/components/content-editable-control.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/content-editable-control.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '../control-with-error';\nimport ContentEditableControl from '../../content-editable-control';\n\n/**\n * A `contentEditable` field does not participate in the Constraint Validation\n * API, so — like `ValidatedToggleGroupControl` — the validity state lives on a\n * visually hidden delegate input that mirrors whether the field has content.\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedContentEditableControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  value,\n  className,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(ContentEditableControl, {\n        ref: forwardedRef,\n        className: clsx('components-validated-control__content-editable', className),\n        \"aria-invalid\": customValidity?.type === 'invalid' || undefined,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"text\",\n      ref: validityTargetRef,\n      required: required\n      // Whitespace-only content reads as empty, matching how a\n      // text-oriented form field is expected to validate `required`.\n      ,\n      value: value?.trim() ?? '',\n      tabIndex: -1,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"textbox\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedContentEditableControl = forwardRef(UnforwardedValidatedContentEditableControl);\nValidatedContentEditableControl.displayName = 'ValidatedContentEditableControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAAmC;AACnC,gCAAiC;AACjC,sCAAmC;AAOnC,yBAA2C;AAC3C,IAAM,6CAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA,KAAK,gCAAAC,SAAwB;AAAA,QAClD,KAAK;AAAA,QACL,eAAW,YAAAC,SAAK,kDAAkD,SAAS;AAAA,QAC3E,gBAAgB,gBAAgB,SAAS,aAAa;AAAA,QACtD,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAF,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MAIA,OAAO,OAAO,KAAK,KAAK;AAAA,MACxB,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,kBAAkB,GAAG,MAAM;AAAA,MAC5E;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '@wordpress/ui';\nimport ContentEditableControl from '../../content-editable-control';\n\n/**\n * A `contentEditable` field does not participate in the Constraint Validation\n * API, so — like `ValidatedToggleGroupControl` — the validity state lives on a\n * visually hidden delegate input that mirrors whether the field has content.\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedContentEditableControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  value,\n  className,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      className: \"components-validated-control\",\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(ContentEditableControl, {\n        ref: forwardedRef,\n        className: clsx('components-validated-control__content-editable', className),\n        \"aria-invalid\": customValidity?.type === 'invalid' || undefined,\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsx(\"input\", {\n      className: \"components-validated-control__error-delegate\",\n      type: \"text\",\n      ref: validityTargetRef,\n      required: required\n      // Whitespace-only content reads as empty, matching how a\n      // text-oriented form field is expected to validate `required`.\n      ,\n      value: value?.trim() ?? '',\n      tabIndex: -1,\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"textbox\"]')?.focus();\n      }\n    })]\n  });\n};\nexport const ValidatedContentEditableControl = forwardRef(UnforwardedValidatedContentEditableControl);\nValidatedContentEditableControl.displayName = 'ValidatedContentEditableControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAAmC;AACnC,gBAAiC;AACjC,sCAAmC;AAOnC,yBAA2C;AAC3C,IAAM,6CAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,4BAAkB;AAAA,MAC7C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA,KAAK,gCAAAC,SAAwB;AAAA,QAClD,KAAK;AAAA,QACL,eAAW,YAAAC,SAAK,kDAAkD,SAAS;AAAA,QAC3E,gBAAgB,gBAAgB,SAAS,aAAa;AAAA,QACtD,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAF,KAAK,SAAS;AAAA,MAC7B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,MAIA,OAAO,OAAO,KAAK,KAAK;AAAA,MACxB,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,kBAAkB,GAAG,MAAM;AAAA,MAC5E;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,sCAAkC,2BAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
   "names": ["_jsxs", "_jsx", "ContentEditableControl", "clsx"]
 }

package/build/validated-form-controls/components/custom-select-control.cjs

@@ -34,7 +34,7 @@ __export(custom_select_control_exports, {
 });
 module.exports = __toCommonJS(custom_select_control_exports);
 var import_element = require("@wordpress/element");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_ui = require("@wordpress/ui");
 var import_custom_select_control = __toESM(require("../../custom-select-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedCustomSelectControl = ({
@@ -47,7 +47,8 @@ var UnforwardedValidatedCustomSelectControl = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
     className: "components-validated-control__wrapper-with-error-delegate",
     ref: forwardedRef,
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+      className: "components-validated-control",
       required,
       markWhenOptional,
       customValidity,

package/build/validated-form-controls/components/custom-select-control.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/custom-select-control.tsx"],
-  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '../control-with-error';\nimport CustomSelectControl from '../../custom-select-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCustomSelectControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(CustomSelectControl\n      // TODO: Upstream limitation - Required isn't passed down correctly,\n      // so it needs to be set on a delegate element.\n      , {\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsxs(\"select\", {\n      className: \"components-validated-control__error-delegate\",\n      ref: validityTargetRef,\n      required: required,\n      tabIndex: -1,\n      value: restProps.value?.key ? 'hasvalue' : '',\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"combobox\"]')?.focus();\n      },\n      children: [/*#__PURE__*/_jsx(\"option\", {\n        value: \"\",\n        children: \"No selection\"\n      }), /*#__PURE__*/_jsx(\"option\", {\n        value: \"hasvalue\",\n        children: \"Has selection\"\n      })]\n    })]\n  });\n};\nexport const ValidatedCustomSelectControl = forwardRef(UnforwardedValidatedCustomSelectControl);\nValidatedCustomSelectControl.displayName = 'ValidatedCustomSelectControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,gCAAiC;AACjC,mCAAgC;AAChC,yBAA2C;AAC3C,IAAM,0CAA0C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,4CAAkB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA;AAAA,QAAK,6BAAAC;AAAA,QAG1B;AAAA,UACA,GAAG;AAAA,QACL;AAAA,MAAC;AAAA,IACH,CAAC,GAAgB,uCAAAF,MAAM,UAAU;AAAA,MAC/B,WAAW;AAAA,MACX,KAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,OAAO,UAAU,OAAO,MAAM,aAAa;AAAA,MAC3C,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,mBAAmB,GAAG,MAAM;AAAA,MAC7E;AAAA,MACA,UAAU,CAAc,uCAAAC,KAAK,UAAU;AAAA,QACrC,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,UAAU;AAAA,QAC9B,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,mCAA+B,2BAAW,uCAAuC;AAC9F,6BAA6B,cAAc;",
+  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '@wordpress/ui';\nimport CustomSelectControl from '../../custom-select-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst UnforwardedValidatedCustomSelectControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-validated-control__wrapper-with-error-delegate\",\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(ControlWithError, {\n      className: \"components-validated-control\",\n      required: required,\n      markWhenOptional: markWhenOptional,\n      customValidity: customValidity,\n      getValidityTarget: () => validityTargetRef.current,\n      children: /*#__PURE__*/_jsx(CustomSelectControl\n      // TODO: Upstream limitation - Required isn't passed down correctly,\n      // so it needs to be set on a delegate element.\n      , {\n        ...restProps\n      })\n    }), /*#__PURE__*/_jsxs(\"select\", {\n      className: \"components-validated-control__error-delegate\",\n      ref: validityTargetRef,\n      required: required,\n      tabIndex: -1,\n      value: restProps.value?.key ? 'hasvalue' : '',\n      onChange: () => {},\n      onFocus: e => {\n        e.target.previousElementSibling?.querySelector('[role=\"combobox\"]')?.focus();\n      },\n      children: [/*#__PURE__*/_jsx(\"option\", {\n        value: \"\",\n        children: \"No selection\"\n      }), /*#__PURE__*/_jsx(\"option\", {\n        value: \"hasvalue\",\n        children: \"Has selection\"\n      })]\n    })]\n  });\n};\nexport const ValidatedCustomSelectControl = forwardRef(UnforwardedValidatedCustomSelectControl);\nValidatedCustomSelectControl.displayName = 'ValidatedCustomSelectControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,gBAAiC;AACjC,mCAAgC;AAChC,yBAA2C;AAC3C,IAAM,0CAA0C,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,SAAoB,uCAAAA,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK;AAAA,IACL,UAAU,CAAc,uCAAAC,KAAK,4BAAkB;AAAA,MAC7C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB,MAAM,kBAAkB;AAAA,MAC3C,UAAuB,uCAAAA;AAAA,QAAK,6BAAAC;AAAA,QAG1B;AAAA,UACA,GAAG;AAAA,QACL;AAAA,MAAC;AAAA,IACH,CAAC,GAAgB,uCAAAF,MAAM,UAAU;AAAA,MAC/B,WAAW;AAAA,MACX,KAAK;AAAA,MACL;AAAA,MACA,UAAU;AAAA,MACV,OAAO,UAAU,OAAO,MAAM,aAAa;AAAA,MAC3C,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,SAAS,OAAK;AACZ,UAAE,OAAO,wBAAwB,cAAc,mBAAmB,GAAG,MAAM;AAAA,MAC7E;AAAA,MACA,UAAU,CAAc,uCAAAC,KAAK,UAAU;AAAA,QACrC,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,UAAU;AAAA,QAC9B,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAM,mCAA+B,2BAAW,uCAAuC;AAC9F,6BAA6B,cAAc;",
   "names": ["_jsxs", "_jsx", "CustomSelectControl"]
 }

package/build/validated-form-controls/components/index.cjs

@@ -17,25 +17,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/components/src/validated-form-controls/components/index.ts
 var components_exports = {};
 module.exports = __toCommonJS(components_exports);
-__reExport(components_exports, require("./combobox-control.cjs"), module.exports);
 __reExport(components_exports, require("./custom-select-control.cjs"), module.exports);
-__reExport(components_exports, require("./form-token-field.cjs"), module.exports);
 __reExport(components_exports, require("./input-control.cjs"), module.exports);
 __reExport(components_exports, require("./range-control.cjs"), module.exports);
 __reExport(components_exports, require("./content-editable-control.cjs"), module.exports);
 __reExport(components_exports, require("./textarea-control.cjs"), module.exports);
-__reExport(components_exports, require("./toggle-control.cjs"), module.exports);
-__reExport(components_exports, require("./toggle-group-control.cjs"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("./combobox-control.cjs"),
   ...require("./custom-select-control.cjs"),
-  ...require("./form-token-field.cjs"),
   ...require("./input-control.cjs"),
   ...require("./range-control.cjs"),
   ...require("./content-editable-control.cjs"),
-  ...require("./textarea-control.cjs"),
-  ...require("./toggle-control.cjs"),
-  ...require("./toggle-group-control.cjs")
+  ...require("./textarea-control.cjs")
 });
 //# sourceMappingURL=index.cjs.map

package/build/validated-form-controls/components/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/index.ts"],
-  "sourcesContent": ["export * from './combobox-control';\nexport * from './custom-select-control';\nexport * from './form-token-field';\nexport * from './input-control';\nexport * from './range-control';\nexport * from './content-editable-control';\nexport * from './textarea-control';\nexport * from './toggle-control';\nexport * from './toggle-group-control';"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,mCAAd;AACA,+BAAc,wCADd;AAEA,+BAAc,mCAFd;AAGA,+BAAc,gCAHd;AAIA,+BAAc,gCAJd;AAKA,+BAAc,2CALd;AAMA,+BAAc,mCANd;AAOA,+BAAc,iCAPd;AAQA,+BAAc,uCARd;",
+  "sourcesContent": ["export * from './custom-select-control';\nexport * from './input-control';\nexport * from './range-control';\nexport * from './content-editable-control';\nexport * from './textarea-control';"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,wCAAd;AACA,+BAAc,gCADd;AAEA,+BAAc,gCAFd;AAGA,+BAAc,2CAHd;AAIA,+BAAc,mCAJd;",
   "names": []
 }

package/build/validated-form-controls/components/input-control.cjs

@@ -35,7 +35,8 @@ __export(input_control_exports, {
 module.exports = __toCommonJS(input_control_exports);
 var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_deprecated = __toESM(require("@wordpress/deprecated"));
+var import_ui = require("@wordpress/ui");
 var import_input_control = __toESM(require("../../input-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedInputControl = ({
@@ -44,9 +45,15 @@ var UnforwardedValidatedInputControl = ({
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
+  (0, import_deprecated.default)("wp.components.privateApis.ValidatedInputControl", {
+    since: "7.2",
+    alternative: "ValidatedInputControl from @wordpress/ui",
+    hint: "This private API will be completely removed within a few Gutenberg plugin releases."
+  });
   const validityTargetRef = (0, import_element.useRef)(null);
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+    className: "components-validated-control",
     required,
     markWhenOptional,
     customValidity,

package/build/validated-form-controls/components/input-control.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/input-control.tsx"],
-  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { ControlWithError } from '../control-with-error';\nimport InputControl from '../../input-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedInputControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(InputControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedInputControl = forwardRef(UnforwardedValidatedInputControl);\nValidatedInputControl.displayName = 'ValidatedInputControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,qBAA6B;AAC7B,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
-  "names": ["_jsx", "InputControl"]
+  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { ControlWithError } from '@wordpress/ui';\nimport InputControl from '../../input-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedInputControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  deprecated('wp.components.privateApis.ValidatedInputControl', {\n    since: '7.2',\n    alternative: 'ValidatedInputControl from @wordpress/ui',\n    hint: 'This private API will be completely removed within a few Gutenberg plugin releases.'\n  });\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    className: \"components-validated-control\",\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(InputControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedInputControl = forwardRef(UnforwardedValidatedInputControl);\nValidatedInputControl.displayName = 'ValidatedInputControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,qBAA6B;AAC7B,wBAAuB;AACvB,gBAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,wBAAAA,SAAW,mDAAmD;AAAA,IAC5D,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACR,CAAC;AACD,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAC,KAAK,4BAAkB;AAAA,IACzC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
+  "names": ["deprecated", "_jsx", "InputControl"]
 }

package/build/validated-form-controls/components/range-control.cjs

@@ -35,7 +35,7 @@ __export(range_control_exports, {
 module.exports = __toCommonJS(range_control_exports);
 var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_ui = require("@wordpress/ui");
 var import_range_control = __toESM(require("../../range-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedRangeControl = ({
@@ -46,7 +46,8 @@ var UnforwardedValidatedRangeControl = ({
 }, forwardedRef) => {
   const validityTargetRef = (0, import_element.useRef)(null);
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+    className: "components-validated-control",
     required,
     markWhenOptional,
     customValidity,

package/build/validated-form-controls/components/range-control.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/range-control.tsx"],
-  "sourcesContent": ["import { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '../control-with-error';\nimport RangeControl from '../../range-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRangeControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(RangeControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRangeControl = forwardRef(UnforwardedValidatedRangeControl);\nValidatedRangeControl.displayName = 'ValidatedRangeControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA6B;AAC7B,qBAAmC;AACnC,gCAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
+  "sourcesContent": ["import { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { ControlWithError } from '@wordpress/ui';\nimport RangeControl from '../../range-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedRangeControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    className: \"components-validated-control\",\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(RangeControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedRangeControl = forwardRef(UnforwardedValidatedRangeControl);\nValidatedRangeControl.displayName = 'ValidatedRangeControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA6B;AAC7B,qBAAmC;AACnC,gBAAiC;AACjC,2BAAyB;AACzB,yBAA4B;AAC5B,IAAM,mCAAmC,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4BAAkB;AAAA,IACzC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,qBAAAC,SAAc;AAAA,MACxC,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,4BAAwB,2BAAW,gCAAgC;AAChF,sBAAsB,cAAc;",
   "names": ["_jsx", "RangeControl"]
 }

package/build/validated-form-controls/components/textarea-control.cjs

@@ -35,7 +35,8 @@ __export(textarea_control_exports, {
 module.exports = __toCommonJS(textarea_control_exports);
 var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
-var import_control_with_error = require("../control-with-error.cjs");
+var import_deprecated = __toESM(require("@wordpress/deprecated"));
+var import_ui = require("@wordpress/ui");
 var import_textarea_control = __toESM(require("../../textarea-control/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnforwardedValidatedTextareaControl = ({
@@ -44,9 +45,15 @@ var UnforwardedValidatedTextareaControl = ({
   markWhenOptional,
   ...restProps
 }, forwardedRef) => {
+  (0, import_deprecated.default)("wp.components.privateApis.ValidatedTextareaControl", {
+    since: "7.2",
+    alternative: "ValidatedTextareaControl from @wordpress/ui",
+    hint: "This private API will be completely removed within a few Gutenberg plugin releases."
+  });
   const validityTargetRef = (0, import_element.useRef)(null);
   const mergedRefs = (0, import_compose.useMergeRefs)([forwardedRef, validityTargetRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control_with_error.ControlWithError, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ControlWithError, {
+    className: "components-validated-control",
     required,
     markWhenOptional,
     customValidity,

package/build/validated-form-controls/components/textarea-control.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/validated-form-controls/components/textarea-control.tsx"],
-  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { ControlWithError } from '../control-with-error';\nimport TextareaControl from '../../textarea-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextareaControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(TextareaControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextareaControl = forwardRef(UnforwardedValidatedTextareaControl);\nValidatedTextareaControl.displayName = 'ValidatedTextareaControl';"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,qBAA6B;AAC7B,gCAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAA,KAAK,4CAAkB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,MAC3C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;",
-  "names": ["_jsx", "TextareaControl"]
+  "sourcesContent": ["import { forwardRef, useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { ControlWithError } from '@wordpress/ui';\nimport TextareaControl from '../../textarea-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnforwardedValidatedTextareaControl = ({\n  required,\n  customValidity,\n  markWhenOptional,\n  ...restProps\n}, forwardedRef) => {\n  deprecated('wp.components.privateApis.ValidatedTextareaControl', {\n    since: '7.2',\n    alternative: 'ValidatedTextareaControl from @wordpress/ui',\n    hint: 'This private API will be completely removed within a few Gutenberg plugin releases.'\n  });\n  const validityTargetRef = useRef(null);\n  const mergedRefs = useMergeRefs([forwardedRef, validityTargetRef]);\n  return /*#__PURE__*/_jsx(ControlWithError, {\n    className: \"components-validated-control\",\n    required: required,\n    markWhenOptional: markWhenOptional,\n    customValidity: customValidity,\n    getValidityTarget: () => validityTargetRef.current,\n    children: /*#__PURE__*/_jsx(TextareaControl, {\n      ref: mergedRefs,\n      ...restProps\n    })\n  });\n};\nexport const ValidatedTextareaControl = forwardRef(UnforwardedValidatedTextareaControl);\nValidatedTextareaControl.displayName = 'ValidatedTextareaControl';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,qBAA6B;AAC7B,wBAAuB;AACvB,gBAAiC;AACjC,8BAA4B;AAC5B,yBAA4B;AAC5B,IAAM,sCAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,iBAAiB;AAClB,wBAAAA,SAAW,sDAAsD;AAAA,IAC/D,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACR,CAAC;AACD,QAAM,wBAAoB,uBAAO,IAAI;AACrC,QAAM,iBAAa,6BAAa,CAAC,cAAc,iBAAiB,CAAC;AACjE,SAAoB,uCAAAC,KAAK,4BAAkB;AAAA,IACzC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,MAAM,kBAAkB;AAAA,IAC3C,UAAuB,uCAAAA,KAAK,wBAAAC,SAAiB;AAAA,MAC3C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,+BAA2B,2BAAW,mCAAmC;AACtF,yBAAyB,cAAc;",
+  "names": ["deprecated", "_jsx", "TextareaControl"]
 }

package/build/validated-form-controls/index.cjs

@@ -18,10 +18,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var validated_form_controls_exports = {};
 module.exports = __toCommonJS(validated_form_controls_exports);
 __reExport(validated_form_controls_exports, require("./components/index.cjs"), module.exports);
-__reExport(validated_form_controls_exports, require("./control-with-error.cjs"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("./components/index.cjs"),
-  ...require("./control-with-error.cjs")
+  ...require("./components/index.cjs")
 });
 //# sourceMappingURL=index.cjs.map

package/build/validated-form-controls/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/validated-form-controls/index.ts"],
-  "sourcesContent": ["export * from './components';\nexport * from './control-with-error';"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4CAAc,mCAAd;AACA,4CAAc,qCADd;",
+  "sourcesContent": ["export * from './components';"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4CAAc,mCAAd;",
   "names": []
 }

package/build/z-stack/component.cjs

@@ -1,7 +1,9 @@
 "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)
@@ -15,6 +17,14 @@ 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/components/src/z-stack/component.tsx
@@ -24,10 +34,96 @@ __export(component_exports, {
   default: () => component_default
 });
 module.exports = __toCommonJS(component_exports);
+var import_clsx = __toESM(require("clsx"));
 var import_element = require("@wordpress/element");
 var import_get_valid_children = require("../utils/get-valid-children.cjs");
 var import_context = require("../context/index.cjs");
-var import_styles = require("./styles.cjs");
+var import_polymorphic_element = require("../utils/polymorphic-element.cjs");
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/z-stack/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("a90faa8747", "._5b8fef2247903a5f__z-stack{display:inline-grid;grid-auto-flow:column;position:relative}._5b8fef2247903a5f__z-stack>._585cd0b86fd70a54__child{justify-self:start;position:relative}._93dbda3c809633d5__layered>._585cd0b86fd70a54__child{grid-column-start:1;grid-row-start:1}._585cd0b86fd70a54__child{z-index:var(--z-stack-z-index,auto)}._585cd0b86fd70a54__child:not(:first-of-type){margin-inline-start:var(--z-stack-offset,0)}");
+}
+var style_module_default = { "z-stack": "_5b8fef2247903a5f__z-stack", "child": "_585cd0b86fd70a54__child", "layered": "_93dbda3c809633d5__layered" };
+
+// packages/components/src/z-stack/component.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function UnconnectedZStack(props, forwardedRef) {
   const {
@@ -44,16 +140,18 @@ function UnconnectedZStack(props, forwardedRef) {
     const zIndex = isReversed ? childrenLastIndex - index : index;
     const offsetAmount = isLayered ? offset * index : offset;
     const key = (0, import_element.isValidElement)(child) ? child.key : index;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.ZStackChildView, {
-      offsetAmount,
-      zIndex,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      className: style_module_default.child,
+      style: {
+        "--z-stack-offset": `${offsetAmount}px`,
+        "--z-stack-z-index": zIndex
+      },
       children: child
     }, key);
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.ZStackView, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_polymorphic_element.PolymorphicElement, {
     ...otherProps,
-    className,
-    isLayered,
+    className: (0, import_clsx.default)(style_module_default["z-stack"], isLayered && style_module_default.layered, className),
     ref: forwardedRef,
     children: clonedChildren
   });

package/build/z-stack/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/z-stack/component.tsx"],
-  "sourcesContent": ["import { isValidElement } from '@wordpress/element';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedZStack(props, forwardedRef) {\n  const {\n    children,\n    className,\n    isLayered = true,\n    isReversed = false,\n    offset = 0,\n    ...otherProps\n  } = useContextSystem(props, 'ZStack');\n  const validChildren = getValidChildren(children);\n  const childrenLastIndex = validChildren.length - 1;\n  const clonedChildren = validChildren.map((child, index) => {\n    const zIndex = isReversed ? childrenLastIndex - index : index;\n    // Only when the component is layered, the offset needs to be multiplied by\n    // the item's index, so that items can correctly stack at the right distance\n    const offsetAmount = isLayered ? offset * index : offset;\n    const key = isValidElement(child) ? child.key : index;\n    return /*#__PURE__*/_jsx(ZStackChildView, {\n      offsetAmount: offsetAmount,\n      zIndex: zIndex,\n      children: child\n    }, key);\n  });\n  return /*#__PURE__*/_jsx(ZStackView, {\n    ...otherProps,\n    className: className,\n    isLayered: isLayered,\n    ref: forwardedRef,\n    children: clonedChildren\n  });\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect(UnconnectedZStack, 'ZStack');\nexport default ZStack;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAC/B,gCAAiC;AACjC,qBAAiD;AACjD,oBAA4C;AAC5C,yBAA4B;AAC5B,SAAS,kBAAkB,OAAO,cAAc;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,SAAS;AAAA,IACT,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,QAAQ;AACpC,QAAM,oBAAgB,4CAAiB,QAAQ;AAC/C,QAAM,oBAAoB,cAAc,SAAS;AACjD,QAAM,iBAAiB,cAAc,IAAI,CAAC,OAAO,UAAU;AACzD,UAAM,SAAS,aAAa,oBAAoB,QAAQ;AAGxD,UAAM,eAAe,YAAY,SAAS,QAAQ;AAClD,UAAM,UAAM,+BAAe,KAAK,IAAI,MAAM,MAAM;AAChD,WAAoB,uCAAAA,KAAK,+BAAiB;AAAA,MACxC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ,GAAG,GAAG;AAAA,EACR,CAAC;AACD,SAAoB,uCAAAA,KAAK,0BAAY;AAAA,IACnC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,UAAU;AAAA,EACZ,CAAC;AACH;AAmBO,IAAM,aAAS,+BAAe,mBAAmB,QAAQ;AAChE,IAAO,oBAAQ;",
-  "names": ["_jsx"]
+  "sources": ["../../src/z-stack/component.tsx", "../../../style-runtime/src/index.ts", "../../src/z-stack/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isValidElement } from '@wordpress/element';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { PolymorphicElement } from '../utils/polymorphic-element';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedZStack(props, forwardedRef) {\n  const {\n    children,\n    className,\n    isLayered = true,\n    isReversed = false,\n    offset = 0,\n    ...otherProps\n  } = useContextSystem(props, 'ZStack');\n  const validChildren = getValidChildren(children);\n  const childrenLastIndex = validChildren.length - 1;\n  const clonedChildren = validChildren.map((child, index) => {\n    const zIndex = isReversed ? childrenLastIndex - index : index;\n    // Only when the component is layered, the offset needs to be multiplied by\n    // the item's index, so that items can correctly stack at the right distance\n    const offsetAmount = isLayered ? offset * index : offset;\n    const key = isValidElement(child) ? child.key : index;\n    return /*#__PURE__*/_jsx(\"div\", {\n      className: styles.child,\n      style: {\n        '--z-stack-offset': `${offsetAmount}px`,\n        '--z-stack-z-index': zIndex\n      },\n      children: child\n    }, key);\n  });\n  return /*#__PURE__*/_jsx(PolymorphicElement, {\n    ...otherProps,\n    className: clsx(styles['z-stack'], isLayered && styles.layered, className),\n    ref: forwardedRef,\n    children: clonedChildren\n  });\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect(UnconnectedZStack, 'ZStack');\nexport default ZStack;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"a90faa8747\", \"._5b8fef2247903a5f__z-stack{display:inline-grid;grid-auto-flow:column;position:relative}._5b8fef2247903a5f__z-stack>._585cd0b86fd70a54__child{justify-self:start;position:relative}._93dbda3c809633d5__layered>._585cd0b86fd70a54__child{grid-column-start:1;grid-row-start:1}._585cd0b86fd70a54__child{z-index:var(--z-stack-z-index,auto)}._585cd0b86fd70a54__child:not(:first-of-type){margin-inline-start:var(--z-stack-offset,0)}\");\n}\nexport default {\"z-stack\":\"_5b8fef2247903a5f__z-stack\",\"child\":\"_585cd0b86fd70a54__child\",\"layered\":\"_93dbda3c809633d5__layered\"};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,qBAA+B;AAC/B,gCAAiC;AACjC,qBAAiD;AACjD,iCAAmC;;;ACJnC,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,waAAwa;AACrc;AACA,IAAO,uBAAQ,EAAC,WAAU,8BAA6B,SAAQ,4BAA2B,WAAU,6BAA4B;;;AFEhI,yBAA4B;AAC5B,SAAS,kBAAkB,OAAO,cAAc;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,SAAS;AAAA,IACT,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,QAAQ;AACpC,QAAM,oBAAgB,4CAAiB,QAAQ;AAC/C,QAAM,oBAAoB,cAAc,SAAS;AACjD,QAAM,iBAAiB,cAAc,IAAI,CAAC,OAAO,UAAU;AACzD,UAAM,SAAS,aAAa,oBAAoB,QAAQ;AAGxD,UAAM,eAAe,YAAY,SAAS,QAAQ;AAClD,UAAM,UAAM,+BAAe,KAAK,IAAI,MAAM,MAAM;AAChD,WAAoB,uCAAAA,KAAK,OAAO;AAAA,MAC9B,WAAW,qBAAO;AAAA,MAClB,OAAO;AAAA,QACL,oBAAoB,GAAG,YAAY;AAAA,QACnC,qBAAqB;AAAA,MACvB;AAAA,MACA,UAAU;AAAA,IACZ,GAAG,GAAG;AAAA,EACR,CAAC;AACD,SAAoB,uCAAAA,KAAK,+CAAoB;AAAA,IAC3C,GAAG;AAAA,IACH,eAAW,YAAAC,SAAK,qBAAO,SAAS,GAAG,aAAa,qBAAO,SAAS,SAAS;AAAA,IACzE,KAAK;AAAA,IACL,UAAU;AAAA,EACZ,CAAC;AACH;AAmBO,IAAM,aAAS,+BAAe,mBAAmB,QAAQ;AAChE,IAAO,oBAAQ;",
+  "names": ["_jsx", "clsx"]
 }