@wordpress/components 32.3.1-next.v.202602241322.0 → 32.4.0

package/build-module/tooltip/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tooltip/index.tsx"],
-  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Children, useContext, forwardRef, cloneElement } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\nimport { TooltipInternalContext } from './context';\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const TOOLTIP_DELAY = 700;\nconst CONTEXT_VALUE = {\n  isNestedInTooltip: true\n};\nfunction UnforwardedTooltip(props, ref) {\n  const {\n    children,\n    className,\n    delay = TOOLTIP_DELAY,\n    hideOnClick = true,\n    placement,\n    position,\n    shortcut,\n    text,\n    ...restProps\n  } = props;\n  const {\n    isNestedInTooltip\n  } = useContext(TooltipInternalContext);\n  const baseId = useInstanceId(Tooltip, 'tooltip');\n  const describedById = text || shortcut ? baseId : undefined;\n  const isOnlyChild = Children.count(children) === 1;\n  // console error if more than one child element is added\n  if (!isOnlyChild) {\n    if ('development' === process.env.NODE_ENV) {\n      // eslint-disable-next-line no-console\n      console.error('wp-components.Tooltip should be called with only a single child element.');\n    }\n  }\n\n  // Compute tooltip's placement:\n  // - give priority to `placement` prop, if defined\n  // - otherwise, compute it from the legacy `position` prop (if defined)\n  // - finally, fallback to the default placement: 'bottom'\n  let computedPlacement;\n  if (placement !== undefined) {\n    computedPlacement = placement;\n  } else if (position !== undefined) {\n    computedPlacement = positionToPlacement(position);\n    deprecated('`position` prop in wp.components.tooltip', {\n      since: '6.4',\n      alternative: '`placement` prop'\n    });\n  }\n  computedPlacement = computedPlacement || 'bottom';\n  const tooltipStore = Ariakit.useTooltipStore({\n    placement: computedPlacement,\n    showTimeout: delay\n  });\n  const mounted = Ariakit.useStoreState(tooltipStore, 'mounted');\n  if (isNestedInTooltip) {\n    return isOnlyChild ? /*#__PURE__*/_jsx(Ariakit.Role, {\n      ...restProps,\n      render: children\n    }) : children;\n  }\n\n  // TODO: this is a temporary workaround to minimize the effects of the\n  // Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n  // the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n  // The `aria-describedby` attribute is added only if the anchor doesn't have\n  // one already, and if the tooltip text is not the same as the anchor's\n  // `aria-label`\n  // See: https://github.com/WordPress/gutenberg/pull/64066\n  // See: https://github.com/WordPress/gutenberg/pull/65989\n  function addDescribedById(element) {\n    return describedById && mounted && element.props['aria-describedby'] === undefined && element.props['aria-label'] !== text ? cloneElement(element, {\n      'aria-describedby': describedById\n    }) : element;\n  }\n  return /*#__PURE__*/_jsxs(TooltipInternalContext.Provider, {\n    value: CONTEXT_VALUE,\n    children: [/*#__PURE__*/_jsx(Ariakit.TooltipAnchor, {\n      onClick: hideOnClick ? tooltipStore.hide : undefined,\n      store: tooltipStore,\n      render: isOnlyChild ? addDescribedById(children) : undefined,\n      ref: ref,\n      children: isOnlyChild ? undefined : children\n    }), isOnlyChild && (text || shortcut) && /*#__PURE__*/_jsxs(Ariakit.Tooltip, {\n      ...restProps,\n      className: clsx('components-tooltip', className),\n      unmountOnHide: true,\n      gutter: 4,\n      id: describedById,\n      overflowPadding: 0.5,\n      store: tooltipStore,\n      children: [text, shortcut && /*#__PURE__*/_jsx(Shortcut, {\n        className: text ? 'components-tooltip__shortcut' : '',\n        shortcut: shortcut\n      })]\n    })]\n  });\n}\nexport const Tooltip = forwardRef(UnforwardedTooltip);\nexport default Tooltip;"],
+  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { Children, useContext, forwardRef, cloneElement } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport Shortcut from '../shortcut';\nimport { positionToPlacement } from '../popover/utils';\nimport { TooltipInternalContext } from './context';\n\n/**\n * Time over anchor to wait before showing tooltip\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const TOOLTIP_DELAY = 700;\nconst CONTEXT_VALUE = {\n  isNestedInTooltip: true\n};\nfunction UnforwardedTooltip(props, ref) {\n  const {\n    children,\n    className,\n    delay = TOOLTIP_DELAY,\n    hideOnClick = true,\n    placement,\n    position,\n    shortcut,\n    text,\n    ...restProps\n  } = props;\n  const {\n    isNestedInTooltip\n  } = useContext(TooltipInternalContext);\n  const baseId = useInstanceId(Tooltip, 'tooltip');\n  const describedById = text || shortcut ? baseId : undefined;\n  const isOnlyChild = Children.count(children) === 1;\n  // console error if more than one child element is added\n  if (!isOnlyChild) {\n    if ('development' === process.env.NODE_ENV) {\n      // eslint-disable-next-line no-console\n      console.error('wp-components.Tooltip should be called with only a single child element.');\n    }\n  }\n\n  // Compute tooltip's placement:\n  // - give priority to `placement` prop, if defined\n  // - otherwise, compute it from the legacy `position` prop (if defined)\n  // - finally, fallback to the default placement: 'top'\n  let computedPlacement;\n  if (placement !== undefined) {\n    computedPlacement = placement;\n  } else if (position !== undefined) {\n    computedPlacement = positionToPlacement(position);\n    deprecated('`position` prop in wp.components.tooltip', {\n      since: '6.4',\n      alternative: '`placement` prop'\n    });\n  }\n  computedPlacement = computedPlacement || 'top';\n  const tooltipStore = Ariakit.useTooltipStore({\n    placement: computedPlacement,\n    showTimeout: delay\n  });\n  const mounted = Ariakit.useStoreState(tooltipStore, 'mounted');\n  if (isNestedInTooltip) {\n    return isOnlyChild ? /*#__PURE__*/_jsx(Ariakit.Role, {\n      ...restProps,\n      render: children\n    }) : children;\n  }\n\n  // TODO: this is a temporary workaround to minimize the effects of the\n  // Ariakit upgrade. Ariakit doesn't pass the `aria-describedby` prop to\n  // the tooltip anchor anymore since 0.4.0, so we need to add it manually.\n  // The `aria-describedby` attribute is added only if the anchor doesn't have\n  // one already, and if the tooltip text is not the same as the anchor's\n  // `aria-label`\n  // See: https://github.com/WordPress/gutenberg/pull/64066\n  // See: https://github.com/WordPress/gutenberg/pull/65989\n  function addDescribedById(element) {\n    return describedById && mounted && element.props['aria-describedby'] === undefined && element.props['aria-label'] !== text ? cloneElement(element, {\n      'aria-describedby': describedById\n    }) : element;\n  }\n  return /*#__PURE__*/_jsxs(TooltipInternalContext.Provider, {\n    value: CONTEXT_VALUE,\n    children: [/*#__PURE__*/_jsx(Ariakit.TooltipAnchor, {\n      onClick: hideOnClick ? tooltipStore.hide : undefined,\n      store: tooltipStore,\n      render: isOnlyChild ? addDescribedById(children) : undefined,\n      ref: ref,\n      children: isOnlyChild ? undefined : children\n    }), isOnlyChild && (text || shortcut) && /*#__PURE__*/_jsxs(Ariakit.Tooltip, {\n      ...restProps,\n      className: clsx('components-tooltip', className),\n      unmountOnHide: true,\n      gutter: 4,\n      id: describedById,\n      overflowPadding: 0.5,\n      store: tooltipStore,\n      children: [text, shortcut && /*#__PURE__*/_jsx(Shortcut, {\n        className: text ? 'components-tooltip__shortcut' : '',\n        shortcut: shortcut\n      })]\n    })]\n  });\n}\nexport const Tooltip = forwardRef(UnforwardedTooltip);\nexport default Tooltip;"],
   "mappings": ";AAAA,YAAY,aAAa;AACzB,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,SAAS,UAAU,YAAY,YAAY,oBAAoB;AAC/D,OAAO,gBAAgB;AACvB,OAAO,cAAc;AACrB,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AAKvC,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,gBAAgB;AAC7B,IAAM,gBAAgB;AAAA,EACpB,mBAAmB;AACrB;AACA,SAAS,mBAAmB,OAAO,KAAK;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI,WAAW,sBAAsB;AACrC,QAAM,SAAS,cAAcA,UAAS,SAAS;AAC/C,QAAM,gBAAgB,QAAQ,WAAW,SAAS;AAClD,QAAM,cAAc,SAAS,MAAM,QAAQ,MAAM;AAEjD,MAAI,CAAC,aAAa;AAChB,QAAI,kBAAkB,QAAQ,IAAI,UAAU;AAE1C,cAAQ,MAAM,0EAA0E;AAAA,IAC1F;AAAA,EACF;AAMA,MAAI;AACJ,MAAI,cAAc,QAAW;AAC3B,wBAAoB;AAAA,EACtB,WAAW,aAAa,QAAW;AACjC,wBAAoB,oBAAoB,QAAQ;AAChD,eAAW,4CAA4C;AAAA,MACrD,OAAO;AAAA,MACP,aAAa;AAAA,IACf,CAAC;AAAA,EACH;AACA,sBAAoB,qBAAqB;AACzC,QAAM,eAAuB,wBAAgB;AAAA,IAC3C,WAAW;AAAA,IACX,aAAa;AAAA,EACf,CAAC;AACD,QAAM,UAAkB,sBAAc,cAAc,SAAS;AAC7D,MAAI,mBAAmB;AACrB,WAAO,cAA2B,qBAAa,cAAM;AAAA,MACnD,GAAG;AAAA,MACH,QAAQ;AAAA,IACV,CAAC,IAAI;AAAA,EACP;AAUA,WAAS,iBAAiB,SAAS;AACjC,WAAO,iBAAiB,WAAW,QAAQ,MAAM,kBAAkB,MAAM,UAAa,QAAQ,MAAM,YAAY,MAAM,OAAO,aAAa,SAAS;AAAA,MACjJ,oBAAoB;AAAA,IACtB,CAAC,IAAI;AAAA,EACP;AACA,SAAoB,sBAAM,uBAAuB,UAAU;AAAA,IACzD,OAAO;AAAA,IACP,UAAU,CAAc,qBAAa,uBAAe;AAAA,MAClD,SAAS,cAAc,aAAa,OAAO;AAAA,MAC3C,OAAO;AAAA,MACP,QAAQ,cAAc,iBAAiB,QAAQ,IAAI;AAAA,MACnD;AAAA,MACA,UAAU,cAAc,SAAY;AAAA,IACtC,CAAC,GAAG,gBAAgB,QAAQ,aAA0B,sBAAc,iBAAS;AAAA,MAC3E,GAAG;AAAA,MACH,WAAW,KAAK,sBAAsB,SAAS;AAAA,MAC/C,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,UAAU,CAAC,MAAM,YAAyB,qBAAK,UAAU;AAAA,QACvD,WAAW,OAAO,iCAAiC;AAAA,QACnD;AAAA,MACF,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,IAAMA,WAAU,WAAW,kBAAkB;AACpD,IAAO,kBAAQA;",
   "names": ["Tooltip"]
 }

