@wordpress/components 19.4.1 → 19.5.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+## 19.5.0 (2022-02-23)
+
+### Bug Fix
+
+-   Fix spin buttons of number inputs in Safari ([#38840](https://github.com/WordPress/gutenberg/pull/38840))
+
+### Enhancements
+
+-   `TreeGrid`: Add tests for `onCollapseRow`, `onExpandRow`, and `onFocusRow` callback functions. ([#38942](https://github.com/WordPress/gutenberg/pull/38942)).
+
 ## 19.4.0 (2022-02-10)
 
 ### Bug Fix
@@ -20,10 +30,14 @@
 -   Update the visual design of the `Spinner` component. ([#37551](https://github.com/WordPress/gutenberg/pull/37551))
 -  `TreeGrid` accessibility enhancements around the expand/collapse functionality. ([#38358](https://github.com/WordPress/gutenberg/pull/38358))
 -  `TreeGrid` accessibility: improve browser support for Left Arrow focus to parent row in child row.  ([#38639](https://github.com/WordPress/gutenberg/pull/38639))
+-  `TreeGrid` accessibility: Add Home/End keys for better keyboard navigation. ([#38679](https://github.com/WordPress/gutenberg/pull/38679))
+-   Add `resolvePoint` prop to `FocalPointPicker` to allow updating the value of the picker after a user interaction ([#38247](https://github.com/WordPress/gutenberg/pull/38247))
+-  `TreeGrid`: Allow SHIFT key to be held, and add `onFocusRow` callback to the `TreeGrid` component, fired when focus is shifted from one row to another via Up and Down arrow keys. ([#38314](https://github.com/WordPress/gutenberg/pull/38314))
 
 ### Experimental
 
 -   `Navigator`: rename `push`/`pop` to `goTo`/`goBack` ([#38582](https://github.com/WordPress/gutenberg/pull/38582))
+-   `Navigator`: add `NavigatorButton` and `NavigatorBackButton` components ([#38634](https://github.com/WordPress/gutenberg/pull/38634))
 
 ## 19.3.0 (2022-01-27)
 
@@ -31,10 +45,11 @@
 
 -   Refine `ExternalLink` to be same size as the text, to appear more as a glyph than an icon. ([#37859](https://github.com/WordPress/gutenberg/pull/37859))
 -   Updated `ToolsPanel` header icon to only show "plus" icon when all items are optional and all are currently hidden ([#38262](https://github.com/WordPress/gutenberg/pull/38262))
-- `TreeGrid`: Fix keyboard navigation for expand/collapse table rows in Firefox ([#37983](https://github.com/WordPress/gutenberg/pull/37983))
+-  `TreeGrid`: Fix keyboard navigation for expand/collapse table rows in Firefox ([#37983](https://github.com/WordPress/gutenberg/pull/37983))
 
 ### Bug Fix
 
+-   Update the `HexInput` component to accept a pasted value that contains a starting #
 -   Update `ToggleGroupControl` background active state to use a simple background color instead of animated backdrop ([38008](https://github.com/WordPress/gutenberg/pull/38008))
 -   Update label spacing for the `BoxControl`, `CustomGradientPicker`, `FormTokenField`, `InputControl`, and `ToolsPanel` components to use a bottom margin of `8px` for consistency. ([#37844](https://github.com/WordPress/gutenberg/pull/37844))
 -   Add missing styles to the `BaseControl.VisualLabel` component. ([#37747](https://github.com/WordPress/gutenberg/pull/37747))

package/CONTRIBUTING.md

@@ -32,7 +32,11 @@ In these situations, one possible approach is to "soft-deprecate" a given legacy
 
 When adding new components or new props to existing components, it's recommended to prefix them with `__unstable` or `__experimental` until they're stable enough to be exposed as part of the public API.
 
-Learn more on [How to preserve backward compatibility for a React Component](/docs/contributors/code/backward-compatibility.md#how-to-preserve-backward-compatibility-for-a-react-component) and [Experimental and Unstable APIs](/docs/contributors/code/coding-guidelines.md#experimental-and-unstable-apis).
+### Learn more
+
+- [How to preserve backward compatibility for a React Component](/docs/contributors/code/backward-compatibility.md#how-to-preserve-backward-compatibility-for-a-react-component)
+- [Experimental and Unstable APIs](/docs/contributors/code/coding-guidelines.md#experimental-and-unstable-apis)
+- [Deprecating styles](#deprecating-styles)
 
 <!-- ## Polymorphic Components (i.e. the `as` prop)
 
@@ -141,7 +145,7 @@ function useExampleComponent( props: PolymorphicComponentProps< ExampleProps, 'd
 // in `component.tsx`
 function Example(
 	props: PolymorphicComponentProps< ExampleProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: React.ForwardedRef< any >
 ) {
 	const exampleProps = useExampleComponent( props );
 
@@ -180,6 +184,69 @@ All new component should be styled using [Emotion](https://emotion.sh/docs/intro
 
 Note: Instead of using Emotion's standard `cx` function, the custom [`useCx` hook](/packages/components/src/utils/hooks/use-cx.ts) should be used instead.
 
+
+### Deprecating styles
+
+Changing the styles of a non-experimental component must be done with care. To prevent serious breakage in third-party usage, in some cases we may want a grace period before fully removing the old styles. This can be done by temporarily placing the new styles behind a feature flag prop prefixed by `__next`, accompanied by a `deprecate()` warning in the console. The feature flag should be opt-in (false by default), and have a reasonably descriptive name (**not** `__nextHasNewStyles`). A descriptive name allows for multiple deprecations to proceed in parallel, separated by concerns or by deprecation version.
+
+```jsx
+// component.tsx
+import deprecated from '@wordpress/deprecated';
+import { Wrapper } from './styles.ts';
+
+function MyComponent({ __nextHasNoOuterMargins = false }) {
+	if ( ! __nextHasNoOuterMargins ) {
+		deprecated( 'Outer margin styles for wp.components.MyComponent', {
+			since: '6.0',
+			version: '6.2', // Set a reasonable grace period depending on impact
+			hint:
+				'Set the `__nextHasNoOuterMargins` prop to true to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+	return <Wrapper __nextHasNoOuterMargins={__nextHasNoOuterMargins} />
+}
+```
+
+Styles should be structured so the deprecated styles are cleanly encapsulated, and can be easily removed when the deprecation version arrives.
+
+```js
+// styles.ts
+const deprecatedMargins = ({ __nextHasNoOuterMargins }) => {
+  if ( ! __nextHasNoOuterMargins ) {
+    return css`
+      margin: 8px;
+    `;
+  }
+};
+
+export const Wrapper = styled.div`
+  margin: 0;
+
+  ${deprecatedMargins}
+`;
+```
+
+Once deprecated, code examples in docs/stories should include the opt-in prop set to `true` so that new consumers are encouraged to adopt it from the start.
+
+Remember to [add a **Needs Dev Note** label](/docs/contributors/code/backward-compatibility.md##dev-notes) to the pull request so third-party developers can be informed of the deprecation.
+
+When the grace period is over and the deprecation version arrives, the `__next*` prop, deprecation notice, and deprecated styles should all be completely removed from the codebase.
+
+#### Criteria for putting styles changes behind a feature flag
+
+Not all style changes justify a formal deprecation process. The main thing to look for is whether the changes could cause layouts to break in an obvious or harmful way, given that the component is being used in a standard fashion.
+
+##### DOES need formal deprecation
+
+- Removing an outer margin.
+- Substantial changes to width/height, such as adding or removing a size restriction.
+
+##### DOES NOT need formal deprecation
+
+- Breakage only occurs in non-standard usage, such as when the consumer is overriding component internals.
+- Minor layout shifts of a few pixels.
+- Internal layout changes of a higher-level component.
+
 ## Context system
 
 The `@wordpress/components` context system is based on [React's `Context` API](https://reactjs.org/docs/context.html), and is a way for components to adapt to the "context" they're being rendered in.

package/build/box-control/unit-control.js

@@ -13,7 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _lodash = require("lodash");
 
-var _reactUseGesture = require("react-use-gesture");
+var _react = require("@use-gesture/react");
 
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 
@@ -37,7 +37,7 @@ function BoxUnitControl(_ref) {
     value,
     ...props
   } = _ref;
-  const bindHoverGesture = (0, _reactUseGesture.useHover)(_ref2 => {
+  const bindHoverGesture = (0, _react.useHover)(_ref2 => {
     let {
       event,
       ...state

package/build/box-control/unit-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/unit-control.js"],"names":["BoxUnitControl","isFirst","isLast","isOnly","onHoverOn","noop","onHoverOff","label","value","props","bindHoverGesture","event","state","hovering","Tooltip","children","text"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIe,SAASA,cAAT,OASX;AAAA,MAToC;AACvCC,IAAAA,OADuC;AAEvCC,IAAAA,MAFuC;AAGvCC,IAAAA,MAHuC;AAIvCC,IAAAA,SAAS,GAAGC,YAJ2B;AAKvCC,IAAAA,UAAU,GAAGD,YAL0B;AAMvCE,IAAAA,KANuC;AAOvCC,IAAAA,KAPuC;AAQvC,OAAGC;AARoC,GASpC;AACH,QAAMC,gBAAgB,GAAG,+BAAU,SAA2B;AAAA,QAAzB;AAAEC,MAAAA,KAAF;AAAS,SAAGC;AAAZ,KAAyB;;AAC7D,QAAKA,KAAK,CAACC,QAAX,EAAsB;AACrBT,MAAAA,SAAS,CAAEO,KAAF,EAASC,KAAT,CAAT;AACA,KAFD,MAEO;AACNN,MAAAA,UAAU,CAAEK,KAAF,EAASC,KAAT,CAAV;AACA;AACD,GANwB,CAAzB;AAQA,SACC,4BAAC,oCAAD,EAAyBF,gBAAgB,EAAzC,EACC,4BAAC,OAAD;AAAS,IAAA,IAAI,EAAGH;AAAhB,KACC,4BAAC,6BAAD;AACC,kBAAaA,KADd;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,cAAc,MAHf;AAIC,IAAA,OAAO,EAAGN,OAJX;AAKC,IAAA,MAAM,EAAGC,MALV;AAMC,IAAA,MAAM,EAAGC,MANV;AAOC,IAAA,oBAAoB,MAPrB;AAQC,IAAA,wBAAwB,EAAG,KAR5B;AASC,IAAA,KAAK,EAAGK;AATT,KAUMC,KAVN,EADD,CADD,CADD;AAkBA;;AAED,SAASK,OAAT,QAAuC;AAAA,MAArB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAqB;AACtC,MAAK,CAAEA,IAAP,EAAc,OAAOD,QAAP;AAEd;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;AACC,SACC,4BAAC,gBAAD;AAAa,IAAA,IAAI,EAAGC,IAApB;AAA2B,IAAA,QAAQ,EAAC;AAApC,KACC,yCAAOD,QAAP,CADD,CADD;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport { useHover } from 'react-use-gesture';\n\n/**\n * Internal dependencies\n */\nimport BaseTooltip from '../tooltip';\nimport { UnitControlWrapper, UnitControl } from './styles/box-control-styles';\n\nexport default function BoxUnitControl( {\n\tisFirst,\n\tisLast,\n\tisOnly,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tlabel,\n\tvalue,\n\t...props\n} ) {\n\tconst bindHoverGesture = useHover( ( { event, ...state } ) => {\n\t\tif ( state.hovering ) {\n\t\t\tonHoverOn( event, state );\n\t\t} else {\n\t\t\tonHoverOff( event, state );\n\t\t}\n\t} );\n\n\treturn (\n\t\t<UnitControlWrapper { ...bindHoverGesture() }>\n\t\t\t<Tooltip text={ label }>\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\thideHTMLArrows\n\t\t\t\t\tisFirst={ isFirst }\n\t\t\t\t\tisLast={ isLast }\n\t\t\t\t\tisOnly={ isOnly }\n\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\tisResetValueOnUnitChange={ false }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</UnitControlWrapper>\n\t);\n}\n\nfunction Tooltip( { children, text } ) {\n\tif ( ! text ) return children;\n\n\t/**\n\t * Wrapping the children in a `<div />` as Tooltip as it attempts\n\t * to render the <UnitControl />. Using a plain `<div />` appears to\n\t * resolve this issue.\n\t *\n\t * Originally discovered and referenced here:\n\t * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\t */\n\treturn (\n\t\t<BaseTooltip text={ text } position=\"top\">\n\t\t\t<div>{ children }</div>\n\t\t</BaseTooltip>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/unit-control.js"],"names":["BoxUnitControl","isFirst","isLast","isOnly","onHoverOn","noop","onHoverOff","label","value","props","bindHoverGesture","event","state","hovering","Tooltip","children","text"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIe,SAASA,cAAT,OASX;AAAA,MAToC;AACvCC,IAAAA,OADuC;AAEvCC,IAAAA,MAFuC;AAGvCC,IAAAA,MAHuC;AAIvCC,IAAAA,SAAS,GAAGC,YAJ2B;AAKvCC,IAAAA,UAAU,GAAGD,YAL0B;AAMvCE,IAAAA,KANuC;AAOvCC,IAAAA,KAPuC;AAQvC,OAAGC;AARoC,GASpC;AACH,QAAMC,gBAAgB,GAAG,qBAAU,SAA2B;AAAA,QAAzB;AAAEC,MAAAA,KAAF;AAAS,SAAGC;AAAZ,KAAyB;;AAC7D,QAAKA,KAAK,CAACC,QAAX,EAAsB;AACrBT,MAAAA,SAAS,CAAEO,KAAF,EAASC,KAAT,CAAT;AACA,KAFD,MAEO;AACNN,MAAAA,UAAU,CAAEK,KAAF,EAASC,KAAT,CAAV;AACA;AACD,GANwB,CAAzB;AAQA,SACC,4BAAC,oCAAD,EAAyBF,gBAAgB,EAAzC,EACC,4BAAC,OAAD;AAAS,IAAA,IAAI,EAAGH;AAAhB,KACC,4BAAC,6BAAD;AACC,kBAAaA,KADd;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,cAAc,MAHf;AAIC,IAAA,OAAO,EAAGN,OAJX;AAKC,IAAA,MAAM,EAAGC,MALV;AAMC,IAAA,MAAM,EAAGC,MANV;AAOC,IAAA,oBAAoB,MAPrB;AAQC,IAAA,wBAAwB,EAAG,KAR5B;AASC,IAAA,KAAK,EAAGK;AATT,KAUMC,KAVN,EADD,CADD,CADD;AAkBA;;AAED,SAASK,OAAT,QAAuC;AAAA,MAArB;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAqB;AACtC,MAAK,CAAEA,IAAP,EAAc,OAAOD,QAAP;AAEd;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;AACC,SACC,4BAAC,gBAAD;AAAa,IAAA,IAAI,EAAGC,IAApB;AAA2B,IAAA,QAAQ,EAAC;AAApC,KACC,yCAAOD,QAAP,CADD,CADD;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport { useHover } from '@use-gesture/react';\n\n/**\n * Internal dependencies\n */\nimport BaseTooltip from '../tooltip';\nimport { UnitControlWrapper, UnitControl } from './styles/box-control-styles';\n\nexport default function BoxUnitControl( {\n\tisFirst,\n\tisLast,\n\tisOnly,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tlabel,\n\tvalue,\n\t...props\n} ) {\n\tconst bindHoverGesture = useHover( ( { event, ...state } ) => {\n\t\tif ( state.hovering ) {\n\t\t\tonHoverOn( event, state );\n\t\t} else {\n\t\t\tonHoverOff( event, state );\n\t\t}\n\t} );\n\n\treturn (\n\t\t<UnitControlWrapper { ...bindHoverGesture() }>\n\t\t\t<Tooltip text={ label }>\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\thideHTMLArrows\n\t\t\t\t\tisFirst={ isFirst }\n\t\t\t\t\tisLast={ isLast }\n\t\t\t\t\tisOnly={ isOnly }\n\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\tisResetValueOnUnitChange={ false }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</UnitControlWrapper>\n\t);\n}\n\nfunction Tooltip( { children, text } ) {\n\tif ( ! text ) return children;\n\n\t/**\n\t * Wrapping the children in a `<div />` as Tooltip as it attempts\n\t * to render the <UnitControl />. Using a plain `<div />` appears to\n\t * resolve this issue.\n\t *\n\t * Originally discovered and referenced here:\n\t * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\t */\n\treturn (\n\t\t<BaseTooltip text={ text } position=\"top\">\n\t\t\t<div>{ children }</div>\n\t\t</BaseTooltip>\n\t);\n}\n"]}

package/build/card/card/component.js

@@ -45,7 +45,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                            forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                   forwardedRef
  */
 function Card(props, forwardedRef) {
   const {
@@ -60,7 +60,7 @@ function Card(props, forwardedRef) {
   const cx = (0, _useCx.useCx)();
   const elevationClassName = (0, _element.useMemo)(() => cx( /*#__PURE__*/(0, _react.css)({
     borderRadius: elevationBorderRadius
-  }, process.env.NODE_ENV === "production" ? "" : ";label:elevationClassName;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY2FyZC9jYXJkL2NvbXBvbmVudC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q1kiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jYXJkL2NhcmQvY29tcG9uZW50LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNvbnRleHRDb25uZWN0LCBDb250ZXh0U3lzdGVtUHJvdmlkZXIgfSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IEVsZXZhdGlvbiB9IGZyb20gJy4uLy4uL2VsZXZhdGlvbic7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vLi4vdmlldyc7XG5pbXBvcnQgKiBhcyBzdHlsZXMgZnJvbSAnLi4vc3R5bGVzJztcbmltcG9ydCB7IHVzZUNhcmQgfSBmcm9tICcuL2hvb2snO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi8uLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcblxuLyoqXG4gKiBAcGFyYW0ge2ltcG9ydCgnLi4vLi4vdWkvY29udGV4dCcpLldvcmRQcmVzc0NvbXBvbmVudFByb3BzPGltcG9ydCgnLi4vdHlwZXMnKS5Qcm9wcywgJ2Rpdic+fSBwcm9wc1xuICogQHBhcmFtIHtpbXBvcnQoJ3JlYWN0JykuUmVmPGFueT59ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZm9yd2FyZGVkUmVmXG4gKi9cbmZ1bmN0aW9uIENhcmQoIHByb3BzLCBmb3J3YXJkZWRSZWYgKSB7XG5cdGNvbnN0IHtcblx0XHRjaGlsZHJlbixcblx0XHRlbGV2YXRpb24sXG5cdFx0aXNCb3JkZXJsZXNzLFxuXHRcdGlzUm91bmRlZCxcblx0XHRzaXplLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNhcmQoIHByb3BzICk7XG5cdGNvbnN0IGVsZXZhdGlvbkJvcmRlclJhZGl1cyA9IGlzUm91bmRlZCA/IENPTkZJRy5jYXJkQm9yZGVyUmFkaXVzIDogMDtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgZWxldmF0aW9uQ2xhc3NOYW1lID0gdXNlTWVtbyhcblx0XHQoKSA9PiBjeCggY3NzKCB7IGJvcmRlclJhZGl1czogZWxldmF0aW9uQm9yZGVyUmFkaXVzIH0gKSApLFxuXHRcdFsgY3gsIGVsZXZhdGlvbkJvcmRlclJhZGl1cyBdXG5cdCk7XG5cblx0Y29uc3QgY29udGV4dFByb3ZpZGVyVmFsdWUgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgY29udGV4dFByb3BzID0ge1xuXHRcdFx0c2l6ZSxcblx0XHRcdGlzQm9yZGVybGVzcyxcblx0XHR9O1xuXHRcdHJldHVybiB7XG5cdFx0XHRDYXJkQm9keTogY29udGV4dFByb3BzLFxuXHRcdFx0Q2FyZEhlYWRlcjogY29udGV4dFByb3BzLFxuXHRcdFx0Q2FyZEZvb3RlcjogY29udGV4dFByb3BzLFxuXHRcdH07XG5cdH0sIFsgaXNCb3JkZXJsZXNzLCBzaXplIF0gKTtcblxuXHRyZXR1cm4gKFxuXHRcdDxDb250ZXh0U3lzdGVtUHJvdmlkZXIgdmFsdWU9eyBjb250ZXh0UHJvdmlkZXJWYWx1ZSB9PlxuXHRcdFx0PFZpZXcgeyAuLi5vdGhlclByb3BzIH0gcmVmPXsgZm9yd2FyZGVkUmVmIH0+XG5cdFx0XHRcdDxWaWV3IGNsYXNzTmFtZT17IGN4KCBzdHlsZXMuQ29udGVudCApIH0+eyBjaGlsZHJlbiB9PC9WaWV3PlxuXHRcdFx0XHQ8RWxldmF0aW9uXG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgZWxldmF0aW9uQ2xhc3NOYW1lIH1cblx0XHRcdFx0XHRpc0ludGVyYWN0aXZlPXsgZmFsc2UgfVxuXHRcdFx0XHRcdHZhbHVlPXsgZWxldmF0aW9uID8gMSA6IDAgfVxuXHRcdFx0XHQvPlxuXHRcdFx0XHQ8RWxldmF0aW9uXG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgZWxldmF0aW9uQ2xhc3NOYW1lIH1cblx0XHRcdFx0XHRpc0ludGVyYWN0aXZlPXsgZmFsc2UgfVxuXHRcdFx0XHRcdHZhbHVlPXsgZWxldmF0aW9uIH1cblx0XHRcdFx0Lz5cblx0XHRcdDwvVmlldz5cblx0XHQ8L0NvbnRleHRTeXN0ZW1Qcm92aWRlcj5cblx0KTtcbn1cblxuLyoqXG4gKiBgQ2FyZGAgcHJvdmlkZXMgYSBmbGV4aWJsZSBhbmQgZXh0ZW5zaWJsZSBjb250ZW50IGNvbnRhaW5lci5cbiAqIGBDYXJkYCBhbHNvIHByb3ZpZGVzIGEgY29udmVuaWVudCBzZXQgb2Ygc3ViLWNvbXBvbmVudHMgc3VjaCBhcyBgQ2FyZEJvZHlgLFxuICogYENhcmRIZWFkZXJgLCBgQ2FyZEZvb3RlcmAsIGFuZCBtb3JlLlxuICpcbiAqIEBleGFtcGxlXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7XG4gKiAgIENhcmQsXG4gKiAgIENhcmRIZWFkZXIsXG4gKiAgIENhcmRCb2R5LFxuICogICBDYXJkRm9vdGVyLFxuICogICBUZXh0LFxuICogICBIZWFkaW5nLFxuICogfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiAgIHJldHVybiAoXG4gKiAgICAgPENhcmQ+XG4gKiAgICAgICA8Q2FyZEhlYWRlcj5cbiAqICAgICAgICAgPEhlYWRpbmcgc2l6ZT17IDQgfT5DYXJkIFRpdGxlPC9IZWFkaW5nPlxuICogICAgICAgPC9DYXJkSGVhZGVyPlxuICogICAgICAgPENhcmRCb2R5PlxuICogICAgICAgICA8VGV4dD5DYXJkIENvbnRlbnQ8L1RleHQ+XG4gKiAgICAgICA8L0NhcmRCb2R5PlxuICogICAgICAgPENhcmRGb290ZXI+XG4gKiAgICAgICAgIDxUZXh0PkNhcmQgRm9vdGVyPC9UZXh0PlxuICogICAgICAgPC9DYXJkRm9vdGVyPlxuICogICAgIDwvQ2FyZD5cbiAqICAgKTtcbiAqIH1cbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWRDYXJkID0gY29udGV4dENvbm5lY3QoIENhcmQsICdDYXJkJyApO1xuXG5leHBvcnQgZGVmYXVsdCBDb25uZWN0ZWRDYXJkO1xuIl19 */")), [cx, elevationBorderRadius]);
+  }, process.env.NODE_ENV === "production" ? "" : ";label:elevationClassName;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY2FyZC9jYXJkL2NvbXBvbmVudC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q1kiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jYXJkL2NhcmQvY29tcG9uZW50LmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNvbnRleHRDb25uZWN0LCBDb250ZXh0U3lzdGVtUHJvdmlkZXIgfSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IEVsZXZhdGlvbiB9IGZyb20gJy4uLy4uL2VsZXZhdGlvbic7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vLi4vdmlldyc7XG5pbXBvcnQgKiBhcyBzdHlsZXMgZnJvbSAnLi4vc3R5bGVzJztcbmltcG9ydCB7IHVzZUNhcmQgfSBmcm9tICcuL2hvb2snO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi8uLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcblxuLyoqXG4gKiBAcGFyYW0ge2ltcG9ydCgnLi4vLi4vdWkvY29udGV4dCcpLldvcmRQcmVzc0NvbXBvbmVudFByb3BzPGltcG9ydCgnLi4vdHlwZXMnKS5Qcm9wcywgJ2Rpdic+fSBwcm9wc1xuICogQHBhcmFtIHtpbXBvcnQoJ3JlYWN0JykuRm9yd2FyZGVkUmVmPGFueT59ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZm9yd2FyZGVkUmVmXG4gKi9cbmZ1bmN0aW9uIENhcmQoIHByb3BzLCBmb3J3YXJkZWRSZWYgKSB7XG5cdGNvbnN0IHtcblx0XHRjaGlsZHJlbixcblx0XHRlbGV2YXRpb24sXG5cdFx0aXNCb3JkZXJsZXNzLFxuXHRcdGlzUm91bmRlZCxcblx0XHRzaXplLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNhcmQoIHByb3BzICk7XG5cdGNvbnN0IGVsZXZhdGlvbkJvcmRlclJhZGl1cyA9IGlzUm91bmRlZCA/IENPTkZJRy5jYXJkQm9yZGVyUmFkaXVzIDogMDtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgZWxldmF0aW9uQ2xhc3NOYW1lID0gdXNlTWVtbyhcblx0XHQoKSA9PiBjeCggY3NzKCB7IGJvcmRlclJhZGl1czogZWxldmF0aW9uQm9yZGVyUmFkaXVzIH0gKSApLFxuXHRcdFsgY3gsIGVsZXZhdGlvbkJvcmRlclJhZGl1cyBdXG5cdCk7XG5cblx0Y29uc3QgY29udGV4dFByb3ZpZGVyVmFsdWUgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgY29udGV4dFByb3BzID0ge1xuXHRcdFx0c2l6ZSxcblx0XHRcdGlzQm9yZGVybGVzcyxcblx0XHR9O1xuXHRcdHJldHVybiB7XG5cdFx0XHRDYXJkQm9keTogY29udGV4dFByb3BzLFxuXHRcdFx0Q2FyZEhlYWRlcjogY29udGV4dFByb3BzLFxuXHRcdFx0Q2FyZEZvb3RlcjogY29udGV4dFByb3BzLFxuXHRcdH07XG5cdH0sIFsgaXNCb3JkZXJsZXNzLCBzaXplIF0gKTtcblxuXHRyZXR1cm4gKFxuXHRcdDxDb250ZXh0U3lzdGVtUHJvdmlkZXIgdmFsdWU9eyBjb250ZXh0UHJvdmlkZXJWYWx1ZSB9PlxuXHRcdFx0PFZpZXcgeyAuLi5vdGhlclByb3BzIH0gcmVmPXsgZm9yd2FyZGVkUmVmIH0+XG5cdFx0XHRcdDxWaWV3IGNsYXNzTmFtZT17IGN4KCBzdHlsZXMuQ29udGVudCApIH0+eyBjaGlsZHJlbiB9PC9WaWV3PlxuXHRcdFx0XHQ8RWxldmF0aW9uXG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgZWxldmF0aW9uQ2xhc3NOYW1lIH1cblx0XHRcdFx0XHRpc0ludGVyYWN0aXZlPXsgZmFsc2UgfVxuXHRcdFx0XHRcdHZhbHVlPXsgZWxldmF0aW9uID8gMSA6IDAgfVxuXHRcdFx0XHQvPlxuXHRcdFx0XHQ8RWxldmF0aW9uXG5cdFx0XHRcdFx0Y2xhc3NOYW1lPXsgZWxldmF0aW9uQ2xhc3NOYW1lIH1cblx0XHRcdFx0XHRpc0ludGVyYWN0aXZlPXsgZmFsc2UgfVxuXHRcdFx0XHRcdHZhbHVlPXsgZWxldmF0aW9uIH1cblx0XHRcdFx0Lz5cblx0XHRcdDwvVmlldz5cblx0XHQ8L0NvbnRleHRTeXN0ZW1Qcm92aWRlcj5cblx0KTtcbn1cblxuLyoqXG4gKiBgQ2FyZGAgcHJvdmlkZXMgYSBmbGV4aWJsZSBhbmQgZXh0ZW5zaWJsZSBjb250ZW50IGNvbnRhaW5lci5cbiAqIGBDYXJkYCBhbHNvIHByb3ZpZGVzIGEgY29udmVuaWVudCBzZXQgb2Ygc3ViLWNvbXBvbmVudHMgc3VjaCBhcyBgQ2FyZEJvZHlgLFxuICogYENhcmRIZWFkZXJgLCBgQ2FyZEZvb3RlcmAsIGFuZCBtb3JlLlxuICpcbiAqIEBleGFtcGxlXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7XG4gKiAgIENhcmQsXG4gKiAgIENhcmRIZWFkZXIsXG4gKiAgIENhcmRCb2R5LFxuICogICBDYXJkRm9vdGVyLFxuICogICBUZXh0LFxuICogICBIZWFkaW5nLFxuICogfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiAgIHJldHVybiAoXG4gKiAgICAgPENhcmQ+XG4gKiAgICAgICA8Q2FyZEhlYWRlcj5cbiAqICAgICAgICAgPEhlYWRpbmcgc2l6ZT17IDQgfT5DYXJkIFRpdGxlPC9IZWFkaW5nPlxuICogICAgICAgPC9DYXJkSGVhZGVyPlxuICogICAgICAgPENhcmRCb2R5PlxuICogICAgICAgICA8VGV4dD5DYXJkIENvbnRlbnQ8L1RleHQ+XG4gKiAgICAgICA8L0NhcmRCb2R5PlxuICogICAgICAgPENhcmRGb290ZXI+XG4gKiAgICAgICAgIDxUZXh0PkNhcmQgRm9vdGVyPC9UZXh0PlxuICogICAgICAgPC9DYXJkRm9vdGVyPlxuICogICAgIDwvQ2FyZD5cbiAqICAgKTtcbiAqIH1cbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWRDYXJkID0gY29udGV4dENvbm5lY3QoIENhcmQsICdDYXJkJyApO1xuXG5leHBvcnQgZGVmYXVsdCBDb25uZWN0ZWRDYXJkO1xuIl19 */")), [cx, elevationBorderRadius]);
   const contextProviderValue = (0, _element.useMemo)(() => {
     const contextProps = {
       size,

package/build/card/card/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/card/card/component.js"],"names":["Card","props","forwardedRef","children","elevation","isBorderless","isRounded","size","otherProps","elevationBorderRadius","CONFIG","cardBorderRadius","cx","elevationClassName","borderRadius","contextProviderValue","contextProps","CardBody","CardHeader","CardFooter","styles","Content","ConnectedCard"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA,SAASA,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,YAHK;AAILC,IAAAA,SAJK;AAKLC,IAAAA,IALK;AAML,OAAGC;AANE,MAOF,mBAASP,KAAT,CAPJ;AAQA,QAAMQ,qBAAqB,GAAGH,SAAS,GAAGI,sBAAOC,gBAAV,GAA6B,CAApE;AAEA,QAAMC,EAAE,GAAG,mBAAX;AAEA,QAAMC,kBAAkB,GAAG,sBAC1B,MAAMD,EAAE,eAAE,gBAAK;AAAEE,IAAAA,YAAY,EAAEL;AAAhB,GAAL,olIAAF,CADkB,EAE1B,CAAEG,EAAF,EAAMH,qBAAN,CAF0B,CAA3B;AAKA,QAAMM,oBAAoB,GAAG,sBAAS,MAAM;AAC3C,UAAMC,YAAY,GAAG;AACpBT,MAAAA,IADoB;AAEpBF,MAAAA;AAFoB,KAArB;AAIA,WAAO;AACNY,MAAAA,QAAQ,EAAED,YADJ;AAENE,MAAAA,UAAU,EAAEF,YAFN;AAGNG,MAAAA,UAAU,EAAEH;AAHN,KAAP;AAKA,GAV4B,EAU1B,CAAEX,YAAF,EAAgBE,IAAhB,CAV0B,CAA7B;AAYA,SACC,4BAAC,8BAAD;AAAuB,IAAA,KAAK,EAAGQ;AAA/B,KACC,4BAAC,UAAD,6BAAWP,UAAX;AAAwB,IAAA,GAAG,EAAGN;AAA9B,MACC,4BAAC,UAAD;AAAM,IAAA,SAAS,EAAGU,EAAE,CAAEQ,MAAM,CAACC,OAAT;AAApB,KAA2ClB,QAA3C,CADD,EAEC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAGU,kBADb;AAEC,IAAA,aAAa,EAAG,KAFjB;AAGC,IAAA,KAAK,EAAGT,SAAS,GAAG,CAAH,GAAO;AAHzB,IAFD,EAOC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAGS,kBADb;AAEC,IAAA,aAAa,EAAG,KAFjB;AAGC,IAAA,KAAK,EAAGT;AAHT,IAPD,CADD,CADD;AAiBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMkB,aAAa,GAAG,6BAAgBtB,IAAhB,EAAsB,MAAtB,CAAtB;eAEesB,a","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, ContextSystemProvider } from '../../ui/context';\nimport { Elevation } from '../../elevation';\nimport { View } from '../../view';\nimport * as styles from '../styles';\nimport { useCard } from './hook';\nimport CONFIG from '../../utils/config-values';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props\n * @param {import('react').Ref<any>}                                                            forwardedRef\n */\nfunction Card( props, forwardedRef ) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tisBorderless,\n\t\tisRounded,\n\t\tsize,\n\t\t...otherProps\n\t} = useCard( props );\n\tconst elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;\n\n\tconst cx = useCx();\n\n\tconst elevationClassName = useMemo(\n\t\t() => cx( css( { borderRadius: elevationBorderRadius } ) ),\n\t\t[ cx, elevationBorderRadius ]\n\t);\n\n\tconst contextProviderValue = useMemo( () => {\n\t\tconst contextProps = {\n\t\t\tsize,\n\t\t\tisBorderless,\n\t\t};\n\t\treturn {\n\t\t\tCardBody: contextProps,\n\t\t\tCardHeader: contextProps,\n\t\t\tCardFooter: contextProps,\n\t\t};\n\t}, [ isBorderless, size ] );\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextProviderValue }>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t<View className={ cx( styles.Content ) }>{ children }</View>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation ? 1 : 0 }\n\t\t\t\t/>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * `Card` provides a flexible and extensible content container.\n * `Card` also provides a convenient set of sub-components such as `CardBody`,\n * `CardHeader`, `CardFooter`, and more.\n *\n * @example\n * ```jsx\n * import {\n *   Card,\n *   CardHeader,\n *   CardBody,\n *   CardFooter,\n *   Text,\n *   Heading,\n * } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <Heading size={ 4 }>Card Title</Heading>\n *       </CardHeader>\n *       <CardBody>\n *         <Text>Card Content</Text>\n *       </CardBody>\n *       <CardFooter>\n *         <Text>Card Footer</Text>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n */\nconst ConnectedCard = contextConnect( Card, 'Card' );\n\nexport default ConnectedCard;\n"]}
+{"version":3,"sources":["@wordpress/components/src/card/card/component.js"],"names":["Card","props","forwardedRef","children","elevation","isBorderless","isRounded","size","otherProps","elevationBorderRadius","CONFIG","cardBorderRadius","cx","elevationClassName","borderRadius","contextProviderValue","contextProps","CardBody","CardHeader","CardFooter","styles","Content","ConnectedCard"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA,SAASA,IAAT,CAAeC,KAAf,EAAsBC,YAAtB,EAAqC;AACpC,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,YAHK;AAILC,IAAAA,SAJK;AAKLC,IAAAA,IALK;AAML,OAAGC;AANE,MAOF,mBAASP,KAAT,CAPJ;AAQA,QAAMQ,qBAAqB,GAAGH,SAAS,GAAGI,sBAAOC,gBAAV,GAA6B,CAApE;AAEA,QAAMC,EAAE,GAAG,mBAAX;AAEA,QAAMC,kBAAkB,GAAG,sBAC1B,MAAMD,EAAE,eAAE,gBAAK;AAAEE,IAAAA,YAAY,EAAEL;AAAhB,GAAL,olIAAF,CADkB,EAE1B,CAAEG,EAAF,EAAMH,qBAAN,CAF0B,CAA3B;AAKA,QAAMM,oBAAoB,GAAG,sBAAS,MAAM;AAC3C,UAAMC,YAAY,GAAG;AACpBT,MAAAA,IADoB;AAEpBF,MAAAA;AAFoB,KAArB;AAIA,WAAO;AACNY,MAAAA,QAAQ,EAAED,YADJ;AAENE,MAAAA,UAAU,EAAEF,YAFN;AAGNG,MAAAA,UAAU,EAAEH;AAHN,KAAP;AAKA,GAV4B,EAU1B,CAAEX,YAAF,EAAgBE,IAAhB,CAV0B,CAA7B;AAYA,SACC,4BAAC,8BAAD;AAAuB,IAAA,KAAK,EAAGQ;AAA/B,KACC,4BAAC,UAAD,6BAAWP,UAAX;AAAwB,IAAA,GAAG,EAAGN;AAA9B,MACC,4BAAC,UAAD;AAAM,IAAA,SAAS,EAAGU,EAAE,CAAEQ,MAAM,CAACC,OAAT;AAApB,KAA2ClB,QAA3C,CADD,EAEC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAGU,kBADb;AAEC,IAAA,aAAa,EAAG,KAFjB;AAGC,IAAA,KAAK,EAAGT,SAAS,GAAG,CAAH,GAAO;AAHzB,IAFD,EAOC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAGS,kBADb;AAEC,IAAA,aAAa,EAAG,KAFjB;AAGC,IAAA,KAAK,EAAGT;AAHT,IAPD,CADD,CADD;AAiBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMkB,aAAa,GAAG,6BAAgBtB,IAAhB,EAAsB,MAAtB,CAAtB;eAEesB,a","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, ContextSystemProvider } from '../../ui/context';\nimport { Elevation } from '../../elevation';\nimport { View } from '../../view';\nimport * as styles from '../styles';\nimport { useCard } from './hook';\nimport CONFIG from '../../utils/config-values';\nimport { useCx } from '../../utils/hooks/use-cx';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                   forwardedRef\n */\nfunction Card( props, forwardedRef ) {\n\tconst {\n\t\tchildren,\n\t\televation,\n\t\tisBorderless,\n\t\tisRounded,\n\t\tsize,\n\t\t...otherProps\n\t} = useCard( props );\n\tconst elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;\n\n\tconst cx = useCx();\n\n\tconst elevationClassName = useMemo(\n\t\t() => cx( css( { borderRadius: elevationBorderRadius } ) ),\n\t\t[ cx, elevationBorderRadius ]\n\t);\n\n\tconst contextProviderValue = useMemo( () => {\n\t\tconst contextProps = {\n\t\t\tsize,\n\t\t\tisBorderless,\n\t\t};\n\t\treturn {\n\t\t\tCardBody: contextProps,\n\t\t\tCardHeader: contextProps,\n\t\t\tCardFooter: contextProps,\n\t\t};\n\t}, [ isBorderless, size ] );\n\n\treturn (\n\t\t<ContextSystemProvider value={ contextProviderValue }>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t<View className={ cx( styles.Content ) }>{ children }</View>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation ? 1 : 0 }\n\t\t\t\t/>\n\t\t\t\t<Elevation\n\t\t\t\t\tclassName={ elevationClassName }\n\t\t\t\t\tisInteractive={ false }\n\t\t\t\t\tvalue={ elevation }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</ContextSystemProvider>\n\t);\n}\n\n/**\n * `Card` provides a flexible and extensible content container.\n * `Card` also provides a convenient set of sub-components such as `CardBody`,\n * `CardHeader`, `CardFooter`, and more.\n *\n * @example\n * ```jsx\n * import {\n *   Card,\n *   CardHeader,\n *   CardBody,\n *   CardFooter,\n *   Text,\n *   Heading,\n * } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <Card>\n *       <CardHeader>\n *         <Heading size={ 4 }>Card Title</Heading>\n *       </CardHeader>\n *       <CardBody>\n *         <Text>Card Content</Text>\n *       </CardBody>\n *       <CardFooter>\n *         <Text>Card Footer</Text>\n *       </CardFooter>\n *     </Card>\n *   );\n * }\n * ```\n */\nconst ConnectedCard = contextConnect( Card, 'Card' );\n\nexport default ConnectedCard;\n"]}

package/build/card/card-body/component.js

@@ -25,7 +25,7 @@ var _hook = require("./hook");
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
  */
 function CardBody(props, forwardedRef) {
   const {

package/build/card/card-body/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/card/card-body/component.js"],"names":["CardBody","props","forwardedRef","isScrollable","otherProps","ConnectedCardBody"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA,SAASA,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAM;AAAEC,IAAAA,YAAF;AAAgB,OAAGC;AAAnB,MAAkC,uBAAaH,KAAb,CAAxC;;AAEA,MAAKE,YAAL,EAAoB;AACnB,WAAO,4BAAC,sBAAD,6BAAiBC,UAAjB;AAA8B,MAAA,GAAG,EAAGF;AAApC,OAAP;AACA;;AAED,SAAO,4BAAC,UAAD,6BAAWE,UAAX;AAAwB,IAAA,GAAG,EAAGF;AAA9B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,iBAAiB,GAAG,6BAAgBL,QAAhB,EAA0B,UAA1B,CAA1B;eAEeK,iB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { Scrollable } from '../../scrollable';\nimport { View } from '../../view';\nimport { useCardBody } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props\n * @param {import('react').Ref<any>}                                                                forwardedRef\n */\nfunction CardBody( props, forwardedRef ) {\n\tconst { isScrollable, ...otherProps } = useCardBody( props );\n\n\tif ( isScrollable ) {\n\t\treturn <Scrollable { ...otherProps } ref={ forwardedRef } />;\n\t}\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardBody` renders an optional content area for a `Card`.\n * Multiple `CardBody` components can be used within `Card` if needed.\n *\n * @example\n * ```jsx\n * import { Card, CardBody } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardBody>\n * \t\t...\n * \t</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardBody = contextConnect( CardBody, 'CardBody' );\n\nexport default ConnectedCardBody;\n"]}
+{"version":3,"sources":["@wordpress/components/src/card/card-body/component.js"],"names":["CardBody","props","forwardedRef","isScrollable","otherProps","ConnectedCardBody"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA,SAASA,QAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAyC;AACxC,QAAM;AAAEC,IAAAA,YAAF;AAAgB,OAAGC;AAAnB,MAAkC,uBAAaH,KAAb,CAAxC;;AAEA,MAAKE,YAAL,EAAoB;AACnB,WAAO,4BAAC,sBAAD,6BAAiBC,UAAjB;AAA8B,MAAA,GAAG,EAAGF;AAApC,OAAP;AACA;;AAED,SAAO,4BAAC,UAAD,6BAAWE,UAAX;AAAwB,IAAA,GAAG,EAAGF;AAA9B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMG,iBAAiB,GAAG,6BAAgBL,QAAhB,EAA0B,UAA1B,CAA1B;eAEeK,iB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { Scrollable } from '../../scrollable';\nimport { View } from '../../view';\nimport { useCardBody } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                       forwardedRef\n */\nfunction CardBody( props, forwardedRef ) {\n\tconst { isScrollable, ...otherProps } = useCardBody( props );\n\n\tif ( isScrollable ) {\n\t\treturn <Scrollable { ...otherProps } ref={ forwardedRef } />;\n\t}\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardBody` renders an optional content area for a `Card`.\n * Multiple `CardBody` components can be used within `Card` if needed.\n *\n * @example\n * ```jsx\n * import { Card, CardBody } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardBody>\n * \t\t...\n * \t</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardBody = contextConnect( CardBody, 'CardBody' );\n\nexport default ConnectedCardBody;\n"]}

package/build/card/card-divider/component.js

@@ -23,7 +23,7 @@ var _hook = require("./hook");
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props
- * @param {import('react').Ref<any>}                                                                              forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                     forwardedRef
  */
 function CardDivider(props, forwardedRef) {
   const dividerProps = (0, _hook.useCardDivider)(props);

package/build/card/card-divider/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/card/card-divider/component.js"],"names":["CardDivider","props","forwardedRef","dividerProps","ConnectedCardDivider"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,WAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA4C;AAC3C,QAAMC,YAAY,GAAG,0BAAgBF,KAAhB,CAArB;AAEA,SAAO,4BAAC,gBAAD,6BAAcE,YAAd;AAA6B,IAAA,GAAG,EAAGD;AAAnC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,oBAAoB,GAAG,6BAAgBJ,WAAhB,EAA6B,aAA7B,CAA7B;eAEeI,oB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { Divider } from '../../divider';\nimport { useCardDivider } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props\n * @param {import('react').Ref<any>}                                                                              forwardedRef\n */\nfunction CardDivider( props, forwardedRef ) {\n\tconst dividerProps = useCardDivider( props );\n\n\treturn <Divider { ...dividerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardDivider` renders an optional divider within a `Card`.\n * It is typically used to divide multiple `CardBody` components from each other.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardDivider } from `@wordpress/components`;\n *\n * <Card>\n *  <CardBody>...</CardBody>\n *  <CardDivider />\n *  <CardBody>...</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );\n\nexport default ConnectedCardDivider;\n"]}
+{"version":3,"sources":["@wordpress/components/src/card/card-divider/component.js"],"names":["CardDivider","props","forwardedRef","dividerProps","ConnectedCardDivider"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,WAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA4C;AAC3C,QAAMC,YAAY,GAAG,0BAAgBF,KAAhB,CAArB;AAEA,SAAO,4BAAC,gBAAD,6BAAcE,YAAd;AAA6B,IAAA,GAAG,EAAGD;AAAnC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,oBAAoB,GAAG,6BAAgBJ,WAAhB,EAA6B,aAA7B,CAA7B;eAEeI,oB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { Divider } from '../../divider';\nimport { useCardDivider } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props\n * @param {import('react').ForwardedRef<any>}                                                                     forwardedRef\n */\nfunction CardDivider( props, forwardedRef ) {\n\tconst dividerProps = useCardDivider( props );\n\n\treturn <Divider { ...dividerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardDivider` renders an optional divider within a `Card`.\n * It is typically used to divide multiple `CardBody` components from each other.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardDivider } from `@wordpress/components`;\n *\n * <Card>\n *  <CardBody>...</CardBody>\n *  <CardDivider />\n *  <CardBody>...</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardDivider = contextConnect( CardDivider, 'CardDivider' );\n\nexport default ConnectedCardDivider;\n"]}

package/build/card/card-footer/component.js

@@ -23,7 +23,7 @@ var _hook = require("./hook");
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
  */
 function CardFooter(props, forwardedRef) {
   const footerProps = (0, _hook.useCardFooter)(props);

package/build/card/card-footer/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/card/card-footer/component.js"],"names":["CardFooter","props","forwardedRef","footerProps","ConnectedCardFooter"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,UAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA2C;AAC1C,QAAMC,WAAW,GAAG,yBAAeF,KAAf,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,mBAAmB,GAAG,6BAAgBJ,UAAhB,EAA4B,YAA5B,CAA5B;eAEeI,mB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { Flex } from '../../flex';\nimport { useCardFooter } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props\n * @param {import('react').Ref<any>}                                                                  forwardedRef\n */\nfunction CardFooter( props, forwardedRef ) {\n\tconst footerProps = useCardFooter( props );\n\n\treturn <Flex { ...footerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardFooter` renders an optional footer within a `Card`.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardFooter } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardBody>...</CardBody>\n * \t<CardFooter>...</CardFooter>\n * </Card>\n * ```\n */\nconst ConnectedCardFooter = contextConnect( CardFooter, 'CardFooter' );\n\nexport default ConnectedCardFooter;\n"]}
+{"version":3,"sources":["@wordpress/components/src/card/card-footer/component.js"],"names":["CardFooter","props","forwardedRef","footerProps","ConnectedCardFooter"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,UAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA2C;AAC1C,QAAMC,WAAW,GAAG,yBAAeF,KAAf,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,mBAAmB,GAAG,6BAAgBJ,UAAhB,EAA4B,YAA5B,CAA5B;eAEeI,mB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { Flex } from '../../flex';\nimport { useCardFooter } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                         forwardedRef\n */\nfunction CardFooter( props, forwardedRef ) {\n\tconst footerProps = useCardFooter( props );\n\n\treturn <Flex { ...footerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardFooter` renders an optional footer within a `Card`.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardFooter } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardBody>...</CardBody>\n * \t<CardFooter>...</CardFooter>\n * </Card>\n * ```\n */\nconst ConnectedCardFooter = contextConnect( CardFooter, 'CardFooter' );\n\nexport default ConnectedCardFooter;\n"]}

package/build/card/card-header/component.js

@@ -23,7 +23,7 @@ var _hook = require("./hook");
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props
- * @param {import('react').Ref<any>}                                                                  forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                         forwardedRef
  */
 function CardHeader(props, forwardedRef) {
   const headerProps = (0, _hook.useCardHeader)(props);

package/build/card/card-header/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/card/card-header/component.js"],"names":["CardHeader","props","forwardedRef","headerProps","ConnectedCardHeader"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,UAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA2C;AAC1C,QAAMC,WAAW,GAAG,yBAAeF,KAAf,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,mBAAmB,GAAG,6BAAgBJ,UAAhB,EAA4B,YAA5B,CAA5B;eAEeI,mB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { Flex } from '../../flex';\nimport { useCardHeader } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props\n * @param {import('react').Ref<any>}                                                                  forwardedRef\n */\nfunction CardHeader( props, forwardedRef ) {\n\tconst headerProps = useCardHeader( props );\n\n\treturn <Flex { ...headerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardHeader` renders an optional header within a `Card`.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardHeader } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardHeader>...</CardHeader>\n * \t<CardBody>...</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardHeader = contextConnect( CardHeader, 'CardHeader' );\n\nexport default ConnectedCardHeader;\n"]}
+{"version":3,"sources":["@wordpress/components/src/card/card-header/component.js"],"names":["CardHeader","props","forwardedRef","headerProps","ConnectedCardHeader"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,UAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA2C;AAC1C,QAAMC,WAAW,GAAG,yBAAeF,KAAf,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,mBAAmB,GAAG,6BAAgBJ,UAAhB,EAA4B,YAA5B,CAA5B;eAEeI,mB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { Flex } from '../../flex';\nimport { useCardHeader } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                         forwardedRef\n */\nfunction CardHeader( props, forwardedRef ) {\n\tconst headerProps = useCardHeader( props );\n\n\treturn <Flex { ...headerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardHeader` renders an optional header within a `Card`.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardHeader } from `@wordpress/components`;\n *\n * <Card>\n * \t<CardHeader>...</CardHeader>\n * \t<CardBody>...</CardBody>\n * </Card>\n * ```\n */\nconst ConnectedCardHeader = contextConnect( CardHeader, 'CardHeader' );\n\nexport default ConnectedCardHeader;\n"]}

package/build/card/card-media/component.js

@@ -23,7 +23,7 @@ var _hook = require("./hook");
 
 /**
  * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- * @param {import('react').Ref<any>}                                                                           forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                                                  forwardedRef
  */
 function CardMedia(props, forwardedRef) {
   const cardMediaProps = (0, _hook.useCardMedia)(props);

package/build/card/card-media/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/card/card-media/component.js"],"names":["CardMedia","props","forwardedRef","cardMediaProps","ConnectedCardMedia"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAG,6BAAgBJ,SAAhB,EAA2B,WAA3B,CAA3B;eAEeI,kB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useCardMedia } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props\n * @param {import('react').Ref<any>}                                                                           forwardedRef\n */\nfunction CardMedia( props, forwardedRef ) {\n\tconst cardMediaProps = useCardMedia( props );\n\n\treturn <View { ...cardMediaProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardMedia` provides a container for media elements within a `Card`.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardMedia } from '@wordpress/components';\n *\n * const Example = () => (\n *  <Card>\n *\t  <CardMedia>\n *\t\t  <img src=\"...\" />\n *    </CardMedia>\n *    <CardBody>...</CardBody>\n *  </Card>\n * );\n * ```\n */\nconst ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );\n\nexport default ConnectedCardMedia;\n"]}
+{"version":3,"sources":["@wordpress/components/src/card/card-media/component.js"],"names":["CardMedia","props","forwardedRef","cardMediaProps","ConnectedCardMedia"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,SAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAA0C;AACzC,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAME,kBAAkB,GAAG,6BAAgBJ,SAAhB,EAA2B,WAA3B,CAA3B;eAEeI,kB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../ui/context';\nimport { View } from '../../view';\nimport { useCardMedia } from './hook';\n\n/**\n * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                                                  forwardedRef\n */\nfunction CardMedia( props, forwardedRef ) {\n\tconst cardMediaProps = useCardMedia( props );\n\n\treturn <View { ...cardMediaProps } ref={ forwardedRef } />;\n}\n\n/**\n * `CardMedia` provides a container for media elements within a `Card`.\n *\n * @example\n * ```jsx\n * import { Card, CardBody, CardMedia } from '@wordpress/components';\n *\n * const Example = () => (\n *  <Card>\n *\t  <CardMedia>\n *\t\t  <img src=\"...\" />\n *    </CardMedia>\n *    <CardBody>...</CardBody>\n *  </Card>\n * );\n * ```\n */\nconst ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );\n\nexport default ConnectedCardMedia;\n"]}

package/build/color-palette/index.native.js

@@ -41,6 +41,7 @@ let customIndicatorWidth = 0;
 
 function ColorPalette(_ref) {
   let {
+    enableCustomColor = true,
     setColor,
     activeColor,
     isGradientColor,
@@ -52,7 +53,8 @@ function ColorPalette(_ref) {
     shouldShowCustomLabel = true,
     shouldShowCustomVerticalSeparator = true,
     customColorIndicatorStyles,
-    customIndicatorWrapperStyles
+    customIndicatorWrapperStyles,
+    label
   } = _ref;
   const customSwatchGradients = ['linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)', 'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)', 'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)'];
   const scrollViewRef = (0, _element.useRef)();
@@ -61,11 +63,12 @@ function ColorPalette(_ref) {
   const scale = (0, _element.useRef)(new _reactNative.Animated.Value(1)).current;
   const opacity = (0, _element.useRef)(new _reactNative.Animated.Value(1)).current;
   const defaultColors = (0, _lodash.uniq)((0, _lodash.map)(defaultSettings.colors, 'color'));
+  const mergedColors = (0, _lodash.uniq)((0, _lodash.map)(defaultSettings.allColors, 'color'));
   const defaultGradientColors = (0, _lodash.uniq)((0, _lodash.map)(defaultSettings.gradients, 'gradient'));
   const colors = isGradientSegment ? defaultGradientColors : defaultColors;
   const customIndicatorColor = isGradientSegment ? activeColor : customSwatchGradients;
   const isCustomGradientColor = isGradientColor && isSelectedCustom();
-  const shouldShowCustomIndicator = shouldShowCustomIndicatorOption && (!isGradientSegment || isCustomGradientColor);
+  const shouldShowCustomIndicator = enableCustomColor && shouldShowCustomIndicatorOption && (!isGradientSegment || isCustomGradientColor);
   const accessibilityHint = isGradientSegment ? (0, _i18n.__)('Navigates to customize the gradient') : (0, _i18n.__)('Navigates to custom color picker');
   const customText = (0, _i18n.__)('Custom');
   (0, _element.useEffect)(() => {
@@ -82,9 +85,9 @@ function ColorPalette(_ref) {
   }, [currentSegment]);
 
   function isSelectedCustom() {
-    const isWithinColors = activeColor && colors && colors.includes(activeColor);
+    const isWithinColors = activeColor && mergedColors && mergedColors.includes(activeColor);
 
-    if (activeColor) {
+    if (enableCustomColor && activeColor) {
       if (isGradientSegment) {
         return isGradientColor && !isWithinColors;
       }
@@ -191,9 +194,11 @@ function ColorPalette(_ref) {
   const verticalSeparatorStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.verticalSeparator, _style.default.verticalSeparatorDark);
   const customTextStyle = (0, _compose.usePreferredColorSchemeStyle)([_style.default.customText, !isIOS && _style.default.customTextAndroid], _style.default.customTextDark);
   const customIndicatorWrapperStyle = [_style.default.customIndicatorWrapper, customIndicatorWrapperStyles];
-  return (0, _element.createElement)(_reactNative.ScrollView, {
+  return (0, _element.createElement)(_element.Fragment, null, label && (0, _element.createElement)(_reactNative.Text, {
+    accessibilityRole: "header",
+    style: _style.default.headerText
+  }, label), (0, _element.createElement)(_reactNative.ScrollView, {
     contentContainerStyle: _style.default.contentContainer,
-    style: _style.default.container,
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     keyboardShouldPersistTaps: "always",
@@ -204,29 +209,8 @@ function ColorPalette(_ref) {
     onScrollBeginDrag: () => shouldEnableBottomSheetScroll(false),
     onScrollEndDrag: () => shouldEnableBottomSheetScroll(true),
     ref: scrollViewRef,
-    testID: "color-palette"
-  }, shouldShowCustomIndicator && (0, _element.createElement)(_reactNative.View, {
-    style: customIndicatorWrapperStyle,
-    onLayout: onCustomIndicatorLayout
-  }, shouldShowCustomVerticalSeparator && (0, _element.createElement)(_reactNative.View, {
-    style: verticalSeparatorStyle
-  }), (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
-    onPress: onCustomPress,
-    accessibilityRole: 'button',
-    accessibilityState: {
-      selected: isSelectedCustom()
-    },
-    accessibilityHint: accessibilityHint
-  }, (0, _element.createElement)(_reactNative.View, {
-    style: customIndicatorWrapperStyle
-  }, (0, _element.createElement)(_colorIndicator.default, {
-    withCustomPicker: !isGradientSegment,
-    color: customIndicatorColor,
-    isSelected: isSelectedCustom(),
-    style: [_style.default.colorIndicator, customColorIndicatorStyles]
-  }), shouldShowCustomLabel && (0, _element.createElement)(_reactNative.Text, {
-    style: customTextStyle
-  }, isIOS ? customText : customText.toUpperCase())))), colors.map(color => {
+    testID: `color-palette${label ? '-' + label : ''}`
+  }, colors.map(color => {
     const scaleValue = isSelected(color) ? scaleInterpolation : 1;
     return (0, _element.createElement)(_reactNative.View, {
       key: `${color}-${isSelected(color)}`
@@ -250,7 +234,28 @@ function ColorPalette(_ref) {
       opacity: opacity,
       style: [_style.default.colorIndicator, customColorIndicatorStyles]
     }))));
-  }));
+  }), shouldShowCustomIndicator && (0, _element.createElement)(_reactNative.View, {
+    style: customIndicatorWrapperStyle,
+    onLayout: onCustomIndicatorLayout
+  }, shouldShowCustomVerticalSeparator && (0, _element.createElement)(_reactNative.View, {
+    style: verticalSeparatorStyle
+  }), (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
+    onPress: onCustomPress,
+    accessibilityRole: 'button',
+    accessibilityState: {
+      selected: isSelectedCustom()
+    },
+    accessibilityHint: accessibilityHint
+  }, (0, _element.createElement)(_reactNative.View, {
+    style: customIndicatorWrapperStyle
+  }, (0, _element.createElement)(_colorIndicator.default, {
+    withCustomPicker: !isGradientSegment,
+    color: customIndicatorColor,
+    isSelected: isSelectedCustom(),
+    style: [_style.default.colorIndicator, customColorIndicatorStyles]
+  }), shouldShowCustomLabel && (0, _element.createElement)(_reactNative.Text, {
+    style: customTextStyle
+  }, isIOS ? customText : customText.toUpperCase()))))));
 }
 
 var _default = ColorPalette;

package/build/color-palette/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","customSwatchGradients","scrollViewRef","isIOS","Platform","OS","isGradientSegment","colorsUtils","segments","scale","Animated","Value","current","opacity","defaultColors","colors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","Easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","Dimensions","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","styles","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","contentContainer","container","selected","colorIndicator","toUpperCase","map","scaleValue","transform"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map, uniq } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = uniq( map( defaultSettings.colors, 'color' ) );\n\tconst defaultGradientColors = uniq(\n\t\tmap( defaultSettings.gradients, 'gradient' )\n\t);\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && colors && colors.includes( activeColor );\n\t\tif ( activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<ScrollView\n\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\tstyle={ styles.container }\n\t\t\thorizontal\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\tdisableScrollViewPanResponder\n\t\t\tscrollEventThrottle={ 16 }\n\t\t\tonScroll={ onScroll }\n\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\tonScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) }\n\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\tref={ scrollViewRef }\n\t\t\ttestID=\"color-palette\"\n\t\t>\n\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t<View\n\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t) }\n\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\taccessibilityState={ { selected: isSelectedCustom() } }\n\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ colors.map( ( color ) => {\n\t\t\t\tconst scaleValue = isSelected( color ) ? scaleInterpolation : 1;\n\t\t\t\treturn (\n\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ScrollView>\n\t);\n}\n\nexport default ColorPalette;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.native.js"],"names":["ANIMATION_DURATION","contentWidth","scrollPosition","customIndicatorWidth","ColorPalette","enableCustomColor","setColor","activeColor","isGradientColor","defaultSettings","currentSegment","onCustomPress","shouldEnableBottomSheetScroll","shouldShowCustomIndicatorOption","shouldShowCustomLabel","shouldShowCustomVerticalSeparator","customColorIndicatorStyles","customIndicatorWrapperStyles","label","customSwatchGradients","scrollViewRef","isIOS","Platform","OS","isGradientSegment","colorsUtils","segments","scale","Animated","Value","current","opacity","defaultColors","colors","mergedColors","allColors","defaultGradientColors","gradients","customIndicatorColor","isCustomGradientColor","isSelectedCustom","shouldShowCustomIndicator","accessibilityHint","customText","scrollToEndWithDelay","scrollTo","x","y","isWithinColors","includes","isSelected","color","timingAnimation","property","toValue","timing","duration","easing","Easing","ease","useNativeDriver","performAnimation","setValue","parallel","start","scaleInterpolation","interpolate","inputRange","outputRange","deselectCustomGradient","width","Dimensions","get","isVisible","onColorPress","onContentSizeChange","delayedScroll","setTimeout","scrollToEnd","clearTimeout","onCustomIndicatorLayout","nativeEvent","layout","onScroll","contentOffset","verticalSeparatorStyle","styles","verticalSeparator","verticalSeparatorDark","customTextStyle","customTextAndroid","customTextDark","customIndicatorWrapperStyle","customIndicatorWrapper","headerText","contentContainer","map","scaleValue","selected","transform","colorIndicator","toUpperCase"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tTouchableWithoutFeedback,\n\tView,\n\tAnimated,\n\tEasing,\n\tDimensions,\n\tPlatform,\n\tText,\n} from 'react-native';\nimport { map, uniq } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport ColorIndicator from '../color-indicator';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nconst ANIMATION_DURATION = 200;\n\nlet contentWidth = 0;\nlet scrollPosition = 0;\nlet customIndicatorWidth = 0;\n\nfunction ColorPalette( {\n\tenableCustomColor = true,\n\tsetColor,\n\tactiveColor,\n\tisGradientColor,\n\tdefaultSettings,\n\tcurrentSegment,\n\tonCustomPress,\n\tshouldEnableBottomSheetScroll,\n\tshouldShowCustomIndicatorOption = true,\n\tshouldShowCustomLabel = true,\n\tshouldShowCustomVerticalSeparator = true,\n\tcustomColorIndicatorStyles,\n\tcustomIndicatorWrapperStyles,\n\tlabel,\n} ) {\n\tconst customSwatchGradients = [\n\t\t'linear-gradient(120deg, rgba(255,0,0,.8) 0%, rgba(255,255,255,1) 70.71%)',\n\t\t'linear-gradient(240deg, rgba(0,255,0,.8) 0%, rgba(0,255,0,0) 70.71%)',\n\t\t'linear-gradient(360deg, rgba(0,0,255,.8) 0%, rgba(0,0,255,0) 70.71%)',\n\t];\n\n\tconst scrollViewRef = useRef();\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];\n\n\tconst scale = useRef( new Animated.Value( 1 ) ).current;\n\tconst opacity = useRef( new Animated.Value( 1 ) ).current;\n\n\tconst defaultColors = uniq( map( defaultSettings.colors, 'color' ) );\n\tconst mergedColors = uniq( map( defaultSettings.allColors, 'color' ) );\n\tconst defaultGradientColors = uniq(\n\t\tmap( defaultSettings.gradients, 'gradient' )\n\t);\n\tconst colors = isGradientSegment ? defaultGradientColors : defaultColors;\n\n\tconst customIndicatorColor = isGradientSegment\n\t\t? activeColor\n\t\t: customSwatchGradients;\n\tconst isCustomGradientColor = isGradientColor && isSelectedCustom();\n\tconst shouldShowCustomIndicator =\n\t\tenableCustomColor &&\n\t\tshouldShowCustomIndicatorOption &&\n\t\t( ! isGradientSegment || isCustomGradientColor );\n\n\tconst accessibilityHint = isGradientSegment\n\t\t? __( 'Navigates to customize the gradient' )\n\t\t: __( 'Navigates to custom color picker' );\n\tconst customText = __( 'Custom' );\n\n\tuseEffect( () => {\n\t\tif ( scrollViewRef.current ) {\n\t\t\tif ( isSelectedCustom() ) {\n\t\t\t\tscrollToEndWithDelay();\n\t\t\t} else {\n\t\t\t\tscrollViewRef.current.scrollTo( { x: 0, y: 0 } );\n\t\t\t}\n\t\t}\n\t}, [ currentSegment ] );\n\n\tfunction isSelectedCustom() {\n\t\tconst isWithinColors =\n\t\t\tactiveColor && mergedColors && mergedColors.includes( activeColor );\n\t\tif ( enableCustomColor && activeColor ) {\n\t\t\tif ( isGradientSegment ) {\n\t\t\t\treturn isGradientColor && ! isWithinColors;\n\t\t\t}\n\t\t\treturn ! isGradientColor && ! isWithinColors;\n\t\t}\n\t\treturn false;\n\t}\n\n\tfunction isSelected( color ) {\n\t\treturn ! isSelectedCustom() && activeColor === color;\n\t}\n\n\tfunction timingAnimation( property, toValue ) {\n\t\treturn Animated.timing( property, {\n\t\t\ttoValue,\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: true,\n\t\t} );\n\t}\n\n\tfunction performAnimation( color ) {\n\t\tif ( ! isSelected( color ) ) {\n\t\t\topacity.setValue( 0 );\n\t\t}\n\n\t\tAnimated.parallel( [\n\t\t\ttimingAnimation( scale, 2 ),\n\t\t\ttimingAnimation( opacity, 1 ),\n\t\t] ).start( () => {\n\t\t\topacity.setValue( 1 );\n\t\t\tscale.setValue( 1 );\n\t\t} );\n\t}\n\n\tconst scaleInterpolation = scale.interpolate( {\n\t\tinputRange: [ 1, 1.5, 2 ],\n\t\toutputRange: [ 1, 0.7, 1 ],\n\t} );\n\n\tfunction deselectCustomGradient() {\n\t\tconst { width } = Dimensions.get( 'window' );\n\t\tconst isVisible =\n\t\t\tcontentWidth - scrollPosition - customIndicatorWidth < width;\n\n\t\tif ( isCustomGradientColor ) {\n\t\t\tif ( ! isIOS ) {\n\t\t\t\t// Scroll position on Android doesn't adjust automatically when removing the last item from the horizontal list.\n\t\t\t\t// https://github.com/facebook/react-native/issues/27504\n\t\t\t\t// Workaround: Force the scroll when deselecting custom gradient color and when custom indicator is visible on layout.\n\t\t\t\tif (\n\t\t\t\t\tisCustomGradientColor &&\n\t\t\t\t\tisVisible &&\n\t\t\t\t\tscrollViewRef.current\n\t\t\t\t) {\n\t\t\t\t\tscrollViewRef.current.scrollTo( {\n\t\t\t\t\t\tx: scrollPosition - customIndicatorWidth,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction onColorPress( color ) {\n\t\tdeselectCustomGradient();\n\t\tperformAnimation( color );\n\t\tsetColor( color );\n\t}\n\n\tfunction onContentSizeChange( width ) {\n\t\tcontentWidth = width;\n\t\tif ( isSelectedCustom() && scrollViewRef.current ) {\n\t\t\tscrollToEndWithDelay();\n\t\t}\n\t}\n\n\tfunction scrollToEndWithDelay() {\n\t\tconst delayedScroll = setTimeout( () => {\n\t\t\tscrollViewRef.current.scrollToEnd();\n\t\t}, ANIMATION_DURATION );\n\t\treturn () => {\n\t\t\tclearTimeout( delayedScroll );\n\t\t};\n\t}\n\n\tfunction onCustomIndicatorLayout( { nativeEvent } ) {\n\t\tconst { width } = nativeEvent.layout;\n\t\tif ( width !== customIndicatorWidth ) {\n\t\t\tcustomIndicatorWidth = width;\n\t\t}\n\t}\n\n\tfunction onScroll( { nativeEvent } ) {\n\t\tscrollPosition = nativeEvent.contentOffset.x;\n\t}\n\n\tconst verticalSeparatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles.verticalSeparator,\n\t\tstyles.verticalSeparatorDark\n\t);\n\n\tconst customTextStyle = usePreferredColorSchemeStyle(\n\t\t[ styles.customText, ! isIOS && styles.customTextAndroid ],\n\t\tstyles.customTextDark\n\t);\n\n\tconst customIndicatorWrapperStyle = [\n\t\tstyles.customIndicatorWrapper,\n\t\tcustomIndicatorWrapperStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t{ label && (\n\t\t\t\t<Text accessibilityRole=\"header\" style={ styles.headerText }>\n\t\t\t\t\t{ label }\n\t\t\t\t</Text>\n\t\t\t) }\n\n\t\t\t<ScrollView\n\t\t\t\tcontentContainerStyle={ styles.contentContainer }\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\tdisableScrollViewPanResponder\n\t\t\t\tscrollEventThrottle={ 16 }\n\t\t\t\tonScroll={ onScroll }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\tonScrollBeginDrag={ () =>\n\t\t\t\t\tshouldEnableBottomSheetScroll( false )\n\t\t\t\t}\n\t\t\t\tonScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) }\n\t\t\t\tref={ scrollViewRef }\n\t\t\t\ttestID={ `color-palette${ label ? '-' + label : '' }` }\n\t\t\t>\n\t\t\t\t{ colors.map( ( color ) => {\n\t\t\t\t\tconst scaleValue = isSelected( color )\n\t\t\t\t\t\t? scaleInterpolation\n\t\t\t\t\t\t: 1;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<View key={ `${ color }-${ isSelected( color ) }` }>\n\t\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\t\tonPress={ () => onColorPress( color ) }\n\t\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\t\tselected: isSelected( color ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccessibilityHint={ color }\n\t\t\t\t\t\t\t\ttestID={ color }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tscale: scaleValue,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected( color ) }\n\t\t\t\t\t\t\t\t\t\topacity={ opacity }\n\t\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ shouldShowCustomIndicator && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ customIndicatorWrapperStyle }\n\t\t\t\t\t\tonLayout={ onCustomIndicatorLayout }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ shouldShowCustomVerticalSeparator && (\n\t\t\t\t\t\t\t<View style={ verticalSeparatorStyle } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\t\t\tonPress={ onCustomPress }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: isSelectedCustom(),\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<View style={ customIndicatorWrapperStyle }>\n\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\twithCustomPicker={ ! isGradientSegment }\n\t\t\t\t\t\t\t\t\tcolor={ customIndicatorColor }\n\t\t\t\t\t\t\t\t\tisSelected={ isSelectedCustom() }\n\t\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\t\tstyles.colorIndicator,\n\t\t\t\t\t\t\t\t\t\tcustomColorIndicatorStyles,\n\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ shouldShowCustomLabel && (\n\t\t\t\t\t\t\t\t\t<Text style={ customTextStyle }>\n\t\t\t\t\t\t\t\t\t\t{ isIOS\n\t\t\t\t\t\t\t\t\t\t\t? customText\n\t\t\t\t\t\t\t\t\t\t\t: customText.toUpperCase() }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</ScrollView>\n\t\t</>\n\t);\n}\n\nexport default ColorPalette;\n"]}

package/build/color-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","settings","ConnectedColorPicker"],"mappings":";;;;;;;;;AAUA;;;;AANA;;AACA;;AAMA;;AACA;;AACA;;AAKA;;AAKA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AAlCA;AACA;AACA;;AAKA;AACA;AACA;;AAMA;AACA;AACA;AAqBA,oBAAQ,CAAEA,cAAF,CAAR;AAUA,MAAMC,OAAO,GAAG,CACf;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CADe,EAEf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAFe,EAGf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAHe,CAAhB;;AAMA,MAAMC,WAAW,GAAG,CACnBC,KADmB,EAEnBC,YAFmB,KAGf;AACJ,QAAM;AACLC,IAAAA,WAAW,GAAG,KADT;AAELC,IAAAA,KAAK,EAAEC,SAFF;AAGLC,IAAAA,QAHK;AAILC,IAAAA,YAAY,GAAG,MAJV;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOF,+BAAkBR,KAAlB,EAAyB,aAAzB,CAPJ,CADI,CAUJ;;AACA,QAAM,CAAEG,KAAF,EAASM,QAAT,IAAsB,+BAAoB;AAC/CJ,IAAAA,QAD+C;AAE/CP,IAAAA,KAAK,EAAEM,SAFwC;AAG/CE,IAAAA;AAH+C,GAApB,CAA5B;AAMA,QAAMI,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAO,oBAAQP,KAAK,IAAI,EAAjB,CAAP;AACA,GAFuB,EAErB,CAAEA,KAAF,CAFqB,CAAxB;AAIA,QAAMQ,iBAAiB,GAAG,0BAAaF,QAAb,CAA1B;AAEA,QAAMG,YAAY,GAAG,0BAClBC,SAAF,IAAyB;AACxBF,IAAAA,iBAAiB,CAAEE,SAAS,CAACC,KAAV,EAAF,CAAjB;AACA,GAHmB,EAIpB,CAAEH,iBAAF,CAJoB,CAArB;AAOA,QAAM,CAAEI,UAAF,EAAcC,aAAd,IAAgC,uBAAqB,KAArB,CAAtC;AACA,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBACnCX,UAAU,IAAI,KADqB,CAApC;AAIA,SACC,4BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAGN;AAAvB,KAA2CO,QAA3C,GACC,4BAAC,cAAD;AACC,IAAA,QAAQ,EAAGI,YADZ;AAEC,IAAA,KAAK,EAAGF,eAFT;AAGC,IAAA,WAAW,EAAGR;AAHf,IADD,EAMC,4BAAC,qCAAD,QACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACGa,UAAU,GACX,4BAAC,qBAAD;AACC,IAAA,OAAO,EAAGnB,OADX;AAEC,IAAA,KAAK,EAAGqB,SAFT;AAGC,IAAA,QAAQ,EAAKE,aAAF,IACVD,YAAY,CAAEC,aAAF,CAJd;AAMC,IAAA,KAAK,EAAG,cAAI,cAAJ,CANT;AAOC,IAAA,mBAAmB;AAPpB,IADW,GAWX,4BAAC,0BAAD;AACC,IAAA,KAAK,EAAGT,eADT;AAEC,IAAA,SAAS,EAAGH,UAAU,IAAIU,SAF3B;AAGC,IAAA,WAAW,EAAGf;AAHf,IAZF,EAkBC,4BAAC,4BAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,OAAO,EAAG,MAAMc,aAAa,CAAE,CAAED,UAAJ,CAF9B;AAGC,IAAA,IAAI,EAAGK,eAHR;AAIC,IAAA,SAAS,EAAGL,UAJb;AAKC,IAAA,KAAK,EACJA,UAAU,GACP,cAAI,sBAAJ,CADO,GAEP,cAAI,sBAAJ;AARL,IAlBD,CADD,EA+BC,4BAAC,cAAD;AAAQ,IAAA,MAAM,EAAG;AAAjB,IA/BD,EAgCGA,UAAU,IACX,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAGE,SADb;AAEC,IAAA,KAAK,EAAGP,eAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,WAAW,EAAGV;AAJf,IAjCF,CAND,CADD;AAkDA,CAxFD;;AA0FA,MAAMmB,oBAAoB,GAAG,6BAAgBtB,WAAhB,EAA6B,aAA7B,CAA7B;eAEesB,oB","sourcesContent":["/**\n * External dependencies\n */\nimport type { Ref } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ showInputs, setShowInputs ] = useState< boolean >( false );\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","showInputs","setShowInputs","colorType","setColorType","nextColorType","settings","ConnectedColorPicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tDetailsControlButton,\n} from './styles';\nimport { ColorDisplay } from './color-display';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ showInputs, setShowInputs ] = useState< boolean >( false );\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t{ showInputs ? (\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<ColorDisplay\n\t\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DetailsControlButton\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tonClick={ () => setShowInputs( ! showInputs ) }\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tisPressed={ showInputs }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tshowInputs\n\t\t\t\t\t\t\t\t? __( 'Hide detailed inputs' )\n\t\t\t\t\t\t\t\t: __( 'Show detailed inputs' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t{ showInputs && (\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}