@wordpress/components 21.2.0 → 22.0.0

package/build-module/unit-control/styles/unit-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/styles/unit-control-styles.ts"],"names":["css","COLORS","CONFIG","rtl","NumberControl","BackdropUI","space","Root","ValueInput","baseUnitLabelStyles","selectSize","sizes","default","gray","large","ui","theme","UnitLabel","unitSelectSizes","borderTopLeftRadius","borderBottomLeftRadius","borderFocus","borderWidth","borderWidthFocus","UnitSelect"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAEA;AACA;AACA;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,GAAzB,QAAoC,aAApC;AACA,OAAOC,aAAP,MAA0B,sBAA1B;AACA,SAASC,UAAT,QAA2B,iDAA3B;AAEA,SAASC,KAAT,QAAsB,sBAAtB,C,CAEA;AACA;;AAKA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mDAKTF,UALS,4rLAAV,C,CAUP;AACA;;AAEA,OAAO,MAAMG,UAAU,GAAG,qBAAQJ,aAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB;;AASP,MAAMK,mBAAmB,GAAG,QAAmC;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AAC9D,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,eAAEZ,GAAF,4DAIIC,MAAM,CAACY,IAAP,CAAa,GAAb,CAJJ,uzLADM;AAYbC,IAAAA,KAAK,eAAEd,GAAF,uFAKkBM,KAAK,CAAE,CAAF,CALvB,eAMQA,KAAK,CAAE,CAAF,CANb,aAOML,MAAM,CAACc,EAAP,CAAUC,KAPhB;AAZQ,GAAd;AA6BA,SAAON,UAAU,KAAK,kBAAf,GAAoCC,KAAK,CAACG,KAA1C,GAAkDH,KAAK,CAACC,OAA/D;AACA,CA/BD;;AAiCA,OAAO,MAAMK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,+BAIjBR,mBAJiB,aAMVR,MAAM,CAACY,IAAP,CAAa,GAAb,CANU,0pLAAf;;AAUP,MAAMK,eAAe,GAAG,SAA+C;AAAA,MAA7C;AAAER,IAAAA,UAAU,GAAG;AAAf,GAA6C;AACtE,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,eAAEZ,GAAF,mGAKHG,GAAG,CAAE;AAAEgB,MAAAA,mBAAmB,EAAE,CAAvB;AAA0BC,MAAAA,sBAAsB,EAAE;AAAlD,KAAF,CAAH,EALG,+CAQgBnB,MAAM,CAACY,IAAP,CAAa,GAAb,CARhB,iCAYgBZ,MAAM,CAACc,EAAP,CAAUM,WAZ1B,8BAcDnB,MAAM,CAACoB,WAAP,GAAqB,GAArB,GAA2BrB,MAAM,CAACc,EAAP,CAAUM,WAdpC,+wLADM;AAqBbP,IAAAA,KAAK,eAAEd,GAAF,0EAMOC,MAAM,CAACc,EAAP,CAAUM,WANjB,8BAQCnB,MAAM,CAACoB,WAAP,GAAqB,GAArB,GAA2BrB,MAAM,CAACc,EAAP,CAAUM,WARtC,eASSnB,MAAM,CAACoB,WAThB,mDAcCpB,MAAM,CAACqB,gBAAP,GAA0B,GAA1B,GAAgCtB,MAAM,CAACc,EAAP,CAAUM,WAd3C,eAeSnB,MAAM,CAACqB,gBAfhB;AArBQ,GAAd;AAyCA,SAAOb,UAAU,KAAK,kBAAf,GAAoCC,KAAK,CAACG,KAA1C,GAAkDH,KAAK,CAACC,OAA/D;AACA,CA3CD;;AA6CA,OAAO,MAAMY,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,uJAkBlBf,mBAlBkB,OAmBlBS,eAnBkB,6rLAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../../utils';\nimport NumberControl from '../../number-control';\nimport { BackdropUI } from '../../input-control/styles/input-control-styles';\nimport type { SelectSize } from '../types';\nimport { space } from '../../ui/utils/space';\n\n// Using `selectSize` instead of `size` to avoid a type conflict with the\n// `size` HTML attribute of the `select` element.\ntype SelectProps = {\n\tselectSize: SelectSize;\n};\n\nexport const Root = styled.div`\n\tbox-sizing: border-box;\n\tposition: relative;\n\n\t/* Target the InputControl's backdrop and make focus styles smoother. */\n\t&&& ${ BackdropUI } {\n\t\ttransition: box-shadow 0.1s linear;\n\t}\n`;\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const ValueInput = styled( NumberControl )`\n\t&&& {\n\t\tinput {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n`;\n\nconst baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 2px 1px;\n\t\t\twidth: 20px;\n\t\t\tcolor: ${ COLORS.gray[ 800 ] };\n\t\t\tfont-size: 8px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: -0.5px;\n\t\t\ttext-transform: uppercase;\n\t\t\ttext-align-last: center;\n\t\t`,\n\t\tlarge: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tmin-width: 24px;\n\t\t\tmax-width: 48px;\n\t\t\theight: 24px;\n\t\t\tmargin-inline-end: ${ space( 2 ) };\n\t\t\tpadding: ${ space( 1 ) };\n\t\t\tcolor: ${ COLORS.ui.theme };\n\t\t\tfont-size: 13px;\n\t\t\tline-height: 1;\n\t\t\ttext-align-last: center;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitLabel = styled.div< SelectProps >`\n\t&&& {\n\t\tpointer-events: none;\n\n\t\t${ baseUnitLabelStyles };\n\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n`;\n\nconst unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\theight: 100%;\n\t\t\tborder: 1px solid transparent;\n\t\t\ttransition: box-shadow 0.1s linear, border 0.1s linear;\n\n\t\t\t${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }\n\n\t\t\t&:not(:disabled):hover {\n\t\t\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tborder: 1px solid ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline-offset: 0;\n\t\t\t\toutline: 2px solid transparent;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`,\n\t\tlarge: css`\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tbox-shadow: 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode\n\t\t\t}\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitSelect = styled.select< SelectProps >`\n\t// The && counteracts <select> styles in WP forms.css\n\t&& {\n\t\tappearance: none;\n\t\tbackground: transparent;\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t\tdisplay: block;\n\t\toutline: none;\n\t\t/* Removing margin ensures focus styles neatly overlay the wrapper. */\n\t\tmargin: 0;\n\t\tmin-height: auto;\n\t\tfont-family: inherit;\n\n\t\t&:not( :disabled ) {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t${ baseUnitLabelStyles };\n\t\t${ unitSelectSizes };\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/styles/unit-control-styles.ts"],"names":["css","COLORS","CONFIG","rtl","NumberControl","BackdropUI","space","ValueInput","baseUnitLabelStyles","selectSize","sizes","default","gray","large","ui","theme","UnitLabel","unitSelectSizes","borderTopLeftRadius","borderBottomLeftRadius","borderFocus","borderWidth","borderWidthFocus","UnitSelect"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAEA;AACA;AACA;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,GAAzB,QAAoC,aAApC;AACA,OAAOC,aAAP,MAA0B,sBAA1B;AACA,SAASC,UAAT,QAA2B,iDAA3B;AAEA,SAASC,KAAT,QAAsB,sBAAtB,C,CAEA;AACA;;AAKA;AACA;AAEA,OAAO,MAAMC,UAAU,GAAG,qBAAQH,aAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,yCAOlBC,UAPkB,q+KAAhB;;AAaP,MAAMG,mBAAmB,GAAG,QAAmC;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AAC9D,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,eAAEX,GAAF,4DAIIC,MAAM,CAACW,IAAP,CAAa,GAAb,CAJJ,mmLADM;AAYbC,IAAAA,KAAK,eAAEb,GAAF,uFAKkBM,KAAK,CAAE,CAAF,CALvB,eAMQA,KAAK,CAAE,CAAF,CANb,aAOML,MAAM,CAACa,EAAP,CAAUC,KAPhB;AAZQ,GAAd;AA6BA,SAAON,UAAU,KAAK,kBAAf,GAAoCC,KAAK,CAACG,KAA1C,GAAkDH,KAAK,CAACC,OAA/D;AACA,CA/BD;;AAiCA,OAAO,MAAMK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,+BAIjBR,mBAJiB,aAMVP,MAAM,CAACW,IAAP,CAAa,GAAb,CANU,k8KAAf;;AAUP,MAAMK,eAAe,GAAG,SAA+C;AAAA,MAA7C;AAAER,IAAAA,UAAU,GAAG;AAAf,GAA6C;AACtE,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,eAAEX,GAAF,mGAKHG,GAAG,CAAE;AAAEe,MAAAA,mBAAmB,EAAE,CAAvB;AAA0BC,MAAAA,sBAAsB,EAAE;AAAlD,KAAF,CAAH,EALG,+CAQgBlB,MAAM,CAACW,IAAP,CAAa,GAAb,CARhB,iCAYgBX,MAAM,CAACa,EAAP,CAAUM,WAZ1B,8BAcDlB,MAAM,CAACmB,WAAP,GAAqB,GAArB,GAA2BpB,MAAM,CAACa,EAAP,CAAUM,WAdpC,2jLADM;AAqBbP,IAAAA,KAAK,eAAEb,GAAF,0EAMOC,MAAM,CAACa,EAAP,CAAUM,WANjB,8BAQClB,MAAM,CAACmB,WAAP,GAAqB,GAArB,GAA2BpB,MAAM,CAACa,EAAP,CAAUM,WARtC,eASSlB,MAAM,CAACmB,WAThB,mDAcCnB,MAAM,CAACoB,gBAAP,GAA0B,GAA1B,GAAgCrB,MAAM,CAACa,EAAP,CAAUM,WAd3C,eAeSlB,MAAM,CAACoB,gBAfhB;AArBQ,GAAd;AAyCA,SAAOb,UAAU,KAAK,kBAAf,GAAoCC,KAAK,CAACG,KAA1C,GAAkDH,KAAK,CAACC,OAA/D;AACA,CA3CD;;AA6CA,OAAO,MAAMY,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,wJAkBlBf,mBAlBkB,OAmBlBS,eAnBkB,q+KAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../../utils';\nimport NumberControl from '../../number-control';\nimport { BackdropUI } from '../../input-control/styles/input-control-styles';\nimport type { SelectSize } from '../types';\nimport { space } from '../../ui/utils/space';\n\n// Using `selectSize` instead of `size` to avoid a type conflict with the\n// `size` HTML attribute of the `select` element.\ntype SelectProps = {\n\tselectSize: SelectSize;\n};\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const ValueInput = styled( NumberControl )`\n\t&&& {\n\t\tinput {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t${ BackdropUI } {\n\t\t\ttransition: box-shadow 0.1s linear;\n\t\t}\n\t}\n`;\n\nconst baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 2px 1px;\n\t\t\twidth: 20px;\n\t\t\tcolor: ${ COLORS.gray[ 800 ] };\n\t\t\tfont-size: 8px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: -0.5px;\n\t\t\ttext-transform: uppercase;\n\t\t\ttext-align-last: center;\n\t\t`,\n\t\tlarge: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tmin-width: 24px;\n\t\t\tmax-width: 48px;\n\t\t\theight: 24px;\n\t\t\tmargin-inline-end: ${ space( 2 ) };\n\t\t\tpadding: ${ space( 1 ) };\n\t\t\tcolor: ${ COLORS.ui.theme };\n\t\t\tfont-size: 13px;\n\t\t\tline-height: 1;\n\t\t\ttext-align-last: center;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitLabel = styled.div< SelectProps >`\n\t&&& {\n\t\tpointer-events: none;\n\n\t\t${ baseUnitLabelStyles };\n\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n`;\n\nconst unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\theight: 100%;\n\t\t\tborder: 1px solid transparent;\n\t\t\ttransition: box-shadow 0.1s linear, border 0.1s linear;\n\n\t\t\t${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }\n\n\t\t\t&:not(:disabled):hover {\n\t\t\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tborder: 1px solid ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline-offset: 0;\n\t\t\t\toutline: 2px solid transparent;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`,\n\t\tlarge: css`\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tbox-shadow: 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode\n\t\t\t}\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitSelect = styled.select< SelectProps >`\n\t// The &&& counteracts <select> styles in WP forms.css\n\t&&& {\n\t\tappearance: none;\n\t\tbackground: transparent;\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t\tdisplay: block;\n\t\toutline: none;\n\t\t/* Removing margin ensures focus styles neatly overlay the wrapper. */\n\t\tmargin: 0;\n\t\tmin-height: auto;\n\t\tfont-family: inherit;\n\n\t\t&:not( :disabled ) {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t${ baseUnitLabelStyles };\n\t\t${ unitSelectSizes };\n\t}\n`;\n"]}

package/build-module/utils/config-values.js

@@ -29,7 +29,6 @@ const TOGGLE_GROUP_CONTROL_PROPS = {
   toggleGroupControlBorderColor: COLORS.ui.border,
   toggleGroupControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor,
   toggleGroupControlBackdropBorderColor: COLORS.ui.border,
-  toggleGroupControlBackdropBoxShadow: 'transparent',
   toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor
 }; // Using Object.assign to avoid creating circular references when emitting
 // TypeScript type declarations.

package/build-module/utils/config-values.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/config-values.js"],"names":["space","COLORS","CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","white","controlTextActiveColor","ui","theme","controlPaddingX","controlPaddingXLarge","controlPaddingXSmall","controlBackgroundColor","controlBorderRadius","controlBorderColor","gray","controlBoxShadow","controlBorderColorHover","controlBoxShadowFocus","controlDestructiveBorderColor","alert","red","controlHeight","controlHeightXSmall","controlHeightSmall","controlHeightLarge","controlHeightXLarge","TOGGLE_GROUP_CONTROL_PROPS","toggleGroupControlBackgroundColor","toggleGroupControlBorderColor","border","toggleGroupControlBackdropBackgroundColor","toggleGroupControlBackdropBorderColor","toggleGroupControlBackdropBoxShadow","toggleGroupControlButtonColorActive","Object","assign","colorDivider","colorScrollbarThumb","colorScrollbarThumbHover","colorScrollbarTrack","elevationIntensity","radiusBlockUi","borderWidth","borderWidthFocus","borderWidthTab","spinnerSize","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeH5","fontSizeH6","fontSizeInputMobile","fontSizeMobile","fontSizeSmall","fontSizeXSmall","fontLineHeightBase","fontWeight","fontWeightHeading","gridBase","cardBorderRadius","cardPaddingXSmall","cardPaddingSmall","cardPaddingMedium","cardPaddingLarge","surfaceBackgroundColor","surfaceBackgroundSubtleColor","surfaceBackgroundTintColor","surfaceBorderColor","surfaceBorderBoldColor","surfaceBorderSubtleColor","surfaceBackgroundTertiaryColor","surfaceColor","transitionDuration","transitionDurationFast","transitionDurationFaster","transitionDurationFastest","transitionTimingFunction","transitionTimingFunctionControl"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { space } from '../ui/utils/space';\nimport { COLORS } from './colors-values';\n\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PADDING_X = '12px';\n\nconst CONTROL_PROPS = {\n\tcontrolSurfaceColor: COLORS.white,\n\tcontrolTextActiveColor: COLORS.ui.theme,\n\tcontrolPaddingX: CONTROL_PADDING_X,\n\tcontrolPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,\n\tcontrolPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,\n\tcontrolBackgroundColor: COLORS.white,\n\tcontrolBorderRadius: '2px',\n\tcontrolBorderColor: COLORS.gray[ 700 ],\n\tcontrolBoxShadow: 'transparent',\n\tcontrolBorderColorHover: COLORS.gray[ 700 ],\n\tcontrolBoxShadowFocus: `0 0 0 0.5px ${ COLORS.ui.theme }`,\n\tcontrolDestructiveBorderColor: COLORS.alert.red,\n\tcontrolHeight: CONTROL_HEIGHT,\n\tcontrolHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,\n\tcontrolHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,\n\tcontrolHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,\n\tcontrolHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,\n};\n\nconst TOGGLE_GROUP_CONTROL_PROPS = {\n\ttoggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,\n\ttoggleGroupControlBorderColor: COLORS.ui.border,\n\ttoggleGroupControlBackdropBackgroundColor:\n\t\tCONTROL_PROPS.controlSurfaceColor,\n\ttoggleGroupControlBackdropBorderColor: COLORS.ui.border,\n\ttoggleGroupControlBackdropBoxShadow: 'transparent',\n\ttoggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {\n\tcolorDivider: 'rgba(0, 0, 0, 0.1)',\n\tcolorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n\tcolorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n\tcolorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n\televationIntensity: 1,\n\tradiusBlockUi: '2px',\n\tborderWidth: '1px',\n\tborderWidthFocus: '1.5px',\n\tborderWidthTab: '4px',\n\tspinnerSize: 16,\n\tfontSize: '13px',\n\tfontSizeH1: 'calc(2.44 * 13px)',\n\tfontSizeH2: 'calc(1.95 * 13px)',\n\tfontSizeH3: 'calc(1.56 * 13px)',\n\tfontSizeH4: 'calc(1.25 * 13px)',\n\tfontSizeH5: '13px',\n\tfontSizeH6: 'calc(0.8 * 13px)',\n\tfontSizeInputMobile: '16px',\n\tfontSizeMobile: '15px',\n\tfontSizeSmall: 'calc(0.92 * 13px)',\n\tfontSizeXSmall: 'calc(0.75 * 13px)',\n\tfontLineHeightBase: '1.2',\n\tfontWeight: 'normal',\n\tfontWeightHeading: '600',\n\tgridBase: '4px',\n\tcardBorderRadius: '2px',\n\tcardPaddingXSmall: `${ space( 2 ) }`,\n\tcardPaddingSmall: `${ space( 4 ) }`,\n\tcardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,\n\tcardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,\n\tsurfaceBackgroundColor: COLORS.white,\n\tsurfaceBackgroundSubtleColor: '#F3F3F3',\n\tsurfaceBackgroundTintColor: '#F5F5F5',\n\tsurfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n\tsurfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n\tsurfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n\tsurfaceBackgroundTertiaryColor: COLORS.white,\n\tsurfaceColor: COLORS.white,\n\ttransitionDuration: '200ms',\n\ttransitionDurationFast: '160ms',\n\ttransitionDurationFaster: '120ms',\n\ttransitionDurationFastest: '100ms',\n\ttransitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n\ttransitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',\n} );\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/config-values.js"],"names":["space","COLORS","CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","white","controlTextActiveColor","ui","theme","controlPaddingX","controlPaddingXLarge","controlPaddingXSmall","controlBackgroundColor","controlBorderRadius","controlBorderColor","gray","controlBoxShadow","controlBorderColorHover","controlBoxShadowFocus","controlDestructiveBorderColor","alert","red","controlHeight","controlHeightXSmall","controlHeightSmall","controlHeightLarge","controlHeightXLarge","TOGGLE_GROUP_CONTROL_PROPS","toggleGroupControlBackgroundColor","toggleGroupControlBorderColor","border","toggleGroupControlBackdropBackgroundColor","toggleGroupControlBackdropBorderColor","toggleGroupControlButtonColorActive","Object","assign","colorDivider","colorScrollbarThumb","colorScrollbarThumbHover","colorScrollbarTrack","elevationIntensity","radiusBlockUi","borderWidth","borderWidthFocus","borderWidthTab","spinnerSize","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeH5","fontSizeH6","fontSizeInputMobile","fontSizeMobile","fontSizeSmall","fontSizeXSmall","fontLineHeightBase","fontWeight","fontWeightHeading","gridBase","cardBorderRadius","cardPaddingXSmall","cardPaddingSmall","cardPaddingMedium","cardPaddingLarge","surfaceBackgroundColor","surfaceBackgroundSubtleColor","surfaceBackgroundTintColor","surfaceBorderColor","surfaceBorderBoldColor","surfaceBorderSubtleColor","surfaceBackgroundTertiaryColor","surfaceColor","transitionDuration","transitionDurationFast","transitionDurationFaster","transitionDurationFastest","transitionTimingFunction","transitionTimingFunctionControl"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { space } from '../ui/utils/space';\nimport { COLORS } from './colors-values';\n\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PADDING_X = '12px';\n\nconst CONTROL_PROPS = {\n\tcontrolSurfaceColor: COLORS.white,\n\tcontrolTextActiveColor: COLORS.ui.theme,\n\tcontrolPaddingX: CONTROL_PADDING_X,\n\tcontrolPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,\n\tcontrolPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,\n\tcontrolBackgroundColor: COLORS.white,\n\tcontrolBorderRadius: '2px',\n\tcontrolBorderColor: COLORS.gray[ 700 ],\n\tcontrolBoxShadow: 'transparent',\n\tcontrolBorderColorHover: COLORS.gray[ 700 ],\n\tcontrolBoxShadowFocus: `0 0 0 0.5px ${ COLORS.ui.theme }`,\n\tcontrolDestructiveBorderColor: COLORS.alert.red,\n\tcontrolHeight: CONTROL_HEIGHT,\n\tcontrolHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,\n\tcontrolHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,\n\tcontrolHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,\n\tcontrolHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,\n};\n\nconst TOGGLE_GROUP_CONTROL_PROPS = {\n\ttoggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,\n\ttoggleGroupControlBorderColor: COLORS.ui.border,\n\ttoggleGroupControlBackdropBackgroundColor:\n\t\tCONTROL_PROPS.controlSurfaceColor,\n\ttoggleGroupControlBackdropBorderColor: COLORS.ui.border,\n\ttoggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {\n\tcolorDivider: 'rgba(0, 0, 0, 0.1)',\n\tcolorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n\tcolorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n\tcolorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n\televationIntensity: 1,\n\tradiusBlockUi: '2px',\n\tborderWidth: '1px',\n\tborderWidthFocus: '1.5px',\n\tborderWidthTab: '4px',\n\tspinnerSize: 16,\n\tfontSize: '13px',\n\tfontSizeH1: 'calc(2.44 * 13px)',\n\tfontSizeH2: 'calc(1.95 * 13px)',\n\tfontSizeH3: 'calc(1.56 * 13px)',\n\tfontSizeH4: 'calc(1.25 * 13px)',\n\tfontSizeH5: '13px',\n\tfontSizeH6: 'calc(0.8 * 13px)',\n\tfontSizeInputMobile: '16px',\n\tfontSizeMobile: '15px',\n\tfontSizeSmall: 'calc(0.92 * 13px)',\n\tfontSizeXSmall: 'calc(0.75 * 13px)',\n\tfontLineHeightBase: '1.2',\n\tfontWeight: 'normal',\n\tfontWeightHeading: '600',\n\tgridBase: '4px',\n\tcardBorderRadius: '2px',\n\tcardPaddingXSmall: `${ space( 2 ) }`,\n\tcardPaddingSmall: `${ space( 4 ) }`,\n\tcardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,\n\tcardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,\n\tsurfaceBackgroundColor: COLORS.white,\n\tsurfaceBackgroundSubtleColor: '#F3F3F3',\n\tsurfaceBackgroundTintColor: '#F5F5F5',\n\tsurfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n\tsurfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n\tsurfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n\tsurfaceBackgroundTertiaryColor: COLORS.white,\n\tsurfaceColor: COLORS.white,\n\ttransitionDuration: '200ms',\n\ttransitionDurationFast: '160ms',\n\ttransitionDurationFaster: '120ms',\n\ttransitionDurationFastest: '100ms',\n\ttransitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n\ttransitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',\n} );\n"]}

package/build-module/utils/hooks/use-update-effect.js

@@ -19,7 +19,11 @@ function useUpdateEffect(effect, deps) {
     }
 
     mounted.current = true;
-    return undefined;
+    return undefined; // Disable reasons:
+    // 1. This hook needs to pass a dep list that isn't an array literal
+    // 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
+    // see https://github.com/WordPress/gutenberg/pull/41166
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 }
 

package/build-module/utils/hooks/use-update-effect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/hooks/use-update-effect.js"],"names":["useRef","useEffect","useUpdateEffect","effect","deps","mounted","current","undefined"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,eAAT,CAA0BC,MAA1B,EAAkCC,IAAlC,EAAyC;AACxC,QAAMC,OAAO,GAAGL,MAAM,CAAE,KAAF,CAAtB;AAEAC,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKI,OAAO,CAACC,OAAb,EAAuB;AACtB,aAAOH,MAAM,EAAb;AACA;;AACDE,IAAAA,OAAO,CAACC,OAAR,GAAkB,IAAlB;AACA,WAAOC,SAAP;AACA,GANQ,EAMNH,IANM,CAAT;AAOA;;AAED,eAAeF,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect( effect, deps ) {\n\tconst mounted = useRef( false );\n\n\tuseEffect( () => {\n\t\tif ( mounted.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmounted.current = true;\n\t\treturn undefined;\n\t}, deps );\n}\n\nexport default useUpdateEffect;\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/hooks/use-update-effect.js"],"names":["useRef","useEffect","useUpdateEffect","effect","deps","mounted","current","undefined"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,eAAT,CAA0BC,MAA1B,EAAkCC,IAAlC,EAAyC;AACxC,QAAMC,OAAO,GAAGL,MAAM,CAAE,KAAF,CAAtB;AACAC,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKI,OAAO,CAACC,OAAb,EAAuB;AACtB,aAAOH,MAAM,EAAb;AACA;;AACDE,IAAAA,OAAO,CAACC,OAAR,GAAkB,IAAlB;AACA,WAAOC,SAAP,CALgB,CAMhB;AACA;AACA;AACA;AACA;AACA,GAXQ,EAWNH,IAXM,CAAT;AAYA;;AAED,eAAeF,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect( effect, deps ) {\n\tconst mounted = useRef( false );\n\tuseEffect( () => {\n\t\tif ( mounted.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmounted.current = true;\n\t\treturn undefined;\n\t\t// Disable reasons:\n\t\t// 1. This hook needs to pass a dep list that isn't an array literal\n\t\t// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps );\n}\n\nexport default useUpdateEffect;\n"]}

package/build-style/style-rtl.css

@@ -244,64 +244,64 @@
   }
 }
 .components-button[aria-expanded=true], .components-button:hover {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button[aria-disabled=true]:hover {
   color: initial;
 }
 .components-button:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 3px solid transparent;
 }
 .components-button.is-primary {
   white-space: nowrap;
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   color: #fff;
   text-decoration: none;
   text-shadow: none;
   outline: 1px solid transparent;
 }
 .components-button.is-primary:hover:not(:disabled) {
-  background: var(--wp-admin-theme-color-darker-10);
+  background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   color: #fff;
 }
 .components-button.is-primary:active:not(:disabled) {
-  background: var(--wp-admin-theme-color-darker-20);
-  border-color: var(--wp-admin-theme-color-darker-20);
+  background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+  border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
   color: #fff;
 }
 .components-button.is-primary:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
   color: rgba(255, 255, 255, 0.4);
-  background: var(--wp-admin-theme-color);
-  border-color: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   opacity: 1;
   outline: none;
 }
 .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   color: #fff;
   background-size: 100px 100%;
   /* stylelint-disable */
-  background-image: linear-gradient(45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%);
+  background-image: linear-gradient(45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 70%);
   /* stylelint-enable */
-  border-color: var(--wp-admin-theme-color);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-secondary, .components-button.is-tertiary {
   outline: 1px solid transparent;
 }
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
   background: #ddd;
-  color: var(--wp-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   box-shadow: none;
 }
 .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) {
-  color: var(--wp-admin-theme-color-darker-10);
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
 }
 .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover {
   color: #828282;
@@ -312,15 +312,15 @@
   outline: none;
 }
 .components-button.is-secondary {
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 1px solid transparent;
   white-space: nowrap;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   background: transparent;
 }
 .components-button.is-tertiary {
   white-space: nowrap;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   background: transparent;
   padding: 6px;
 }
@@ -332,40 +332,23 @@ p + .components-button.is-tertiary {
   margin-right: -6px;
 }
 .components-button.is-destructive {
+  --wp-components-color-accent: #cc1818;
+  --wp-components-color-accent-darker-10: #9e1313;
+  --wp-components-color-accent-darker-20: #710d0d;
+}
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
   color: #cc1818;
   box-shadow: inset 0 0 0 1px #cc1818;
 }
-.components-button.is-destructive:hover:not(:disabled) {
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled) {
   color: #710d0d;
-  box-shadow: inset 0 0 0 1px #710d0d;
 }
-.components-button.is-destructive:focus:not(:disabled) {
-  color: var(--wp-admin-theme-color);
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
 }
-.components-button.is-destructive:active:not(:disabled) {
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled) {
   background: #ccc;
 }
-.components-button.is-destructive.is-primary {
-  color: #fff;
-  background: #cc1818;
-  box-shadow: inset 0 0 0 1px #cc1818;
-}
-.components-button.is-destructive.is-primary:hover:not(:disabled) {
-  color: #fff;
-  background: #710d0d;
-  box-shadow: inset 0 0 0 1px #710d0d;
-}
-.components-button.is-destructive.is-tertiary {
-  box-shadow: none;
-}
-.components-button.is-destructive.is-tertiary:hover:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #cc1818;
-  color: #cc1818;
-}
-.components-button.is-destructive.is-tertiary:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
-  color: #cc1818;
-}
 .components-button.is-link {
   margin: 0;
   padding: 0;
@@ -375,7 +358,7 @@ p + .components-button.is-tertiary {
   background: none;
   outline: none;
   text-align: right;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   text-decoration: underline;
   transition-property: border, background, color;
   transition-duration: 0.05s;
@@ -391,16 +374,6 @@ p + .components-button.is-tertiary {
 .components-button.is-link:focus {
   border-radius: 2px;
 }
-.components-button.is-link.is-destructive {
-  color: #cc1818;
-}
-.components-button.is-link.is-destructive:active:not(:disabled), .components-button.is-link.is-destructive:hover:not(:disabled) {
-  color: #710d0d;
-  background: none;
-}
-.components-button.is-link.is-destructive:focus:not(:disabled) {
-  color: var(--wp-admin-theme-color);
-}
 .components-button:not([aria-disabled=true]):active {
   color: inherit;
 }
@@ -439,7 +412,7 @@ p + .components-button.is-tertiary {
   margin-left: 2px;
 }
 .components-button.has-icon.has-text {
-  justify-content: left;
+  justify-content: start;
 }
 .components-button.has-icon.has-text svg {
   margin-left: 8px;
@@ -452,7 +425,7 @@ p + .components-button.is-tertiary {
   background: #1e1e1e;
 }
 .components-button.is-pressed:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 .components-button.is-pressed:hover:not(:disabled) {
@@ -474,7 +447,7 @@ p + .components-button.is-tertiary {
 
 @keyframes components-button__busy-animation {
   0% {
-    background-position: 200px 0;
+    background-position: right 200px top 0;
   }
 }
 .components-checkbox-control__input[type=checkbox] {
@@ -898,8 +871,8 @@ input.components-combobox-control__input[type=text]:focus {
   font-family: inherit;
   width: 100%;
   background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
-  background-position: 0 0, 25px 25px;
-  background-size: calc(2 * 25px) calc(2 * 25px);
+  background-position: 0 0, 24px 24px;
+  background-size: calc(2 * 24px) calc(2 * 24px);
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
@@ -1893,7 +1866,7 @@ body.is-dragging-components-draggable {
   flex-grow: 1;
   display: flex;
   flex-direction: row;
-  justify-content: left;
+  justify-content: right;
 }
 
 .components-modal__header-icon-container {
@@ -2331,6 +2304,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
   background-color: transparent;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   border-radius: 2px;
   overflow: hidden;
 }
@@ -2346,6 +2321,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.has-illustration .components-placeholder__instructions,
 .components-placeholder.has-illustration .components-button {
   opacity: 0;
+  pointer-events: none;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2360,6 +2336,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .is-selected > .components-placeholder.has-illustration .components-placeholder__instructions,
 .is-selected > .components-placeholder.has-illustration .components-button {
   opacity: 1;
+  pointer-events: auto;
 }
 .components-placeholder.has-illustration::before {
   content: "";
@@ -2414,6 +2391,13 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   outline: 1px solid #1e1e1e;
   box-shadow: none;
 }
+.is-unstyled .components-popover__content {
+  background: none;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+}
 .components-popover.is-expanded .components-popover__content {
   position: static;
   height: calc(100% - 48px);

package/build-style/style.css

@@ -244,64 +244,64 @@
   }
 }
 .components-button[aria-expanded=true], .components-button:hover {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button[aria-disabled=true]:hover {
   color: initial;
 }
 .components-button:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 3px solid transparent;
 }
 .components-button.is-primary {
   white-space: nowrap;
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   color: #fff;
   text-decoration: none;
   text-shadow: none;
   outline: 1px solid transparent;
 }
 .components-button.is-primary:hover:not(:disabled) {
-  background: var(--wp-admin-theme-color-darker-10);
+  background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   color: #fff;
 }
 .components-button.is-primary:active:not(:disabled) {
-  background: var(--wp-admin-theme-color-darker-20);
-  border-color: var(--wp-admin-theme-color-darker-20);
+  background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+  border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
   color: #fff;
 }
 .components-button.is-primary:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
   color: rgba(255, 255, 255, 0.4);
-  background: var(--wp-admin-theme-color);
-  border-color: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   opacity: 1;
   outline: none;
 }
 .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   color: #fff;
   background-size: 100px 100%;
   /* stylelint-disable */
-  background-image: linear-gradient(-45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%);
+  background-image: linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 70%);
   /* stylelint-enable */
-  border-color: var(--wp-admin-theme-color);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-secondary, .components-button.is-tertiary {
   outline: 1px solid transparent;
 }
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
   background: #ddd;
-  color: var(--wp-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   box-shadow: none;
 }
 .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) {
-  color: var(--wp-admin-theme-color-darker-10);
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
 }
 .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover {
   color: #828282;
@@ -312,15 +312,15 @@
   outline: none;
 }
 .components-button.is-secondary {
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 1px solid transparent;
   white-space: nowrap;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   background: transparent;
 }
 .components-button.is-tertiary {
   white-space: nowrap;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   background: transparent;
   padding: 6px;
 }
@@ -332,40 +332,23 @@ p + .components-button.is-tertiary {
   margin-left: -6px;
 }
 .components-button.is-destructive {
+  --wp-components-color-accent: #cc1818;
+  --wp-components-color-accent-darker-10: #9e1313;
+  --wp-components-color-accent-darker-20: #710d0d;
+}
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
   color: #cc1818;
   box-shadow: inset 0 0 0 1px #cc1818;
 }
-.components-button.is-destructive:hover:not(:disabled) {
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled) {
   color: #710d0d;
-  box-shadow: inset 0 0 0 1px #710d0d;
 }
-.components-button.is-destructive:focus:not(:disabled) {
-  color: var(--wp-admin-theme-color);
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
 }
-.components-button.is-destructive:active:not(:disabled) {
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled) {
   background: #ccc;
 }
-.components-button.is-destructive.is-primary {
-  color: #fff;
-  background: #cc1818;
-  box-shadow: inset 0 0 0 1px #cc1818;
-}
-.components-button.is-destructive.is-primary:hover:not(:disabled) {
-  color: #fff;
-  background: #710d0d;
-  box-shadow: inset 0 0 0 1px #710d0d;
-}
-.components-button.is-destructive.is-tertiary {
-  box-shadow: none;
-}
-.components-button.is-destructive.is-tertiary:hover:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #cc1818;
-  color: #cc1818;
-}
-.components-button.is-destructive.is-tertiary:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
-  color: #cc1818;
-}
 .components-button.is-link {
   margin: 0;
   padding: 0;
@@ -375,7 +358,7 @@ p + .components-button.is-tertiary {
   background: none;
   outline: none;
   text-align: left;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   text-decoration: underline;
   transition-property: border, background, color;
   transition-duration: 0.05s;
@@ -391,16 +374,6 @@ p + .components-button.is-tertiary {
 .components-button.is-link:focus {
   border-radius: 2px;
 }
-.components-button.is-link.is-destructive {
-  color: #cc1818;
-}
-.components-button.is-link.is-destructive:active:not(:disabled), .components-button.is-link.is-destructive:hover:not(:disabled) {
-  color: #710d0d;
-  background: none;
-}
-.components-button.is-link.is-destructive:focus:not(:disabled) {
-  color: var(--wp-admin-theme-color);
-}
 .components-button:not([aria-disabled=true]):active {
   color: inherit;
 }
@@ -439,7 +412,7 @@ p + .components-button.is-tertiary {
   margin-right: 2px;
 }
 .components-button.has-icon.has-text {
-  justify-content: left;
+  justify-content: start;
 }
 .components-button.has-icon.has-text svg {
   margin-right: 8px;
@@ -452,7 +425,7 @@ p + .components-button.is-tertiary {
   background: #1e1e1e;
 }
 .components-button.is-pressed:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 .components-button.is-pressed:hover:not(:disabled) {
@@ -899,9 +872,9 @@ input.components-combobox-control__input[type=text]:focus {
   width: 100%;
   /*rtl:begin:ignore*/
   background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
-  background-position: 0 0, 25px 25px;
+  background-position: 0 0, 24px 24px;
   /*rtl:end:ignore*/
-  background-size: calc(2 * 25px) calc(2 * 25px);
+  background-size: calc(2 * 24px) calc(2 * 24px);
   box-sizing: border-box;
   color: #fff;
   cursor: pointer;
@@ -2336,6 +2309,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
   background-color: transparent;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   border-radius: 2px;
   overflow: hidden;
 }
@@ -2351,6 +2326,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.has-illustration .components-placeholder__instructions,
 .components-placeholder.has-illustration .components-button {
   opacity: 0;
+  pointer-events: none;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2365,6 +2341,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .is-selected > .components-placeholder.has-illustration .components-placeholder__instructions,
 .is-selected > .components-placeholder.has-illustration .components-button {
   opacity: 1;
+  pointer-events: auto;
 }
 .components-placeholder.has-illustration::before {
   content: "";
@@ -2419,6 +2396,13 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   outline: 1px solid #1e1e1e;
   box-shadow: none;
 }
+.is-unstyled .components-popover__content {
+  background: none;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+}
 .components-popover.is-expanded .components-popover__content {
   position: static;
   height: calc(100% - 48px);