package/build-module/visually-hidden/styles.mjs

@@ -10,7 +10,8 @@ var visuallyHidden = {
   padding: 0,
   position: "absolute",
   width: "1px",
-  wordWrap: "normal"
+  wordWrap: "normal",
+  wordBreak: "normal"
 };
 export {
   visuallyHidden

package/build-module/visually-hidden/styles.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/visually-hidden/styles.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nexport const visuallyHidden = {\n  border: 0,\n  clip: 'rect(1px, 1px, 1px, 1px)',\n  WebkitClipPath: 'inset( 50% )',\n  clipPath: 'inset( 50% )',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  width: '1px',\n  wordWrap: 'normal'\n};"],
-  "mappings": ";AAIO,IAAM,iBAAiB;AAAA,EAC5B,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AACZ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nexport const visuallyHidden = {\n  border: 0,\n  clip: 'rect(1px, 1px, 1px, 1px)',\n  WebkitClipPath: 'inset( 50% )',\n  clipPath: 'inset( 50% )',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  width: '1px',\n  wordWrap: 'normal',\n  wordBreak: 'normal'\n};"],
+  "mappings": ";AAIO,IAAM,iBAAiB;AAAA,EAC5B,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AACb;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -167,186 +167,6 @@
   outline: 2px solid transparent;
 }
 
