@wordpress/components 18.0.0 → 19.0.3

package/build-types/unit-control/styles/unit-control-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-control-styles.d.ts","sourceRoot":"","sources":["../../../src/unit-control/styles/unit-control-styles.ts"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,aAAK,WAAW,GAAG;IAClB,UAAU,EAAE,UAAU,CAAC;CACvB,CAAC;AAEF,aAAK,UAAU,GAAG;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,IAAI;;;yGAGhB,CAAC;AAyBF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;uBAYtB,CAAC;AA8CF,eAAO,MAAM,SAAS;;;uHAMrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mIAwBtB,CAAC"}

package/build-types/unit-control/types.d.ts

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import type { SyntheticEvent } from 'react';
+/**
+ * Internal dependencies
+ */
+import type { StateReducer } from '../input-control/reducer/state';
+import type { InputChangeCallback } from '../input-control/types';
+export declare type Value = number | string;
+export declare type SelectSize = 'default' | 'small';
+export declare type WPUnitControlUnit = {
+    /**
+     * The value for the unit, used in a CSS value (e.g `px`).
+     */
+    value: string;
+    /**
+     * The label used in a dropdown selector for the unit.
+     */
+    label: string;
+    /**
+     * Default value for the unit, used when switching units.
+     */
+    default?: Value;
+    /**
+     * An accessible label used by screen readers.
+     */
+    a11yLabel?: string;
+    /**
+     * A step value used when incrementing/decrementing the value.
+     */
+    step?: number;
+};
+export declare type WPUnitControlUnitList = Array<WPUnitControlUnit> | false;
+export declare type UnitControlOnChangeCallback = InputChangeCallback<SyntheticEvent<HTMLSelectElement | HTMLInputElement>, {
+    data?: WPUnitControlUnit;
+}>;
+export declare type UnitSelectControlProps = {
+    /**
+     * Whether the control can be focused via keyboard navigation.
+     *
+     * @default true
+     */
+    isUnitSelectTabbable?: boolean;
+    /**
+     * A callback function invoked when the value is changed.
+     *
+     * @default noop
+     */
+    onChange?: UnitControlOnChangeCallback;
+    /**
+     * Size of the control option. Supports "default" and "small".
+     *
+     * @default 'default'
+     */
+    size?: SelectSize;
+    /**
+     * Current unit.
+     */
+    unit?: string;
+    /**
+     * Available units to select from.
+     *
+     * @default CSS_UNITS
+     */
+    units?: WPUnitControlUnitList;
+};
+export declare type UnitControlProps = UnitSelectControlProps & {
+    __unstableStateReducer?: StateReducer;
+    /**
+     * If `true`, the unit `<select>` is hidden.
+     *
+     * @default false
+     */
+    disableUnits?: boolean;
+    /**
+     * If `true`, the `ENTER` key press is required in order to trigger an `onChange`.
+     * If enabled, a change is also triggered when tabbing away (`onBlur`).
+     *
+     * @default false
+     */
+    isPressEnterToChange?: boolean;
+    /**
+     * If `true`, and the selected unit provides a `default` value, this value is set
+     * when changing units.
+     *
+     * @default false
+     */
+    isResetValueOnUnitChange?: boolean;
+    /**
+     * If this property is added, a label will be generated using label property as the content.
+     */
+    label?: string;
+    /**
+     * Callback when the `unit` changes.
+     *
+     * @default noop
+     */
+    onUnitChange?: UnitControlOnChangeCallback;
+    /**
+     * Current value. If passed as a string, the current unit will be inferred from this value.
+     * For example, a `value` of "50%" will set the current unit to `%`.
+     */
+    value: Value;
+};
+//# sourceMappingURL=types.d.ts.map

package/build-types/unit-control/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,oBAAY,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,oBAAY,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7C,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,qBAAqB,GAAG,KAAK,CAAE,iBAAiB,CAAE,GAAG,KAAK,CAAC;AAEvE,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACpC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,oBAAY,gBAAgB,GAAG,sBAAsB,GAAG;IACvD,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;CACb,CAAC"}

package/build-types/unit-control/unit-select-control.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../ui/context';
+import type { UnitSelectControlProps } from './types';
+export default function UnitSelectControl({ className, isUnitSelectTabbable: isTabbable, onChange, size, unit, units, ...props }: WordPressComponentProps<UnitSelectControlProps, 'select', false>): JSX.Element;
+//# sourceMappingURL=unit-select-control.d.ts.map

package/build-types/unit-control/unit-select-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-select-control.d.ts","sourceRoot":"","sources":["../../src/unit-control/unit-select-control.tsx"],"names":[],"mappings":";AAQA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,SAAS,EACT,oBAAoB,EAAE,UAAiB,EACvC,QAAe,EACf,IAAgB,EAChB,IAAW,EACX,KAAiB,EACjB,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,sBAAsB,EAAE,QAAQ,EAAE,KAAK,CAAE,eAqCpE"}

