@wordpress/components 19.7.0 → 19.8.2

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

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import BorderBoxControlLinkedButton from '../border-box-control-linked-button';
+import BorderBoxControlSplitControls from '../border-box-control-split-controls';
+import { BorderControl } from '../../border-control';
+import { HStack } from '../../h-stack';
+import { StyledLabel } from '../../base-control/styles/base-control-styles';
+import { View } from '../../view';
+import { VisuallyHidden } from '../../visually-hidden';
+import { contextConnect } from '../../ui/context';
+import { useBorderBoxControl } from './hook';
+
+const BorderLabel = props => {
+  const {
+    label,
+    hideLabelFromVision
+  } = props;
+
+  if (!label) {
+    return null;
+  }
+
+  return hideLabelFromVision ? createElement(VisuallyHidden, {
+    as: "label"
+  }, label) : createElement(StyledLabel, null, label);
+};
+
+const BorderBoxControl = (props, forwardedRef) => {
+  const {
+    className,
+    colors,
+    disableCustomColors,
+    enableAlpha,
+    enableStyle,
+    hasMixedBorders,
+    hideLabelFromVision,
+    isLinked,
+    label,
+    linkedControlClassName,
+    linkedValue,
+    onLinkedChange,
+    onSplitChange,
+    popoverClassNames,
+    splitValue,
+    toggleLinked,
+    __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar,
+    ...otherProps
+  } = useBorderBoxControl(props);
+  return createElement(View, _extends({
+    className: className
+  }, otherProps, {
+    ref: forwardedRef
+  }), createElement(BorderLabel, {
+    label: label,
+    hideLabelFromVision: hideLabelFromVision
+  }), createElement(HStack, {
+    alignment: 'start',
+    expanded: true,
+    spacing: 0
+  }, isLinked ? createElement(BorderControl, {
+    className: linkedControlClassName,
+    colors: colors,
+    disableCustomColors: disableCustomColors,
+    enableAlpha: enableAlpha,
+    enableStyle: enableStyle,
+    onChange: onLinkedChange,
+    placeholder: hasMixedBorders ? __('Mixed') : undefined,
+    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.linked,
+    shouldSanitizeBorder: false // This component will handle that.
+    ,
+    value: linkedValue,
+    withSlider: true,
+    width: '110px',
+    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar
+  }) : createElement(BorderBoxControlSplitControls, {
+    colors: colors,
+    disableCustomColors: disableCustomColors,
+    enableAlpha: enableAlpha,
+    enableStyle: enableStyle,
+    onChange: onSplitChange,
+    popoverClassNames: popoverClassNames,
+    value: splitValue,
+    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar
+  }), createElement(BorderBoxControlLinkedButton, {
+    onClick: toggleLinked,
+    isLinked: isLinked
+  })));
+};
+
+const ConnectedBorderBoxControl = contextConnect(BorderBoxControl, 'BorderBoxControl');
+export default ConnectedBorderBoxControl;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["__","BorderBoxControlLinkedButton","BorderBoxControlSplitControls","BorderControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderBoxControl","BorderLabel","props","label","hideLabelFromVision","BorderBoxControl","forwardedRef","className","colors","disableCustomColors","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverClassNames","splitValue","toggleLinked","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","undefined","linked","ConnectedBorderBoxControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\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 { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type { LabelProps } 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 BorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\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\tpopoverClassNames,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ forwardedRef }>\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<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>\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\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\tpopoverContentClassName={ popoverClassNames?.linked }\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={ true }\n\t\t\t\t\t\twidth={ '110px' }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\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/>\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\tpopoverClassNames={ popoverClassNames }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\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/>\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/>\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderBoxControl = contextConnect(\n\tBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default ConnectedBorderBoxControl;\n"]}

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