-.components-avatar {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 9999px;
-  overflow: clip;
-  flex-shrink: 0;
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 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);
-}
-
-.components-avatar__image {
-  box-sizing: border-box;
-  position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: 9999px;
-  border: 0;
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  overflow: clip;
-  flex-shrink: 0;
-  font-size: 0;
-  color: #fff;
-}
-.is-small > .components-avatar__image {
-  width: 24px;
-  height: 24px;
-}
-.has-src > .components-avatar__image {
-  background-image: var(--components-avatar-url);
-  background-size: cover;
-  background-position: center;
-}
-.has-avatar-border-color > .components-avatar__image {
-  border: var(--wp-admin-border-width-focus) solid var(--components-avatar-outline-color);
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
-  background-clip: padding-box;
-}
-
-.components-avatar:not(.has-src) > .components-avatar__image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  font-weight: 499;
-  border: 0;
-  box-shadow: none;
-  background-clip: border-box;
-}
-
-.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {
-  background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar__name {
-  font-size: 13px;
-  line-height: 20px;
-  color: #fff;
-  min-width: 0;
-  padding-bottom: 2px;
-  overflow: hidden;
-  opacity: 0;
-  white-space: nowrap;
-  transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
-}
-
-.components-avatar.has-badge {
-  display: inline-grid;
-  grid-template-columns: min-content 0fr;
-  column-gap: 0;
-  padding-inline-end: 0;
-  transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
-}
-.components-avatar.has-badge:hover {
-  grid-template-columns: min-content 1fr;
-  column-gap: 4px;
-  padding-inline-end: 8px;
-  transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-.components-avatar.has-badge:hover .components-avatar__name {
-  opacity: 1;
-  transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-
-.components-avatar.has-badge.has-avatar-border-color {
-  background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar.has-status.has-src > .components-avatar__image {
-  background-image: none;
-}
-.components-avatar.has-status.has-src > .components-avatar__image::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-image: var(--components-avatar-url);
-  background-size: cover;
-  background-position: center;
-  mix-blend-mode: luminosity;
-  opacity: 0.3;
-}
-
-.components-avatar.has-status:not(.has-src) > .components-avatar__image {
-  color: rgba(255, 255, 255, 0.3);
-}
-
-.components-avatar.has-status.has-avatar-border-color > .components-avatar__image {
-  background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar__status-indicator {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  color: #fff;
-  fill: #fff;
-}
-.components-avatar__status-indicator svg {
-  width: 75%;
-  height: 75%;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .components-avatar.has-badge,
-  .components-avatar__name {
-    transition: none;
-  }
-}
-.components-avatar-group {
-  display: flex;
-  align-items: center;
-}
-.components-avatar-group > .components-avatar + .components-avatar {
-  margin-inline-start: -8px;
-}
-.components-avatar-group > .components-avatar {
-  position: relative;
-}
-.components-avatar-group > .components-avatar:nth-child(1) {
-  z-index: 10;
-}
-.components-avatar-group > .components-avatar:nth-child(2) {
-  z-index: 9;
-}
-.components-avatar-group > .components-avatar:nth-child(3) {
-  z-index: 8;
-}
-.components-avatar-group > .components-avatar:nth-child(4) {
-  z-index: 7;
-}
-.components-avatar-group > .components-avatar:nth-child(5) {
-  z-index: 6;
-}
-.components-avatar-group > .components-avatar:nth-child(6) {
-  z-index: 5;
-}
-.components-avatar-group > .components-avatar:nth-child(7) {
-  z-index: 4;
-}
-.components-avatar-group > .components-avatar:nth-child(8) {
-  z-index: 3;
-}
-.components-avatar-group > .components-avatar:nth-child(9) {
-  z-index: 2;
-}
-.components-avatar-group > .components-avatar:nth-child(10) {
-  z-index: 1;
-}
-
-.components-avatar-group__overflow {
-  margin-inline-start: 4px;
-  font-size: 12px;
-  line-height: 20px;
-  color: #1e1e1e;
-  white-space: nowrap;
-}
-
 .components-badge {
   box-sizing: border-box;
 }
@@ -935,6 +755,10 @@ p + .components-button.is-tertiary {
   background-color: var(--wp-components-color-gray-800, #2f2f2f);
 }
 
+.components-calendar__day--outside {
+  color: var(--wp-components-color-gray-600, #949494);
+}
+
 .components-calendar__day--hidden {
   visibility: hidden;
 }
@@ -2003,6 +1827,7 @@ body.is-dragging-components-draggable {
   flex: 1;
   font-family: inherit;
   font-size: 16px;
+  line-height: 1;
   width: 100%;
   max-width: 100%;
   margin-right: 4px;
@@ -2252,6 +2077,7 @@ body.is-dragging-components-draggable {
   outline-style: solid;
   outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 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);
   z-index: 1000000;
 }
 
@@ -2267,6 +2093,7 @@ body.is-dragging-components-draggable {
   outline-style: solid;
   outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 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);
   z-index: 1000000;
 }
 .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
@@ -2278,6 +2105,7 @@ body.is-dragging-components-draggable {
   outline-style: solid;
   outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 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);
 }
 
 .components-menu-group + .components-menu-group {
@@ -2479,7 +2307,7 @@ body.is-dragging-components-draggable {
     border-radius: 8px;
     margin: auto;
     width: auto;
-    min-width: 350px;
+    min-width: var(--wpds-dimension-surface-width-sm, 320px);
     max-width: calc(100% - 32px);
     max-height: calc(100% - 128px);
   }
@@ -2503,13 +2331,13 @@ body.is-dragging-components-draggable {
     width: 100%;
   }
   .components-modal__frame.has-size-small {
-    max-width: 384px;
+    max-width: var(--wpds-dimension-surface-width-md, 400px);
   }
   .components-modal__frame.has-size-medium {
-    max-width: 512px;
+    max-width: var(--wpds-dimension-surface-width-lg, 560px);
   }
   .components-modal__frame.has-size-large {
-    max-width: 840px;
+    max-width: var(--wpds-dimension-surface-width-2xl, 960px);
   }
 }
 @media (min-width: 960px) {

package/build-style/style.css

@@ -167,186 +167,6 @@
   outline: 2px solid transparent;
 }
 
-.components-avatar {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 9999px;
-  overflow: clip;
-  flex-shrink: 0;
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 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);
-}
-
-.components-avatar__image {
-  box-sizing: border-box;
-  position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: 9999px;
-  border: 0;
-  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  overflow: clip;
-  flex-shrink: 0;
-  font-size: 0;
-  color: #fff;
-}
-.is-small > .components-avatar__image {
-  width: 24px;
-  height: 24px;
-}
-.has-src > .components-avatar__image {
-  background-image: var(--components-avatar-url);
-  background-size: cover;
-  background-position: center;
-}
-.has-avatar-border-color > .components-avatar__image {
-  border: var(--wp-admin-border-width-focus) solid var(--components-avatar-outline-color);
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
-  background-clip: padding-box;
-}
-
-.components-avatar:not(.has-src) > .components-avatar__image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  font-weight: 499;
-  border: 0;
-  box-shadow: none;
-  background-clip: border-box;
-}
-
-.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {
-  background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar__name {
-  font-size: 13px;
-  line-height: 20px;
-  color: #fff;
-  min-width: 0;
-  padding-bottom: 2px;
-  overflow: hidden;
-  opacity: 0;
-  white-space: nowrap;
-  transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
-}
-
-.components-avatar.has-badge {
-  display: inline-grid;
-  grid-template-columns: min-content 0fr;
-  column-gap: 0;
-  padding-inline-end: 0;
-  transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
-}
-.components-avatar.has-badge:hover {
-  grid-template-columns: min-content 1fr;
-  column-gap: 4px;
-  padding-inline-end: 8px;
-  transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-.components-avatar.has-badge:hover .components-avatar__name {
-  opacity: 1;
-  transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-
-.components-avatar.has-badge.has-avatar-border-color {
-  background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar.has-status.has-src > .components-avatar__image {
-  background-image: none;
-}
-.components-avatar.has-status.has-src > .components-avatar__image::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-image: var(--components-avatar-url);
-  background-size: cover;
-  background-position: center;
-  mix-blend-mode: luminosity;
-  opacity: 0.3;
-}
-
-.components-avatar.has-status:not(.has-src) > .components-avatar__image {
-  color: rgba(255, 255, 255, 0.3);
-}
-
-.components-avatar.has-status.has-avatar-border-color > .components-avatar__image {
-  background-color: var(--components-avatar-outline-color);
-}
-
-.components-avatar__status-indicator {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  color: #fff;
-  fill: #fff;
-}
-.components-avatar__status-indicator svg {
-  width: 75%;
-  height: 75%;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .components-avatar.has-badge,
-  .components-avatar__name {
-    transition: none;
-  }
-}
-.components-avatar-group {
-  display: flex;
-  align-items: center;
-}
-.components-avatar-group > .components-avatar + .components-avatar {
-  margin-inline-start: -8px;
-}
-.components-avatar-group > .components-avatar {
-  position: relative;
-}
-.components-avatar-group > .components-avatar:nth-child(1) {
-  z-index: 10;
-}
-.components-avatar-group > .components-avatar:nth-child(2) {
-  z-index: 9;
-}
-.components-avatar-group > .components-avatar:nth-child(3) {
-  z-index: 8;
-}
-.components-avatar-group > .components-avatar:nth-child(4) {
-  z-index: 7;
-}
-.components-avatar-group > .components-avatar:nth-child(5) {
-  z-index: 6;
-}
-.components-avatar-group > .components-avatar:nth-child(6) {
-  z-index: 5;
-}
-.components-avatar-group > .components-avatar:nth-child(7) {
-  z-index: 4;
-}
-.components-avatar-group > .components-avatar:nth-child(8) {
-  z-index: 3;
-}
-.components-avatar-group > .components-avatar:nth-child(9) {
-  z-index: 2;
-}
-.components-avatar-group > .components-avatar:nth-child(10) {
-  z-index: 1;
-}
-
-.components-avatar-group__overflow {
-  margin-inline-start: 4px;
-  font-size: 12px;
-  line-height: 20px;
-  color: #1e1e1e;
-  white-space: nowrap;
-}
-
 .components-badge {
   box-sizing: border-box;
 }
@@ -935,6 +755,10 @@ p + .components-button.is-tertiary {
   background-color: var(--wp-components-color-gray-800, #2f2f2f);
 }
 
+.components-calendar__day--outside {
+  color: var(--wp-components-color-gray-600, #949494);
+}
+
 .components-calendar__day--hidden {
   visibility: hidden;
 }
@@ -2008,6 +1832,7 @@ body.is-dragging-components-draggable {
   flex: 1;
   font-family: inherit;
   font-size: 16px;
+  line-height: 1;
   width: 100%;
   max-width: 100%;
   margin-left: 4px;
@@ -2257,6 +2082,7 @@ body.is-dragging-components-draggable {
   outline-style: solid;
   outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 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);
   z-index: 1000000;
 }
 
@@ -2272,6 +2098,7 @@ body.is-dragging-components-draggable {
   outline-style: solid;
   outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 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);
   z-index: 1000000;
 }
 .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
@@ -2283,6 +2110,7 @@ body.is-dragging-components-draggable {
   outline-style: solid;
   outline-width: calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 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);
 }
 
 .components-menu-group + .components-menu-group {
@@ -2484,7 +2312,7 @@ body.is-dragging-components-draggable {
     border-radius: 8px;
     margin: auto;
     width: auto;
-    min-width: 350px;
+    min-width: var(--wpds-dimension-surface-width-sm, 320px);
     max-width: calc(100% - 32px);
     max-height: calc(100% - 128px);
   }
@@ -2508,13 +2336,13 @@ body.is-dragging-components-draggable {
     width: 100%;
   }
   .components-modal__frame.has-size-small {
-    max-width: 384px;
+    max-width: var(--wpds-dimension-surface-width-md, 400px);
   }
   .components-modal__frame.has-size-medium {
-    max-width: 512px;
+    max-width: var(--wpds-dimension-surface-width-lg, 560px);
   }
   .components-modal__frame.has-size-large {
-    max-width: 840px;
+    max-width: var(--wpds-dimension-surface-width-2xl, 960px);
   }
 }
 @media (min-width: 960px) {

package/build-types/alignment-matrix-control/stories/index.story.d.ts

@@ -9,6 +9,6 @@ import AlignmentMatrixControl from '..';
 import type { AlignmentMatrixControlProps } from '../types';
 declare const meta: Meta<typeof AlignmentMatrixControl>;
 export default meta;
-export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, AlignmentMatrixControlProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "as" | keyof AlignmentMatrixControlProps>>;
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, AlignmentMatrixControlProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "as" | keyof AlignmentMatrixControlProps>>;
 export declare const IconSubcomponent: () => import("react").JSX.Element;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/alignment-matrix-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAS3D;;GAEG;AACH,OAAO,sBAAsB,MAAM,IAAI,CAAC;AAExC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAqB9C,CAAC;AACF,eAAe,IAAI,CAAC;AAqBpB,eAAO,MAAM,OAAO,6SAAsB,CAAC;AAE3C,eAAO,MAAM,gBAAgB,mCAS5B,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAS3D;;GAEG;AACH,OAAO,sBAAsB,MAAM,IAAI,CAAC;AAExC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAqB9C,CAAC;AACF,eAAe,IAAI,CAAC;AAqBpB,eAAO,MAAM,OAAO,wSAAsB,CAAC;AAE3C,eAAO,MAAM,gBAAgB,mCAS5B,CAAC"}

package/build-types/angle-picker-control/stories/index.story.d.ts

@@ -8,7 +8,7 @@ import type { Meta } from '@storybook/react-vite';
 import { AnglePickerControl } from '..';
 declare const meta: Meta<typeof AnglePickerControl>;
 export default meta;
-export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("../types").AnglePickerControlProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "as" | keyof import("../types").AnglePickerControlProps> & {
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").AnglePickerControlProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "as" | keyof import("../types").AnglePickerControlProps> & {
     as?: keyof import("react").JSX.IntrinsicElements | undefined;
 } & import("react").RefAttributes<any>>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/animate/stories/index.story.d.ts

@@ -8,11 +8,11 @@ import type { Meta } from '@storybook/react-vite';
 import { Animate } from '..';
 declare const meta: Meta<typeof Animate>;
 export default meta;
-export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("../types").AnimateProps>;
-export declare const AppearTopLeft: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("../types").AnimateProps>;
-export declare const AppearTopRight: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("../types").AnimateProps>;
-export declare const AppearBottomLeft: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("../types").AnimateProps>;
-export declare const AppearBottomRight: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("../types").AnimateProps>;
-export declare const Loading: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("../types").AnimateProps>;
-export declare const SlideIn: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("../types").AnimateProps>;
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").AnimateProps>;
+export declare const AppearTopLeft: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").AnimateProps>;
+export declare const AppearTopRight: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").AnimateProps>;
+export declare const AppearBottomLeft: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").AnimateProps>;
+export declare const AppearBottomRight: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").AnimateProps>;
+export declare const Loading: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").AnimateProps>;
+export declare const SlideIn: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").AnimateProps>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/animate/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/animate/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAE3D;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAa/B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,mIAAsB,CAAC;AAc3C,eAAO,MAAM,aAAa,mIAAsB,CAAC;AAUjD,eAAO,MAAM,cAAc,mIAAsB,CAAC;AAUlD,eAAO,MAAM,gBAAgB,mIAAsB,CAAC;AAUpD,eAAO,MAAM,iBAAiB,mIAAsB,CAAC;AAWrD,eAAO,MAAM,OAAO,mIAAsB,CAAC;AAU3C,eAAO,MAAM,OAAO,mIAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/animate/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,uBAAuB,CAAC;AAE3D;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAa/B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,8HAAsB,CAAC;AAc3C,eAAO,MAAM,aAAa,8HAAsB,CAAC;AAUjD,eAAO,MAAM,cAAc,8HAAsB,CAAC;AAUlD,eAAO,MAAM,gBAAgB,8HAAsB,CAAC;AAUpD,eAAO,MAAM,iBAAiB,8HAAsB,CAAC;AAWrD,eAAO,MAAM,OAAO,8HAAsB,CAAC;AAU3C,eAAO,MAAM,OAAO,8HAAsB,CAAC"}

package/build-types/base-control/stories/index.story.d.ts

@@ -9,7 +9,7 @@ import BaseControl from '..';
 declare const meta: Meta<typeof BaseControl>;
 export default meta;
 export declare const Default: StoryFn<typeof BaseControl>;
-export declare const WithHelpText: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, import("../types").BaseControlProps & {
+export declare const WithHelpText: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("../types").BaseControlProps & {
     as?: keyof import("react").JSX.IntrinsicElements | null | undefined;
 }>;
 /**

package/build-types/border-box-control/stories/index.story.d.ts

@@ -5,7 +5,7 @@ import type { Meta } from '@storybook/react-vite';
 import { BorderBoxControl } from '../';
 declare const meta: Meta<typeof BorderBoxControl>;
 export default meta;
-export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react-vite").ReactRenderer, Pick<import("../../color-palette/types").ColorPaletteProps, "colors" | "__experimentalIsRenderedInSidebar"> & {
+export declare const Default: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Pick<import("../../color-palette/types").ColorPaletteProps, "colors" | "__experimentalIsRenderedInSidebar"> & {
     disableCustomColors?: boolean;
     enableAlpha?: boolean;
 } & import("../../border-control/types").LabelProps & Pick<import("../../border-control/types").BorderControlProps, "size" | "enableStyle"> & {