package/build-types/unit-control/utils.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Internal dependencies
+ */
+import type { Value, WPUnitControlUnit, WPUnitControlUnitList } from './types';
+/**
+ * An array of all available CSS length units.
+ */
+export declare const ALL_CSS_UNITS: WPUnitControlUnit[];
+/**
+ * Units of measurements. `a11yLabel` is used by screenreaders.
+ */
+export declare const CSS_UNITS: WPUnitControlUnit[];
+export declare const DEFAULT_UNIT: WPUnitControlUnit;
+/**
+ * Handles legacy value + unit handling.
+ * This component use to manage both incoming value and units separately.
+ *
+ * Moving forward, ideally the value should be a string that contains both
+ * the value and unit, example: '10px'
+ *
+ * @param  value Value
+ * @param  unit  Unit value
+ * @param  units Units to derive from.
+ * @return The extracted number and unit.
+ */
+export declare function getParsedValue(value: Value, unit?: string, units?: WPUnitControlUnitList): [Value, string | undefined];
+/**
+ * Checks if units are defined.
+ *
+ * @param  units Units to check.
+ * @return Whether units are defined.
+ */
+export declare function hasUnits(units: WPUnitControlUnitList): boolean;
+/**
+ * Parses a number and unit from a value.
+ *
+ * @param  initialValue Value to parse
+ * @param  units        Units to derive from.
+ * @return The extracted number and unit.
+ */
+export declare function parseUnit(initialValue: Value | undefined, units?: WPUnitControlUnitList): [Value, string | undefined];
+/**
+ * Parses a number and unit from a value. Validates parsed value, using fallback
+ * value if invalid.
+ *
+ * @param  next          The next value.
+ * @param  units         Units to derive from.
+ * @param  fallbackValue The fallback value.
+ * @param  fallbackUnit  The fallback value.
+ * @return The extracted value and unit.
+ */
+export declare function getValidParsedUnit(next: Value | undefined, units: WPUnitControlUnitList, fallbackValue: Value, fallbackUnit: string | undefined): [Value, string | undefined];
+/**
+ * Takes a unit value and finds the matching accessibility label for the
+ * unit abbreviation.
+ *
+ * @param  unit Unit value (example: px)
+ * @return a11y label for the unit abbreviation
+ */
+export declare function parseA11yLabelForUnit(unit: string): string | undefined;
+/**
+ * Filters available units based on values defined by the unit setting/property.
+ *
+ * @param  unitSetting Collection of preferred unit value strings.
+ * @param  units       Collection of available unit objects.
+ *
+ * @return Filtered units based on settings.
+ */
+export declare function filterUnitsWithSettings(unitSetting: string[] | undefined, units: WPUnitControlUnitList): Array<WPUnitControlUnit>;
+/**
+ * Custom hook to retrieve and consolidate units setting from add_theme_support().
+ * TODO: ideally this hook shouldn't be needed
+ * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823
+ *
+ * @param  args                An object containing units, settingPath & defaultUnits.
+ * @param  args.units          Collection of all potentially available units.
+ * @param  args.availableUnits Collection of unit value strings for filtering available units.
+ * @param  args.defaultValues  Collection of default values for defined units. Example: { px: '350', em: '15' }.
+ *
+ * @return Filtered units based on settings.
+ */
+export declare const useCustomUnits: ({ units, availableUnits, defaultValues, }: {
+    units?: WPUnitControlUnitList | undefined;
+    availableUnits?: string[] | undefined;
+    defaultValues: Record<string, Value>;
+}) => WPUnitControlUnitList;
+/**
+ * Get available units with the unit for the currently selected value
+ * prepended if it is not available in the list of units.
+ *
+ * This is useful to ensure that the current value's unit is always
+ * accurately displayed in the UI, even if the intention is to hide
+ * the availability of that unit.
+ *
+ * @param  currentValue Selected value to parse.
+ * @param  legacyUnit   Legacy unit value, if currentValue needs it appended.
+ * @param  units        List of available units.
+ *
+ * @return A collection of units containing the unit for the current value.
+ */
+export declare function getUnitsWithCurrentUnit(currentValue: Value, legacyUnit: string | undefined, units?: WPUnitControlUnitList): WPUnitControlUnitList;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/unit-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAgH/E;;GAEG;AACH,eAAO,MAAM,aAAa,qBAA4B,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS,qBAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAAc,CAAC;AAExC;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC7B,KAAK,EAAE,KAAK,EACZ,IAAI,CAAC,EAAE,MAAM,EACb,KAAK,CAAC,EAAE,qBAAqB,GAC3B,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAE,CAI/B;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAE,KAAK,EAAE,qBAAqB,GAAI,OAAO,CAEhE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CACxB,YAAY,EAAE,KAAK,GAAG,SAAS,EAC/B,KAAK,GAAE,qBAAqC,GAC1C,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAE,CAoB/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CACjC,IAAI,EAAE,KAAK,GAAG,SAAS,EACvB,KAAK,EAAE,qBAAqB,EAC5B,aAAa,EAAE,KAAK,EACpB,YAAY,EAAE,MAAM,GAAG,SAAS,GAC9B,CAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAE,CAsB/B;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,GAAG,SAAS,CAGxE;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACtC,WAAW,sBAAsB,EACjC,KAAK,EAAE,qBAAqB,GAC1B,KAAK,CAAE,iBAAiB,CAAE,CAM5B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc;;;mBAOX,OAAQ,MAAM,EAAE,KAAK,CAAE;MAClC,qBAgBJ,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACtC,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,MAAM,GAAG,SAAS,EAC9B,KAAK,GAAE,qBAAqC,GAC1C,qBAAqB,CAsBvB"}

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

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.js"],"names":[],"mappings":"AAKA;;;;;;;;;;GAUG;AACH,gCARW,MAAM,UACN,MAAM,GACL,MAAM,CASjB"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.js"],"names":[],"mappings":"AAQA;;;;;;;;;;GAUG;AACH,gCARW,MAAM,UACN,MAAM,GACL,MAAM,CAQjB"}

