@wordpress/components 27.6.0 → 28.0.1

package/build/base-control/index.js

@@ -11,11 +11,11 @@ Object.defineProperty(exports, "useBaseControlProps", {
     return _hooks.useBaseControlProps;
   }
 });
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _visuallyHidden = require("../visually-hidden");
 var _baseControlStyles = require("./styles/base-control-styles");
 var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
 var _hooks = require("./hooks");
 /**
  * External dependencies
@@ -58,26 +58,34 @@ const UnconnectedBaseControl = props => {
     className,
     children
   } = (0, _context.useContextSystem)(props, 'BaseControl');
-  return (0, _react.createElement)(_baseControlStyles.Wrapper, {
-    className: className
-  }, (0, _react.createElement)(_baseControlStyles.StyledField, {
-    className: "components-base-control__field"
-    // TODO: Official deprecation for this should start after all internal usages have been migrated
-    ,
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, label && id && (hideLabelFromVision ? (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
-    as: "label",
-    htmlFor: id
-  }, label) : (0, _react.createElement)(_baseControlStyles.StyledLabel, {
-    className: "components-base-control__label",
-    htmlFor: id
-  }, label)), label && !id && (hideLabelFromVision ? (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
-    as: "label"
-  }, label) : (0, _react.createElement)(VisualLabel, null, label)), children), !!help && (0, _react.createElement)(_baseControlStyles.StyledHelp, {
-    id: id ? id + '__help' : undefined,
-    className: "components-base-control__help",
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, help));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_baseControlStyles.Wrapper, {
+    className: className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_baseControlStyles.StyledField, {
+      className: "components-base-control__field"
+      // TODO: Official deprecation for this should start after all internal usages have been migrated
+      ,
+      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+      children: [label && id && (hideLabelFromVision ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
+        as: "label",
+        htmlFor: id,
+        children: label
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledLabel, {
+        className: "components-base-control__label",
+        htmlFor: id,
+        children: label
+      })), label && !id && (hideLabelFromVision ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
+        as: "label",
+        children: label
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(VisualLabel, {
+        children: label
+      })), children]
+    }), !!help && /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledHelp, {
+      id: id ? id + '__help' : undefined,
+      className: "components-base-control__help",
+      __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+      children: help
+    })]
+  });
 };
 
 /**
@@ -102,10 +110,11 @@ const VisualLabel = ({
   children,
   ...props
 }) => {
-  return (0, _react.createElement)(_baseControlStyles.StyledVisualLabel, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledVisualLabel, {
     ...props,
-    className: (0, _clsx.default)('components-base-control__label', className)
-  }, children);
+    className: (0, _clsx.default)('components-base-control__label', className),
+    children: children
+  });
 };
 exports.VisualLabel = VisualLabel;
 const BaseControl = exports.BaseControl = Object.assign((0, _context.contextConnectWithoutRef)(UnconnectedBaseControl, 'BaseControl'), {

package/build/base-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_visuallyHidden","_baseControlStyles","_context","_hooks","UnconnectedBaseControl","props","__nextHasNoMarginBottom","id","label","hideLabelFromVision","help","className","children","useContextSystem","_react","createElement","Wrapper","StyledField","VisuallyHidden","as","htmlFor","StyledLabel","VisualLabel","StyledHelp","undefined","StyledVisualLabel","clsx","exports","BaseControl","Object","assign","contextConnectWithoutRef","_default","default"],"sources":["@wordpress/components/src/base-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { BaseControlProps, BaseControlVisualLabelProps } from './types';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n\tStyledVisualLabel,\n} from './styles/base-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\n\nexport { useBaseControlProps } from './hooks';\n\n/**\n * `BaseControl` is a component used to generate labels and help text for components handling user inputs.\n *\n * ```jsx\n * import { BaseControl, useBaseControlProps } from '@wordpress/components';\n *\n * // Render a `BaseControl` for a textarea input\n * const MyCustomTextareaControl = ({ children, ...baseProps }) => (\n * \t// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`\n * \t// and the inner control itself. Namely, it takes care of generating a unique `id`,\n * \t// properly associating it with the `label` and `help` elements.\n * \tconst { baseControlProps, controlProps } = useBaseControlProps( baseProps );\n *\n * \treturn (\n * \t\t<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>\n * \t\t\t<textarea { ...controlProps }>\n * \t\t\t  { children }\n * \t\t\t</textarea>\n * \t\t</BaseControl>\n * \t);\n * );\n * ```\n */\nconst UnconnectedBaseControl = (\n\tprops: WordPressComponentProps< BaseControlProps, null >\n) => {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tid,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tclassName,\n\t\tchildren,\n\t} = useContextSystem( props, 'BaseControl' );\n\n\treturn (\n\t\t<Wrapper className={ className }>\n\t\t\t<StyledField\n\t\t\t\tclassName=\"components-base-control__field\"\n\t\t\t\t// TODO: Official deprecation for this should start after all internal usages have been migrated\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<VisualLabel>{ label }</VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id ? id + '__help' : undefined }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n};\n\n/**\n * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.\n *\n * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,\n * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would\n * otherwise use if the `label` prop was passed.\n *\n * @example\n * import { BaseControl } from '@wordpress/components';\n *\n * const MyBaseControl = () => (\n * \t<BaseControl help=\"This button is already accessibly labeled.\">\n * \t\t<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>\n * \t\t<Button>Select an author</Button>\n * \t</BaseControl>\n * );\n */\nexport const VisualLabel = ( {\n\tclassName,\n\tchildren,\n\t...props\n}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {\n\treturn (\n\t\t<StyledVisualLabel\n\t\t\t{ ...props }\n\t\t\tclassName={ clsx( 'components-base-control__label', className ) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledVisualLabel>\n\t);\n};\n\nexport const BaseControl = Object.assign(\n\tcontextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),\n\t{ VisualLabel }\n);\n\nexport default BaseControl;\n"],"mappings":";;;;;;;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,kBAAA,GAAAF,OAAA;AAQA,IAAAG,QAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AApBA;AACA;AACA;;AAGA;AACA;AACA;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,sBAAsB,GAC3BC,KAAwD,IACpD;EACJ,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,EAAE;IACFC,KAAK;IACLC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI;IACJC,SAAS;IACTC;EACD,CAAC,GAAG,IAAAC,yBAAgB,EAAER,KAAK,EAAE,aAAc,CAAC;EAE5C,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAe,OAAO;IAACL,SAAS,EAAGA;EAAW,GAC/B,IAAAG,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAgB,WAAW;IACXN,SAAS,EAAC;IACV;IAAA;IACAL,uBAAuB,EAAGA;EAAyB,GAEjDE,KAAK,IACND,EAAE,KACAE,mBAAmB,GACpB,IAAAK,MAAA,CAAAC,aAAA,EAACf,eAAA,CAAAkB,cAAc;IAACC,EAAE,EAAC,OAAO;IAACC,OAAO,EAAGb;EAAI,GACtCC,KACa,CAAC,GAEjB,IAAAM,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAoB,WAAW;IACXV,SAAS,EAAC,gCAAgC;IAC1CS,OAAO,EAAGb;EAAI,GAEZC,KACU,CACb,CAAE,EACFA,KAAK,IACN,CAAED,EAAE,KACFE,mBAAmB,GACpB,IAAAK,MAAA,CAAAC,aAAA,EAACf,eAAA,CAAAkB,cAAc;IAACC,EAAE,EAAC;EAAO,GAAGX,KAAuB,CAAC,GAErD,IAAAM,MAAA,CAAAC,aAAA,EAACO,WAAW,QAAGd,KAAoB,CACnC,CAAE,EACFI,QACU,CAAC,EACZ,CAAC,CAAEF,IAAI,IACR,IAAAI,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAsB,UAAU;IACVhB,EAAE,EAAGA,EAAE,GAAGA,EAAE,GAAG,QAAQ,GAAGiB,SAAW;IACrCb,SAAS,EAAC,+BAA+B;IACzCL,uBAAuB,EAAGA;EAAyB,GAEjDI,IACS,CAEL,CAAC;AAEZ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,WAAW,GAAGA,CAAE;EAC5BX,SAAS;EACTC,QAAQ;EACR,GAAGP;AAC4D,CAAC,KAAM;EACtE,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACd,kBAAA,CAAAwB,iBAAiB;IAAA,GACZpB,KAAK;IACVM,SAAS,EAAG,IAAAe,aAAI,EAAE,gCAAgC,EAAEf,SAAU;EAAG,GAE/DC,QACgB,CAAC;AAEtB,CAAC;AAACe,OAAA,CAAAL,WAAA,GAAAA,WAAA;AAEK,MAAMM,WAAW,GAAAD,OAAA,CAAAC,WAAA,GAAGC,MAAM,CAACC,MAAM,CACvC,IAAAC,iCAAwB,EAAE3B,sBAAsB,EAAE,aAAc,CAAC,EACjE;EAAEkB;AAAY,CACf,CAAC;AAAC,IAAAU,QAAA,GAAAL,OAAA,CAAAM,OAAA,GAEaL,WAAW","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_visuallyHidden","_baseControlStyles","_context","_jsxRuntime","_hooks","UnconnectedBaseControl","props","__nextHasNoMarginBottom","id","label","hideLabelFromVision","help","className","children","useContextSystem","jsxs","Wrapper","StyledField","jsx","VisuallyHidden","as","htmlFor","StyledLabel","VisualLabel","StyledHelp","undefined","StyledVisualLabel","clsx","exports","BaseControl","Object","assign","contextConnectWithoutRef","_default","default"],"sources":["@wordpress/components/src/base-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { BaseControlProps, BaseControlVisualLabelProps } from './types';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n\tStyledVisualLabel,\n} from './styles/base-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnectWithoutRef, useContextSystem } from '../context';\n\nexport { useBaseControlProps } from './hooks';\n\n/**\n * `BaseControl` is a component used to generate labels and help text for components handling user inputs.\n *\n * ```jsx\n * import { BaseControl, useBaseControlProps } from '@wordpress/components';\n *\n * // Render a `BaseControl` for a textarea input\n * const MyCustomTextareaControl = ({ children, ...baseProps }) => (\n * \t// `useBaseControlProps` is a convenience hook to get the props for the `BaseControl`\n * \t// and the inner control itself. Namely, it takes care of generating a unique `id`,\n * \t// properly associating it with the `label` and `help` elements.\n * \tconst { baseControlProps, controlProps } = useBaseControlProps( baseProps );\n *\n * \treturn (\n * \t\t<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>\n * \t\t\t<textarea { ...controlProps }>\n * \t\t\t  { children }\n * \t\t\t</textarea>\n * \t\t</BaseControl>\n * \t);\n * );\n * ```\n */\nconst UnconnectedBaseControl = (\n\tprops: WordPressComponentProps< BaseControlProps, null >\n) => {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tid,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tclassName,\n\t\tchildren,\n\t} = useContextSystem( props, 'BaseControl' );\n\n\treturn (\n\t\t<Wrapper className={ className }>\n\t\t\t<StyledField\n\t\t\t\tclassName=\"components-base-control__field\"\n\t\t\t\t// TODO: Official deprecation for this should start after all internal usages have been migrated\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<VisualLabel>{ label }</VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id ? id + '__help' : undefined }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n};\n\n/**\n * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.\n *\n * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,\n * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would\n * otherwise use if the `label` prop was passed.\n *\n * @example\n * import { BaseControl } from '@wordpress/components';\n *\n * const MyBaseControl = () => (\n * \t<BaseControl help=\"This button is already accessibly labeled.\">\n * \t\t<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>\n * \t\t<Button>Select an author</Button>\n * \t</BaseControl>\n * );\n */\nexport const VisualLabel = ( {\n\tclassName,\n\tchildren,\n\t...props\n}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {\n\treturn (\n\t\t<StyledVisualLabel\n\t\t\t{ ...props }\n\t\t\tclassName={ clsx( 'components-base-control__label', className ) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledVisualLabel>\n\t);\n};\n\nexport const BaseControl = Object.assign(\n\tcontextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),\n\t{ VisualLabel }\n);\n\nexport default BaseControl;\n"],"mappings":"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","ignoreList":[]}