@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import * as styles from '../styles';
+import { getBorderDiff, getCommonBorder, getSplitBorders, hasMixedBorders, hasSplitBorders, isCompleteBorder, isEmptyBorder } from '../utils';
+import { useContextSystem } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+export function useBorderBoxControl(props) {
+  const {
+    className,
+    onChange,
+    value,
+    ...otherProps
+  } = useContextSystem(props, 'BorderBoxControl');
+  const mixedBorders = hasMixedBorders(value);
+  const splitBorders = hasSplitBorders(value);
+  const linkedValue = splitBorders ? getCommonBorder(value) : value;
+  const splitValue = splitBorders ? value : getSplitBorders(value);
+  const [isLinked, setIsLinked] = useState(!mixedBorders);
+
+  const toggleLinked = () => setIsLinked(!isLinked);
+
+  const onLinkedChange = newBorder => {
+    if (!newBorder) {
+      return onChange(undefined);
+    } // If we have all props defined on the new border apply it.
+
+
+    if (!mixedBorders || isCompleteBorder(newBorder)) {
+      return onChange(isEmptyBorder(newBorder) ? undefined : newBorder);
+    } // If we had mixed borders we might have had some shared border props
+    // that we need to maintain. For example; we could have mixed borders
+    // with all the same color but different widths. Then from the linked
+    // control we change the color. We should keep the separate  widths.
+
+
+    const changes = getBorderDiff(linkedValue, newBorder);
+    const updatedBorders = {
+      top: { ...(value === null || value === void 0 ? void 0 : value.top),
+        ...changes
+      },
+      right: { ...(value === null || value === void 0 ? void 0 : value.right),
+        ...changes
+      },
+      bottom: { ...(value === null || value === void 0 ? void 0 : value.bottom),
+        ...changes
+      },
+      left: { ...(value === null || value === void 0 ? void 0 : value.left),
+        ...changes
+      }
+    };
+
+    if (hasMixedBorders(updatedBorders)) {
+      return onChange(updatedBorders);
+    }
+
+    const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top;
+    onChange(filteredResult);
+  };
+
+  const onSplitChange = (newBorder, side) => {
+    const updatedBorders = { ...splitValue,
+      [side]: newBorder
+    };
+
+    if (hasMixedBorders(updatedBorders)) {
+      onChange(updatedBorders);
+    } else {
+      onChange(newBorder);
+    }
+  };
+
+  const cx = useCx();
+  const classes = useMemo(() => {
+    return cx(styles.BorderBoxControl, className);
+  }, [className]);
+  const linkedControlClassName = useMemo(() => {
+    return cx(styles.LinkedBorderControl);
+  }, []);
+  return { ...otherProps,
+    className: classes,
+    hasMixedBorders: mixedBorders,
+    isLinked,
+    linkedControlClassName,
+    onLinkedChange,
+    onSplitChange,
+    toggleLinked,
+    linkedValue,
+    splitValue
+  };
+}
+//# sourceMappingURL=hook.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useMemo","useState","styles","getBorderDiff","getCommonBorder","getSplitBorders","hasMixedBorders","hasSplitBorders","isCompleteBorder","isEmptyBorder","useContextSystem","useCx","useBorderBoxControl","props","className","onChange","value","otherProps","mixedBorders","splitBorders","linkedValue","splitValue","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","BorderBoxControl","linkedControlClassName","LinkedBorderControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst { className, onChange, value, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControl'\n\t);\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate  widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControl, className );\n\t}, [ className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.LinkedBorderControl );\n\t}, [] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsplitValue,\n\t};\n}\n"]}

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