package/build-types/utils/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export { default as useControlledState } from "./use-controlled-state";
-export { default as useJumpStep } from "./use-jump-step";
 export { default as useUpdateEffect } from "./use-update-effect";
+export { useCombinedRef } from "./use-combined-ref";
 export { useControlledValue } from "./use-controlled-value";
 export { useCx } from "./use-cx";
 export { useLatestRef } from "./use-latest-ref";

package/build-types/utils/hooks/use-combined-ref.d.ts

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { MutableRefObject, RefCallback } from 'react';
+declare type Ref<T> = MutableRefObject<T | null> | RefCallback<T | null>;
+export declare function useCombinedRef<T extends HTMLElement>(...refs: Ref<T>[]): MutableRefObject<null>;
+export {};
+//# sourceMappingURL=use-combined-ref.d.ts.map

package/build-types/utils/hooks/use-combined-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-combined-ref.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-combined-ref.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3D,aAAK,GAAG,CAAE,CAAC,IAAK,gBAAgB,CAAE,CAAC,GAAG,IAAI,CAAE,GAAG,WAAW,CAAE,CAAC,GAAG,IAAI,CAAE,CAAC;AAEvE,wBAAgB,cAAc,CAAE,CAAC,SAAS,WAAW,EAAI,GAAG,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,0BAgB3E"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "18.0.0",
+	"version": "19.0.3",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,25 +29,25 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@babel/runtime": "^7.13.10",
+		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.4.0",
 		"@emotion/css": "^11.1.3",
 		"@emotion/react": "^11.4.1",
 		"@emotion/styled": "^11.3.0",
 		"@emotion/utils": "1.0.0",
-		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/compose": "^5.0.3",
-		"@wordpress/date": "^4.2.2",
-		"@wordpress/deprecated": "^3.2.2",
-		"@wordpress/dom": "^3.2.4",
-		"@wordpress/element": "^4.0.2",
-		"@wordpress/hooks": "^3.2.1",
-		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.0.0",
-		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/primitives": "^3.0.2",
-		"@wordpress/rich-text": "^5.0.3",
+		"@wordpress/a11y": "^3.2.4",
+		"@wordpress/compose": "^5.0.6",
+		"@wordpress/date": "^4.2.3",
+		"@wordpress/deprecated": "^3.2.3",
+		"@wordpress/dom": "^3.2.7",
+		"@wordpress/element": "^4.0.4",
+		"@wordpress/hooks": "^3.2.2",
+		"@wordpress/i18n": "^4.2.4",
+		"@wordpress/icons": "^6.1.1",
+		"@wordpress/is-shallow-equal": "^4.2.1",
+		"@wordpress/keycodes": "^3.2.4",
+		"@wordpress/primitives": "^3.0.4",
+		"@wordpress/rich-text": "^5.0.6",
 		"@wordpress/warning": "^2.2.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -66,7 +66,6 @@
 		"react-use-gesture": "^9.0.0",
 		"reakit": "^1.3.8",
 		"rememo": "^3.0.0",
-		"tinycolor2": "^1.4.2",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
@@ -75,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8f7f052bc04e3f4eb50f479ced14be1489b9fa79"
+	"gitHead": "c6594e767659bd3289e633a17c44fdf6a4933194"
 }

package/src/alignment-matrix-control/stories/index.js