package/build/base-control/index.native.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BaseControl;
-var _react = require("react");
 var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -15,9 +15,14 @@ function BaseControl({
   help,
   children
 }) {
-  return (0, _react.createElement)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     accessible: true,
-    accessibilityLabel: label
-  }, label && (0, _react.createElement)(_reactNative.Text, null, label), children, help && (0, _react.createElement)(_reactNative.Text, null, help));
+    accessibilityLabel: label,
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: label
+    }), children, help && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: help
+    })]
+  });
 }
 //# sourceMappingURL=index.native.js.map

package/build/base-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","BaseControl","label","help","children","_react","createElement","View","accessible","accessibilityLabel","Text"],"sources":["@wordpress/components/src/base-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text, View } from 'react-native';\n\nexport default function BaseControl( { label, help, children } ) {\n\treturn (\n\t\t<View accessible accessibilityLabel={ label }>\n\t\t\t{ label && <Text>{ label }</Text> }\n\t\t\t{ children }\n\t\t\t{ help && <Text>{ help }</Text> }\n\t\t</View>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGe,SAASC,WAAWA,CAAE;EAAEC,KAAK;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EAChE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACP,YAAA,CAAAQ,IAAI;IAACC,UAAU;IAACC,kBAAkB,EAAGP;EAAO,GAC1CA,KAAK,IAAI,IAAAG,MAAA,CAAAC,aAAA,EAACP,YAAA,CAAAW,IAAI,QAAGR,KAAa,CAAC,EAC/BE,QAAQ,EACRD,IAAI,IAAI,IAAAE,MAAA,CAAAC,aAAA,EAACP,YAAA,CAAAW,IAAI,QAAGP,IAAY,CACzB,CAAC;AAET","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_jsxRuntime","BaseControl","label","help","children","jsxs","View","accessible","accessibilityLabel","jsx","Text"],"sources":["@wordpress/components/src/base-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text, View } from 'react-native';\n\nexport default function BaseControl( { label, help, children } ) {\n\treturn (\n\t\t<View accessible accessibilityLabel={ label }>\n\t\t\t{ label && <Text>{ label }</Text> }\n\t\t\t{ children }\n\t\t\t{ help && <Text>{ help }</Text> }\n\t\t</View>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAA0C,IAAAC,WAAA,GAAAD,OAAA;AAH1C;AACA;AACA;;AAGe,SAASE,WAAWA,CAAE;EAAEC,KAAK;EAAEC,IAAI;EAAEC;AAAS,CAAC,EAAG;EAChE,oBACC,IAAAJ,WAAA,CAAAK,IAAA,EAACP,YAAA,CAAAQ,IAAI;IAACC,UAAU;IAACC,kBAAkB,EAAGN,KAAO;IAAAE,QAAA,GAC1CF,KAAK,iBAAI,IAAAF,WAAA,CAAAS,GAAA,EAACX,YAAA,CAAAY,IAAI;MAAAN,QAAA,EAAGF;IAAK,CAAQ,CAAC,EAC/BE,QAAQ,EACRD,IAAI,iBAAI,IAAAH,WAAA,CAAAS,GAAA,EAACX,YAAA,CAAAY,IAAI;MAAAN,QAAA,EAAGD;IAAI,CAAQ,CAAC;EAAA,CAC1B,CAAC;AAET","ignoreList":[]}

package/build/border-box-control/border-box-control/component.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BorderBoxControl = void 0;
-var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
@@ -17,6 +16,7 @@ var _view = require("../../view");
 var _visuallyHidden = require("../../visually-hidden");
 var _context = require("../../context");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -33,9 +33,12 @@ const BorderLabel = props => {
   if (!label) {
     return null;
   }
-  return hideLabelFromVision ? (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
-    as: "label"
-  }, label) : (0, _react.createElement)(_baseControlStyles.StyledLabel, null, label);
+  return hideLabelFromVision ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
+    as: "label",
+    children: label
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseControlStyles.StyledLabel, {
+    children: label
+  });
 };
 const UnconnectedBorderBoxControl = (props, forwardedRef) => {
   const {
@@ -75,48 +78,50 @@ const UnconnectedBorderBoxControl = (props, forwardedRef) => {
     shift: true
   } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
   const mergedRef = (0, _compose.useMergeRefs)([setPopoverAnchor, forwardedRef]);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_view.View, {
     className: className,
     ...otherProps,
-    ref: mergedRef
-  }, (0, _react.createElement)(BorderLabel, {
-    label: label,
-    hideLabelFromVision: hideLabelFromVision
-  }), (0, _react.createElement)(_view.View, {
-    className: wrapperClassName
-  }, isLinked ? (0, _react.createElement)(_borderControl.BorderControl, {
-    className: linkedControlClassName,
-    colors: colors,
-    disableUnits: disableUnits,
-    disableCustomColors: disableCustomColors,
-    enableAlpha: enableAlpha,
-    enableStyle: enableStyle,
-    onChange: onLinkedChange,
-    placeholder: hasMixedBorders ? (0, _i18n.__)('Mixed') : undefined,
-    __unstablePopoverProps: popoverProps,
-    shouldSanitizeBorder: false // This component will handle that.
-    ,
-    value: linkedValue,
-    withSlider: true,
-    width: size === '__unstable-large' ? '116px' : '110px',
-    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-    size: size
-  }) : (0, _react.createElement)(_borderBoxControlSplitControls.default, {
-    colors: colors,
-    disableCustomColors: disableCustomColors,
-    enableAlpha: enableAlpha,
-    enableStyle: enableStyle,
-    onChange: onSplitChange,
-    popoverPlacement: popoverPlacement,
-    popoverOffset: popoverOffset,
-    value: splitValue,
-    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-    size: size
-  }), (0, _react.createElement)(_borderBoxControlLinkedButton.default, {
-    onClick: toggleLinked,
-    isLinked: isLinked,
-    size: size
-  })));
+    ref: mergedRef,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BorderLabel, {
+      label: label,
+      hideLabelFromVision: hideLabelFromVision
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_view.View, {
+      className: wrapperClassName,
+      children: [isLinked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControl.BorderControl, {
+        className: linkedControlClassName,
+        colors: colors,
+        disableUnits: disableUnits,
+        disableCustomColors: disableCustomColors,
+        enableAlpha: enableAlpha,
+        enableStyle: enableStyle,
+        onChange: onLinkedChange,
+        placeholder: hasMixedBorders ? (0, _i18n.__)('Mixed') : undefined,
+        __unstablePopoverProps: popoverProps,
+        shouldSanitizeBorder: false // This component will handle that.
+        ,
+        value: linkedValue,
+        withSlider: true,
+        width: size === '__unstable-large' ? '116px' : '110px',
+        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+        size: size
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderBoxControlSplitControls.default, {
+        colors: colors,
+        disableCustomColors: disableCustomColors,
+        enableAlpha: enableAlpha,
+        enableStyle: enableStyle,
+        onChange: onSplitChange,
+        popoverPlacement: popoverPlacement,
+        popoverOffset: popoverOffset,
+        value: splitValue,
+        __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+        size: size
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderBoxControlLinkedButton.default, {
+        onClick: toggleLinked,
+        isLinked: isLinked,
+        size: size
+      })]
+    })]
+  });
 };
 
 /**

package/build/border-box-control/border-box-control/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlLinkedButton","_interopRequireDefault","_borderBoxControlSplitControls","_borderControl","_baseControlStyles","_view","_visuallyHidden","_context","_hook","BorderLabel","props","label","hideLabelFromVision","_react","createElement","VisuallyHidden","as","StyledLabel","UnconnectedBorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","size","splitValue","toggleLinked","wrapperClassName","__experimentalIsRenderedInSidebar","otherProps","useBorderBoxControl","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","placement","offset","anchor","shift","undefined","mergedRef","useMergeRefs","View","ref","BorderControl","onChange","placeholder","__","__unstablePopoverProps","shouldSanitizeBorder","value","withSlider","width","default","onClick","BorderBoxControl","exports","contextConnect","_default"],"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tsize,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ mergedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<View className={ wrapperClassName }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsize === '__unstable-large' ? '116px' : '110px'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverPlacement={ popoverPlacement }\n\t\t\t\t\t\tpopoverOffset={ popoverOffset }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderBoxControl` effectively has two view states. The first, a \"linked\"\n * view, allows configuration of a flat border via a single `BorderControl`.\n * The second, a \"split\" view, contains a `BorderControl` for each side\n * as well as a visualizer for the currently selected borders. Each view also\n * contains a button to toggle between the two.\n *\n * When switching from the \"split\" view to \"linked\", if the individual side\n * borders are not consistent, the \"linked\" view will display any border\n * properties selections that are consistent while showing a mixed state for\n * those that aren't. For example, if all borders had the same color and style\n * but different widths, then the border dropdown in the \"linked\" view's\n * `BorderControl` would show that consistent color and style but the \"linked\"\n * view's width input would show \"Mixed\" placeholder text.\n *\n * ```jsx\n * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n *\n * \treturn (\n * \t\t<BorderBoxControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(\n\tUnconnectedBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default BorderBoxControl;\n"],"mappings":"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,EAAGzB,aAAe;IAC1BC,gBAAgB,EAAGA,gBAAkB;IACrCC,aAAa,EAAGA,aAAe;IAC/B4B,KAAK,EAAG1B,UAAY;IACpBG,iCAAiC,EAChCA,iCACA;IACDJ,IAAI,EAAGA;EAAM,CACb,CACD,EACD,IAAArB,MAAA,CAAAC,aAAA,EAACd,6BAAA,CAAAgE,OAA4B;IAC5BC,OAAO,EAAG7B,YAAc;IACxBT,QAAQ,EAAGA,QAAU;IACrBO,IAAI,EAAGA;EAAM,CACb,CACI,CACD,CAAC;AAET,CAAC;;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMgC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,uBAAc,EAC7ClD,2BAA2B,EAC3B,kBACD,CAAC;AAAC,IAAAmD,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAEaE,gBAAgB","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlLinkedButton","_interopRequireDefault","_borderBoxControlSplitControls","_borderControl","_baseControlStyles","_view","_visuallyHidden","_context","_hook","_jsxRuntime","BorderLabel","props","label","hideLabelFromVision","jsx","VisuallyHidden","as","children","StyledLabel","UnconnectedBorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","size","splitValue","toggleLinked","wrapperClassName","__experimentalIsRenderedInSidebar","otherProps","useBorderBoxControl","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","placement","offset","anchor","shift","undefined","mergedRef","useMergeRefs","jsxs","View","ref","BorderControl","onChange","placeholder","__","__unstablePopoverProps","shouldSanitizeBorder","value","withSlider","width","default","onClick","BorderBoxControl","exports","contextConnect","_default"],"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tsize,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\twrapperClassName,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ mergedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<View className={ wrapperClassName }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsize === '__unstable-large' ? '116px' : '110px'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverPlacement={ popoverPlacement }\n\t\t\t\t\t\tpopoverOffset={ popoverOffset }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderBoxControl` effectively has two view states. The first, a \"linked\"\n * view, allows configuration of a flat border via a single `BorderControl`.\n * The second, a \"split\" view, contains a `BorderControl` for each side\n * as well as a visualizer for the currently selected borders. Each view also\n * contains a button to toggle between the two.\n *\n * When switching from the \"split\" view to \"linked\", if the individual side\n * borders are not consistent, the \"linked\" view will display any border\n * properties selections that are consistent while showing a mixed state for\n * those that aren't. For example, if all borders had the same color and style\n * but different widths, then the border dropdown in the \"linked\" view's\n * `BorderControl` would show that consistent color and style but the \"linked\"\n * view's width input would show \"Mixed\" placeholder text.\n *\n * ```jsx\n * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n *\n * \treturn (\n * \t\t<BorderBoxControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(\n\tUnconnectedBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default BorderBoxControl;\n"],"mappings":"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","ignoreList":[]}

package/build/border-box-control/border-box-control-linked-button/component.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
 var _button = _interopRequireDefault(require("../../button"));
@@ -13,6 +12,7 @@ var _tooltip = _interopRequireDefault(require("../../tooltip"));
 var _view = require("../../view");
 var _context = require("../../context");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -28,18 +28,20 @@ const BorderBoxControlLinkedButton = (props, forwardedRef) => {
     ...buttonProps
   } = (0, _hook.useBorderBoxControlLinkedButton)(props);
   const label = isLinked ? (0, _i18n.__)('Unlink sides') : (0, _i18n.__)('Link sides');
-  return (0, _react.createElement)(_tooltip.default, {
-    text: label
-  }, (0, _react.createElement)(_view.View, {
-    className: className
-  }, (0, _react.createElement)(_button.default, {
-    ...buttonProps,
-    size: "small",
-    icon: isLinked ? _icons.link : _icons.linkOff,
-    iconSize: 24,
-    "aria-label": label,
-    ref: forwardedRef
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+    text: label,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
+      className: className,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+        ...buttonProps,
+        size: "small",
+        icon: isLinked ? _icons.link : _icons.linkOff,
+        iconSize: 24,
+        "aria-label": label,
+        ref: forwardedRef
+      })
+    })
+  });
 };
 const ConnectedBorderBoxControlLinkedButton = (0, _context.contextConnect)(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');
 var _default = exports.default = ConnectedBorderBoxControlLinkedButton;

package/build/border-box-control/border-box-control-linked-button/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","_view","_context","_hook","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","useBorderBoxControlLinkedButton","label","__","_react","createElement","default","text","View","size","icon","link","linkOff","iconSize","ref","ConnectedBorderBoxControlLinkedButton","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { className, isLinked, ...buttonProps } =\n\t\tuseBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AAdA;AACA;AACA;;AAIA;AACA;AACA;;AAUA,MAAMQ,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5C,IAAAC,qCAA+B,EAAEL,KAAM,CAAC;EACzC,MAAMM,KAAK,GAAGH,QAAQ,GAAG,IAAAI,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACd,QAAA,CAAAe,OAAO;IAACC,IAAI,EAAGL;EAAO,GACtB,IAAAE,MAAA,CAAAC,aAAA,EAACb,KAAA,CAAAgB,IAAI;IAACV,SAAS,EAAGA;EAAW,GAC5B,IAAAM,MAAA,CAAAC,aAAA,EAAChB,OAAA,CAAAiB,OAAM;IAAA,GACDN,WAAW;IAChBS,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGX,QAAQ,GAAGY,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACf,cAAaX,KAAO;IACpBY,GAAG,EAAGjB;EAAc,CACpB,CACI,CACE,CAAC;AAEZ,CAAC;AAED,MAAMkB,qCAAqC,GAAG,IAAAC,uBAAc,EAC3DrB,4BAA4B,EAC5B,8BACD,CAAC;AAAC,IAAAsB,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GACaS,qCAAqC","ignoreList":[]}
+{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","_view","_context","_hook","_jsxRuntime","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","useBorderBoxControlLinkedButton","label","__","jsx","default","text","children","View","size","icon","link","linkOff","iconSize","ref","ConnectedBorderBoxControlLinkedButton","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { className, isLinked, ...buttonProps } =\n\t\tuseBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AAAyD,IAAAQ,WAAA,GAAAR,OAAA;AAdzD;AACA;AACA;;AAIA;AACA;AACA;;AAUA,MAAMS,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5C,IAAAC,qCAA+B,EAAEL,KAAM,CAAC;EACzC,MAAMM,KAAK,GAAGH,QAAQ,GAAG,IAAAI,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,oBACC,IAAAT,WAAA,CAAAU,GAAA,EAACd,QAAA,CAAAe,OAAO;IAACC,IAAI,EAAGJ,KAAO;IAAAK,QAAA,eACtB,IAAAb,WAAA,CAAAU,GAAA,EAACb,KAAA,CAAAiB,IAAI;MAACV,SAAS,EAAGA,SAAW;MAAAS,QAAA,eAC5B,IAAAb,WAAA,CAAAU,GAAA,EAAChB,OAAA,CAAAiB,OAAM;QAAA,GACDL,WAAW;QAChBS,IAAI,EAAC,OAAO;QACZC,IAAI,EAAGX,QAAQ,GAAGY,WAAI,GAAGC,cAAS;QAClCC,QAAQ,EAAG,EAAI;QACf,cAAaX,KAAO;QACpBY,GAAG,EAAGjB;MAAc,CACpB;IAAC,CACG;EAAC,CACC,CAAC;AAEZ,CAAC;AAED,MAAMkB,qCAAqC,GAAG,IAAAC,uBAAc,EAC3DrB,4BAA4B,EAC5B,8BACD,CAAC;AAAC,IAAAsB,QAAA,GAAAC,OAAA,CAAAb,OAAA,GACaU,qCAAqC","ignoreList":[]}

package/build/border-box-control/border-box-control-split-controls/component.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
@@ -14,6 +13,7 @@ var _borderControl = require("../../border-control");
 var _grid = require("../../grid");
 var _context = require("../../context");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -60,45 +60,46 @@ const BorderBoxControlSplitControls = (props, forwardedRef) => {
     size
   };
   const mergedRef = (0, _compose.useMergeRefs)([setPopoverAnchor, forwardedRef]);
-  return (0, _react.createElement)(_grid.Grid, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_grid.Grid, {
     ...otherProps,
     ref: mergedRef,
-    gap: 4
-  }, (0, _react.createElement)(_borderBoxControlVisualizer.default, {
-    value: value,
-    size: size
-  }), (0, _react.createElement)(_borderControl.BorderControl, {
-    className: centeredClassName,
-    hideLabelFromVision: true,
-    label: (0, _i18n.__)('Top border'),
-    onChange: newBorder => onChange(newBorder, 'top'),
-    __unstablePopoverProps: popoverProps,
-    value: value?.top,
-    ...sharedBorderControlProps
-  }), (0, _react.createElement)(_borderControl.BorderControl, {
-    hideLabelFromVision: true,
-    label: (0, _i18n.__)('Left border'),
-    onChange: newBorder => onChange(newBorder, 'left'),
-    __unstablePopoverProps: popoverProps,
-    value: value?.left,
-    ...sharedBorderControlProps
-  }), (0, _react.createElement)(_borderControl.BorderControl, {
-    className: rightAlignedClassName,
-    hideLabelFromVision: true,
-    label: (0, _i18n.__)('Right border'),
-    onChange: newBorder => onChange(newBorder, 'right'),
-    __unstablePopoverProps: popoverProps,
-    value: value?.right,
-    ...sharedBorderControlProps
-  }), (0, _react.createElement)(_borderControl.BorderControl, {
-    className: centeredClassName,
-    hideLabelFromVision: true,
-    label: (0, _i18n.__)('Bottom border'),
-    onChange: newBorder => onChange(newBorder, 'bottom'),
-    __unstablePopoverProps: popoverProps,
-    value: value?.bottom,
-    ...sharedBorderControlProps
-  }));
+    gap: 4,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_borderBoxControlVisualizer.default, {
+      value: value,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControl.BorderControl, {
+      className: centeredClassName,
+      hideLabelFromVision: true,
+      label: (0, _i18n.__)('Top border'),
+      onChange: newBorder => onChange(newBorder, 'top'),
+      __unstablePopoverProps: popoverProps,
+      value: value?.top,
+      ...sharedBorderControlProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControl.BorderControl, {
+      hideLabelFromVision: true,
+      label: (0, _i18n.__)('Left border'),
+      onChange: newBorder => onChange(newBorder, 'left'),
+      __unstablePopoverProps: popoverProps,
+      value: value?.left,
+      ...sharedBorderControlProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControl.BorderControl, {
+      className: rightAlignedClassName,
+      hideLabelFromVision: true,
+      label: (0, _i18n.__)('Right border'),
+      onChange: newBorder => onChange(newBorder, 'right'),
+      __unstablePopoverProps: popoverProps,
+      value: value?.right,
+      ...sharedBorderControlProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControl.BorderControl, {
+      className: centeredClassName,
+      hideLabelFromVision: true,
+      label: (0, _i18n.__)('Bottom border'),
+      onChange: newBorder => onChange(newBorder, 'bottom'),
+      __unstablePopoverProps: popoverProps,
+      value: value?.bottom,
+      ...sharedBorderControlProps
+    })]
+  });
 };
 const ConnectedBorderBoxControlSplitControls = (0, _context.contextConnect)(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');
 var _default = exports.default = ConnectedBorderBoxControlSplitControls;

package/build/border-box-control/border-box-control-split-controls/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlVisualizer","_interopRequireDefault","_borderControl","_grid","_context","_hook","BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverPlacement","popoverOffset","rightAlignedClassName","size","value","__experimentalIsRenderedInSidebar","otherProps","useBorderBoxControlSplitControls","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","placement","offset","anchor","shift","undefined","sharedBorderControlProps","isCompact","mergedRef","useMergeRefs","_react","createElement","Grid","ref","gap","default","BorderControl","className","hideLabelFromVision","label","__","newBorder","__unstablePopoverProps","top","left","right","bottom","ConnectedBorderBoxControlSplitControls","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { BorderControlProps } from '../../border-control/types';\nimport type { SplitControlsProps } from '../types';\n\nconst BorderBoxControlSplitControls = (\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcenteredClassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tonChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\trightAlignedClassName,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tsize,\n\t};\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer value={ value } size={ size } />\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision\n\t\t\t\tlabel={ __( 'Top border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'top' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.top }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision\n\t\t\t\tlabel={ __( 'Left border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'left' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.left }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ rightAlignedClassName }\n\t\t\t\thideLabelFromVision\n\t\t\t\tlabel={ __( 'Right border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'right' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.right }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision\n\t\t\t\tlabel={ __( 'Bottom border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.bottom }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedBorderBoxControlSplitControls = contextConnect(\n\tBorderBoxControlSplitControls,\n\t'BorderBoxControlSplitControls'\n);\nexport default ConnectedBorderBoxControlSplitControls;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_element","_compose","_borderBoxControlVisualizer","_interopRequireDefault","_borderControl","_grid","_context","_hook","_jsxRuntime","BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverPlacement","popoverOffset","rightAlignedClassName","size","value","__experimentalIsRenderedInSidebar","otherProps","useBorderBoxControlSplitControls","popoverAnchor","setPopoverAnchor","useState","popoverProps","useMemo","placement","offset","anchor","shift","undefined","sharedBorderControlProps","isCompact","mergedRef","useMergeRefs","jsxs","Grid","ref","gap","children","jsx","default","BorderControl","className","hideLabelFromVision","label","__","newBorder","__unstablePopoverProps","top","left","right","bottom","ConnectedBorderBoxControlSplitControls","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { BorderControlProps } from '../../border-control/types';\nimport type { SplitControlsProps } from '../types';\n\nconst BorderBoxControlSplitControls = (\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcenteredClassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tonChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\trightAlignedClassName,\n\t\tsize = 'default',\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalIsRenderedInSidebar,\n\t\tsize,\n\t};\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer value={ value } size={ size } />\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision\n\t\t\t\tlabel={ __( 'Top border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'top' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.top }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision\n\t\t\t\tlabel={ __( 'Left border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'left' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.left }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ rightAlignedClassName }\n\t\t\t\thideLabelFromVision\n\t\t\t\tlabel={ __( 'Right border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'right' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.right }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision\n\t\t\t\tlabel={ __( 'Bottom border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.bottom }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedBorderBoxControlSplitControls = contextConnect(\n\tBorderBoxControlSplitControls,\n\t'BorderBoxControlSplitControls'\n);\nexport default ConnectedBorderBoxControlSplitControls;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,2BAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAEA,IAAAO,QAAA,GAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAR,OAAA;AAA0D,IAAAS,WAAA,GAAAT,OAAA;AAf1D;AACA;AACA;;AAKA;AACA;AACA;;AAWA,MAAMU,6BAA6B,GAAGA,CACrCC,KAA2D,EAC3DC,YAAuC,KACnC;EACJ,MAAM;IACLC,iBAAiB;IACjBC,MAAM;IACNC,mBAAmB;IACnBC,WAAW;IACXC,WAAW;IACXC,QAAQ;IACRC,gBAAgB;IAChBC,aAAa;IACbC,qBAAqB;IACrBC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,iCAAiC;IACjC,GAAGC;EACJ,CAAC,GAAG,IAAAC,sCAAgC,EAAEf,KAAM,CAAC;;EAE7C;EACA;EACA,MAAM,CAAEgB,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,iBAAQ,EACnD,IACD,CAAC;;EAED;EACA,MAAMC,YAA4D,GACjE,IAAAC,gBAAO,EACN,MACCZ,gBAAgB,GACb;IACAa,SAAS,EAAEb,gBAAgB;IAC3Bc,MAAM,EAAEb,aAAa;IACrBc,MAAM,EAAEP,aAAa;IACrBQ,KAAK,EAAE;EACP,CAAC,GACDC,SAAS,EACb,CAAEjB,gBAAgB,EAAEC,aAAa,EAAEO,aAAa,CACjD,CAAC;EAEF,MAAMU,wBAAwB,GAAG;IAChCvB,MAAM;IACNC,mBAAmB;IACnBC,WAAW;IACXC,WAAW;IACXqB,SAAS,EAAE,IAAI;IACfd,iCAAiC;IACjCF;EACD,CAAC;EAED,MAAMiB,SAAS,GAAG,IAAAC,qBAAY,EAAE,CAAEZ,gBAAgB,EAAEhB,YAAY,CAAG,CAAC;EAEpE,oBACC,IAAAH,WAAA,CAAAgC,IAAA,EAACnC,KAAA,CAAAoC,IAAI;IAAA,GAAMjB,UAAU;IAAGkB,GAAG,EAAGJ,SAAW;IAACK,GAAG,EAAG,CAAG;IAAAC,QAAA,gBAClD,IAAApC,WAAA,CAAAqC,GAAA,EAAC3C,2BAAA,CAAA4C,OAA0B;MAACxB,KAAK,EAAGA,KAAO;MAACD,IAAI,EAAGA;IAAM,CAAE,CAAC,eAC5D,IAAAb,WAAA,CAAAqC,GAAA,EAACzC,cAAA,CAAA2C,aAAa;MACbC,SAAS,EAAGpC,iBAAmB;MAC/BqC,mBAAmB;MACnBC,KAAK,EAAG,IAAAC,QAAE,EAAE,YAAa,CAAG;MAC5BlC,QAAQ,EAAKmC,SAAS,IAAMnC,QAAQ,CAAEmC,SAAS,EAAE,KAAM,CAAG;MAC1DC,sBAAsB,EAAGxB,YAAc;MACvCP,KAAK,EAAGA,KAAK,EAAEgC,GAAK;MAAA,GACflB;IAAwB,CAC7B,CAAC,eACF,IAAA5B,WAAA,CAAAqC,GAAA,EAACzC,cAAA,CAAA2C,aAAa;MACbE,mBAAmB;MACnBC,KAAK,EAAG,IAAAC,QAAE,EAAE,aAAc,CAAG;MAC7BlC,QAAQ,EAAKmC,SAAS,IAAMnC,QAAQ,CAAEmC,SAAS,EAAE,MAAO,CAAG;MAC3DC,sBAAsB,EAAGxB,YAAc;MACvCP,KAAK,EAAGA,KAAK,EAAEiC,IAAM;MAAA,GAChBnB;IAAwB,CAC7B,CAAC,eACF,IAAA5B,WAAA,CAAAqC,GAAA,EAACzC,cAAA,CAAA2C,aAAa;MACbC,SAAS,EAAG5B,qBAAuB;MACnC6B,mBAAmB;MACnBC,KAAK,EAAG,IAAAC,QAAE,EAAE,cAAe,CAAG;MAC9BlC,QAAQ,EAAKmC,SAAS,IAAMnC,QAAQ,CAAEmC,SAAS,EAAE,OAAQ,CAAG;MAC5DC,sBAAsB,EAAGxB,YAAc;MACvCP,KAAK,EAAGA,KAAK,EAAEkC,KAAO;MAAA,GACjBpB;IAAwB,CAC7B,CAAC,eACF,IAAA5B,WAAA,CAAAqC,GAAA,EAACzC,cAAA,CAAA2C,aAAa;MACbC,SAAS,EAAGpC,iBAAmB;MAC/BqC,mBAAmB;MACnBC,KAAK,EAAG,IAAAC,QAAE,EAAE,eAAgB,CAAG;MAC/BlC,QAAQ,EAAKmC,SAAS,IAAMnC,QAAQ,CAAEmC,SAAS,EAAE,QAAS,CAAG;MAC7DC,sBAAsB,EAAGxB,YAAc;MACvCP,KAAK,EAAGA,KAAK,EAAEmC,MAAQ;MAAA,GAClBrB;IAAwB,CAC7B,CAAC;EAAA,CACG,CAAC;AAET,CAAC;AAED,MAAMsB,sCAAsC,GAAG,IAAAC,uBAAc,EAC5DlD,6BAA6B,EAC7B,+BACD,CAAC;AAAC,IAAAmD,QAAA,GAAAC,OAAA,CAAAf,OAAA,GACaY,sCAAsC","ignoreList":[]}

package/build/border-box-control/border-box-control-visualizer/component.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _view = require("../../view");
 var _context = require("../../context");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -21,7 +21,7 @@ const BorderBoxControlVisualizer = (props, forwardedRef) => {
     value,
     ...otherProps
   } = (0, _hook.useBorderBoxControlVisualizer)(props);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     ...otherProps,
     ref: forwardedRef
   });

package/build/border-box-control/border-box-control-visualizer/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_view","require","_context","_hook","BorderBoxControlVisualizer","props","forwardedRef","value","otherProps","useBorderBoxControlVisualizer","_react","createElement","View","ref","ConnectedBorderBoxControlVisualizer","contextConnect","_default","exports","default"],"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlVisualizer } from './hook';\n\nimport type { VisualizerProps } from '../types';\n\nconst BorderBoxControlVisualizer = (\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { value, ...otherProps } = useBorderBoxControlVisualizer( props );\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n};\n\nconst ConnectedBorderBoxControlVisualizer = contextConnect(\n\tBorderBoxControlVisualizer,\n\t'BorderBoxControlVisualizer'\n);\nexport default ConnectedBorderBoxControlVisualizer;\n"],"mappings":";;;;;;;AAQA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMG,0BAA0B,GAAGA,CAClCC,KAAwD,EACxDC,YAAuC,KACnC;EACJ,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAW,CAAC,GAAG,IAAAC,mCAA6B,EAAEJ,KAAM,CAAC;EAEvE,OAAO,IAAAK,MAAA,CAAAC,aAAA,EAACX,KAAA,CAAAY,IAAI;IAAA,GAAMJ,UAAU;IAAGK,GAAG,EAAGP;EAAc,CAAE,CAAC;AACvD,CAAC;AAED,MAAMQ,mCAAmC,GAAG,IAAAC,uBAAc,EACzDX,0BAA0B,EAC1B,4BACD,CAAC;AAAC,IAAAY,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACaJ,mCAAmC","ignoreList":[]}
+{"version":3,"names":["_view","require","_context","_hook","_jsxRuntime","BorderBoxControlVisualizer","props","forwardedRef","value","otherProps","useBorderBoxControlVisualizer","jsx","View","ref","ConnectedBorderBoxControlVisualizer","contextConnect","_default","exports","default"],"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlVisualizer } from './hook';\n\nimport type { VisualizerProps } from '../types';\n\nconst BorderBoxControlVisualizer = (\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { value, ...otherProps } = useBorderBoxControlVisualizer( props );\n\n\treturn <View { ...otherProps } ref={ forwardedRef } />;\n};\n\nconst ConnectedBorderBoxControlVisualizer = contextConnect(\n\tBorderBoxControlVisualizer,\n\t'BorderBoxControlVisualizer'\n);\nexport default ConnectedBorderBoxControlVisualizer;\n"],"mappings":";;;;;;AAQA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAuD,IAAAG,WAAA,GAAAH,OAAA;AAXvD;AACA;AACA;;AAGA;AACA;AACA;;AAQA,MAAMI,0BAA0B,GAAGA,CAClCC,KAAwD,EACxDC,YAAuC,KACnC;EACJ,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAW,CAAC,GAAG,IAAAC,mCAA6B,EAAEJ,KAAM,CAAC;EAEvE,oBAAO,IAAAF,WAAA,CAAAO,GAAA,EAACX,KAAA,CAAAY,IAAI;IAAA,GAAMH,UAAU;IAAGI,GAAG,EAAGN;EAAc,CAAE,CAAC;AACvD,CAAC;AAED,MAAMO,mCAAmC,GAAG,IAAAC,uBAAc,EACzDV,0BAA0B,EAC1B,4BACD,CAAC;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACaJ,mCAAmC","ignoreList":[]}