@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.0

package/build/border-control/border-control/hook.js

@@ -1,30 +1,45 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hook_exports = {};
+__export(hook_exports, {
+  useBorderControl: () => useBorderControl
 });
-exports.useBorderControl = useBorderControl;
-var _element = require("@wordpress/element");
-var styles = _interopRequireWildcard(require("../styles"));
-var _utils = require("../../unit-control/utils");
-var _context = require("../../context");
-var _useCx = require("../../utils/hooks/use-cx");
-var _deprecated36pxSize = require("../../utils/deprecated-36px-size");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-// If either width or color are defined, the border is considered valid
-// and a border style can be set as well.
-const isValidBorder = border => {
-  const hasWidth = border?.width !== undefined && border.width !== '';
-  const hasColor = border?.color !== undefined;
+module.exports = __toCommonJS(hook_exports);
+var import_element = require("@wordpress/element");
+var styles = __toESM(require("../styles"));
+var import_utils = require("../../unit-control/utils");
+var import_context = require("../../context");
+var import_use_cx = require("../../utils/hooks/use-cx");
+var import_deprecated_36px_size = require("../../utils/deprecated-36px-size");
+const isValidBorder = (border) => {
+  const hasWidth = border?.width !== void 0 && border.width !== "";
+  const hasColor = border?.color !== void 0;
   return hasWidth || hasColor;
 };
 function useBorderControl(props) {
@@ -36,91 +51,75 @@ function useBorderControl(props) {
     enableAlpha = true,
     enableStyle = true,
     shouldSanitizeBorder = true,
-    size = 'default',
+    size = "default",
     value: border,
     width,
     __experimentalIsRenderedInSidebar = false,
     __next40pxDefaultSize,
     __shouldNotWarnDeprecated36pxSize,
     ...otherProps
-  } = (0, _context.useContextSystem)(props, 'BorderControl');
-  (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
-    componentName: 'BorderControl',
+  } = (0, import_context.useContextSystem)(props, "BorderControl");
+  (0, import_deprecated_36px_size.maybeWarnDeprecated36pxSize)({
+    componentName: "BorderControl",
     __next40pxDefaultSize,
     size,
     __shouldNotWarnDeprecated36pxSize
   });
-  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
-  const [widthValue, originalWidthUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(border?.width);
-  const widthUnit = originalWidthUnit || 'px';
+  const computedSize = size === "default" && __next40pxDefaultSize ? "__unstable-large" : size;
+  const [widthValue, originalWidthUnit] = (0, import_utils.parseQuantityAndUnitFromRawValue)(border?.width);
+  const widthUnit = originalWidthUnit || "px";
   const hadPreviousZeroWidth = widthValue === 0;
-  const [colorSelection, setColorSelection] = (0, _element.useState)();
-  const [styleSelection, setStyleSelection] = (0, _element.useState)();
+  const [colorSelection, setColorSelection] = (0, import_element.useState)();
+  const [styleSelection, setStyleSelection] = (0, import_element.useState)();
   const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;
-  const onBorderChange = (0, _element.useCallback)(newBorder => {
+  const onBorderChange = (0, import_element.useCallback)((newBorder) => {
     if (shouldSanitizeBorder && !isValidBorder(newBorder)) {
-      onChange(undefined);
+      onChange(void 0);
       return;
     }
     onChange(newBorder);
   }, [onChange, shouldSanitizeBorder]);
-  const onWidthChange = (0, _element.useCallback)(newWidth => {
-    const newWidthValue = newWidth === '' ? undefined : newWidth;
-    const [parsedValue] = (0, _utils.parseQuantityAndUnitFromRawValue)(newWidth);
+  const onWidthChange = (0, import_element.useCallback)((newWidth) => {
+    const newWidthValue = newWidth === "" ? void 0 : newWidth;
+    const [parsedValue] = (0, import_utils.parseQuantityAndUnitFromRawValue)(newWidth);
     const hasZeroWidth = parsedValue === 0;
     const updatedBorder = {
       ...border,
       width: newWidthValue
     };
-
-    // Setting the border width explicitly to zero will also set the
-    // border style to `none` and clear the border color.
     if (hasZeroWidth && !hadPreviousZeroWidth) {
-      // Before clearing the color and style selections, keep track of
-      // the current selections so they can be restored when the width
-      // changes to a non-zero value.
       setColorSelection(border?.color);
       setStyleSelection(border?.style);
-
-      // Clear the color and style border properties.
-      updatedBorder.color = undefined;
-      updatedBorder.style = 'none';
+      updatedBorder.color = void 0;
+      updatedBorder.style = "none";
     }
-
-    // Selection has changed from zero border width to non-zero width.
     if (!hasZeroWidth && hadPreviousZeroWidth) {
-      // Restore previous border color and style selections if width
-      // is now not zero.
-      if (updatedBorder.color === undefined) {
+      if (updatedBorder.color === void 0) {
         updatedBorder.color = colorSelection;
       }
-      if (updatedBorder.style === 'none') {
+      if (updatedBorder.style === "none") {
         updatedBorder.style = styleSelection;
       }
     }
     onBorderChange(updatedBorder);
   }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);
-  const onSliderChange = (0, _element.useCallback)(value => {
+  const onSliderChange = (0, import_element.useCallback)((value) => {
     onWidthChange(`${value}${widthUnit}`);
   }, [onWidthChange, widthUnit]);
-
-  // Generate class names.
-  const cx = (0, _useCx.useCx)();
-  const classes = (0, _element.useMemo)(() => {
+  const cx = (0, import_use_cx.useCx)();
+  const classes = (0, import_element.useMemo)(() => {
     return cx(styles.borderControl, className);
   }, [className, cx]);
   let wrapperWidth = width;
   if (isCompact) {
-    // Widths below represent the minimum usable width for compact controls.
-    // Taller controls contain greater internal padding, thus greater width.
-    wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
+    wrapperWidth = size === "__unstable-large" ? "116px" : "90px";
   }
-  const innerWrapperClassName = (0, _element.useMemo)(() => {
+  const innerWrapperClassName = (0, import_element.useMemo)(() => {
     const widthStyle = !!wrapperWidth && styles.wrapperWidth;
     const heightStyle = styles.wrapperHeight(computedSize);
     return cx(styles.innerWrapper(), widthStyle, heightStyle);
   }, [wrapperWidth, cx, computedSize]);
-  const sliderClassName = (0, _element.useMemo)(() => {
+  const sliderClassName = (0, import_element.useMemo)(() => {
     return cx(styles.borderSlider());
   }, [cx]);
   return {
@@ -145,4 +144,8 @@ function useBorderControl(props) {
     __next40pxDefaultSize
   };
 }
-//# sourceMappingURL=hook.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBorderControl
+});
+//# sourceMappingURL=hook.js.map

package/build/border-control/border-control/hook.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","styles","_interopRequireWildcard","_utils","_context","_useCx","_deprecated36pxSize","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","isValidBorder","border","hasWidth","width","undefined","hasColor","color","useBorderControl","props","className","colors","isCompact","onChange","enableAlpha","enableStyle","shouldSanitizeBorder","size","value","__experimentalIsRenderedInSidebar","__next40pxDefaultSize","__shouldNotWarnDeprecated36pxSize","otherProps","useContextSystem","maybeWarnDeprecated36pxSize","componentName","computedSize","widthValue","originalWidthUnit","parseQuantityAndUnitFromRawValue","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","useState","styleSelection","setStyleSelection","isStyleSettable","onBorderChange","useCallback","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","useCx","classes","useMemo","borderControl","wrapperWidth","innerWrapperClassName","widthStyle","heightStyle","wrapperHeight","innerWrapper","sliderClassName","borderSlider","inputWidth","previousStyleSelection"],"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type { Border, BorderControlProps } from '../types';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\n\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = ( border?: Border ) => {\n\tconst hasWidth = border?.width !== undefined && border.width !== '';\n\tconst hasColor = border?.color !== undefined;\n\treturn hasWidth || hasColor;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tisCompact,\n\t\tonChange,\n\t\tenableAlpha = true,\n\t\tenableStyle = true,\n\t\tshouldSanitizeBorder = true,\n\t\tsize = 'default',\n\t\tvalue: border,\n\t\twidth,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t__next40pxDefaultSize,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BorderControl',\n\t\t__next40pxDefaultSize,\n\t\tsize,\n\t\t__shouldNotWarnDeprecated36pxSize,\n\t} );\n\n\tconst computedSize =\n\t\tsize === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst isStyleSettable = shouldSanitizeBorder\n\t\t? isValidBorder( border )\n\t\t: true;\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder && ! isValidBorder( newBorder ) ) {\n\t\t\t\tonChange( undefined );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value?: number ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tlet wrapperWidth = width;\n\tif ( isCompact ) {\n\t\t// Widths below represent the minimum usable width for compact controls.\n\t\t// Taller controls contain greater internal padding, thus greater width.\n\t\twrapperWidth = size === '__unstable-large' ? '116px' : '90px';\n\t}\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst widthStyle = !! wrapperWidth && styles.wrapperWidth;\n\t\tconst heightStyle = styles.wrapperHeight( computedSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, computedSize ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tinnerWrapperClassName,\n\t\tinputWidth: wrapperWidth,\n\t\tisStyleSettable,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\tsize: computedSize,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next40pxDefaultSize,\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/border-control/border-control/hook.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\n\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = border => {\n  const hasWidth = border?.width !== undefined && border.width !== '';\n  const hasColor = border?.color !== undefined;\n  return hasWidth || hasColor;\n};\nexport function useBorderControl(props) {\n  const {\n    className,\n    colors = [],\n    isCompact,\n    onChange,\n    enableAlpha = true,\n    enableStyle = true,\n    shouldSanitizeBorder = true,\n    size = 'default',\n    value: border,\n    width,\n    __experimentalIsRenderedInSidebar = false,\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize,\n    ...otherProps\n  } = useContextSystem(props, 'BorderControl');\n  maybeWarnDeprecated36pxSize({\n    componentName: 'BorderControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n  const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);\n  const widthUnit = originalWidthUnit || 'px';\n  const hadPreviousZeroWidth = widthValue === 0;\n  const [colorSelection, setColorSelection] = useState();\n  const [styleSelection, setStyleSelection] = useState();\n  const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;\n  const onBorderChange = useCallback(newBorder => {\n    if (shouldSanitizeBorder && !isValidBorder(newBorder)) {\n      onChange(undefined);\n      return;\n    }\n    onChange(newBorder);\n  }, [onChange, shouldSanitizeBorder]);\n  const onWidthChange = useCallback(newWidth => {\n    const newWidthValue = newWidth === '' ? undefined : newWidth;\n    const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);\n    const hasZeroWidth = parsedValue === 0;\n    const updatedBorder = {\n      ...border,\n      width: newWidthValue\n    };\n\n    // Setting the border width explicitly to zero will also set the\n    // border style to `none` and clear the border color.\n    if (hasZeroWidth && !hadPreviousZeroWidth) {\n      // Before clearing the color and style selections, keep track of\n      // the current selections so they can be restored when the width\n      // changes to a non-zero value.\n      setColorSelection(border?.color);\n      setStyleSelection(border?.style);\n\n      // Clear the color and style border properties.\n      updatedBorder.color = undefined;\n      updatedBorder.style = 'none';\n    }\n\n    // Selection has changed from zero border width to non-zero width.\n    if (!hasZeroWidth && hadPreviousZeroWidth) {\n      // Restore previous border color and style selections if width\n      // is now not zero.\n      if (updatedBorder.color === undefined) {\n        updatedBorder.color = colorSelection;\n      }\n      if (updatedBorder.style === 'none') {\n        updatedBorder.style = styleSelection;\n      }\n    }\n    onBorderChange(updatedBorder);\n  }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);\n  const onSliderChange = useCallback(value => {\n    onWidthChange(`${value}${widthUnit}`);\n  }, [onWidthChange, widthUnit]);\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderControl, className);\n  }, [className, cx]);\n  let wrapperWidth = width;\n  if (isCompact) {\n    // Widths below represent the minimum usable width for compact controls.\n    // Taller controls contain greater internal padding, thus greater width.\n    wrapperWidth = size === '__unstable-large' ? '116px' : '90px';\n  }\n  const innerWrapperClassName = useMemo(() => {\n    const widthStyle = !!wrapperWidth && styles.wrapperWidth;\n    const heightStyle = styles.wrapperHeight(computedSize);\n    return cx(styles.innerWrapper(), widthStyle, heightStyle);\n  }, [wrapperWidth, cx, computedSize]);\n  const sliderClassName = useMemo(() => {\n    return cx(styles.borderSlider());\n  }, [cx]);\n  return {\n    ...otherProps,\n    className: classes,\n    colors,\n    enableAlpha,\n    enableStyle,\n    innerWrapperClassName,\n    inputWidth: wrapperWidth,\n    isStyleSettable,\n    onBorderChange,\n    onSliderChange,\n    onWidthChange,\n    previousStyleSelection: styleSelection,\n    sliderClassName,\n    value: border,\n    widthUnit,\n    widthValue,\n    size: computedSize,\n    __experimentalIsRenderedInSidebar,\n    __next40pxDefaultSize\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA+C;AAK/C,aAAwB;AACxB,mBAAiD;AACjD,qBAAiC;AACjC,oBAAsB;AACtB,kCAA4C;AAI5C,MAAM,gBAAgB,YAAU;AAC9B,QAAM,WAAW,QAAQ,UAAU,UAAa,OAAO,UAAU;AACjE,QAAM,WAAW,QAAQ,UAAU;AACnC,SAAO,YAAY;AACrB;AACO,SAAS,iBAAiB,OAAO;AACtC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,CAAC;AAAA,IACV;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd,uBAAuB;AAAA,IACvB,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA,oCAAoC;AAAA,IACpC;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,eAAe;AAC3C,+DAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,eAAe,SAAS,aAAa,wBAAwB,qBAAqB;AACxF,QAAM,CAAC,YAAY,iBAAiB,QAAI,+CAAiC,QAAQ,KAAK;AACtF,QAAM,YAAY,qBAAqB;AACvC,QAAM,uBAAuB,eAAe;AAC5C,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,yBAAS;AACrD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,yBAAS;AACrD,QAAM,kBAAkB,uBAAuB,cAAc,MAAM,IAAI;AACvE,QAAM,qBAAiB,4BAAY,eAAa;AAC9C,QAAI,wBAAwB,CAAC,cAAc,SAAS,GAAG;AACrD,eAAS,MAAS;AAClB;AAAA,IACF;AACA,aAAS,SAAS;AAAA,EACpB,GAAG,CAAC,UAAU,oBAAoB,CAAC;AACnC,QAAM,oBAAgB,4BAAY,cAAY;AAC5C,UAAM,gBAAgB,aAAa,KAAK,SAAY;AACpD,UAAM,CAAC,WAAW,QAAI,+CAAiC,QAAQ;AAC/D,UAAM,eAAe,gBAAgB;AACrC,UAAM,gBAAgB;AAAA,MACpB,GAAG;AAAA,MACH,OAAO;AAAA,IACT;AAIA,QAAI,gBAAgB,CAAC,sBAAsB;AAIzC,wBAAkB,QAAQ,KAAK;AAC/B,wBAAkB,QAAQ,KAAK;AAG/B,oBAAc,QAAQ;AACtB,oBAAc,QAAQ;AAAA,IACxB;AAGA,QAAI,CAAC,gBAAgB,sBAAsB;AAGzC,UAAI,cAAc,UAAU,QAAW;AACrC,sBAAc,QAAQ;AAAA,MACxB;AACA,UAAI,cAAc,UAAU,QAAQ;AAClC,sBAAc,QAAQ;AAAA,MACxB;AAAA,IACF;AACA,mBAAe,aAAa;AAAA,EAC9B,GAAG,CAAC,QAAQ,sBAAsB,gBAAgB,gBAAgB,cAAc,CAAC;AACjF,QAAM,qBAAiB,4BAAY,WAAS;AAC1C,kBAAc,GAAG,KAAK,GAAG,SAAS,EAAE;AAAA,EACtC,GAAG,CAAC,eAAe,SAAS,CAAC;AAG7B,QAAM,SAAK,qBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAG,OAAO,eAAe,SAAS;AAAA,EAC3C,GAAG,CAAC,WAAW,EAAE,CAAC;AAClB,MAAI,eAAe;AACnB,MAAI,WAAW;AAGb,mBAAe,SAAS,qBAAqB,UAAU;AAAA,EACzD;AACA,QAAM,4BAAwB,wBAAQ,MAAM;AAC1C,UAAM,aAAa,CAAC,CAAC,gBAAgB,OAAO;AAC5C,UAAM,cAAc,OAAO,cAAc,YAAY;AACrD,WAAO,GAAG,OAAO,aAAa,GAAG,YAAY,WAAW;AAAA,EAC1D,GAAG,CAAC,cAAc,IAAI,YAAY,CAAC;AACnC,QAAM,sBAAkB,wBAAQ,MAAM;AACpC,WAAO,GAAG,OAAO,aAAa,CAAC;AAAA,EACjC,GAAG,CAAC,EAAE,CAAC;AACP,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/build/border-control/border-control/index.js

@@ -1,21 +1,42 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BorderControl", {
-  enumerable: true,
-  get: function () {
-    return _component.default;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var border_control_exports = {};
+__export(border_control_exports, {
+  BorderControl: () => import_component.default,
+  useBorderControl: () => import_hook.useBorderControl
 });
-Object.defineProperty(exports, "useBorderControl", {
-  enumerable: true,
-  get: function () {
-    return _hook.useBorderControl;
-  }
+module.exports = __toCommonJS(border_control_exports);
+var import_component = __toESM(require("./component"));
+var import_hook = require("./hook");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BorderControl,
+  useBorderControl
 });
-var _component = _interopRequireDefault(require("./component"));
-var _hook = require("./hook");
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_component","_interopRequireDefault","require","_hook"],"sources":["@wordpress/components/src/border-control/border-control/index.ts"],"sourcesContent":["export { default as BorderControl } from './component';\nexport { useBorderControl } from './hook';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/border-control/border-control/index.ts"],
+  "sourcesContent": ["export { default as BorderControl } from './component';\nexport { useBorderControl } from './hook';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyC;AACzC,kBAAiC;",
+  "names": []
+}

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

@@ -1,46 +1,58 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var component_exports = {};
+__export(component_exports, {
+  default: () => component_default
 });
-exports.default = void 0;
-var _i18n = require("@wordpress/i18n");
-var _borderControlStylePicker = _interopRequireDefault(require("../border-control-style-picker"));
-var _button = _interopRequireDefault(require("../../button"));
-var _colorIndicator = _interopRequireDefault(require("../../color-indicator"));
-var _colorPalette = _interopRequireDefault(require("../../color-palette"));
-var _dropdown = _interopRequireDefault(require("../../dropdown"));
-var _vStack = require("../../v-stack");
-var _context = require("../../context");
-var _hook = require("./hook");
-var _dropdownContentWrapper = _interopRequireDefault(require("../../dropdown/dropdown-content-wrapper"));
-var _utils = require("../../color-palette/utils");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const getAriaLabelColorValue = colorValue => {
-  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
-  return colorValue.replace(/^var\((.+)\)$/, '$1');
+module.exports = __toCommonJS(component_exports);
+var import_i18n = require("@wordpress/i18n");
+var import_border_control_style_picker = __toESM(require("../border-control-style-picker"));
+var import_button = __toESM(require("../../button"));
+var import_color_indicator = __toESM(require("../../color-indicator"));
+var import_color_palette = __toESM(require("../../color-palette"));
+var import_dropdown = __toESM(require("../../dropdown"));
+var import_v_stack = require("../../v-stack");
+var import_context = require("../../context");
+var import_hook = require("./hook");
+var import_dropdown_content_wrapper = __toESM(require("../../dropdown/dropdown-content-wrapper"));
+var import_utils = require("../../color-palette/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+const getAriaLabelColorValue = (colorValue) => {
+  return colorValue.replace(/^var\((.+)\)$/, "$1");
 };
 const getColorObject = (colorValue, colors) => {
   if (!colorValue || !colors) {
     return;
   }
-  if ((0, _utils.isMultiplePaletteArray)(colors)) {
-    // Multiple origins
+  if ((0, import_utils.isMultiplePaletteArray)(colors)) {
     let matchedColor;
-    colors.some(origin => origin.colors.some(color => {
+    colors.some((origin) => origin.colors.some((color) => {
       if (color.color === colorValue) {
         matchedColor = color;
         return true;
@@ -49,41 +61,56 @@ const getColorObject = (colorValue, colors) => {
     }));
     return matchedColor;
   }
-
-  // Single origin
-  return colors.find(color => color.color === colorValue);
+  return colors.find((color) => color.color === colorValue);
 };
 const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {
   if (isStyleEnabled) {
     if (colorObject) {
       const ariaLabelValue = getAriaLabelColorValue(colorObject.color);
-      return style ? (0, _i18n.sprintf)(
-      // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 3: The current border style selection e.g. "solid".
-      (0, _i18n.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".'), colorObject.name, ariaLabelValue, style) : (0, _i18n.sprintf)(
-      // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:".
-      (0, _i18n.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, ariaLabelValue);
+      return style ? (0, import_i18n.sprintf)(
+        // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:". 3: The current border style selection e.g. "solid".
+        (0, import_i18n.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".'),
+        colorObject.name,
+        ariaLabelValue,
+        style
+      ) : (0, import_i18n.sprintf)(
+        // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g.: "#f00:".
+        (0, import_i18n.__)('Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".'),
+        colorObject.name,
+        ariaLabelValue
+      );
     }
     if (colorValue) {
       const ariaLabelValue = getAriaLabelColorValue(colorValue);
-      return style ? (0, _i18n.sprintf)(
-      // translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid".
-      (0, _i18n.__)('Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'), ariaLabelValue, style) : (0, _i18n.sprintf)(
-      // translators: %s: The color's hex code e.g: "#f00".
-      (0, _i18n.__)('Border color and style picker. The currently selected color has a value of "%s".'), ariaLabelValue);
+      return style ? (0, import_i18n.sprintf)(
+        // translators: 1: The color's hex code e.g.: "#f00:". 2: The current border style selection e.g. "solid".
+        (0, import_i18n.__)('Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".'),
+        ariaLabelValue,
+        style
+      ) : (0, import_i18n.sprintf)(
+        // translators: %s: The color's hex code e.g: "#f00".
+        (0, import_i18n.__)('Border color and style picker. The currently selected color has a value of "%s".'),
+        ariaLabelValue
+      );
     }
-    return (0, _i18n.__)('Border color and style picker.');
+    return (0, import_i18n.__)("Border color and style picker.");
   }
   if (colorObject) {
-    return (0, _i18n.sprintf)(
-    // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00".
-    (0, _i18n.__)('Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), colorObject.name, getAriaLabelColorValue(colorObject.color));
+    return (0, import_i18n.sprintf)(
+      // translators: 1: The name of the color e.g. "vivid red". 2: The color's hex code e.g: "#f00".
+      (0, import_i18n.__)('Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'),
+      colorObject.name,
+      getAriaLabelColorValue(colorObject.color)
+    );
   }
   if (colorValue) {
-    return (0, _i18n.sprintf)(
-    // translators: %s: The color's hex code e.g: "#f00".
-    (0, _i18n.__)('Border color picker. The currently selected color has a value of "%s".'), getAriaLabelColorValue(colorValue));
+    return (0, import_i18n.sprintf)(
+      // translators: %s: The color's hex code e.g: "#f00".
+      (0, import_i18n.__)('Border color picker. The currently selected color has a value of "%s".'),
+      getAriaLabelColorValue(colorValue)
+    );
   }
-  return (0, _i18n.__)('Border color picker.');
+  return (0, import_i18n.__)("Border color picker.");
 };
 const BorderControlDropdown = (props, forwardedRef) => {
   const {
@@ -105,56 +132,56 @@ const BorderControlDropdown = (props, forwardedRef) => {
     size,
     __unstablePopoverProps,
     ...otherProps
-  } = (0, _hook.useBorderControlDropdown)(props);
+  } = (0, import_hook.useBorderControlDropdown)(props);
   const {
     color,
     style
   } = border || {};
   const colorObject = getColorObject(color, colors);
   const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);
-  const enableResetButton = color || style && style !== 'none';
-  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;
+  const enableResetButton = color || style && style !== "none";
+  const dropdownPosition = __experimentalIsRenderedInSidebar ? "bottom left" : void 0;
   const renderToggle = ({
     onToggle
-  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+  }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
     onClick: onToggle,
     variant: "tertiary",
     "aria-label": toggleAriaLabel,
     tooltipPosition: dropdownPosition,
-    label: (0, _i18n.__)('Border color and style picker'),
+    label: (0, import_i18n.__)("Border color and style picker"),
     showTooltip: true,
-    __next40pxDefaultSize: size === '__unstable-large',
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    __next40pxDefaultSize: size === "__unstable-large",
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
       className: indicatorWrapperClassName,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicator.default, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_indicator.default, {
         className: indicatorClassName,
         colorValue: color
       })
     })
   });
-  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_dropdownContentWrapper.default, {
+  const renderContent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_content_wrapper.default, {
       paddingSize: "medium",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
         className: popoverControlsClassName,
         spacing: 6,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPalette.default, {
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_palette.default, {
           className: popoverContentClassName,
           value: color,
           onChange: onColorChange,
           colors,
           disableCustomColors,
-          __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+          __experimentalIsRenderedInSidebar,
           clearable: false,
-          enableAlpha: enableAlpha
-        }), enableStyle && isStyleSettable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_borderControlStylePicker.default, {
-          label: (0, _i18n.__)('Style'),
+          enableAlpha
+        }), enableStyle && isStyleSettable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_border_control_style_picker.default, {
+          label: (0, import_i18n.__)("Style"),
           value: style,
           onChange: onStyleChange
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
         className: resetButtonWrapperClassName,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
           variant: "tertiary",
           onClick: () => {
             onReset();
@@ -162,14 +189,14 @@ const BorderControlDropdown = (props, forwardedRef) => {
           disabled: !enableResetButton,
           accessibleWhenDisabled: true,
           __next40pxDefaultSize: true,
-          children: (0, _i18n.__)('Reset')
+          children: (0, import_i18n.__)("Reset")
         })
       })]
     })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.default, {
-    renderToggle: renderToggle,
-    renderContent: renderContent,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown.default, {
+    renderToggle,
+    renderContent,
     popoverProps: {
       ...__unstablePopoverProps
     },
@@ -177,6 +204,6 @@ const BorderControlDropdown = (props, forwardedRef) => {
     ref: forwardedRef
   });
 };
-const ConnectedBorderControlDropdown = (0, _context.contextConnect)(BorderControlDropdown, 'BorderControlDropdown');
-var _default = exports.default = ConnectedBorderControlDropdown;
-//# sourceMappingURL=component.js.map
+const ConnectedBorderControlDropdown = (0, import_context.contextConnect)(BorderControlDropdown, "BorderControlDropdown");
+var component_default = ConnectedBorderControlDropdown;
+//# sourceMappingURL=component.js.map