@@ -0,0 +1,3 @@
+export { default as BorderBoxControl } from './component';
+export { useBorderBoxControl } from './hook';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/index.ts"],"names":["default","BorderBoxControl","useBorderBoxControl"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAApB,QAA4C,aAA5C;AACA,SAASC,mBAAT,QAAoC,QAApC","sourcesContent":["export { default as BorderBoxControl } from './component';\nexport { useBorderBoxControl } from './hook';\n"]}

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

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { link, linkOff } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import Button from '../../button';
+import Tooltip from '../../tooltip';
+import { View } from '../../view';
+import { contextConnect } from '../../ui/context';
+import { useBorderBoxControlLinkedButton } from './hook';
+
+const BorderBoxControlLinkedButton = (props, forwardedRef) => {
+  const {
+    className,
+    isLinked,
+    ...buttonProps
+  } = useBorderBoxControlLinkedButton(props);
+  const label = isLinked ? __('Unlink sides') : __('Link sides');
+  return createElement(Tooltip, {
+    text: label
+  }, createElement(View, {
+    className: className
+  }, createElement(Button, _extends({}, buttonProps, {
+    variant: isLinked ? 'primary' : 'secondary',
+    isSmall: true,
+    icon: isLinked ? link : linkOff,
+    iconSize: 16,
+    "aria-label": label,
+    ref: forwardedRef
+  }))));
+};
+
+const ConnectedBorderBoxControlLinkedButton = contextConnect(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');
+export default ConnectedBorderBoxControlLinkedButton;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"names":["link","linkOff","__","Button","Tooltip","View","contextConnect","useBorderBoxControlLinkedButton","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","ConnectedBorderBoxControlLinkedButton"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,OAAf,QAA8B,kBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,OAAP,MAAoB,eAApB;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,+BAAT,QAAgD,QAAhD;;AAIA,MAAMC,4BAA4B,GAAG,CACpCC,KADoC,EAEpCC,YAFoC,KAGhC;AACJ,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,QAFK;AAGL,OAAGC;AAHE,MAIFN,+BAA+B,CAAEE,KAAF,CAJnC;AAKA,QAAMK,KAAK,GAAGF,QAAQ,GAAGV,EAAE,CAAE,cAAF,CAAL,GAA0BA,EAAE,CAAE,YAAF,CAAlD;AAEA,SACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGY;AAAhB,KACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAGH;AAAlB,KACC,cAAC,MAAD,eACME,WADN;AAEC,IAAA,OAAO,EAAGD,QAAQ,GAAG,SAAH,GAAe,WAFlC;AAGC,IAAA,OAAO,MAHR;AAIC,IAAA,IAAI,EAAGA,QAAQ,GAAGZ,IAAH,GAAUC,OAJ1B;AAKC,IAAA,QAAQ,EAAG,EALZ;AAMC,kBAAaa,KANd;AAOC,IAAA,GAAG,EAAGJ;AAPP,KADD,CADD,CADD;AAeA,CA1BD;;AA4BA,MAAMK,qCAAqC,GAAGT,cAAc,CAC3DE,4BAD2D,EAE3D,8BAF2D,CAA5D;AAIA,eAAeO,qCAAf","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 { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tisLinked,\n\t\t...buttonProps\n\t} = useBorderBoxControlLinkedButton( 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\tvariant={ isLinked ? 'primary' : 'secondary' }\n\t\t\t\t\tisSmall\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 16 }\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"]}

package/build-module/border-box-control/border-box-control-linked-button/hook.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import * as styles from '../styles';
+import { useContextSystem } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+export function useBorderBoxControlLinkedButton(props) {
+  const {
+    className,
+    ...otherProps
+  } = useContextSystem(props, 'BorderBoxControlLinkedButton'); // Generate class names.
+
+  const cx = useCx();
+  const classes = useMemo(() => {
+    return cx(styles.BorderBoxControlLinkedButton, className);
+  }, [className]);
+  return { ...otherProps,
+    className: classes
+  };
+}
+//# sourceMappingURL=hook.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlLinkedButton","props","className","otherProps","cx","classes","BorderBoxControlLinkedButton"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,QAAsB,0BAAtB;AAIA,OAAO,SAASC,+BAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BL,gBAAgB,CACpDG,KADoD,EAEpD,8BAFoD,CAArD,CADC,CAMD;;AACA,QAAMG,EAAE,GAAGL,KAAK,EAAhB;AACA,QAAMM,OAAO,GAAGT,OAAO,CAAE,MAAM;AAC9B,WAAOQ,EAAE,CAAEP,MAAM,CAACS,4BAAT,EAAuCJ,SAAvC,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,CAFoB,CAAvB;AAIA,SAAO,EAAE,GAAGC,UAAL;AAAiBD,IAAAA,SAAS,EAAEG;AAA5B,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { LinkedButtonProps } from '../types';\n\nexport function useBorderBoxControlLinkedButton(\n\tprops: WordPressComponentProps< LinkedButtonProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlLinkedButton'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControlLinkedButton, className );\n\t}, [ className ] );\n\n\treturn { ...otherProps, className: classes };\n}\n"]}

package/build-module/border-box-control/border-box-control-linked-button/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}

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

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import BorderBoxControlVisualizer from '../border-box-control-visualizer';
+import { BorderControl } from '../../border-control';
+import { Grid } from '../../grid';
+import { contextConnect } from '../../ui/context';
+import { useBorderBoxControlSplitControls } from './hook';
+
+const BorderBoxControlSplitControls = (props, forwardedRef) => {
+  const {
+    centeredClassName,
+    colors,
+    disableCustomColors,
+    enableAlpha,
+    enableStyle,
+    onChange,
+    popoverClassNames,
+    value,
+    __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar,
+    ...otherProps
+  } = useBorderBoxControlSplitControls(props);
+  const sharedBorderControlProps = {
+    colors,
+    disableCustomColors,
+    enableAlpha,
+    enableStyle,
+    isCompact: true,
+    __experimentalHasMultipleOrigins,
+    __experimentalIsRenderedInSidebar
+  };
+  return createElement(Grid, _extends({}, otherProps, {
+    ref: forwardedRef,
+    gap: 4
+  }), createElement(BorderBoxControlVisualizer, {
+    value: value
+  }), createElement(BorderControl, _extends({
+    className: centeredClassName,
+    hideLabelFromVision: true,
+    label: __('Top border'),
+    onChange: newBorder => onChange(newBorder, 'top'),
+    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.top,
+    value: value === null || value === void 0 ? void 0 : value.top
+  }, sharedBorderControlProps)), createElement(BorderControl, _extends({
+    hideLabelFromVision: true,
+    label: __('Left border'),
+    onChange: newBorder => onChange(newBorder, 'left'),
+    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.left,
+    value: value === null || value === void 0 ? void 0 : value.left
+  }, sharedBorderControlProps)), createElement(BorderControl, _extends({
+    hideLabelFromVision: true,
+    label: __('Right border'),
+    onChange: newBorder => onChange(newBorder, 'right'),
+    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.right,
+    value: value === null || value === void 0 ? void 0 : value.right
+  }, sharedBorderControlProps)), createElement(BorderControl, _extends({
+    className: centeredClassName,
+    hideLabelFromVision: true,
+    label: __('Bottom border'),
+    onChange: newBorder => onChange(newBorder, 'bottom'),
+    popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.bottom,
+    value: value === null || value === void 0 ? void 0 : value.bottom
+  }, sharedBorderControlProps)));
+};
+
+const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');
+export default ConnectedBorderBoxControlSplitControls;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"names":["__","BorderBoxControlVisualizer","BorderControl","Grid","contextConnect","useBorderBoxControlSplitControls","BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverClassNames","value","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","sharedBorderControlProps","isCompact","newBorder","top","left","right","bottom","ConnectedBorderBoxControlSplitControls"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\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\tpopoverClassNames,\n\t\tvalue,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ forwardedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer value={ value } />\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Top border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'top' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.top }\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={ true }\n\t\t\t\tlabel={ __( 'Left border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'left' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.left }\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\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Right border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'right' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.right }\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={ true }\n\t\t\t\tlabel={ __( 'Bottom border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }\n\t\t\t\tpopoverContentClassName={ popoverClassNames?.bottom }\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"]}

package/build-module/border-box-control/border-box-control-split-controls/hook.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import * as styles from '../styles';
+import { useContextSystem } from '../../ui/context';
+import { useCx, rtl } from '../../utils/';
+export function useBorderBoxControlSplitControls(props) {
+  const {
+    className,
+    ...otherProps
+  } = useContextSystem(props, 'BorderBoxControlSplitControls'); // Generate class names.
+
+  const cx = useCx();
+  const classes = useMemo(() => {
+    return cx(styles.BorderBoxControlSplitControls, className);
+  }, [className, rtl.watch()]);
+  const centeredClassName = useMemo(() => {
+    return cx(styles.CenteredBorderControl, className);
+  }, []);
+  return { ...otherProps,
+    centeredClassName,
+    className: classes
+  };
+}
+//# sourceMappingURL=hook.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","rtl","useBorderBoxControlSplitControls","props","className","otherProps","cx","classes","BorderBoxControlSplitControls","watch","centeredClassName","CenteredBorderControl"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,EAAgBC,GAAhB,QAA2B,cAA3B;AAIA,OAAO,SAASC,gCAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+BN,gBAAgB,CACpDI,KADoD,EAEpD,+BAFoD,CAArD,CADC,CAMD;;AACA,QAAMG,EAAE,GAAGN,KAAK,EAAhB;AACA,QAAMO,OAAO,GAAGV,OAAO,CAAE,MAAM;AAC9B,WAAOS,EAAE,CAAER,MAAM,CAACU,6BAAT,EAAwCJ,SAAxC,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,EAAaH,GAAG,CAACQ,KAAJ,EAAb,CAFoB,CAAvB;AAIA,QAAMC,iBAAiB,GAAGb,OAAO,CAAE,MAAM;AACxC,WAAOS,EAAE,CAAER,MAAM,CAACa,qBAAT,EAAgCP,SAAhC,CAAT;AACA,GAFgC,EAE9B,EAF8B,CAAjC;AAIA,SAAO,EAAE,GAAGC,UAAL;AAAiBK,IAAAA,iBAAjB;AAAoCN,IAAAA,SAAS,EAAEG;AAA/C,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlSplitControls'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControlSplitControls, className );\n\t}, [ className, rtl.watch() ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.CenteredBorderControl, className );\n\t}, [] );\n\n\treturn { ...otherProps, centeredClassName, className: classes };\n}\n"]}

package/build-module/border-box-control/border-box-control-split-controls/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}

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

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { contextConnect } from '../../ui/context';
+import { useBorderBoxControlVisualizer } from './hook';
+
+const BorderBoxControlVisualizer = (props, forwardedRef) => {
+  const {
+    value,
+    ...otherProps
+  } = useBorderBoxControlVisualizer(props);
+  return createElement(View, _extends({}, otherProps, {
+    ref: forwardedRef
+  }));
+};
+
+const ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer');
+export default ConnectedBorderBoxControlVisualizer;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/component.tsx"],"names":["View","contextConnect","useBorderBoxControlVisualizer","BorderBoxControlVisualizer","props","forwardedRef","value","otherProps","ConnectedBorderBoxControlVisualizer"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,YAArB;AACA,SAASC,cAAT,QAAwD,kBAAxD;AACA,SAASC,6BAAT,QAA8C,QAA9C;;AAIA,MAAMC,0BAA0B,GAAG,CAClCC,KADkC,EAElCC,YAFkC,KAG9B;AACJ,QAAM;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA2BL,6BAA6B,CAAEE,KAAF,CAA9D;AAEA,SAAO,cAAC,IAAD,eAAWG,UAAX;AAAwB,IAAA,GAAG,EAAGF;AAA9B,KAAP;AACA,CAPD;;AASA,MAAMG,mCAAmC,GAAGP,cAAc,CACzDE,0BADyD,EAEzD,4BAFyD,CAA1D;AAIA,eAAeK,mCAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/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"]}

