fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,38 @@
import { createElement } from "react";
/**
* 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 '../../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, {
...buttonProps,
size: "small",
icon: isLinked ? link : linkOff,
iconSize: 24,
"aria-label": label,
ref: forwardedRef
})));
};
const ConnectedBorderBoxControlLinkedButton = contextConnect(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');
export default ConnectedBorderBoxControlLinkedButton;
//# sourceMappingURL=component.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["link","linkOff","__","Button","Tooltip","View","contextConnect","useBorderBoxControlLinkedButton","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","label","createElement","text","size","icon","iconSize","ref","ConnectedBorderBoxControlLinkedButton"],"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":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,OAAO,MAAM,eAAe;AACnC,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,+BAA+B,QAAQ,QAAQ;AAIxD,MAAMC,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5CN,+BAA+B,CAAEE,KAAM,CAAC;EACzC,MAAMK,KAAK,GAAGF,QAAQ,GAAGV,EAAE,CAAE,cAAe,CAAC,GAAGA,EAAE,CAAE,YAAa,CAAC;EAElE,OACCa,aAAA,CAACX,OAAO;IAACY,IAAI,EAAGF;EAAO,GACtBC,aAAA,CAACV,IAAI;IAACM,SAAS,EAAGA;EAAW,GAC5BI,aAAA,CAACZ,MAAM;IAAA,GACDU,WAAW;IAChBI,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGN,QAAQ,GAAGZ,IAAI,GAAGC,OAAS;IAClCkB,QAAQ,EAAG,EAAI;IACf,cAAaL,KAAO;IACpBM,GAAG,EAAGV;EAAc,CACpB,CACI,CACE,CAAC;AAEZ,CAAC;AAED,MAAMW,qCAAqC,GAAGf,cAAc,CAC3DE,4BAA4B,EAC5B,8BACD,CAAC;AACD,eAAea,qCAAqC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlLinkedButton","props","className","size","otherProps","cx","classes","borderBoxControlLinkedButton"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { LinkedButtonProps } from '../types';\n\nexport function useBorderBoxControlLinkedButton(\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >\n) {\n\tconst {\n\t\tclassName,\n\t\tsize = 'default',\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlLinkedButton' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControlLinkedButton( size ), className );\n\t}, [ className, cx, size ] );\n\n\treturn { ...otherProps, className: classes };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,WAAW;AAEnC,SAASC,gBAAgB,QAAQ,eAAe;AAChD,SAASC,KAAK,QAAQ,0BAA0B;AAIhD,OAAO,SAASC,+BAA+BA,CAC9CC,KAA6D,EAC5D;EACD,MAAM;IACLC,SAAS;IACTC,IAAI,GAAG,SAAS;IAChB,GAAGC;EACJ,CAAC,GAAGN,gBAAgB,CAAEG,KAAK,EAAE,8BAA+B,CAAC;;EAE7D;EACA,MAAMI,EAAE,GAAGN,KAAK,CAAC,CAAC;EAClB,MAAMO,OAAO,GAAGV,OAAO,CAAE,MAAM;IAC9B,OAAOS,EAAE,CAAER,MAAM,CAACU,4BAA4B,CAAEJ,IAAK,CAAC,EAAED,SAAU,CAAC;EACpE,CAAC,EAAE,CAAEA,SAAS,EAAEG,EAAE,EAAEF,IAAI,CAAG,CAAC;EAE5B,OAAO;IAAE,GAAGC,UAAU;IAAEF,SAAS,EAAEI;EAAQ,CAAC;AAC7C"}

View File

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

View File

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

View File

@@ -0,0 +1,97 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useMemo, useState } from '@wordpress/element';
import { useMergeRefs } from '@wordpress/compose';
/**
* Internal dependencies
*/
import BorderBoxControlVisualizer from '../border-box-control-visualizer';
import { BorderControl } from '../../border-control';
import { Grid } from '../../grid';
import { contextConnect } from '../../context';
import { useBorderBoxControlSplitControls } from './hook';
const BorderBoxControlSplitControls = (props, forwardedRef) => {
const {
centeredClassName,
colors,
disableCustomColors,
enableAlpha,
enableStyle,
onChange,
popoverPlacement,
popoverOffset,
rightAlignedClassName,
size = 'default',
value,
__experimentalIsRenderedInSidebar,
...otherProps
} = useBorderBoxControlSplitControls(props);
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
const [popoverAnchor, setPopoverAnchor] = useState(null);
// Memoize popoverProps to avoid returning a new object every time.
const popoverProps = useMemo(() => popoverPlacement ? {
placement: popoverPlacement,
offset: popoverOffset,
anchor: popoverAnchor,
shift: true
} : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
const sharedBorderControlProps = {
colors,
disableCustomColors,
enableAlpha,
enableStyle,
isCompact: true,
__experimentalIsRenderedInSidebar,
size
};
const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);
return createElement(Grid, {
...otherProps,
ref: mergedRef,
gap: 4
}, createElement(BorderBoxControlVisualizer, {
value: value,
size: size
}), createElement(BorderControl, {
className: centeredClassName,
hideLabelFromVision: true,
label: __('Top border'),
onChange: newBorder => onChange(newBorder, 'top'),
__unstablePopoverProps: popoverProps,
value: value?.top,
...sharedBorderControlProps
}), createElement(BorderControl, {
hideLabelFromVision: true,
label: __('Left border'),
onChange: newBorder => onChange(newBorder, 'left'),
__unstablePopoverProps: popoverProps,
value: value?.left,
...sharedBorderControlProps
}), createElement(BorderControl, {
className: rightAlignedClassName,
hideLabelFromVision: true,
label: __('Right border'),
onChange: newBorder => onChange(newBorder, 'right'),
__unstablePopoverProps: popoverProps,
value: value?.right,
...sharedBorderControlProps
}), createElement(BorderControl, {
className: centeredClassName,
hideLabelFromVision: true,
label: __('Bottom border'),
onChange: newBorder => onChange(newBorder, 'bottom'),
__unstablePopoverProps: popoverProps,
value: value?.bottom,
...sharedBorderControlProps
}));
};
const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');
export default ConnectedBorderBoxControlSplitControls;
//# sourceMappingURL=component.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,46 @@
/**
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
import * as styles from '../styles';
import { useContextSystem } from '../../context';
import { useCx } from '../../utils/';
export function useBorderBoxControlSplitControls(props) {
const {
className,
colors = [],
enableAlpha = false,
enableStyle = true,
size = 'default',
__experimentalIsRenderedInSidebar = false,
...otherProps
} = useContextSystem(props, 'BorderBoxControlSplitControls');
// Generate class names.
const cx = useCx();
const classes = useMemo(() => {
return cx(styles.borderBoxControlSplitControls(size), className);
}, [cx, className, size]);
const centeredClassName = useMemo(() => {
return cx(styles.centeredBorderControl, className);
}, [cx, className]);
const rightAlignedClassName = useMemo(() => {
return cx(styles.rightBorderControl(), className);
}, [cx, className]);
return {
...otherProps,
centeredClassName,
className: classes,
colors,
enableAlpha,
enableStyle,
rightAlignedClassName,
size,
__experimentalIsRenderedInSidebar
};
}
//# sourceMappingURL=hook.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlSplitControls","props","className","colors","enableAlpha","enableStyle","size","__experimentalIsRenderedInSidebar","otherProps","cx","classes","borderBoxControlSplitControls","centeredClassName","centeredBorderControl","rightAlignedClassName","rightBorderControl"],"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tcolors = [],\n\t\tenableAlpha = false,\n\t\tenableStyle = true,\n\t\tsize = 'default',\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlSplitControls' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControlSplitControls( size ), className );\n\t}, [ cx, className, size ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.centeredBorderControl, className );\n\t}, [ cx, className ] );\n\n\tconst rightAlignedClassName = useMemo( () => {\n\t\treturn cx( styles.rightBorderControl(), className );\n\t}, [ cx, className ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tcenteredClassName,\n\t\tclassName: classes,\n\t\tcolors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\trightAlignedClassName,\n\t\tsize,\n\t\t__experimentalIsRenderedInSidebar,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,WAAW;AAEnC,SAASC,gBAAgB,QAAQ,eAAe;AAChD,SAASC,KAAK,QAAQ,cAAc;AAIpC,OAAO,SAASC,gCAAgCA,CAC/CC,KAA2D,EAC1D;EACD,MAAM;IACLC,SAAS;IACTC,MAAM,GAAG,EAAE;IACXC,WAAW,GAAG,KAAK;IACnBC,WAAW,GAAG,IAAI;IAClBC,IAAI,GAAG,SAAS;IAChBC,iCAAiC,GAAG,KAAK;IACzC,GAAGC;EACJ,CAAC,GAAGV,gBAAgB,CAAEG,KAAK,EAAE,+BAAgC,CAAC;;EAE9D;EACA,MAAMQ,EAAE,GAAGV,KAAK,CAAC,CAAC;EAClB,MAAMW,OAAO,GAAGd,OAAO,CAAE,MAAM;IAC9B,OAAOa,EAAE,CAAEZ,MAAM,CAACc,6BAA6B,CAAEL,IAAK,CAAC,EAAEJ,SAAU,CAAC;EACrE,CAAC,EAAE,CAAEO,EAAE,EAAEP,SAAS,EAAEI,IAAI,CAAG,CAAC;EAE5B,MAAMM,iBAAiB,GAAGhB,OAAO,CAAE,MAAM;IACxC,OAAOa,EAAE,CAAEZ,MAAM,CAACgB,qBAAqB,EAAEX,SAAU,CAAC;EACrD,CAAC,EAAE,CAAEO,EAAE,EAAEP,SAAS,CAAG,CAAC;EAEtB,MAAMY,qBAAqB,GAAGlB,OAAO,CAAE,MAAM;IAC5C,OAAOa,EAAE,CAAEZ,MAAM,CAACkB,kBAAkB,CAAC,CAAC,EAAEb,SAAU,CAAC;EACpD,CAAC,EAAE,CAAEO,EAAE,EAAEP,SAAS,CAAG,CAAC;EAEtB,OAAO;IACN,GAAGM,UAAU;IACbI,iBAAiB;IACjBV,SAAS,EAAEQ,OAAO;IAClBP,MAAM;IACNC,WAAW;IACXC,WAAW;IACXS,qBAAqB;IACrBR,IAAI;IACJC;EACD,CAAC;AACF"}

View File

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

View File

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

View File

@@ -0,0 +1,24 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
import { View } from '../../view';
import { contextConnect } from '../../context';
import { useBorderBoxControlVisualizer } from './hook';
const BorderBoxControlVisualizer = (props, forwardedRef) => {
const {
value,
...otherProps
} = useBorderBoxControlVisualizer(props);
return createElement(View, {
...otherProps,
ref: forwardedRef
});
};
const ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer');
export default ConnectedBorderBoxControlVisualizer;
//# sourceMappingURL=component.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["View","contextConnect","useBorderBoxControlVisualizer","BorderBoxControlVisualizer","props","forwardedRef","value","otherProps","createElement","ref","ConnectedBorderBoxControlVisualizer"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,YAAY;AAEjC,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,6BAA6B,QAAQ,QAAQ;AAItD,MAAMC,0BAA0B,GAAGA,CAClCC,KAAwD,EACxDC,YAAuC,KACnC;EACJ,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAW,CAAC,GAAGL,6BAA6B,CAAEE,KAAM,CAAC;EAEvE,OAAOI,aAAA,CAACR,IAAI;IAAA,GAAMO,UAAU;IAAGE,GAAG,EAAGJ;EAAc,CAAE,CAAC;AACvD,CAAC;AAED,MAAMK,mCAAmC,GAAGT,cAAc,CACzDE,0BAA0B,EAC1B,4BACD,CAAC;AACD,eAAeO,mCAAmC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"names":["useMemo","styles","useContextSystem","useCx","useBorderBoxControlVisualizer","props","className","value","size","otherProps","cx","classes","borderBoxControlVisualizer"],"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils';\n\nimport type { VisualizerProps } from '../types';\n\nexport function useBorderBoxControlVisualizer(\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tvalue,\n\t\tsize = 'default',\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlVisualizer' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx(\n\t\t\tstyles.borderBoxControlVisualizer( value, size ),\n\t\t\tclassName\n\t\t);\n\t}, [ cx, className, value, size ] );\n\n\treturn { ...otherProps, className: classes, value };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,WAAW;AAEnC,SAASC,gBAAgB,QAAQ,eAAe;AAChD,SAASC,KAAK,QAAQ,aAAa;AAInC,OAAO,SAASC,6BAA6BA,CAC5CC,KAAwD,EACvD;EACD,MAAM;IACLC,SAAS;IACTC,KAAK;IACLC,IAAI,GAAG,SAAS;IAChB,GAAGC;EACJ,CAAC,GAAGP,gBAAgB,CAAEG,KAAK,EAAE,4BAA6B,CAAC;;EAE3D;EACA,MAAMK,EAAE,GAAGP,KAAK,CAAC,CAAC;EAClB,MAAMQ,OAAO,GAAGX,OAAO,CAAE,MAAM;IAC9B,OAAOU,EAAE,CACRT,MAAM,CAACW,0BAA0B,CAAEL,KAAK,EAAEC,IAAK,CAAC,EAChDF,SACD,CAAC;EACF,CAAC,EAAE,CAAEI,EAAE,EAAEJ,SAAS,EAAEC,KAAK,EAAEC,IAAI,CAAG,CAAC;EAEnC,OAAO;IAAE,GAAGC,UAAU;IAAEH,SAAS,EAAEK,OAAO;IAAEJ;EAAM,CAAC;AACpD"}

View File

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

View File

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

View File

@@ -0,0 +1,165 @@
import { createElement } from "react";
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useMemo, useState } from '@wordpress/element';
import { useMergeRefs } from '@wordpress/compose';
/**
* Internal dependencies
*/
import BorderBoxControlLinkedButton from '../border-box-control-linked-button';
import BorderBoxControlSplitControls from '../border-box-control-split-controls';
import { BorderControl } from '../../border-control';
import { StyledLabel } from '../../base-control/styles/base-control-styles';
import { View } from '../../view';
import { VisuallyHidden } from '../../visually-hidden';
import { contextConnect } from '../../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 UnconnectedBorderBoxControl = (props, forwardedRef) => {
const {
className,
colors,
disableCustomColors,
disableUnits,
enableAlpha,
enableStyle,
hasMixedBorders,
hideLabelFromVision,
isLinked,
label,
linkedControlClassName,
linkedValue,
onLinkedChange,
onSplitChange,
popoverPlacement,
popoverOffset,
size,
splitValue,
toggleLinked,
wrapperClassName,
__experimentalIsRenderedInSidebar,
...otherProps
} = useBorderBoxControl(props);
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
const [popoverAnchor, setPopoverAnchor] = useState(null);
// Memoize popoverProps to avoid returning a new object every time.
const popoverProps = useMemo(() => popoverPlacement ? {
placement: popoverPlacement,
offset: popoverOffset,
anchor: popoverAnchor,
shift: true
} : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);
const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);
return createElement(View, {
className: className,
...otherProps,
ref: mergedRef
}, createElement(BorderLabel, {
label: label,
hideLabelFromVision: hideLabelFromVision
}), createElement(View, {
className: wrapperClassName
}, isLinked ? createElement(BorderControl, {
className: linkedControlClassName,
colors: colors,
disableUnits: disableUnits,
disableCustomColors: disableCustomColors,
enableAlpha: enableAlpha,
enableStyle: enableStyle,
onChange: onLinkedChange,
placeholder: hasMixedBorders ? __('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
}) : createElement(BorderBoxControlSplitControls, {
colors: colors,
disableCustomColors: disableCustomColors,
enableAlpha: enableAlpha,
enableStyle: enableStyle,
onChange: onSplitChange,
popoverPlacement: popoverPlacement,
popoverOffset: popoverOffset,
value: splitValue,
__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
size: size
}), createElement(BorderBoxControlLinkedButton, {
onClick: toggleLinked,
isLinked: isLinked,
size: size
})));
};
/**
* The `BorderBoxControl` effectively has two view states. The first, a "linked"
* view, allows configuration of a flat border via a single `BorderControl`.
* The second, a "split" view, contains a `BorderControl` for each side
* as well as a visualizer for the currently selected borders. Each view also
* contains a button to toggle between the two.
*
* When switching from the "split" view to "linked", if the individual side
* borders are not consistent, the "linked" view will display any border
* properties selections that are consistent while showing a mixed state for
* those that aren't. For example, if all borders had the same color and style
* but different widths, then the border dropdown in the "linked" view's
* `BorderControl` would show that consistent color and style but the "linked"
* view's width input would show "Mixed" placeholder text.
*
* ```jsx
* import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
* import { __ } from '@wordpress/i18n';
*
* const colors = [
* { name: 'Blue 20', color: '#72aee6' },
* // ...
* ];
*
* const MyBorderBoxControl = () => {
* const defaultBorder = {
* color: '#72aee6',
* style: 'dashed',
* width: '1px',
* };
* const [ borders, setBorders ] = useState( {
* top: defaultBorder,
* right: defaultBorder,
* bottom: defaultBorder,
* left: defaultBorder,
* } );
* const onChange = ( newBorders ) => setBorders( newBorders );
*
* return (
* <BorderBoxControl
* colors={ colors }
* label={ __( 'Borders' ) }
* onChange={ onChange }
* value={ borders }
* />
* );
* };
* ```
*/
export const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl');
export default BorderBoxControl;
//# sourceMappingURL=component.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,116 @@
/**
* 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 '../../context';
import { useCx } from '../../utils/hooks/use-cx';
export function useBorderBoxControl(props) {
const {
className,
colors = [],
onChange,
enableAlpha = false,
enableStyle = true,
size = 'default',
value,
__experimentalIsRenderedInSidebar = false,
__next40pxDefaultSize,
...otherProps
} = useContextSystem(props, 'BorderBoxControl');
const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
const mixedBorders = hasMixedBorders(value);
const splitBorders = hasSplitBorders(value);
const linkedValue = splitBorders ? getCommonBorder(value) : value;
const splitValue = splitBorders ? value : getSplitBorders(value);
// If no numeric width value is set, the unit select will be disabled.
const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`));
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?.top,
...changes
},
right: {
...value?.right,
...changes
},
bottom: {
...value?.bottom,
...changes
},
left: {
...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);
}, [cx, className]);
const linkedControlClassName = useMemo(() => {
return cx(styles.linkedBorderControl());
}, [cx]);
const wrapperClassName = useMemo(() => {
return cx(styles.wrapper);
}, [cx]);
return {
...otherProps,
className: classes,
colors,
disableUnits: mixedBorders && !hasWidthValue,
enableAlpha,
enableStyle,
hasMixedBorders: mixedBorders,
isLinked,
linkedControlClassName,
onLinkedChange,
onSplitChange,
toggleLinked,
linkedValue,
size: computedSize,
splitValue,
wrapperClassName,
__experimentalIsRenderedInSidebar
};
}
//# sourceMappingURL=hook.js.map

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"names":["default","BorderBoxControl","useBorderBoxControl"],"sources":["@wordpress/components/src/border-box-control/border-box-control/index.ts"],"sourcesContent":["export { default as BorderBoxControl } from './component';\nexport { useBorderBoxControl } from './hook';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,aAAa;AACzD,SAASC,mBAAmB,QAAQ,QAAQ"}

View File

@@ -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

View File

@@ -0,0 +1 @@
{"version":3,"names":["default","BorderBoxControl","useBorderBoxControl","hasSplitBorders","isEmptyBorder","isDefinedBorder"],"sources":["@wordpress/components/src/border-box-control/index.ts"],"sourcesContent":["export { default as BorderBoxControl } from './border-box-control/component';\nexport { useBorderBoxControl } from './border-box-control/hook';\nexport { hasSplitBorders, isEmptyBorder, isDefinedBorder } from './utils';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,gCAAgC;AAC5E,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SAASC,eAAe,EAAEC,aAAa,EAAEC,eAAe,QAAQ,SAAS"}

View File

@@ -0,0 +1,60 @@
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
*/
import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import { COLORS, CONFIG, rtl } from '../utils';
export const borderBoxControl = /*#__PURE__*/css(process.env.NODE_ENV === "production" ? "" : ";label:borderBoxControl;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhbUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgbGlua2VkQm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiAnMjRweCcgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IHdyYXBwZXIgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnOHB4JyA6ICczcHgnIH07XG5cdFx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSgpIH1cblx0XHRsaW5lLWhlaWdodDogMDtcblx0YDtcbn07XG5cbmNvbnN0IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9IChcblx0Ym9yZGVycz86IEJvcmRlcnMsXG5cdHNpemU/OiAnZGVmYXVsdCcgfCAnX191bnN0YWJsZS1sYXJnZSdcbikgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdHJpZ2h0OiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMzlweCcgOiAnMjlweCcgfTtcblx0XHRib3R0b206ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdGxlZnQ6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICczOXB4JyA6ICcyOXB4JyB9O1xuXHRcdGJvcmRlci10b3A6ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHR3aWR0aDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gdW5kZWZpbmVkIDogJzgwJScgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcblxuZXhwb3J0IGNvbnN0IHJpZ2h0Qm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0JHsgcnRsKCB7IG1hcmdpbkxlZnQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */");
export const linkedBorderControl = () => /*#__PURE__*/css("flex:1;", rtl({
marginRight: '24px'
})(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:linkedBorderControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlNEMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgbGlua2VkQm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiAnMjRweCcgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IHdyYXBwZXIgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnOHB4JyA6ICczcHgnIH07XG5cdFx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSgpIH1cblx0XHRsaW5lLWhlaWdodDogMDtcblx0YDtcbn07XG5cbmNvbnN0IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9IChcblx0Ym9yZGVycz86IEJvcmRlcnMsXG5cdHNpemU/OiAnZGVmYXVsdCcgfCAnX191bnN0YWJsZS1sYXJnZSdcbikgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdHJpZ2h0OiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMzlweCcgOiAnMjlweCcgfTtcblx0XHRib3R0b206ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdGxlZnQ6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICczOXB4JyA6ICcyOXB4JyB9O1xuXHRcdGJvcmRlci10b3A6ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHR3aWR0aDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gdW5kZWZpbmVkIDogJzgwJScgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcblxuZXhwb3J0IGNvbnN0IHJpZ2h0Qm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0JHsgcnRsKCB7IG1hcmdpbkxlZnQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */");
export const wrapper = process.env.NODE_ENV === "production" ? {
name: "bjn8wh",
styles: "position:relative"
} : {
name: "memc06-wrapper",
styles: "position:relative;label:wrapper;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQjBCIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcblxuaW1wb3J0IHR5cGUgeyBCb3JkZXIgfSBmcm9tICcuLi9ib3JkZXItY29udHJvbC90eXBlcyc7XG5pbXBvcnQgdHlwZSB7IEJvcmRlcnMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2wgPSBjc3NgYDtcblxuZXhwb3J0IGNvbnN0IGxpbmtlZEJvcmRlckNvbnRyb2wgPSAoKSA9PiBjc3NgXG5cdGZsZXg6IDE7XG5cdCR7IHJ0bCggeyBtYXJnaW5SaWdodDogJzI0cHgnIH0gKSgpIH1cbmA7XG5cbmV4cG9ydCBjb25zdCB3cmFwcGVyID0gY3NzYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbExpbmtlZEJ1dHRvbiA9IChcblx0c2l6ZT86ICdkZWZhdWx0JyB8ICdfX3Vuc3RhYmxlLWxhcmdlJ1xuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzhweCcgOiAnM3B4JyB9O1xuXHRcdCR7IHJ0bCggeyByaWdodDogMCB9ICkoKSB9XG5cdFx0bGluZS1oZWlnaHQ6IDA7XG5cdGA7XG59O1xuXG5jb25zdCBib3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoXG5cdGJvcmRlcnM/OiBCb3JkZXJzLFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMjBweCcgOiAnMTVweCcgfTtcblx0XHRyaWdodDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzM5cHgnIDogJzI5cHgnIH07XG5cdFx0Ym90dG9tOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMjBweCcgOiAnMTVweCcgfTtcblx0XHRsZWZ0OiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMzlweCcgOiAnMjlweCcgfTtcblx0XHRib3JkZXItdG9wOiAkeyBib3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8udG9wICkgfTtcblx0XHRib3JkZXItYm90dG9tOiAkeyBib3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8uYm90dG9tICkgfTtcblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlckxlZnQ6IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5sZWZ0ICksXG5cdFx0fSApKCkgfVxuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyUmlnaHQ6IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5yaWdodCApLFxuXHRcdH0gKSgpIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sU3BsaXRDb250cm9scyA9IChcblx0c2l6ZT86ICdkZWZhdWx0JyB8ICdfX3Vuc3RhYmxlLWxhcmdlJ1xuKSA9PiBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0d2lkdGg6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/IHVuZGVmaW5lZCA6ICc4MCUnIH07XG5gO1xuXG5leHBvcnQgY29uc3QgY2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCByaWdodEJvcmRlckNvbnRyb2wgPSAoKSA9PiBjc3NgXG5cdCR7IHJ0bCggeyBtYXJnaW5MZWZ0OiAnYXV0bycgfSApKCkgfVxuYDtcbiJdfQ== */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export const borderBoxControlLinkedButton = size => {
return /*#__PURE__*/css("position:absolute;top:", size === '__unstable-large' ? '8px' : '3px', ";", rtl({
right: 0
})(), " line-height:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:borderBoxControlLinkedButton;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQlciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgbGlua2VkQm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiAnMjRweCcgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IHdyYXBwZXIgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnOHB4JyA6ICczcHgnIH07XG5cdFx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSgpIH1cblx0XHRsaW5lLWhlaWdodDogMDtcblx0YDtcbn07XG5cbmNvbnN0IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9IChcblx0Ym9yZGVycz86IEJvcmRlcnMsXG5cdHNpemU/OiAnZGVmYXVsdCcgfCAnX191bnN0YWJsZS1sYXJnZSdcbikgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdHJpZ2h0OiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMzlweCcgOiAnMjlweCcgfTtcblx0XHRib3R0b206ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdGxlZnQ6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICczOXB4JyA6ICcyOXB4JyB9O1xuXHRcdGJvcmRlci10b3A6ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHR3aWR0aDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gdW5kZWZpbmVkIDogJzgwJScgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcblxuZXhwb3J0IGNvbnN0IHJpZ2h0Qm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0JHsgcnRsKCB7IG1hcmdpbkxlZnQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */");
};
const borderBoxStyleWithFallback = border => {
const {
color = COLORS.gray[200],
style = 'solid',
width = CONFIG.borderWidth
} = border || {};
const clampedWidth = width !== CONFIG.borderWidth ? `clamp(1px, ${width}, 10px)` : width;
const hasVisibleBorder = !!width && width !== '0' || !!color;
const borderStyle = hasVisibleBorder ? style || 'solid' : style;
return `${color} ${borderStyle} ${clampedWidth}`;
};
export const borderBoxControlVisualizer = (borders, size) => {
return /*#__PURE__*/css("position:absolute;top:", size === '__unstable-large' ? '20px' : '15px', ";right:", size === '__unstable-large' ? '39px' : '29px', ";bottom:", size === '__unstable-large' ? '20px' : '15px', ";left:", size === '__unstable-large' ? '39px' : '29px', ";border-top:", borderBoxStyleWithFallback(borders?.top), ";border-bottom:", borderBoxStyleWithFallback(borders?.bottom), ";", rtl({
borderLeft: borderBoxStyleWithFallback(borders?.left)
})(), " ", rtl({
borderRight: borderBoxStyleWithFallback(borders?.right)
})(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:borderBoxControlVisualizer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRFciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgbGlua2VkQm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiAnMjRweCcgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IHdyYXBwZXIgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnOHB4JyA6ICczcHgnIH07XG5cdFx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSgpIH1cblx0XHRsaW5lLWhlaWdodDogMDtcblx0YDtcbn07XG5cbmNvbnN0IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9IChcblx0Ym9yZGVycz86IEJvcmRlcnMsXG5cdHNpemU/OiAnZGVmYXVsdCcgfCAnX191bnN0YWJsZS1sYXJnZSdcbikgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdHJpZ2h0OiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMzlweCcgOiAnMjlweCcgfTtcblx0XHRib3R0b206ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdGxlZnQ6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICczOXB4JyA6ICcyOXB4JyB9O1xuXHRcdGJvcmRlci10b3A6ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHR3aWR0aDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gdW5kZWZpbmVkIDogJzgwJScgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcblxuZXhwb3J0IGNvbnN0IHJpZ2h0Qm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0JHsgcnRsKCB7IG1hcmdpbkxlZnQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */");
};
export const borderBoxControlSplitControls = size => /*#__PURE__*/css("position:relative;flex:1;width:", size === '__unstable-large' ? undefined : '80%', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:borderBoxControlSplitControls;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RVEiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3JkZXItYm94LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5pbXBvcnQgdHlwZSB7IEJvcmRlciB9IGZyb20gJy4uL2JvcmRlci1jb250cm9sL3R5cGVzJztcbmltcG9ydCB0eXBlIHsgQm9yZGVycyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbCA9IGNzc2BgO1xuXG5leHBvcnQgY29uc3QgbGlua2VkQm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0ZmxleDogMTtcblx0JHsgcnRsKCB7IG1hcmdpblJpZ2h0OiAnMjRweCcgfSApKCkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IHdyYXBwZXIgPSBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sTGlua2VkQnV0dG9uID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnOHB4JyA6ICczcHgnIH07XG5cdFx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSgpIH1cblx0XHRsaW5lLWhlaWdodDogMDtcblx0YDtcbn07XG5cbmNvbnN0IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrID0gKCBib3JkZXI/OiBCb3JkZXIgKSA9PiB7XG5cdGNvbnN0IHtcblx0XHRjb2xvciA9IENPTE9SUy5ncmF5WyAyMDAgXSxcblx0XHRzdHlsZSA9ICdzb2xpZCcsXG5cdFx0d2lkdGggPSBDT05GSUcuYm9yZGVyV2lkdGgsXG5cdH0gPSBib3JkZXIgfHwge307XG5cblx0Y29uc3QgY2xhbXBlZFdpZHRoID1cblx0XHR3aWR0aCAhPT0gQ09ORklHLmJvcmRlcldpZHRoID8gYGNsYW1wKDFweCwgJHsgd2lkdGggfSwgMTBweClgIDogd2lkdGg7XG5cdGNvbnN0IGhhc1Zpc2libGVCb3JkZXIgPSAoICEhIHdpZHRoICYmIHdpZHRoICE9PSAnMCcgKSB8fCAhISBjb2xvcjtcblx0Y29uc3QgYm9yZGVyU3R5bGUgPSBoYXNWaXNpYmxlQm9yZGVyID8gc3R5bGUgfHwgJ3NvbGlkJyA6IHN0eWxlO1xuXG5cdHJldHVybiBgJHsgY29sb3IgfSAkeyBib3JkZXJTdHlsZSB9ICR7IGNsYW1wZWRXaWR0aCB9YDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sVmlzdWFsaXplciA9IChcblx0Ym9yZGVycz86IEJvcmRlcnMsXG5cdHNpemU/OiAnZGVmYXVsdCcgfCAnX191bnN0YWJsZS1sYXJnZSdcbikgPT4ge1xuXHRyZXR1cm4gY3NzYFxuXHRcdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0XHR0b3A6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdHJpZ2h0OiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMzlweCcgOiAnMjlweCcgfTtcblx0XHRib3R0b206ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICcyMHB4JyA6ICcxNXB4JyB9O1xuXHRcdGxlZnQ6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/ICczOXB4JyA6ICcyOXB4JyB9O1xuXHRcdGJvcmRlci10b3A6ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy50b3AgKSB9O1xuXHRcdGJvcmRlci1ib3R0b206ICR7IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5ib3R0b20gKSB9O1xuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyTGVmdDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LmxlZnQgKSxcblx0XHR9ICkoKSB9XG5cdFx0JHsgcnRsKCB7XG5cdFx0XHRib3JkZXJSaWdodDogYm9yZGVyQm94U3R5bGVXaXRoRmFsbGJhY2soIGJvcmRlcnM/LnJpZ2h0ICksXG5cdFx0fSApKCkgfVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2xTcGxpdENvbnRyb2xzID0gKFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRmbGV4OiAxO1xuXHR3aWR0aDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gdW5kZWZpbmVkIDogJzgwJScgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjZW50ZXJlZEJvcmRlckNvbnRyb2wgPSBjc3NgXG5cdGdyaWQtY29sdW1uOiBzcGFuIDI7XG5cdG1hcmdpbjogMCBhdXRvO1xuYDtcblxuZXhwb3J0IGNvbnN0IHJpZ2h0Qm9yZGVyQ29udHJvbCA9ICgpID0+IGNzc2Bcblx0JHsgcnRsKCB7IG1hcmdpbkxlZnQ6ICdhdXRvJyB9ICkoKSB9XG5gO1xuIl19 */");
export const centeredBorderControl = process.env.NODE_ENV === "production" ? {
name: "1nwbfnf",
styles: "grid-column:span 2;margin:0 auto"
} : {
name: "gedmrr-centeredBorderControl",
styles: "grid-column:span 2;margin:0 auto;label:centeredBorderControl;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErRXdDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcblxuaW1wb3J0IHR5cGUgeyBCb3JkZXIgfSBmcm9tICcuLi9ib3JkZXItY29udHJvbC90eXBlcyc7XG5pbXBvcnQgdHlwZSB7IEJvcmRlcnMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2wgPSBjc3NgYDtcblxuZXhwb3J0IGNvbnN0IGxpbmtlZEJvcmRlckNvbnRyb2wgPSAoKSA9PiBjc3NgXG5cdGZsZXg6IDE7XG5cdCR7IHJ0bCggeyBtYXJnaW5SaWdodDogJzI0cHgnIH0gKSgpIH1cbmA7XG5cbmV4cG9ydCBjb25zdCB3cmFwcGVyID0gY3NzYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbExpbmtlZEJ1dHRvbiA9IChcblx0c2l6ZT86ICdkZWZhdWx0JyB8ICdfX3Vuc3RhYmxlLWxhcmdlJ1xuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzhweCcgOiAnM3B4JyB9O1xuXHRcdCR7IHJ0bCggeyByaWdodDogMCB9ICkoKSB9XG5cdFx0bGluZS1oZWlnaHQ6IDA7XG5cdGA7XG59O1xuXG5jb25zdCBib3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoXG5cdGJvcmRlcnM/OiBCb3JkZXJzLFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMjBweCcgOiAnMTVweCcgfTtcblx0XHRyaWdodDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzM5cHgnIDogJzI5cHgnIH07XG5cdFx0Ym90dG9tOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMjBweCcgOiAnMTVweCcgfTtcblx0XHRsZWZ0OiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMzlweCcgOiAnMjlweCcgfTtcblx0XHRib3JkZXItdG9wOiAkeyBib3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8udG9wICkgfTtcblx0XHRib3JkZXItYm90dG9tOiAkeyBib3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8uYm90dG9tICkgfTtcblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlckxlZnQ6IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5sZWZ0ICksXG5cdFx0fSApKCkgfVxuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyUmlnaHQ6IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5yaWdodCApLFxuXHRcdH0gKSgpIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sU3BsaXRDb250cm9scyA9IChcblx0c2l6ZT86ICdkZWZhdWx0JyB8ICdfX3Vuc3RhYmxlLWxhcmdlJ1xuKSA9PiBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0d2lkdGg6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/IHVuZGVmaW5lZCA6ICc4MCUnIH07XG5gO1xuXG5leHBvcnQgY29uc3QgY2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCByaWdodEJvcmRlckNvbnRyb2wgPSAoKSA9PiBjc3NgXG5cdCR7IHJ0bCggeyBtYXJnaW5MZWZ0OiAnYXV0bycgfSApKCkgfVxuYDtcbiJdfQ== */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
export const rightBorderControl = () => /*#__PURE__*/css(rtl({
marginLeft: 'auto'
})(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:rightBorderControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRjJDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm9yZGVyLWJveC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBDT05GSUcsIHJ0bCB9IGZyb20gJy4uL3V0aWxzJztcblxuaW1wb3J0IHR5cGUgeyBCb3JkZXIgfSBmcm9tICcuLi9ib3JkZXItY29udHJvbC90eXBlcyc7XG5pbXBvcnQgdHlwZSB7IEJvcmRlcnMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IGJvcmRlckJveENvbnRyb2wgPSBjc3NgYDtcblxuZXhwb3J0IGNvbnN0IGxpbmtlZEJvcmRlckNvbnRyb2wgPSAoKSA9PiBjc3NgXG5cdGZsZXg6IDE7XG5cdCR7IHJ0bCggeyBtYXJnaW5SaWdodDogJzI0cHgnIH0gKSgpIH1cbmA7XG5cbmV4cG9ydCBjb25zdCB3cmFwcGVyID0gY3NzYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbExpbmtlZEJ1dHRvbiA9IChcblx0c2l6ZT86ICdkZWZhdWx0JyB8ICdfX3Vuc3RhYmxlLWxhcmdlJ1xuKSA9PiB7XG5cdHJldHVybiBjc3NgXG5cdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdHRvcDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzhweCcgOiAnM3B4JyB9O1xuXHRcdCR7IHJ0bCggeyByaWdodDogMCB9ICkoKSB9XG5cdFx0bGluZS1oZWlnaHQ6IDA7XG5cdGA7XG59O1xuXG5jb25zdCBib3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayA9ICggYm9yZGVyPzogQm9yZGVyICkgPT4ge1xuXHRjb25zdCB7XG5cdFx0Y29sb3IgPSBDT0xPUlMuZ3JheVsgMjAwIF0sXG5cdFx0c3R5bGUgPSAnc29saWQnLFxuXHRcdHdpZHRoID0gQ09ORklHLmJvcmRlcldpZHRoLFxuXHR9ID0gYm9yZGVyIHx8IHt9O1xuXG5cdGNvbnN0IGNsYW1wZWRXaWR0aCA9XG5cdFx0d2lkdGggIT09IENPTkZJRy5ib3JkZXJXaWR0aCA/IGBjbGFtcCgxcHgsICR7IHdpZHRoIH0sIDEwcHgpYCA6IHdpZHRoO1xuXHRjb25zdCBoYXNWaXNpYmxlQm9yZGVyID0gKCAhISB3aWR0aCAmJiB3aWR0aCAhPT0gJzAnICkgfHwgISEgY29sb3I7XG5cdGNvbnN0IGJvcmRlclN0eWxlID0gaGFzVmlzaWJsZUJvcmRlciA/IHN0eWxlIHx8ICdzb2xpZCcgOiBzdHlsZTtcblxuXHRyZXR1cm4gYCR7IGNvbG9yIH0gJHsgYm9yZGVyU3R5bGUgfSAkeyBjbGFtcGVkV2lkdGggfWA7XG59O1xuXG5leHBvcnQgY29uc3QgYm9yZGVyQm94Q29udHJvbFZpc3VhbGl6ZXIgPSAoXG5cdGJvcmRlcnM/OiBCb3JkZXJzLFxuXHRzaXplPzogJ2RlZmF1bHQnIHwgJ19fdW5zdGFibGUtbGFyZ2UnXG4pID0+IHtcblx0cmV0dXJuIGNzc2Bcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0dG9wOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMjBweCcgOiAnMTVweCcgfTtcblx0XHRyaWdodDogJHsgc2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gJzM5cHgnIDogJzI5cHgnIH07XG5cdFx0Ym90dG9tOiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMjBweCcgOiAnMTVweCcgfTtcblx0XHRsZWZ0OiAkeyBzaXplID09PSAnX191bnN0YWJsZS1sYXJnZScgPyAnMzlweCcgOiAnMjlweCcgfTtcblx0XHRib3JkZXItdG9wOiAkeyBib3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8udG9wICkgfTtcblx0XHRib3JkZXItYm90dG9tOiAkeyBib3JkZXJCb3hTdHlsZVdpdGhGYWxsYmFjayggYm9yZGVycz8uYm90dG9tICkgfTtcblx0XHQkeyBydGwoIHtcblx0XHRcdGJvcmRlckxlZnQ6IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5sZWZ0ICksXG5cdFx0fSApKCkgfVxuXHRcdCR7IHJ0bCgge1xuXHRcdFx0Ym9yZGVyUmlnaHQ6IGJvcmRlckJveFN0eWxlV2l0aEZhbGxiYWNrKCBib3JkZXJzPy5yaWdodCApLFxuXHRcdH0gKSgpIH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBib3JkZXJCb3hDb250cm9sU3BsaXRDb250cm9scyA9IChcblx0c2l6ZT86ICdkZWZhdWx0JyB8ICdfX3Vuc3RhYmxlLWxhcmdlJ1xuKSA9PiBjc3NgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0ZmxleDogMTtcblx0d2lkdGg6ICR7IHNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/IHVuZGVmaW5lZCA6ICc4MCUnIH07XG5gO1xuXG5leHBvcnQgY29uc3QgY2VudGVyZWRCb3JkZXJDb250cm9sID0gY3NzYFxuXHRncmlkLWNvbHVtbjogc3BhbiAyO1xuXHRtYXJnaW46IDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCByaWdodEJvcmRlckNvbnRyb2wgPSAoKSA9PiBjc3NgXG5cdCR7IHJ0bCggeyBtYXJnaW5MZWZ0OiAnYXV0bycgfSApKCkgfVxuYDtcbiJdfQ== */");
//# sourceMappingURL=styles.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/border-box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type {\n\tBorder,\n\tColorProps,\n\tLabelProps,\n\tBorderControlProps,\n} from '../border-control/types';\nimport type { PopoverProps } from '../popover/types';\n\nexport type Borders = {\n\ttop?: Border;\n\tright?: Border;\n\tbottom?: Border;\n\tleft?: Border;\n};\n\nexport type AnyBorder = Border | Borders | undefined;\nexport type BorderProp = keyof Border;\nexport type BorderSide = keyof Borders;\n\nexport type BorderBoxControlProps = ColorProps &\n\tLabelProps &\n\tPick< BorderControlProps, 'enableStyle' | 'size' > & {\n\t\t/**\n\t\t * A callback function invoked when any border value is changed. The value\n\t\t * received may be a \"flat\" border object, one that has properties defining\n\t\t * individual side borders, or `undefined`.\n\t\t */\n\t\tonChange: ( value: AnyBorder ) => void;\n\t\t/**\n\t\t * The position of the color popovers compared to the control wrapper.\n\t\t */\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/**\n\t\t * The space between the popover and the control wrapper.\n\t\t */\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/**\n\t\t * An object representing the current border configuration.\n\t\t *\n\t\t * This may be a \"flat\" border where the object has `color`, `style`, and\n\t\t * `width` properties or a \"split\" border which defines the previous\n\t\t * properties but for each side; `top`, `right`, `bottom`, and `left`.\n\t\t */\n\t\tvalue: AnyBorder;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t};\n\nexport type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/**\n\t * This prop allows the `LinkedButton` to reflect whether the parent\n\t * `BorderBoxControl` is currently displaying \"linked\" or \"unlinked\"\n\t * border controls.\n\t */\n\tisLinked: boolean;\n\t/**\n\t * A callback invoked when this `LinkedButton` is clicked. It is used to\n\t * toggle display between linked or split border controls within the parent\n\t * `BorderBoxControl`.\n\t */\n\tonClick: () => void;\n};\n\nexport type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {\n\t/**\n\t * An object representing the current border configuration. It contains\n\t * properties for each side, with each side an object reflecting the border\n\t * color, style, and width.\n\t */\n\tvalue?: Borders;\n};\n\nexport type SplitControlsProps = ColorProps &\n\tPick< BorderBoxControlProps, 'enableStyle' | 'size' > & {\n\t\t/**\n\t\t * A callback that is invoked whenever an individual side's border has\n\t\t * changed.\n\t\t */\n\t\tonChange: ( value: Border | undefined, side: BorderSide ) => void;\n\t\t/**\n\t\t * The position of the color popovers compared to the control wrapper.\n\t\t */\n\t\tpopoverPlacement?: PopoverProps[ 'placement' ];\n\t\t/**\n\t\t * The space between the popover and the control wrapper.\n\t\t */\n\t\tpopoverOffset?: PopoverProps[ 'offset' ];\n\t\t/**\n\t\t * An object representing the current border configuration. It contains\n\t\t * properties for each side, with each side an object reflecting the border\n\t\t * color, style, and width.\n\t\t */\n\t\tvalue?: Borders;\n\t};\n"],"mappings":""}

View File

@@ -0,0 +1,148 @@
/**
* External dependencies
*/
/**
* Internal dependencies
*/
import { parseCSSUnitValue } from '../utils/unit-values';
const sides = ['top', 'right', 'bottom', 'left'];
const borderProps = ['color', 'style', 'width'];
export const isEmptyBorder = border => {
if (!border) {
return true;
}
return !borderProps.some(prop => border[prop] !== undefined);
};
export const isDefinedBorder = border => {
// No border, no worries :)
if (!border) {
return false;
}
// If we have individual borders per side within the border object we
// need to check whether any of those side borders have been set.
if (hasSplitBorders(border)) {
const allSidesEmpty = sides.every(side => isEmptyBorder(border[side]));
return !allSidesEmpty;
}
// If we have a top-level border only, check if that is empty. e.g.
// { color: undefined, style: undefined, width: undefined }
// Border radius can still be set within the border object as it is
// handled separately.
return !isEmptyBorder(border);
};
export const isCompleteBorder = border => {
if (!border) {
return false;
}
return borderProps.every(prop => border[prop] !== undefined);
};
export const hasSplitBorders = (border = {}) => {
return Object.keys(border).some(side => sides.indexOf(side) !== -1);
};
export const hasMixedBorders = borders => {
if (!hasSplitBorders(borders)) {
return false;
}
const shorthandBorders = sides.map(side => getShorthandBorderStyle(borders?.[side]));
return !shorthandBorders.every(border => border === shorthandBorders[0]);
};
export const getSplitBorders = border => {
if (!border || isEmptyBorder(border)) {
return undefined;
}
return {
top: border,
right: border,
bottom: border,
left: border
};
};
export const getBorderDiff = (original, updated) => {
const diff = {};
if (original.color !== updated.color) {
diff.color = updated.color;
}
if (original.style !== updated.style) {
diff.style = updated.style;
}
if (original.width !== updated.width) {
diff.width = updated.width;
}
return diff;
};
export const getCommonBorder = borders => {
if (!borders) {
return undefined;
}
const colors = [];
const styles = [];
const widths = [];
sides.forEach(side => {
colors.push(borders[side]?.color);
styles.push(borders[side]?.style);
widths.push(borders[side]?.width);
});
const allColorsMatch = colors.every(value => value === colors[0]);
const allStylesMatch = styles.every(value => value === styles[0]);
const allWidthsMatch = widths.every(value => value === widths[0]);
return {
color: allColorsMatch ? colors[0] : undefined,
style: allStylesMatch ? styles[0] : undefined,
width: allWidthsMatch ? widths[0] : getMostCommonUnit(widths)
};
};
export const getShorthandBorderStyle = (border, fallbackBorder) => {
if (isEmptyBorder(border)) {
return fallbackBorder;
}
const {
color: fallbackColor,
style: fallbackStyle,
width: fallbackWidth
} = fallbackBorder || {};
const {
color = fallbackColor,
style = fallbackStyle,
width = fallbackWidth
} = border;
const hasVisibleBorder = !!width && width !== '0' || !!color;
const borderStyle = hasVisibleBorder ? style || 'solid' : style;
return [width, borderStyle, color].filter(Boolean).join(' ');
};
export const getMostCommonUnit = values => {
// Collect all the CSS units.
const units = values.map(value => value === undefined ? undefined : parseCSSUnitValue(`${value}`)[1]);
// Return the most common unit out of only the defined CSS units.
const filteredUnits = units.filter(value => value !== undefined);
return mode(filteredUnits);
};
/**
* Finds the mode value out of the array passed favouring the first value
* as a tiebreaker.
*
* @param values Values to determine the mode from.
*
* @return The mode value.
*/
function mode(values) {
if (values.length === 0) {
return undefined;
}
const map = {};
let maxCount = 0;
let currentMode;
values.forEach(value => {
map[value] = map[value] === undefined ? 1 : map[value] + 1;
if (map[value] > maxCount) {
currentMode = value;
maxCount = map[value];
}
});
return currentMode;
}
//# sourceMappingURL=utils.js.map

File diff suppressed because one or more lines are too long