@wordpress/global-styles-ui 1.17.1-next.v.202607070741.0 → 1.18.0

package/build-types/highlighted-colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"highlighted-colors.d.ts","sourceRoot":"","sources":["../src/highlighted-colors.tsx"],"names":[],"mappings":"AAUA,UAAU,sBAAsB;IAC/B,yBAAyB,EAAE,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACd;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,yBAAyB,EACzB,KAAK,EACL,EAAE,sBAAsB,iCAyBxB"}
+{"version":3,"file":"highlighted-colors.d.ts","sourceRoot":"","sources":["../src/highlighted-colors.tsx"],"names":[],"mappings":"AAUA,UAAU,sBAAsB;IAC/B,yBAAyB,EAAE,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACd;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,yBAAyB,EACzB,KAAK,GACL,EAAE,sBAAsB,iCAyBxB"}

package/build-types/pagination/index.d.ts

@@ -8,6 +8,6 @@ interface PaginationProps {
     buttonVariant?: 'primary' | 'secondary' | 'tertiary';
     label?: string;
 }
-export default function Pagination({ currentPage, numPages, changePage, totalItems, className, disabled, buttonVariant, label }: PaginationProps): import("react").JSX.Element;
+export default function Pagination({ currentPage, numPages, changePage, totalItems, className, disabled, buttonVariant, label, }: PaginationProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/build-types/pagination/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pagination/index.tsx"],"names":[],"mappings":"AAgBA,UAAU,eAAe;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAE,EACnC,WAAW,EACX,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,aAA0B,EAC1B,KAA0B,EAC1B,EAAE,eAAe,+BAsEjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pagination/index.tsx"],"names":[],"mappings":"AAgBA,UAAU,eAAe;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAE,EACnC,WAAW,EACX,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,aAA0B,EAC1B,KAA0B,GAC1B,EAAE,eAAe,+BAsEjB"}

package/build-types/preview-styles.d.ts

@@ -4,6 +4,6 @@ interface PreviewStylesProps {
     withHoverView?: boolean;
     variation?: any;
 }
-declare function PreviewStyles({ label, isFocused, withHoverView, variation }: PreviewStylesProps): import("react").JSX.Element;
+declare function PreviewStyles({ label, isFocused, withHoverView, variation, }: PreviewStylesProps): import("react").JSX.Element;
 export default PreviewStyles;
 //# sourceMappingURL=preview-styles.d.ts.map

package/build-types/preview-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-styles.d.ts","sourceRoot":"","sources":["../src/preview-styles.tsx"],"names":[],"mappings":"AAiDA,UAAU,kBAAkB;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,iBAAS,aAAa,CAAE,EACvB,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,EAAE,kBAAkB,+BAoIpB;eAEc,aAAa"}
+{"version":3,"file":"preview-styles.d.ts","sourceRoot":"","sources":["../src/preview-styles.tsx"],"names":[],"mappings":"AAiDA,UAAU,kBAAkB;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,iBAAS,aAAa,CAAE,EACvB,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,GACT,EAAE,kBAAkB,+BAoIpB;eAEc,aAAa"}

package/build-types/preview-wrapper.d.ts

@@ -10,6 +10,6 @@ interface PreviewWrapperProps {
     isFocused?: boolean;
     withHoverView?: boolean;
 }
-declare function PreviewWrapper({ children, label, isFocused, withHoverView }: PreviewWrapperProps): import("react").JSX.Element;
+declare function PreviewWrapper({ children, label, isFocused, withHoverView, }: PreviewWrapperProps): import("react").JSX.Element;
 export default PreviewWrapper;
 //# sourceMappingURL=preview-wrapper.d.ts.map

package/build-types/preview-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-wrapper.d.ts","sourceRoot":"","sources":["../src/preview-wrapper.tsx"],"names":[],"mappings":"AA+BA,UAAU,mBAAmB;IAC5B,QAAQ,EACL,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,GAC/D,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,EAAE,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,iBAAS,cAAc,CAAE,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,aAAa,EACb,EAAE,mBAAmB,+BA+FrB;eAEc,cAAc"}
+{"version":3,"file":"preview-wrapper.d.ts","sourceRoot":"","sources":["../src/preview-wrapper.tsx"],"names":[],"mappings":"AAgCA,UAAU,mBAAmB;IAC5B,QAAQ,EACL,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,GAC/D,CAAE,CAAE,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAM,KAAK,CAAC,SAAS,CAAE,EAAE,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,iBAAS,cAAc,CAAE,EACxB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,aAAa,GACb,EAAE,mBAAmB,+BAwGrB;eAEc,cAAc"}

package/build-types/provider.d.ts

@@ -10,6 +10,6 @@ interface GlobalStylesProviderProps {
     onChange: (newValue: GlobalStylesConfig) => void;
     fontLibraryEnabled?: boolean;
 }
-export declare function GlobalStylesProvider({ children, value, baseValue, onChange, fontLibraryEnabled }: GlobalStylesProviderProps): import("react").JSX.Element;
+export declare function GlobalStylesProvider({ children, value, baseValue, onChange, fontLibraryEnabled, }: GlobalStylesProviderProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=provider.d.ts.map

package/build-types/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAQ1E,UAAU,yBAAyB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,CAAE,QAAQ,EAAE,kBAAkB,KAAM,IAAI,CAAC;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,oBAAoB,CAAE,EACrC,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,EAAE,yBAAyB,+BAsB3B"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAQ1E,UAAU,yBAAyB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,EAAE,CAAE,QAAQ,EAAE,kBAAkB,KAAM,IAAI,CAAC;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,oBAAoB,CAAE,EACrC,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,kBAAkB,GAClB,EAAE,yBAAyB,+BAsB3B"}

package/build-types/screen-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen-block.d.ts","sourceRoot":"","sources":["../src/screen-block.tsx"],"names":[],"mappings":"AAgGA,UAAU,gBAAgB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,iBAAS,WAAW,CAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA0V1D;eAEc,WAAW"}
+{"version":3,"file":"screen-block.d.ts","sourceRoot":"","sources":["../src/screen-block.tsx"],"names":[],"mappings":"AAgGA,UAAU,gBAAgB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,iBAAS,WAAW,CAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAyW1D;eAEc,WAAW"}

package/build-types/screen-header.d.ts

@@ -13,6 +13,6 @@ interface ScreenHeaderProps {
     onChangeViewport?: (value: string) => void;
     onChangePseudoState?: (value: string) => void;
 }
-export declare function ScreenHeader({ title, description, onBack, viewportStates, pseudoStates, selectedViewport, selectedPseudoState, onChangeViewport, onChangePseudoState }: ScreenHeaderProps): import("react").JSX.Element;
+export declare function ScreenHeader({ title, description, onBack, viewportStates, pseudoStates, selectedViewport, selectedPseudoState, onChangeViewport, onChangePseudoState, }: ScreenHeaderProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=screen-header.d.ts.map

package/build-types/screen-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen-header.d.ts","sourceRoot":"","sources":["../src/screen-header.tsx"],"names":[],"mappings":"AAiBA;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,iBAAiB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,eAAe,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;CAChD;AAED,wBAAgB,YAAY,CAAE,EAC7B,KAAK,EACL,WAAW,EACX,MAAM,EACN,cAAc,EACd,YAAY,EACZ,gBAA4B,EAC5B,mBAA+B,EAC/B,gBAAgB,EAChB,mBAAmB,EACnB,EAAE,iBAAiB,+BA2DnB"}
+{"version":3,"file":"screen-header.d.ts","sourceRoot":"","sources":["../src/screen-header.tsx"],"names":[],"mappings":"AAiBA;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,iBAAiB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,eAAe,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;CAChD;AAED,wBAAgB,YAAY,CAAE,EAC7B,KAAK,EACL,WAAW,EACX,MAAM,EACN,cAAc,EACd,YAAY,EACZ,gBAA4B,EAC5B,mBAA+B,EAC/B,gBAAgB,EAChB,mBAAmB,GACnB,EAAE,iBAAiB,+BA2DnB"}

package/build-types/screen-revisions/revisions-buttons.d.ts

@@ -18,6 +18,6 @@ interface RevisionButtonsProps {
  * @param root0.canApplyRevision
  * @param root0.onApplyRevision
  */
-declare function RevisionsButtons({ userRevisions, selectedRevisionId, onChange, canApplyRevision, onApplyRevision }: RevisionButtonsProps): import("react").JSX.Element;
+declare function RevisionsButtons({ userRevisions, selectedRevisionId, onChange, canApplyRevision, onApplyRevision, }: RevisionButtonsProps): import("react").JSX.Element;
 export default RevisionsButtons;
 //# sourceMappingURL=revisions-buttons.d.ts.map

package/build-types/screen-revisions/revisions-buttons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"revisions-buttons.d.ts","sourceRoot":"","sources":["../../src/screen-revisions/revisions-buttons.tsx"],"names":[],"mappings":"AAeA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA+ExC,UAAU,oBAAoB;IAC7B,aAAa,EAAE,QAAQ,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,CAAE,QAAQ,EAAE,QAAQ,KAAM,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAE,EAC1B,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,EAAE,oBAAoB,+BAgJtB;eAEc,gBAAgB"}
+{"version":3,"file":"revisions-buttons.d.ts","sourceRoot":"","sources":["../../src/screen-revisions/revisions-buttons.tsx"],"names":[],"mappings":"AAeA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AA+ExC,UAAU,oBAAoB;IAC7B,aAAa,EAAE,QAAQ,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,CAAE,QAAQ,EAAE,QAAQ,KAAM,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAE,EAC1B,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,gBAAgB,EAChB,eAAe,GACf,EAAE,oBAAoB,+BAgJtB;eAEc,gBAAgB"}

package/build-types/screen-revisions/use-global-styles-revisions.d.ts

@@ -12,6 +12,6 @@ interface UseGlobalStylesRevisionsReturn {
     isLoading: boolean;
     revisionsCount: number;
 }
-export default function useGlobalStylesRevisions({ query }?: UseGlobalStylesRevisionsParams): UseGlobalStylesRevisionsReturn;
+export default function useGlobalStylesRevisions({ query, }?: UseGlobalStylesRevisionsParams): UseGlobalStylesRevisionsReturn;
 export {};
 //# sourceMappingURL=use-global-styles-revisions.d.ts.map

package/build-types/screen-revisions/use-global-styles-revisions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-global-styles-revisions.d.ts","sourceRoot":"","sources":["../../src/screen-revisions/use-global-styles-revisions.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAQ,MAAM,SAAS,CAAC;AAM9C,UAAU,KAAK;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,8BAA8B;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC;CACd;AAED,UAAU,8BAA8B;IACvC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;CACvB;AAWD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAE,EACjD,KAAK,EACL,GAAE,8BAAmC,GAAI,8BAA8B,CA2JvE"}
+{"version":3,"file":"use-global-styles-revisions.d.ts","sourceRoot":"","sources":["../../src/screen-revisions/use-global-styles-revisions.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAQ,MAAM,SAAS,CAAC;AAM9C,UAAU,KAAK;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,8BAA8B;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC;CACd;AAED,UAAU,8BAA8B;IACvC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;CACvB;AAWD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAE,EACjD,KAAK,GACL,GAAE,8BAAmC,GAAI,8BAA8B,CA2JvE"}

package/build-types/shadows-edit-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadows-edit-panel.d.ts","sourceRoot":"","sources":["../src/shadows-edit-panel.tsx"],"names":[],"mappings":"AAyEA,MAAM,CAAC,OAAO,UAAU,gBAAgB,uCAmNvC"}
+{"version":3,"file":"shadows-edit-panel.d.ts","sourceRoot":"","sources":["../src/shadows-edit-panel.tsx"],"names":[],"mappings":"AAyEA,MAAM,CAAC,OAAO,UAAU,gBAAgB,uCAkNvC"}

package/build-types/style-variations-container.d.ts

@@ -1,6 +1,6 @@
 interface StyleVariationsContainerProps {
     gap?: number;
 }
-declare function StyleVariationsContainer({ gap }: StyleVariationsContainerProps): import("react").JSX.Element | null;
+declare function StyleVariationsContainer({ gap, }: StyleVariationsContainerProps): import("react").JSX.Element | null;
 export default StyleVariationsContainer;
 //# sourceMappingURL=style-variations-container.d.ts.map

package/build-types/style-variations-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-variations-container.d.ts","sourceRoot":"","sources":["../src/style-variations-container.tsx"],"names":[],"mappings":"AAqBA,UAAU,6BAA6B;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED,iBAAS,wBAAwB,CAAE,EAClC,GAAO,EACP,EAAE,6BAA6B,sCA2H/B;eAEc,wBAAwB"}
+{"version":3,"file":"style-variations-container.d.ts","sourceRoot":"","sources":["../src/style-variations-container.tsx"],"names":[],"mappings":"AAqBA,UAAU,6BAA6B;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED,iBAAS,wBAAwB,CAAE,EAClC,GAAO,GACP,EAAE,6BAA6B,sCA2H/B;eAEc,wBAAwB"}

package/build-types/typography-example.d.ts

@@ -2,6 +2,6 @@ interface TypographyExampleProps {
     fontSize?: number;
     variation?: any;
 }
-export default function PreviewTypography({ fontSize, variation }: TypographyExampleProps): import("react").JSX.Element;
+export default function PreviewTypography({ fontSize, variation, }: TypographyExampleProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=typography-example.d.ts.map

package/build-types/typography-example.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography-example.d.ts","sourceRoot":"","sources":["../src/typography-example.tsx"],"names":[],"mappings":"AAeA,UAAU,sBAAsB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,QAAQ,EACR,SAAS,EACT,EAAE,sBAAsB,+BAsDxB"}
+{"version":3,"file":"typography-example.d.ts","sourceRoot":"","sources":["../src/typography-example.tsx"],"names":[],"mappings":"AAeA,UAAU,sBAAsB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,QAAQ,EACR,SAAS,GACT,EAAE,sBAAsB,+BAsDxB"}

package/build-types/typography-panel.d.ts

@@ -1,10 +1,7 @@
-/**
- * WordPress dependencies
- */
 interface TypographyPanelProps {
     element: string;
     headingLevel: string;
 }
-export default function TypographyPanel({ element, headingLevel }: TypographyPanelProps): import("react").JSX.Element;
+export default function TypographyPanel({ element, headingLevel, }: TypographyPanelProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=typography-panel.d.ts.map

package/build-types/typography-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography-panel.d.ts","sourceRoot":"","sources":["../src/typography-panel.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAaH,UAAU,oBAAoB;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,OAAO,EACP,YAAY,EACZ,EAAE,oBAAoB,+BAgCtB"}
+{"version":3,"file":"typography-panel.d.ts","sourceRoot":"","sources":["../src/typography-panel.tsx"],"names":[],"mappings":"AAeA,UAAU,oBAAoB;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,OAAO,EACP,YAAY,GACZ,EAAE,oBAAoB,+BAgCtB"}

package/build-types/typography-preview.d.ts

@@ -3,6 +3,6 @@ interface TypographyPreviewProps {
     element: string;
     headingLevel: string;
 }
-export default function TypographyPreview({ name, element, headingLevel }: TypographyPreviewProps): import("react").JSX.Element;
+export default function TypographyPreview({ name, element, headingLevel, }: TypographyPreviewProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=typography-preview.d.ts.map

package/build-types/typography-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography-preview.d.ts","sourceRoot":"","sources":["../src/typography-preview.tsx"],"names":[],"mappings":"AAKA,UAAU,sBAAsB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,EAAE,sBAAsB,+BA6CxB"}
+{"version":3,"file":"typography-preview.d.ts","sourceRoot":"","sources":["../src/typography-preview.tsx"],"names":[],"mappings":"AAKA,UAAU,sBAAsB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,IAAI,EACJ,OAAO,EACP,YAAY,GACZ,EAAE,sBAAsB,+BA6CxB"}

package/build-types/utils.d.ts

@@ -1,4 +1,4 @@
-import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+import type { GlobalStylesConfig, GlobalStylesSettings } from '@wordpress/global-styles-engine';
 /**
  * State definition with value and label.
  */
@@ -31,9 +31,10 @@ export declare function getValidPseudoStates(name: string): StateDefinition[];
 /**
  * Get the valid viewport state definitions.
  *
+ * @param viewportSettings
  * @return Array of valid viewport state definitions.
  */
-export declare function getValidViewportStates(): StateDefinition[];
+export declare function getValidViewportStates(viewportSettings?: GlobalStylesSettings['viewport']): StateDefinition[];
 /**
  * Removes all instances of properties from an object.
  *

package/build-types/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAG1E;;GAEG;AACH,MAAM,WAAW,eAAe;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAE,MAAM,EAAE,eAAe,EAAE,CAmBnE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAE,MAAM,EAAE,eAAe,EAAE,CAOjE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,eAAe,EAG9C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAE,IAAI,EAAE,MAAM,GAAI,eAAe,EAAE,CAYtE;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,IAAI,eAAe,EAAE,CAE1D;AAED;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CACzC,MAAM,EAAE,GAAG,EACX,UAAU,EAAE,MAAM,EAAE,GAClB,GAAG,CAqBL;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,WAC5B,GAAG,cACC,MAAM,EAAE,KAClB,GAoBF,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CACxC,SAAS,EAAE,kBAAkB,EAC7B,UAAU,EAAE,MAAM,EAAE,GAClB,OAAO,CAOT;AAeD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAE,SAAS,EAAE,GAAG,GAAI,CAAE,GAAG,EAAE,GAAG,CAAE,CAkC9D;AA4CD,wBAAgB,gBAAgB,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAwBxD;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAE,MAAM,EAAE,GAAG,GAAI,KAAK,CAAC,aAAa,CAkCxE;AAED;;;;;;;;;GASG;AACH;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAE,SAAS,EAAE,MAAM,GAAI,MAAM,CAKjE;AAED,wBAAgB,sBAAsB,CACrC,OAAO,EAAE,GAAG,EAAE,EACd,UAAU,EAAE,MAAM,GAChB,MAAM,CAeR"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACX,kBAAkB,EAClB,oBAAoB,EACpB,MAAM,iCAAiC,CAAC;AAUzC;;GAEG;AACH,MAAM,WAAW,eAAe;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAE,MAAM,EAAE,eAAe,EAAE,CAmBnE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAE,MAAM,EAAE,eAAe,EAAE,CAOjE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,eAAe,EAG9C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAE,IAAI,EAAE,MAAM,GAAI,eAAe,EAAE,CAYtE;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACrC,gBAAgB,CAAC,EAAE,oBAAoB,CAAE,UAAU,CAAE,GACnD,eAAe,EAAE,CAQnB;AAED;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CACzC,MAAM,EAAE,GAAG,EACX,UAAU,EAAE,MAAM,EAAE,GAClB,GAAG,CAqBL;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,WAC5B,GAAG,cACC,MAAM,EAAE,KAClB,GAoBF,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CACxC,SAAS,EAAE,kBAAkB,EAC7B,UAAU,EAAE,MAAM,EAAE,GAClB,OAAO,CAOT;AAeD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAE,SAAS,EAAE,GAAG,GAAI,CAAE,GAAG,EAAE,GAAG,CAAE,CAkC9D;AA4CD,wBAAgB,gBAAgB,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAwBxD;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAE,MAAM,EAAE,GAAG,GAAI,KAAK,CAAC,aAAa,CAkCxE;AAED;;;;;;;;;GASG;AACH;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAE,SAAS,EAAE,MAAM,GAAI,MAAM,CAKjE;AAED,wBAAgB,sBAAsB,CACrC,OAAO,EAAE,GAAG,EAAE,EACd,UAAU,EAAE,MAAM,GAChB,MAAM,CAeR"}

package/build-types/variations/variation.d.ts

@@ -5,6 +5,6 @@ interface VariationProps {
     properties?: string[];
     showTooltip?: boolean;
 }
-export default function Variation({ variation, children, isPill, properties, showTooltip }: VariationProps): import("react").JSX.Element;
+export default function Variation({ variation, children, isPill, properties, showTooltip, }: VariationProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=variation.d.ts.map

package/build-types/variations/variation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variation.d.ts","sourceRoot":"","sources":["../../src/variations/variation.tsx"],"names":[],"mappings":"AAqBA,UAAU,cAAc;IACvB,SAAS,EAAE,GAAG,CAAC;IACf,QAAQ,EAAE,CAAE,SAAS,EAAE,OAAO,KAAM,KAAK,CAAC,SAAS,CAAC;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,EAClC,SAAS,EACT,QAAQ,EACR,MAAc,EACd,UAAU,EACV,WAAmB,EACnB,EAAE,cAAc,+BAiFhB"}
+{"version":3,"file":"variation.d.ts","sourceRoot":"","sources":["../../src/variations/variation.tsx"],"names":[],"mappings":"AAqBA,UAAU,cAAc;IACvB,SAAS,EAAE,GAAG,CAAC;IACf,QAAQ,EAAE,CAAE,SAAS,EAAE,OAAO,KAAM,KAAK,CAAC,SAAS,CAAC;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,EAClC,SAAS,EACT,QAAQ,EACR,MAAc,EACd,UAAU,EACV,WAAmB,GACnB,EAAE,cAAc,+BAiFhB"}

package/build-types/variations/variations-color.d.ts

@@ -2,6 +2,6 @@ interface ColorVariationsProps {
     title?: string;
     gap?: number;
 }
-export default function ColorVariations({ title, gap }: ColorVariationsProps): import("react").JSX.Element | null;
+export default function ColorVariations({ title, gap, }: ColorVariationsProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=variations-color.d.ts.map

package/build-types/variations/variations-color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variations-color.d.ts","sourceRoot":"","sources":["../../src/variations/variations-color.tsx"],"names":[],"mappings":"AAgBA,UAAU,oBAAoB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAID,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,KAAK,EACL,GAAO,EACP,EAAE,oBAAoB,sCA2BtB"}
+{"version":3,"file":"variations-color.d.ts","sourceRoot":"","sources":["../../src/variations/variations-color.tsx"],"names":[],"mappings":"AAgBA,UAAU,oBAAoB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAID,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,KAAK,EACL,GAAO,GACP,EAAE,oBAAoB,sCA2BtB"}

package/build-types/variations/variations-typography.d.ts

@@ -2,6 +2,6 @@ interface TypographyVariationsProps {
     title?: string;
     gap?: number;
 }
-export default function TypographyVariations({ title, gap }: TypographyVariationsProps): import("react").JSX.Element | null;
+export default function TypographyVariations({ title, gap, }: TypographyVariationsProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=variations-typography.d.ts.map

package/build-types/variations/variations-typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variations-typography.d.ts","sourceRoot":"","sources":["../../src/variations/variations-typography.tsx"],"names":[],"mappings":"AAgBA,UAAU,yBAAyB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAID,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAE,EAC7C,KAAK,EACL,GAAO,EACP,EAAE,yBAAyB,sCAsC3B"}
+{"version":3,"file":"variations-typography.d.ts","sourceRoot":"","sources":["../../src/variations/variations-typography.tsx"],"names":[],"mappings":"AAgBA,UAAU,yBAAyB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAID,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAE,EAC7C,KAAK,EACL,GAAO,GACP,EAAE,yBAAyB,sCAsC3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/global-styles-ui",
-	"version": "1.17.1-next.v.202607070741.0+a51d59513",
+	"version": "1.18.0",
 	"description": "Global Styles UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,23 +43,23 @@
 		"./build-style/": "./build-style/"
 	},
 	"dependencies": {
-		"@wordpress/a11y": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/api-fetch": "^7.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/base-styles": "^10.3.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/block-editor": "^16.0.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/blocks": "^15.23.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/components": "^37.0.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/compose": "^8.3.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/core-data": "^7.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/data": "^10.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/date": "^5.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/element": "^8.2.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/global-styles-engine": "^1.17.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/i18n": "^6.23.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/icons": "^15.1.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/keycodes": "^4.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/private-apis": "^1.50.1-next.v.202607070741.0+a51d59513",
-		"@wordpress/ui": "^0.18.1-next.v.202607070741.0+a51d59513",
+		"@wordpress/a11y": "^4.51.0",
+		"@wordpress/api-fetch": "^7.51.0",
+		"@wordpress/base-styles": "^11.0.0",
+		"@wordpress/block-editor": "^16.0.0",
+		"@wordpress/blocks": "^15.24.0",
+		"@wordpress/components": "^37.0.0",
+		"@wordpress/compose": "^8.4.0",
+		"@wordpress/core-data": "^7.51.0",
+		"@wordpress/data": "^10.51.0",
+		"@wordpress/date": "^5.51.0",
+		"@wordpress/element": "^8.3.0",
+		"@wordpress/global-styles-engine": "^1.18.0",
+		"@wordpress/i18n": "^6.24.0",
+		"@wordpress/icons": "^15.2.0",
+		"@wordpress/keycodes": "^4.51.0",
+		"@wordpress/private-apis": "^1.51.0",
+		"@wordpress/ui": "^0.18.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3"
@@ -69,9 +69,9 @@
 		"@testing-library/react": "^16.3.2"
 	},
 	"peerDependencies": {
-		"@types/react": "^18.3.27",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"@types/react": "^18 || ^19",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
@@ -81,5 +81,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f637726e370c8b23695ed9af82adbe171ad235d8"
+	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
 }

package/src/block-preview-panel.tsx

@@ -6,12 +6,20 @@ import { BlockPreview } from '@wordpress/block-editor';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
-import { __unstableGeneratePreviewStateStyles as generatePreviewStateStyles } from '@wordpress/global-styles-engine';
+import {
+	privateApis as globalStylesEnginePrivateApis,
+	__unstableGeneratePreviewStateStyles as generatePreviewStateStyles,
+} from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import { getVariationClassName } from './utils';
+import { unlock } from './lock-unlock';
+
+const { getViewportBreakpoints, getViewportBreakpointValueInPixels } = unlock(
+	globalStylesEnginePrivateApis
+);
 
 interface BlockPreviewPanelProps {
 	name: string;
@@ -19,21 +27,65 @@ interface BlockPreviewPanelProps {
 	selectedViewport?: string;
 	selectedState?: string;
 	stateStyles?: any;
+	viewportSettings?: {
+		mobile?: string;
+		tablet?: string;
+	};
 }
 
-// Keep in sync with responsive breakpoint media queries in the global styles engine.
-const PREVIEW_WIDTH_BY_VIEWPORT: Record< string, number > = {
+const DEFAULT_PREVIEW_WIDTH_BY_VIEWPORT: Record< string, number > = {
 	default: 783,
 	'@tablet': 600,
 	'@mobile': 480,
 };
 
+function getPreviewWidthByViewport(
+	selectedViewport: string,
+	viewportSettings: BlockPreviewPanelProps[ 'viewportSettings' ]
+) {
+	const breakpoints = getViewportBreakpoints( viewportSettings );
+	const mobileWidth = getViewportBreakpointValueInPixels(
+		breakpoints.mobile
+	);
+
+	if ( selectedViewport === '@mobile' && mobileWidth ) {
+		return mobileWidth;
+	}
+
+	const tabletWidth = getViewportBreakpointValueInPixels(
+		breakpoints.tablet
+	);
+
+	if ( selectedViewport === '@tablet' && tabletWidth ) {
+		if ( ! mobileWidth ) {
+			return tabletWidth;
+		}
+		if (
+			breakpoints.mobile === '480px' &&
+			breakpoints.tablet === '782px'
+		) {
+			return DEFAULT_PREVIEW_WIDTH_BY_VIEWPORT[ '@tablet' ];
+		}
+		return Math.round( ( mobileWidth + tabletWidth ) / 2 );
+	}
+
+	if ( selectedViewport === 'default' ) {
+		const desktopBreakpoint = tabletWidth ?? mobileWidth;
+		if ( desktopBreakpoint ) {
+			return desktopBreakpoint + 1;
+		}
+	}
+
+	return DEFAULT_PREVIEW_WIDTH_BY_VIEWPORT[ selectedViewport ];
+}
+
 const BlockPreviewPanel = ( {
 	name,
 	variation = '',
 	selectedViewport = 'default',
 	selectedState = 'default',
 	stateStyles,
+	viewportSettings,
 }: BlockPreviewPanelProps ) => {
 	const blockExample = getBlockType( name )?.example;
 	const blocks = useMemo( () => {
@@ -69,7 +121,7 @@ const BlockPreviewPanel = ( {
 	}
 
 	const viewportWidth =
-		PREVIEW_WIDTH_BY_VIEWPORT[ selectedViewport ] ??
+		getPreviewWidthByViewport( selectedViewport, viewportSettings ) ??
 		blockExample.viewportWidth ??
 		500;
 	const normalizedViewportWidth = blockExample.viewportWidth ?? 500;

package/src/font-library/style.scss

@@ -25,7 +25,7 @@ $footer-height: 90px;
 
 	.font-library__subtitle {
 		text-transform: uppercase;
-		font-weight: variables.$font-weight-medium;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-size: 11px;
 	}
 }
@@ -81,13 +81,13 @@ $footer-height: 90px;
 
 .font-library__page-selection {
 	font-size: 11px;
-	font-weight: variables.$font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	text-transform: uppercase;
 
 	@include mixins.break-small() {
 		.font-library__page-selection-trigger {
 			font-size: 11px !important;
-			font-weight: variables.$font-weight-medium;
+			font-weight: var(--wpds-typography-font-weight-emphasis);
 		}
 	}
 }
@@ -95,7 +95,7 @@ $footer-height: 90px;
 .font-library__fonts-title {
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	margin-top: 0;
 	margin-bottom: 0;
 }

package/src/font-sizes/rename-font-size-dialog.tsx

@@ -51,7 +51,6 @@ function RenameFontSizeDialog( {
 			>
 				<VStack spacing="3">
 					<InputControl
-						__next40pxDefaultSize
 						autoComplete="off"
 						value={ newName }
 						onChange={ setNewName }

package/src/preview-wrapper.tsx

@@ -13,6 +13,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { useLayoutEffect, useState } from '@wordpress/element';
+import { Skeleton } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -101,6 +102,15 @@ function PreviewWrapper( {
 			<div style={ { position: 'relative' } }>
 				{ containerResizeListener }
 			</div>
+			{ ! isReady && (
+				// Match the preview aspect ratio so layout doesn't jump once width is measured.
+				<Skeleton
+					className="global-styles-ui-preview__wrapper"
+					style={ {
+						aspectRatio: normalizedWidth / normalizedHeight,
+					} }
+				/>
+			) }
 			{ isReady && (
 				<div
 					className={ clsx( 'global-styles-ui-preview__wrapper', {

package/src/screen-block.tsx

@@ -100,8 +100,11 @@ interface ScreenBlockProps {
 }
 
 function ScreenBlock( { name, variation }: ScreenBlockProps ) {
-	const { user: userConfig, onChange: onChangeGlobalStyles } =
-		useContext( GlobalStylesContext );
+	const {
+		user: userConfig,
+		merged: mergedConfig,
+		onChange: onChangeGlobalStyles,
+	} = useContext( GlobalStylesContext );
 
 	let prefixParts: string[] = [];
 	if ( variation ) {
@@ -114,13 +117,24 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 		useState< string >( 'default' );
 	const [ selectedPseudoState, setSelectedPseudoState ] =
 		useState< string >( 'default' );
-	const validViewportStates = useMemo( () => getValidViewportStates(), [] );
+	const viewportSettings = mergedConfig.settings?.viewport;
+	const validViewportStates = useMemo(
+		() => getValidViewportStates( viewportSettings ),
+		[ viewportSettings ]
+	);
+	const effectiveSelectedViewport =
+		selectedViewport === 'default' ||
+		validViewportStates.some(
+			( state ) => state.value === selectedViewport
+		)
+			? selectedViewport
+			: 'default';
 	const validPseudoStates = useMemo(
 		() => getValidPseudoStates( name ),
 		[ name ]
 	);
 
-	const stateParam = [ selectedViewport, selectedPseudoState ]
+	const stateParam = [ effectiveSelectedViewport, selectedPseudoState ]
 		.filter( ( value ) => value !== 'default' )
 		.join( '.' );
 	const hasSelectedState = stateParam.length > 0;
@@ -194,7 +208,7 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasFiltersPanel = useHasFiltersPanel( settings );
 	const shouldShowFiltersPanel =
-		hasFiltersPanel && selectedViewport === 'default';
+		hasFiltersPanel && effectiveSelectedViewport === 'default';
 	const hasImageSettingsPanel = useHasImageSettingsPanel(
 		name,
 		userSettings,
@@ -344,7 +358,7 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 				}
 				viewportStates={ validViewportStates }
 				pseudoStates={ validPseudoStates }
-				selectedViewport={ selectedViewport }
+				selectedViewport={ effectiveSelectedViewport }
 				selectedPseudoState={ selectedPseudoState }
 				onChangeViewport={ setSelectedViewport }
 				onChangePseudoState={ setSelectedPseudoState }
@@ -352,9 +366,10 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 			<BlockPreviewPanel
 				name={ name }
 				variation={ variation }
-				selectedViewport={ selectedViewport }
+				selectedViewport={ effectiveSelectedViewport }
 				selectedState={ hasSelectedState ? stateParam : 'default' }
 				stateStyles={ hasSelectedState ? inheritedStyle : undefined }
+				viewportSettings={ viewportSettings }
 			/>
 			{ hasVariationsPanel && (
 				<div className="global-styles-ui-screen-variations">

package/src/screen-revisions/style.scss

@@ -116,7 +116,7 @@
 	gap: $grid-unit-10;
 	.global-styles-ui-screen-revisions__date {
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-size: 12px;
 	}
 }

package/src/shadows-edit-panel.tsx

@@ -243,7 +243,6 @@ export default function ShadowsEditPanel() {
 						} }
 					>
 						<InputControl
-							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Name' ) }
 							placeholder={ __( 'Shadow name' ) }

package/src/stories/index.story.jsx

@@ -366,7 +366,7 @@ const BASE_SETTINGS = {
 				theme: [
 					{
 						fontFamily:
-							'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+							'-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
 						name: 'System Font',
 						slug: 'system-font',
 					},

package/src/style.scss

@@ -81,13 +81,13 @@
 	// Need to override the too specific styles for complementary areas.
 	margin-bottom: 0 !important;
 	text-transform: uppercase;
-	font-weight: variables.$font-weight-medium !important;
+	font-weight: var(--wpds-typography-font-weight-emphasis) !important;
 	font-size: 11px !important;
 }
 
 .global-styles-ui-section-title {
 	color: colors.$gray-800;
-	font-weight: 600;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	line-height: 1.2;
 	padding: 16px 16px 0;
 	margin: 0;