package/build-module/border-box-control/border-box-control-visualizer/hook.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import * as styles from '../styles';
+import { useContextSystem } from '../../ui/context';
+import { useCx, rtl } from '../../utils';
+export function useBorderBoxControlVisualizer(props) {
+  const {
+    className,
+    value,
+    ...otherProps
+  } = useContextSystem(props, 'BorderBoxControlVisualizer'); // Generate class names.
+
+  const cx = useCx();
+  const classes = useMemo(() => {
+    return cx(styles.BorderBoxControlVisualizer(value), className);
+  }, [className, value, rtl.watch()]);
+  return { ...otherProps,
+    className: classes,
+    value
+  };
+}
+//# sourceMappingURL=hook.js.map

package/build-module/border-box-control/border-box-control-visualizer/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/hook.ts"],"names":["useMemo","styles","useContextSystem","useCx","rtl","useBorderBoxControlVisualizer","props","className","value","otherProps","cx","classes","BorderBoxControlVisualizer","watch"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,MAAZ,MAAwB,WAAxB;AACA,SAASC,gBAAT,QAA0D,kBAA1D;AACA,SAASC,KAAT,EAAgBC,GAAhB,QAA2B,aAA3B;AAIA,OAAO,SAASC,6BAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,KAAb;AAAoB,OAAGC;AAAvB,MAAsCP,gBAAgB,CAC3DI,KAD2D,EAE3D,4BAF2D,CAA5D,CADC,CAMD;;AACA,QAAMI,EAAE,GAAGP,KAAK,EAAhB;AACA,QAAMQ,OAAO,GAAGX,OAAO,CAAE,MAAM;AAC9B,WAAOU,EAAE,CAAET,MAAM,CAACW,0BAAP,CAAmCJ,KAAnC,CAAF,EAA8CD,SAA9C,CAAT;AACA,GAFsB,EAEpB,CAAEA,SAAF,EAAaC,KAAb,EAAoBJ,GAAG,CAACS,KAAJ,EAApB,CAFoB,CAAvB;AAIA,SAAO,EAAE,GAAGJ,UAAL;AAAiBF,IAAAA,SAAS,EAAEI,OAA5B;AAAqCH,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils';\n\nimport type { VisualizerProps } from '../types';\n\nexport function useBorderBoxControlVisualizer(\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >\n) {\n\tconst { className, value, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlVisualizer'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControlVisualizer( value ), className );\n\t}, [ className, value, rtl.watch() ] );\n\n\treturn { ...otherProps, className: classes, value };\n}\n"]}

package/build-module/border-box-control/border-box-control-visualizer/index.js

@@ -0,0 +1,2 @@
+export { default } from './component';
+//# sourceMappingURL=index.js.map

package/build-module/border-box-control/border-box-control-visualizer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}

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

@@ -0,0 +1,4 @@
+export { default as BorderBoxControl } from './border-box-control/component';
+export { useBorderBoxControl } from './border-box-control/hook';
+export { hasSplitBorders, isEmptyBorder, isDefinedBorder } from './utils';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/border-box-control/index.ts"],"names":["default","BorderBoxControl","useBorderBoxControl","hasSplitBorders","isEmptyBorder","isDefinedBorder"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAApB,QAA4C,gCAA5C;AACA,SAASC,mBAAT,QAAoC,2BAApC;AACA,SAASC,eAAT,EAA0BC,aAA1B,EAAyCC,eAAzC,QAAgE,SAAhE","sourcesContent":["export { default as BorderBoxControl } from './border-box-control/component';\nexport { useBorderBoxControl } from './border-box-control/hook';\nexport { hasSplitBorders, isEmptyBorder, isDefinedBorder } from './utils';\n"]}