@@ -19,6 +19,9 @@ const alignmentOptions = ALIGNMENTS.reduce( ( options, item ) => {
 export default {
 	title: 'Components/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {

package/src/angle-picker-control/index.js

@@ -49,7 +49,9 @@ export default function AnglePickerControl( {
 						<Spacer
 							as={ Text }
 							marginRight={ space( 3 ) }
-							color="blue"
+							style={ {
+								color: 'var( --wp-admin-theme-color )',
+							} }
 						>
 							°
 						</Spacer>

package/src/angle-picker-control/styles/angle-picker-control-styles.js

@@ -36,9 +36,9 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: #3858e9;
+	background: ${ COLORS.admin.theme };
 	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid #3858e9;
+	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.admin.theme };
 	bottom: 0;
 	box-sizing: border-box;
 	display: block;

package/src/base-control/index.js

@@ -74,7 +74,7 @@ function BaseControl( {
 			</StyledField>
 			{ !! help && (
 				<StyledHelp
-					id={ id + '__help' }
+					id={ id ? id + '__help' : undefined }
 					className="components-base-control__help"
 				>
 					{ help }

package/src/base-control/stories/index.js

@@ -9,7 +9,13 @@ import { boolean, text } from '@storybook/addon-knobs';
 import BaseControl from '../';
 import TextareaControl from '../../textarea-control';
 
-export default { title: 'Components/BaseControl', component: BaseControl };
+export default {
+	title: 'Components/BaseControl',
+	component: BaseControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const id = text( 'Id', 'textarea-1' );

package/src/button/stories/index.js

@@ -20,7 +20,13 @@ import {
 import './style.css';
 import Button from '../';
 
-export default { title: 'Components/Button', component: Button };
+export default {
+	title: 'Components/Button',
+	component: Button,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const label = text( 'Label', 'Default Button' );

package/src/card/card/hook.js

@@ -59,8 +59,6 @@ export function useCard( props ) {
 			styles.Card,
 			isBorderless && styles.boxShadowless,
 			isRounded && styles.rounded,
-			// This classname is added for legacy compatibility reasons.
-			'components-card',
 			className
 		);
 	}, [ className, isBorderless, isRounded ] );

package/src/card/stories/index.js

@@ -21,6 +21,9 @@ import Button from '../../button';
 export default {
 	component: Card,
 	title: 'Components/Card',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const KNOBS_GROUPS = {

package/src/card/test/__snapshots__/index.js.snap

@@ -157,8 +157,8 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card components-card css-ssx2ib-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
-+     class="components-surface components-card components-card css-1vyvcpq-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+-     class="components-surface components-card css-ssx2ib-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
++     class="components-surface components-card css-1vyvcpq-View-Surface-getBorders-primary-Card-rounded em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
@@ -375,7 +375,7 @@ Object {
 <body>
     <div>
       <div
-        class="components-surface components-card components-card emotion-0 emotion-1"
+        class="components-surface components-card emotion-0 emotion-1"
         data-wp-c16t="true"
         data-wp-component="Card"
       >
@@ -630,7 +630,7 @@ Object {
 
 <div>
     <div
-      class="components-surface components-card components-card emotion-0 emotion-1"
+      class="components-surface components-card emotion-0 emotion-1"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
@@ -850,7 +850,7 @@ exports[`Card Card component should warn when the isElevated prop is passed 1`]
 
 <div>
   <div
-    class="components-surface components-card components-card emotion-0 emotion-1"
+    class="components-surface components-card emotion-0 emotion-1"
     data-wp-c16t="true"
     data-wp-component="Card"
   >

package/src/checkbox-control/stories/index.js

@@ -16,6 +16,9 @@ import CheckboxControl from '../';
 export default {
 	title: 'Components/CheckboxControl',
 	component: CheckboxControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 const CheckboxControlWithState = ( { checked, ...props } ) => {

package/src/circular-option-picker/style.scss

@@ -11,10 +11,10 @@ $color-palette-circle-spacing: 12px;
 		justify-content: flex-end;
 	}
 
-	// Effectively negates the end swatch spacing to keep the swatches
-	// from wrapping before necessary.
 	.components-circular-option-picker__swatches {
-		margin-right: -$color-palette-circle-spacing;
+		display: flex;
+		flex-wrap: wrap;
+		gap: $color-palette-circle-spacing;
 	}
 }
 
@@ -22,8 +22,6 @@ $color-palette-circle-spacing: 12px;
 	display: inline-block;
 	height: $color-palette-circle-size;
 	width: $color-palette-circle-size;
-	margin-right: $color-palette-circle-spacing;
-	margin-bottom: $color-palette-circle-spacing;
 	vertical-align: top;
 	transform: scale(1);
 	transition: 100ms transform ease;