@wordpress/components 19.15.0 → 20.0.0

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

@@ -1,15 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
  * External dependencies
  */
 import classnames from 'classnames';
-
 /**
  * Internal dependencies
  */
+
 import { VisuallyHidden } from '../visually-hidden';
 import { Wrapper, StyledField, StyledLabel, StyledHelp, StyledVisualLabel } from './styles/base-control-styles';
+
 /**
  * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
  *
@@ -24,7 +26,6 @@ import { Wrapper, StyledField, StyledLabel, StyledHelp, StyledVisualLabel } from
  *   </BaseControl>
  * );
  */
-
 export const BaseControl = _ref => {
   let {
     __nextHasNoMarginBottom = false,
@@ -76,11 +77,12 @@ export const BaseControl = _ref => {
 export const VisualLabel = _ref2 => {
   let {
     className,
-    children
+    children,
+    ...props
   } = _ref2;
-  return createElement(StyledVisualLabel, {
+  return createElement(StyledVisualLabel, _extends({}, props, {
     className: classnames('components-base-control__label', className)
-  }, children);
+  }), children);
 };
 BaseControl.VisualLabel = VisualLabel;
 export default BaseControl;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/base-control/index.tsx"],"names":["classnames","VisuallyHidden","Wrapper","StyledField","StyledLabel","StyledHelp","StyledVisualLabel","BaseControl","__nextHasNoMarginBottom","id","label","hideLabelFromVision","help","className","children","undefined","VisualLabel"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,cAAT,QAA+B,oBAA/B;AAEA,SACCC,OADD,EAECC,WAFD,EAGCC,WAHD,EAICC,UAJD,EAKCC,iBALD,QAMO,8BANP;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,WAAW,GAAG,QAQF;AAAA,MARI;AAC5BC,IAAAA,uBAAuB,GAAG,KADE;AAE5BC,IAAAA,EAF4B;AAG5BC,IAAAA,KAH4B;AAI5BC,IAAAA,mBAAmB,GAAG,KAJM;AAK5BC,IAAAA,IAL4B;AAM5BC,IAAAA,SAN4B;AAO5BC,IAAAA;AAP4B,GAQJ;AACxB,SACC,cAAC,OAAD;AACC,IAAA,SAAS,EAAGd,UAAU,CAAE,yBAAF,EAA6Ba,SAA7B;AADvB,KAGC,cAAC,WAAD;AACC,IAAA,SAAS,EAAC,gCADX,CAEC;AAFD;AAGC,IAAA,uBAAuB,EAAGL;AAH3B,KAKGE,KAAK,IACND,EADC,KAECE,mBAAmB,GACpB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC,OAAnB;AAA2B,IAAA,OAAO,EAAGF;AAArC,KACGC,KADH,CADoB,GAKpB,cAAC,WAAD;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,OAAO,EAAGD;AAFX,KAIGC,KAJH,CAPA,CALH,EAmBGA,KAAK,IACN,CAAED,EADD,KAECE,mBAAmB,GACpB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA6BD,KAA7B,CADoB,GAGpB,cAAC,WAAD,CAAa,WAAb,QACGA,KADH,CALA,CAnBH,EA4BGI,QA5BH,CAHD,EAiCG,CAAC,CAAEF,IAAH,IACD,cAAC,UAAD;AACC,IAAA,EAAE,EAAGH,EAAE,GAAGA,EAAE,GAAG,QAAR,GAAmBM,SAD3B;AAEC,IAAA,SAAS,EAAC,+BAFX;AAGC,IAAA,uBAAuB,EAAGP;AAH3B,KAKGI,IALH,CAlCF,CADD;AA6CA,CAtDM;AAwDP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMI,WAA6D,GAAG,SAGtE;AAAA,MAHwE;AAC9EH,IAAAA,SAD8E;AAE9EC,IAAAA;AAF8E,GAGxE;AACN,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAGd,UAAU,CACrB,gCADqB,EAErBa,SAFqB;AADvB,KAMGC,QANH,CADD;AAUA,CAdM;AAePP,WAAW,CAACS,WAAZ,GAA0BA,WAA1B;AAEA,eAAeT,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { FunctionComponent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { BaseControlProps, BaseControlVisualLabelProps } from './types';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n\tStyledVisualLabel,\n} from './styles/base-control-styles';\n\n/**\n * `BaseControl` is a component used to generate labels and help text for components handling user inputs.\n *\n * @example\n * // Render a `BaseControl` for a textarea input\n * import { BaseControl } from '@wordpress/components';\n *\n * // The `id` prop is necessary to accessibly associate the label with the textarea\n * const MyBaseControl = () => (\n *   <BaseControl id=\"textarea-1\" label=\"Text\" help=\"Enter some text\" __nextHasNoMarginBottom={ true }>\n *     <textarea id=\"textarea-1\" />\n *   </BaseControl>\n * );\n */\nexport const BaseControl = ( {\n\t__nextHasNoMarginBottom = false,\n\tid,\n\tlabel,\n\thideLabelFromVision = false,\n\thelp,\n\tclassName,\n\tchildren,\n}: BaseControlProps ) => {\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName={ classnames( 'components-base-control', className ) }\n\t\t>\n\t\t\t<StyledField\n\t\t\t\tclassName=\"components-base-control__field\"\n\t\t\t\t// TODO: Official deprecation for this should start after all internal usages have been migrated\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id ? id + '__help' : undefined }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n};\n\n/**\n * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.\n *\n * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,\n * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would\n * otherwise use if the `label` prop was passed.\n *\n * @example\n * import { BaseControl } from '@wordpress/components';\n *\n * const MyBaseControl = () => (\n * \t<BaseControl help=\"This button is already accessibly labeled.\">\n * \t\t<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>\n * \t\t<Button>Select an author</Button>\n * \t</BaseControl>\n * );\n */\nexport const VisualLabel: FunctionComponent< BaseControlVisualLabelProps > = ( {\n\tclassName,\n\tchildren,\n} ) => {\n\treturn (\n\t\t<StyledVisualLabel\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-base-control__label',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledVisualLabel>\n\t);\n};\nBaseControl.VisualLabel = VisualLabel;\n\nexport default BaseControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/base-control/index.tsx"],"names":["classnames","VisuallyHidden","Wrapper","StyledField","StyledLabel","StyledHelp","StyledVisualLabel","BaseControl","__nextHasNoMarginBottom","id","label","hideLabelFromVision","help","className","children","undefined","VisualLabel","props"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,oBAA/B;AAEA,SACCC,OADD,EAECC,WAFD,EAGCC,WAHD,EAICC,UAJD,EAKCC,iBALD,QAMO,8BANP;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAG,QAQF;AAAA,MARI;AAC5BC,IAAAA,uBAAuB,GAAG,KADE;AAE5BC,IAAAA,EAF4B;AAG5BC,IAAAA,KAH4B;AAI5BC,IAAAA,mBAAmB,GAAG,KAJM;AAK5BC,IAAAA,IAL4B;AAM5BC,IAAAA,SAN4B;AAO5BC,IAAAA;AAP4B,GAQJ;AACxB,SACC,cAAC,OAAD;AACC,IAAA,SAAS,EAAGd,UAAU,CAAE,yBAAF,EAA6Ba,SAA7B;AADvB,KAGC,cAAC,WAAD;AACC,IAAA,SAAS,EAAC,gCADX,CAEC;AAFD;AAGC,IAAA,uBAAuB,EAAGL;AAH3B,KAKGE,KAAK,IACND,EADC,KAECE,mBAAmB,GACpB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC,OAAnB;AAA2B,IAAA,OAAO,EAAGF;AAArC,KACGC,KADH,CADoB,GAKpB,cAAC,WAAD;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,OAAO,EAAGD;AAFX,KAIGC,KAJH,CAPA,CALH,EAmBGA,KAAK,IACN,CAAED,EADD,KAECE,mBAAmB,GACpB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA6BD,KAA7B,CADoB,GAGpB,cAAC,WAAD,CAAa,WAAb,QACGA,KADH,CALA,CAnBH,EA4BGI,QA5BH,CAHD,EAiCG,CAAC,CAAEF,IAAH,IACD,cAAC,UAAD;AACC,IAAA,EAAE,EAAGH,EAAE,GAAGA,EAAE,GAAG,QAAR,GAAmBM,SAD3B;AAEC,IAAA,SAAS,EAAC,+BAFX;AAGC,IAAA,uBAAuB,EAAGP;AAH3B,KAKGI,IALH,CAlCF,CADD;AA6CA,CAtDM;AAwDP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMI,WAAW,GAAG,SAI4C;AAAA,MAJ1C;AAC5BH,IAAAA,SAD4B;AAE5BC,IAAAA,QAF4B;AAG5B,OAAGG;AAHyB,GAI0C;AACtE,SACC,cAAC,iBAAD,eACMA,KADN;AAEC,IAAA,SAAS,EAAGjB,UAAU,CACrB,gCADqB,EAErBa,SAFqB;AAFvB,MAOGC,QAPH,CADD;AAWA,CAhBM;AAiBPP,WAAW,CAACS,WAAZ,GAA0BA,WAA1B;AAEA,eAAeT,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport type { BaseControlProps, BaseControlVisualLabelProps } from './types';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n\tStyledVisualLabel,\n} from './styles/base-control-styles';\nimport type { WordPressComponentProps } from '../ui/context';\n\n/**\n * `BaseControl` is a component used to generate labels and help text for components handling user inputs.\n *\n * @example\n * // Render a `BaseControl` for a textarea input\n * import { BaseControl } from '@wordpress/components';\n *\n * // The `id` prop is necessary to accessibly associate the label with the textarea\n * const MyBaseControl = () => (\n *   <BaseControl id=\"textarea-1\" label=\"Text\" help=\"Enter some text\" __nextHasNoMarginBottom={ true }>\n *     <textarea id=\"textarea-1\" />\n *   </BaseControl>\n * );\n */\nexport const BaseControl = ( {\n\t__nextHasNoMarginBottom = false,\n\tid,\n\tlabel,\n\thideLabelFromVision = false,\n\thelp,\n\tclassName,\n\tchildren,\n}: BaseControlProps ) => {\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName={ classnames( 'components-base-control', className ) }\n\t\t>\n\t\t\t<StyledField\n\t\t\t\tclassName=\"components-base-control__field\"\n\t\t\t\t// TODO: Official deprecation for this should start after all internal usages have been migrated\n\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t>\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id ? id + '__help' : undefined }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n};\n\n/**\n * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component.\n *\n * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled,\n * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would\n * otherwise use if the `label` prop was passed.\n *\n * @example\n * import { BaseControl } from '@wordpress/components';\n *\n * const MyBaseControl = () => (\n * \t<BaseControl help=\"This button is already accessibly labeled.\">\n * \t\t<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>\n * \t\t<Button>Select an author</Button>\n * \t</BaseControl>\n * );\n */\nexport const VisualLabel = ( {\n\tclassName,\n\tchildren,\n\t...props\n}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {\n\treturn (\n\t\t<StyledVisualLabel\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-base-control__label',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</StyledVisualLabel>\n\t);\n};\nBaseControl.VisualLabel = VisualLabel;\n\nexport default BaseControl;\n"]}

package/build-module/base-control/styles/base-control-styles.js

@@ -10,20 +10,20 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 
-import { font, COLORS } from '../../utils';
+import { baseLabelTypography, boxSizingReset, font, COLORS } from '../../utils';
 import { space } from '../../ui/utils/space';
 export const Wrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "ej5x27r4"
 } : {
   target: "ej5x27r4",
   label: "Wrapper"
-})("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlpQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtY29udHJvbC9zdHlsZXMvYmFzZS1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgZm9udCwgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0Zm9udC1zaXplOiAkeyBmb250KCAnZGVmYXVsdC5mb250U2l6ZScgKSB9O1xuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkZpZWxkID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWVsZCA9IHN0eWxlZC5kaXZgXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCB9XG5cblx0LmNvbXBvbmVudHMtcGFuZWxfX3JvdyAmIHtcblx0XHRtYXJnaW4tYm90dG9tOiBpbmhlcml0O1xuXHR9XG5gO1xuXG5jb25zdCBsYWJlbFN0eWxlcyA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQubGFiZWxgXG5cdCR7IGxhYmVsU3R5bGVzIH1cbmA7XG5cbmNvbnN0IGRlcHJlY2F0ZWRNYXJnaW5IZWxwID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogcmV2ZXJ0O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWxwID0gc3R5bGVkLnBgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAyICkgfTtcblx0bWFyZ2luLWJvdHRvbTogMDtcblx0Zm9udC1zaXplOiAkeyBmb250KCAnaGVscFRleHQuZm9udFNpemUnICkgfTtcblx0Zm9udC1zdHlsZTogbm9ybWFsO1xuXHRjb2xvcjogJHsgQ09MT1JTLm1lZGl1bUdyYXkudGV4dCB9O1xuXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5IZWxwIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWaXN1YWxMYWJlbCA9IHN0eWxlZC5zcGFuYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuIl19 */"));
+})("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";", boxSizingReset, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlpQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtY29udHJvbC9zdHlsZXMvYmFzZS1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgYmFzZUxhYmVsVHlwb2dyYXBoeSwgYm94U2l6aW5nUmVzZXQsIGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtZmFtaWx5OiAkeyBmb250KCAnZGVmYXVsdC5mb250RmFtaWx5JyApIH07XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcblxuXHQkeyBib3hTaXppbmdSZXNldCB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luRmllbGQgPSAoIHsgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gPSBmYWxzZSB9ICkgPT4ge1xuXHRyZXR1cm4gKFxuXHRcdCEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiZcblx0XHRjc3NgXG5cdFx0XHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdFx0YFxuXHQpO1xufTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEZpZWxkID0gc3R5bGVkLmRpdmBcblx0JHsgZGVwcmVjYXRlZE1hcmdpbkZpZWxkIH1cblxuXHQuY29tcG9uZW50cy1wYW5lbF9fcm93ICYge1xuXHRcdG1hcmdpbi1ib3R0b206IGluaGVyaXQ7XG5cdH1cbmA7XG5cbmNvbnN0IGxhYmVsU3R5bGVzID0gY3NzYFxuXHQkeyBiYXNlTGFiZWxUeXBvZ3JhcGh5IH07XG5cblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdC8qKlxuXHQgKiBSZW1vdmVzIENocm9tZS9TYWZhcmkvRmlyZWZveCB1c2VyIGFnZW50IHN0eWxlc2hlZXQgcGFkZGluZyBmcm9tXG5cdCAqIFN0eWxlZExhYmVsIHdoZW4gaXQgaXMgcmVuZGVyZWQgYXMgYSBsZWdlbmQuXG5cdCAqL1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luSGVscCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206IHJldmVydDtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVscCA9IHN0eWxlZC5wYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggMiApIH07XG5cdG1hcmdpbi1ib3R0b206IDA7XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2hlbHBUZXh0LmZvbnRTaXplJyApIH07XG5cdGZvbnQtc3R5bGU6IG5vcm1hbDtcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5IZWxwIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWaXN1YWxMYWJlbCA9IHN0eWxlZC5zcGFuYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuIl19 */"));
 
 const deprecatedMarginField = _ref2 => {
   let {
     __nextHasNoMarginBottom = false
   } = _ref2;
-  return !__nextHasNoMarginBottom && /*#__PURE__*/css("margin-bottom:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:deprecatedMarginField;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CSyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtY29udHJvbC9zdHlsZXMvYmFzZS1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgZm9udCwgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0Zm9udC1zaXplOiAkeyBmb250KCAnZGVmYXVsdC5mb250U2l6ZScgKSB9O1xuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkZpZWxkID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWVsZCA9IHN0eWxlZC5kaXZgXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCB9XG5cblx0LmNvbXBvbmVudHMtcGFuZWxfX3JvdyAmIHtcblx0XHRtYXJnaW4tYm90dG9tOiBpbmhlcml0O1xuXHR9XG5gO1xuXG5jb25zdCBsYWJlbFN0eWxlcyA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQubGFiZWxgXG5cdCR7IGxhYmVsU3R5bGVzIH1cbmA7XG5cbmNvbnN0IGRlcHJlY2F0ZWRNYXJnaW5IZWxwID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogcmV2ZXJ0O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWxwID0gc3R5bGVkLnBgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAyICkgfTtcblx0bWFyZ2luLWJvdHRvbTogMDtcblx0Zm9udC1zaXplOiAkeyBmb250KCAnaGVscFRleHQuZm9udFNpemUnICkgfTtcblx0Zm9udC1zdHlsZTogbm9ybWFsO1xuXHRjb2xvcjogJHsgQ09MT1JTLm1lZGl1bUdyYXkudGV4dCB9O1xuXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5IZWxwIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWaXN1YWxMYWJlbCA9IHN0eWxlZC5zcGFuYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuIl19 */");
+  return !__nextHasNoMarginBottom && /*#__PURE__*/css("margin-bottom:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:deprecatedMarginField;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCSyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtY29udHJvbC9zdHlsZXMvYmFzZS1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgYmFzZUxhYmVsVHlwb2dyYXBoeSwgYm94U2l6aW5nUmVzZXQsIGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtZmFtaWx5OiAkeyBmb250KCAnZGVmYXVsdC5mb250RmFtaWx5JyApIH07XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcblxuXHQkeyBib3hTaXppbmdSZXNldCB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luRmllbGQgPSAoIHsgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gPSBmYWxzZSB9ICkgPT4ge1xuXHRyZXR1cm4gKFxuXHRcdCEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiZcblx0XHRjc3NgXG5cdFx0XHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdFx0YFxuXHQpO1xufTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEZpZWxkID0gc3R5bGVkLmRpdmBcblx0JHsgZGVwcmVjYXRlZE1hcmdpbkZpZWxkIH1cblxuXHQuY29tcG9uZW50cy1wYW5lbF9fcm93ICYge1xuXHRcdG1hcmdpbi1ib3R0b206IGluaGVyaXQ7XG5cdH1cbmA7XG5cbmNvbnN0IGxhYmVsU3R5bGVzID0gY3NzYFxuXHQkeyBiYXNlTGFiZWxUeXBvZ3JhcGh5IH07XG5cblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdC8qKlxuXHQgKiBSZW1vdmVzIENocm9tZS9TYWZhcmkvRmlyZWZveCB1c2VyIGFnZW50IHN0eWxlc2hlZXQgcGFkZGluZyBmcm9tXG5cdCAqIFN0eWxlZExhYmVsIHdoZW4gaXQgaXMgcmVuZGVyZWQgYXMgYSBsZWdlbmQuXG5cdCAqL1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luSGVscCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206IHJldmVydDtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVscCA9IHN0eWxlZC5wYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggMiApIH07XG5cdG1hcmdpbi1ib3R0b206IDA7XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2hlbHBUZXh0LmZvbnRTaXplJyApIH07XG5cdGZvbnQtc3R5bGU6IG5vcm1hbDtcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5IZWxwIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWaXN1YWxMYWJlbCA9IHN0eWxlZC5zcGFuYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuIl19 */");
 };
 
 export const StyledField = _styled("div", process.env.NODE_ENV === "production" ? {
@@ -31,14 +31,14 @@ export const StyledField = _styled("div", process.env.NODE_ENV === "production"
 } : {
   target: "ej5x27r3",
   label: "StyledField"
-})(deprecatedMarginField, " .components-panel__row &{margin-bottom:inherit;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCcUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtZmFtaWx5OiAkeyBmb250KCAnZGVmYXVsdC5mb250RmFtaWx5JyApIH07XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcbmA7XG5cbmNvbnN0IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRmllbGQgPSBzdHlsZWQuZGl2YFxuXHQkeyBkZXByZWNhdGVkTWFyZ2luRmllbGQgfVxuXG5cdC5jb21wb25lbnRzLXBhbmVsX19yb3cgJiB7XG5cdFx0bWFyZ2luLWJvdHRvbTogaW5oZXJpdDtcblx0fVxuYDtcblxuY29uc3QgbGFiZWxTdHlsZXMgPSBjc3NgXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luSGVscCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206IHJldmVydDtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVscCA9IHN0eWxlZC5wYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggMiApIH07XG5cdG1hcmdpbi1ib3R0b206IDA7XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2hlbHBUZXh0LmZvbnRTaXplJyApIH07XG5cdGZvbnQtc3R5bGU6IG5vcm1hbDtcblx0Y29sb3I6ICR7IENPTE9SUy5tZWRpdW1HcmF5LnRleHQgfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */"));
-const labelStyles = /*#__PURE__*/css("display:inline-block;margin-bottom:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:labelStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDdUIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtZmFtaWx5OiAkeyBmb250KCAnZGVmYXVsdC5mb250RmFtaWx5JyApIH07XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcbmA7XG5cbmNvbnN0IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRmllbGQgPSBzdHlsZWQuZGl2YFxuXHQkeyBkZXByZWNhdGVkTWFyZ2luRmllbGQgfVxuXG5cdC5jb21wb25lbnRzLXBhbmVsX19yb3cgJiB7XG5cdFx0bWFyZ2luLWJvdHRvbTogaW5oZXJpdDtcblx0fVxuYDtcblxuY29uc3QgbGFiZWxTdHlsZXMgPSBjc3NgXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luSGVscCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206IHJldmVydDtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVscCA9IHN0eWxlZC5wYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggMiApIH07XG5cdG1hcmdpbi1ib3R0b206IDA7XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2hlbHBUZXh0LmZvbnRTaXplJyApIH07XG5cdGZvbnQtc3R5bGU6IG5vcm1hbDtcblx0Y29sb3I6ICR7IENPTE9SUy5tZWRpdW1HcmF5LnRleHQgfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */");
+})(deprecatedMarginField, " .components-panel__row &{margin-bottom:inherit;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCcUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGJhc2VMYWJlbFR5cG9ncmFwaHksIGJveFNpemluZ1Jlc2V0LCBmb250LCBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRmb250LWZhbWlseTogJHsgZm9udCggJ2RlZmF1bHQuZm9udEZhbWlseScgKSB9O1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRTaXplJyApIH07XG5cblx0JHsgYm94U2l6aW5nUmVzZXQgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkZpZWxkID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWVsZCA9IHN0eWxlZC5kaXZgXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCB9XG5cblx0LmNvbXBvbmVudHMtcGFuZWxfX3JvdyAmIHtcblx0XHRtYXJnaW4tYm90dG9tOiBpbmhlcml0O1xuXHR9XG5gO1xuXG5jb25zdCBsYWJlbFN0eWxlcyA9IGNzc2Bcblx0JHsgYmFzZUxhYmVsVHlwb2dyYXBoeSB9O1xuXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHQvKipcblx0ICogUmVtb3ZlcyBDaHJvbWUvU2FmYXJpL0ZpcmVmb3ggdXNlciBhZ2VudCBzdHlsZXNoZWV0IHBhZGRpbmcgZnJvbVxuXHQgKiBTdHlsZWRMYWJlbCB3aGVuIGl0IGlzIHJlbmRlcmVkIGFzIGEgbGVnZW5kLlxuXHQgKi9cblx0cGFkZGluZzogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZC5sYWJlbGBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkhlbHAgPSAoIHsgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gPSBmYWxzZSB9ICkgPT4ge1xuXHRyZXR1cm4gKFxuXHRcdCEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiZcblx0XHRjc3NgXG5cdFx0XHRtYXJnaW4tYm90dG9tOiByZXZlcnQ7XG5cdFx0YFxuXHQpO1xufTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlbHAgPSBzdHlsZWQucGBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIDIgKSB9O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdoZWxwVGV4dC5mb250U2l6ZScgKSB9O1xuXHRmb250LXN0eWxlOiBub3JtYWw7XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */"));
+const labelStyles = /*#__PURE__*/css(baseLabelTypography, ";display:inline-block;margin-bottom:", space(2), ";padding:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:labelStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DdUIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGJhc2VMYWJlbFR5cG9ncmFwaHksIGJveFNpemluZ1Jlc2V0LCBmb250LCBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRmb250LWZhbWlseTogJHsgZm9udCggJ2RlZmF1bHQuZm9udEZhbWlseScgKSB9O1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRTaXplJyApIH07XG5cblx0JHsgYm94U2l6aW5nUmVzZXQgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkZpZWxkID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWVsZCA9IHN0eWxlZC5kaXZgXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCB9XG5cblx0LmNvbXBvbmVudHMtcGFuZWxfX3JvdyAmIHtcblx0XHRtYXJnaW4tYm90dG9tOiBpbmhlcml0O1xuXHR9XG5gO1xuXG5jb25zdCBsYWJlbFN0eWxlcyA9IGNzc2Bcblx0JHsgYmFzZUxhYmVsVHlwb2dyYXBoeSB9O1xuXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHQvKipcblx0ICogUmVtb3ZlcyBDaHJvbWUvU2FmYXJpL0ZpcmVmb3ggdXNlciBhZ2VudCBzdHlsZXNoZWV0IHBhZGRpbmcgZnJvbVxuXHQgKiBTdHlsZWRMYWJlbCB3aGVuIGl0IGlzIHJlbmRlcmVkIGFzIGEgbGVnZW5kLlxuXHQgKi9cblx0cGFkZGluZzogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZC5sYWJlbGBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkhlbHAgPSAoIHsgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gPSBmYWxzZSB9ICkgPT4ge1xuXHRyZXR1cm4gKFxuXHRcdCEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiZcblx0XHRjc3NgXG5cdFx0XHRtYXJnaW4tYm90dG9tOiByZXZlcnQ7XG5cdFx0YFxuXHQpO1xufTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlbHAgPSBzdHlsZWQucGBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIDIgKSB9O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdoZWxwVGV4dC5mb250U2l6ZScgKSB9O1xuXHRmb250LXN0eWxlOiBub3JtYWw7XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */");
 export const StyledLabel = _styled("label", process.env.NODE_ENV === "production" ? {
   target: "ej5x27r2"
 } : {
   target: "ej5x27r2",
   label: "StyledLabel"
-})(labelStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVDdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtZmFtaWx5OiAkeyBmb250KCAnZGVmYXVsdC5mb250RmFtaWx5JyApIH07XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcbmA7XG5cbmNvbnN0IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRmllbGQgPSBzdHlsZWQuZGl2YFxuXHQkeyBkZXByZWNhdGVkTWFyZ2luRmllbGQgfVxuXG5cdC5jb21wb25lbnRzLXBhbmVsX19yb3cgJiB7XG5cdFx0bWFyZ2luLWJvdHRvbTogaW5oZXJpdDtcblx0fVxuYDtcblxuY29uc3QgbGFiZWxTdHlsZXMgPSBjc3NgXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luSGVscCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206IHJldmVydDtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVscCA9IHN0eWxlZC5wYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggMiApIH07XG5cdG1hcmdpbi1ib3R0b206IDA7XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2hlbHBUZXh0LmZvbnRTaXplJyApIH07XG5cdGZvbnQtc3R5bGU6IG5vcm1hbDtcblx0Y29sb3I6ICR7IENPTE9SUy5tZWRpdW1HcmF5LnRleHQgfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */"));
+})(labelStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdEdUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGJhc2VMYWJlbFR5cG9ncmFwaHksIGJveFNpemluZ1Jlc2V0LCBmb250LCBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRmb250LWZhbWlseTogJHsgZm9udCggJ2RlZmF1bHQuZm9udEZhbWlseScgKSB9O1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRTaXplJyApIH07XG5cblx0JHsgYm94U2l6aW5nUmVzZXQgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkZpZWxkID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWVsZCA9IHN0eWxlZC5kaXZgXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCB9XG5cblx0LmNvbXBvbmVudHMtcGFuZWxfX3JvdyAmIHtcblx0XHRtYXJnaW4tYm90dG9tOiBpbmhlcml0O1xuXHR9XG5gO1xuXG5jb25zdCBsYWJlbFN0eWxlcyA9IGNzc2Bcblx0JHsgYmFzZUxhYmVsVHlwb2dyYXBoeSB9O1xuXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHQvKipcblx0ICogUmVtb3ZlcyBDaHJvbWUvU2FmYXJpL0ZpcmVmb3ggdXNlciBhZ2VudCBzdHlsZXNoZWV0IHBhZGRpbmcgZnJvbVxuXHQgKiBTdHlsZWRMYWJlbCB3aGVuIGl0IGlzIHJlbmRlcmVkIGFzIGEgbGVnZW5kLlxuXHQgKi9cblx0cGFkZGluZzogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZC5sYWJlbGBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkhlbHAgPSAoIHsgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gPSBmYWxzZSB9ICkgPT4ge1xuXHRyZXR1cm4gKFxuXHRcdCEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiZcblx0XHRjc3NgXG5cdFx0XHRtYXJnaW4tYm90dG9tOiByZXZlcnQ7XG5cdFx0YFxuXHQpO1xufTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlbHAgPSBzdHlsZWQucGBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIDIgKSB9O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdoZWxwVGV4dC5mb250U2l6ZScgKSB9O1xuXHRmb250LXN0eWxlOiBub3JtYWw7XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */"));
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "11yad0w",
@@ -46,7 +46,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1xen9ob-deprecatedMarginHelp",
   styles: "margin-bottom:revert;label:deprecatedMarginHelp;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThDSyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtY29udHJvbC9zdHlsZXMvYmFzZS1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgZm9udCwgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0Zm9udC1zaXplOiAkeyBmb250KCAnZGVmYXVsdC5mb250U2l6ZScgKSB9O1xuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkZpZWxkID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWVsZCA9IHN0eWxlZC5kaXZgXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCB9XG5cblx0LmNvbXBvbmVudHMtcGFuZWxfX3JvdyAmIHtcblx0XHRtYXJnaW4tYm90dG9tOiBpbmhlcml0O1xuXHR9XG5gO1xuXG5jb25zdCBsYWJlbFN0eWxlcyA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQubGFiZWxgXG5cdCR7IGxhYmVsU3R5bGVzIH1cbmA7XG5cbmNvbnN0IGRlcHJlY2F0ZWRNYXJnaW5IZWxwID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogcmV2ZXJ0O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRIZWxwID0gc3R5bGVkLnBgXG5cdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAyICkgfTtcblx0bWFyZ2luLWJvdHRvbTogMDtcblx0Zm9udC1zaXplOiAkeyBmb250KCAnaGVscFRleHQuZm9udFNpemUnICkgfTtcblx0Zm9udC1zdHlsZTogbm9ybWFsO1xuXHRjb2xvcjogJHsgQ09MT1JTLm1lZGl1bUdyYXkudGV4dCB9O1xuXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5IZWxwIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWaXN1YWxMYWJlbCA9IHN0eWxlZC5zcGFuYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVESyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtY29udHJvbC9zdHlsZXMvYmFzZS1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgYmFzZUxhYmVsVHlwb2dyYXBoeSwgYm94U2l6aW5nUmVzZXQsIGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtZmFtaWx5OiAkeyBmb250KCAnZGVmYXVsdC5mb250RmFtaWx5JyApIH07XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcblxuXHQkeyBib3hTaXppbmdSZXNldCB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luRmllbGQgPSAoIHsgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gPSBmYWxzZSB9ICkgPT4ge1xuXHRyZXR1cm4gKFxuXHRcdCEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiZcblx0XHRjc3NgXG5cdFx0XHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdFx0YFxuXHQpO1xufTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEZpZWxkID0gc3R5bGVkLmRpdmBcblx0JHsgZGVwcmVjYXRlZE1hcmdpbkZpZWxkIH1cblxuXHQuY29tcG9uZW50cy1wYW5lbF9fcm93ICYge1xuXHRcdG1hcmdpbi1ib3R0b206IGluaGVyaXQ7XG5cdH1cbmA7XG5cbmNvbnN0IGxhYmVsU3R5bGVzID0gY3NzYFxuXHQkeyBiYXNlTGFiZWxUeXBvZ3JhcGh5IH07XG5cblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdC8qKlxuXHQgKiBSZW1vdmVzIENocm9tZS9TYWZhcmkvRmlyZWZveCB1c2VyIGFnZW50IHN0eWxlc2hlZXQgcGFkZGluZyBmcm9tXG5cdCAqIFN0eWxlZExhYmVsIHdoZW4gaXQgaXMgcmVuZGVyZWQgYXMgYSBsZWdlbmQuXG5cdCAqL1xuXHRwYWRkaW5nOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luSGVscCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206IHJldmVydDtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVscCA9IHN0eWxlZC5wYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggMiApIH07XG5cdG1hcmdpbi1ib3R0b206IDA7XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2hlbHBUZXh0LmZvbnRTaXplJyApIH07XG5cdGZvbnQtc3R5bGU6IG5vcm1hbDtcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5IZWxwIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRWaXN1YWxMYWJlbCA9IHN0eWxlZC5zcGFuYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -62,11 +62,11 @@ export const StyledHelp = _styled("p", process.env.NODE_ENV === "production" ? {
 } : {
   target: "ej5x27r1",
   label: "StyledHelp"
-})("margin-top:", space(2), ";margin-bottom:0;font-size:", font('helpText.fontSize'), ";font-style:normal;color:", COLORS.mediumGray.text, ";", deprecatedMarginHelp, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9Ea0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtZmFtaWx5OiAkeyBmb250KCAnZGVmYXVsdC5mb250RmFtaWx5JyApIH07XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcbmA7XG5cbmNvbnN0IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRmllbGQgPSBzdHlsZWQuZGl2YFxuXHQkeyBkZXByZWNhdGVkTWFyZ2luRmllbGQgfVxuXG5cdC5jb21wb25lbnRzLXBhbmVsX19yb3cgJiB7XG5cdFx0bWFyZ2luLWJvdHRvbTogaW5oZXJpdDtcblx0fVxuYDtcblxuY29uc3QgbGFiZWxTdHlsZXMgPSBjc3NgXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luSGVscCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206IHJldmVydDtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVscCA9IHN0eWxlZC5wYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggMiApIH07XG5cdG1hcmdpbi1ib3R0b206IDA7XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2hlbHBUZXh0LmZvbnRTaXplJyApIH07XG5cdGZvbnQtc3R5bGU6IG5vcm1hbDtcblx0Y29sb3I6ICR7IENPTE9SUy5tZWRpdW1HcmF5LnRleHQgfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */"));
+})("margin-top:", space(2), ";margin-bottom:0;font-size:", font('helpText.fontSize'), ";font-style:normal;color:", COLORS.gray[700], ";", deprecatedMarginHelp, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZEa0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGJhc2VMYWJlbFR5cG9ncmFwaHksIGJveFNpemluZ1Jlc2V0LCBmb250LCBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRmb250LWZhbWlseTogJHsgZm9udCggJ2RlZmF1bHQuZm9udEZhbWlseScgKSB9O1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRTaXplJyApIH07XG5cblx0JHsgYm94U2l6aW5nUmVzZXQgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkZpZWxkID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWVsZCA9IHN0eWxlZC5kaXZgXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCB9XG5cblx0LmNvbXBvbmVudHMtcGFuZWxfX3JvdyAmIHtcblx0XHRtYXJnaW4tYm90dG9tOiBpbmhlcml0O1xuXHR9XG5gO1xuXG5jb25zdCBsYWJlbFN0eWxlcyA9IGNzc2Bcblx0JHsgYmFzZUxhYmVsVHlwb2dyYXBoeSB9O1xuXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHQvKipcblx0ICogUmVtb3ZlcyBDaHJvbWUvU2FmYXJpL0ZpcmVmb3ggdXNlciBhZ2VudCBzdHlsZXNoZWV0IHBhZGRpbmcgZnJvbVxuXHQgKiBTdHlsZWRMYWJlbCB3aGVuIGl0IGlzIHJlbmRlcmVkIGFzIGEgbGVnZW5kLlxuXHQgKi9cblx0cGFkZGluZzogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZC5sYWJlbGBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkhlbHAgPSAoIHsgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gPSBmYWxzZSB9ICkgPT4ge1xuXHRyZXR1cm4gKFxuXHRcdCEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiZcblx0XHRjc3NgXG5cdFx0XHRtYXJnaW4tYm90dG9tOiByZXZlcnQ7XG5cdFx0YFxuXHQpO1xufTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlbHAgPSBzdHlsZWQucGBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIDIgKSB9O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdoZWxwVGV4dC5mb250U2l6ZScgKSB9O1xuXHRmb250LXN0eWxlOiBub3JtYWw7XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */"));
 export const StyledVisualLabel = _styled("span", process.env.NODE_ENV === "production" ? {
   target: "ej5x27r0"
 } : {
   target: "ej5x27r0",
   label: "StyledVisualLabel"
-})(labelStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThENEMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvbnQsIENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtZmFtaWx5OiAkeyBmb250KCAnZGVmYXVsdC5mb250RmFtaWx5JyApIH07XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcbmA7XG5cbmNvbnN0IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRmllbGQgPSBzdHlsZWQuZGl2YFxuXHQkeyBkZXByZWNhdGVkTWFyZ2luRmllbGQgfVxuXG5cdC5jb21wb25lbnRzLXBhbmVsX19yb3cgJiB7XG5cdFx0bWFyZ2luLWJvdHRvbTogaW5oZXJpdDtcblx0fVxuYDtcblxuY29uc3QgbGFiZWxTdHlsZXMgPSBjc3NgXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZExhYmVsID0gc3R5bGVkLmxhYmVsYFxuXHQkeyBsYWJlbFN0eWxlcyB9XG5gO1xuXG5jb25zdCBkZXByZWNhdGVkTWFyZ2luSGVscCA9ICggeyBfX25leHRIYXNOb01hcmdpbkJvdHRvbSA9IGZhbHNlIH0gKSA9PiB7XG5cdHJldHVybiAoXG5cdFx0ISBfX25leHRIYXNOb01hcmdpbkJvdHRvbSAmJlxuXHRcdGNzc2Bcblx0XHRcdG1hcmdpbi1ib3R0b206IHJldmVydDtcblx0XHRgXG5cdCk7XG59O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSGVscCA9IHN0eWxlZC5wYFxuXHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggMiApIH07XG5cdG1hcmdpbi1ib3R0b206IDA7XG5cdGZvbnQtc2l6ZTogJHsgZm9udCggJ2hlbHBUZXh0LmZvbnRTaXplJyApIH07XG5cdGZvbnQtc3R5bGU6IG5vcm1hbDtcblx0Y29sb3I6ICR7IENPTE9SUy5tZWRpdW1HcmF5LnRleHQgfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */"));
+})(labelStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1jb250cm9sL3N0eWxlcy9iYXNlLWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVFNEMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9iYXNlLWNvbnRyb2wvc3R5bGVzL2Jhc2UtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGJhc2VMYWJlbFR5cG9ncmFwaHksIGJveFNpemluZ1Jlc2V0LCBmb250LCBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRmb250LWZhbWlseTogJHsgZm9udCggJ2RlZmF1bHQuZm9udEZhbWlseScgKSB9O1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRTaXplJyApIH07XG5cblx0JHsgYm94U2l6aW5nUmVzZXQgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkZpZWxkID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tID0gZmFsc2UgfSApID0+IHtcblx0cmV0dXJuIChcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmXG5cdFx0Y3NzYFxuXHRcdFx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdGBcblx0KTtcbn07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGaWVsZCA9IHN0eWxlZC5kaXZgXG5cdCR7IGRlcHJlY2F0ZWRNYXJnaW5GaWVsZCB9XG5cblx0LmNvbXBvbmVudHMtcGFuZWxfX3JvdyAmIHtcblx0XHRtYXJnaW4tYm90dG9tOiBpbmhlcml0O1xuXHR9XG5gO1xuXG5jb25zdCBsYWJlbFN0eWxlcyA9IGNzc2Bcblx0JHsgYmFzZUxhYmVsVHlwb2dyYXBoeSB9O1xuXG5cdGRpc3BsYXk6IGlubGluZS1ibG9jaztcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHQvKipcblx0ICogUmVtb3ZlcyBDaHJvbWUvU2FmYXJpL0ZpcmVmb3ggdXNlciBhZ2VudCBzdHlsZXNoZWV0IHBhZGRpbmcgZnJvbVxuXHQgKiBTdHlsZWRMYWJlbCB3aGVuIGl0IGlzIHJlbmRlcmVkIGFzIGEgbGVnZW5kLlxuXHQgKi9cblx0cGFkZGluZzogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMYWJlbCA9IHN0eWxlZC5sYWJlbGBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcblxuY29uc3QgZGVwcmVjYXRlZE1hcmdpbkhlbHAgPSAoIHsgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gPSBmYWxzZSB9ICkgPT4ge1xuXHRyZXR1cm4gKFxuXHRcdCEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gJiZcblx0XHRjc3NgXG5cdFx0XHRtYXJnaW4tYm90dG9tOiByZXZlcnQ7XG5cdFx0YFxuXHQpO1xufTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEhlbHAgPSBzdHlsZWQucGBcblx0bWFyZ2luLXRvcDogJHsgc3BhY2UoIDIgKSB9O1xuXHRtYXJnaW4tYm90dG9tOiAwO1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdoZWxwVGV4dC5mb250U2l6ZScgKSB9O1xuXHRmb250LXN0eWxlOiBub3JtYWw7XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblxuXHQkeyBkZXByZWNhdGVkTWFyZ2luSGVscCB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVmlzdWFsTGFiZWwgPSBzdHlsZWQuc3BhbmBcblx0JHsgbGFiZWxTdHlsZXMgfVxuYDtcbiJdfQ== */"));
 //# sourceMappingURL=base-control-styles.js.map

package/build-module/base-control/styles/base-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/base-control/styles/base-control-styles.ts"],"names":["css","font","COLORS","space","Wrapper","deprecatedMarginField","__nextHasNoMarginBottom","StyledField","labelStyles","StyledLabel","deprecatedMarginHelp","StyledHelp","mediumGray","text","StyledVisualLabel"],"mappings":";;;;AAAA;AACA;AACA;AAEA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,MAAf,QAA6B,aAA7B;AACA,SAASC,KAAT,QAAsB,sBAAtB;AAEA,OAAO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mBACHH,IAAI,CAAE,oBAAF,CADD,iBAELA,IAAI,CAAE,kBAAF,CAFC,ysEAAb;;AAKP,MAAMI,qBAAqB,GAAG,SAA2C;AAAA,MAAzC;AAAEC,IAAAA,uBAAuB,GAAG;AAA5B,GAAyC;AACxE,SACC,CAAEA,uBAAF,iBACAN,GADA,mBAEmBG,KAAK,CAAE,CAAF,CAFxB,uxEADD;AAMA,CAPD;;AASA,OAAO,MAAMI,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,GACpBF,qBADoB,6vEAAjB;AAQP,MAAMG,WAAW,gBAAGR,GAAH,wCAEEG,KAAK,CAAE,CAAF,CAFP,ixEAAjB;AAKA,OAAO,MAAMM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,GACpBD,WADoB,6sEAAjB;;;;;;;;;;;;AAIP,MAAME,oBAAoB,GAAG,SAA2C;AAAA,MAAzC;AAAEJ,IAAAA,uBAAuB,GAAG;AAA5B,GAAyC;AACvE,SACC,CAAEA,uBAAF,QADD;AAMA,CAPD;;AASA,OAAO,MAAMK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,kBACPR,KAAK,CAAE,CAAF,CADE,iCAGRF,IAAI,CAAE,mBAAF,CAHI,+BAKZC,MAAM,CAACU,UAAP,CAAkBC,IALN,OAOnBH,oBAPmB,6sEAAhB;AAUP,OAAO,MAAMI,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,GAC1BN,WAD0B,6sEAAvB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { font, COLORS } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nexport const Wrapper = styled.div`\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tfont-size: ${ font( 'default.fontSize' ) };\n`;\n\nconst deprecatedMarginField = ( { __nextHasNoMarginBottom = false } ) => {\n\treturn (\n\t\t! __nextHasNoMarginBottom &&\n\t\tcss`\n\t\t\tmargin-bottom: ${ space( 2 ) };\n\t\t`\n\t);\n};\n\nexport const StyledField = styled.div`\n\t${ deprecatedMarginField }\n\n\t.components-panel__row & {\n\t\tmargin-bottom: inherit;\n\t}\n`;\n\nconst labelStyles = css`\n\tdisplay: inline-block;\n\tmargin-bottom: ${ space( 2 ) };\n`;\n\nexport const StyledLabel = styled.label`\n\t${ labelStyles }\n`;\n\nconst deprecatedMarginHelp = ( { __nextHasNoMarginBottom = false } ) => {\n\treturn (\n\t\t! __nextHasNoMarginBottom &&\n\t\tcss`\n\t\t\tmargin-bottom: revert;\n\t\t`\n\t);\n};\n\nexport const StyledHelp = styled.p`\n\tmargin-top: ${ space( 2 ) };\n\tmargin-bottom: 0;\n\tfont-size: ${ font( 'helpText.fontSize' ) };\n\tfont-style: normal;\n\tcolor: ${ COLORS.mediumGray.text };\n\n\t${ deprecatedMarginHelp }\n`;\n\nexport const StyledVisualLabel = styled.span`\n\t${ labelStyles }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/base-control/styles/base-control-styles.ts"],"names":["css","baseLabelTypography","boxSizingReset","font","COLORS","space","Wrapper","deprecatedMarginField","__nextHasNoMarginBottom","StyledField","labelStyles","StyledLabel","deprecatedMarginHelp","StyledHelp","gray","StyledVisualLabel"],"mappings":";;;;AAAA;AACA;AACA;AAEA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,mBAAT,EAA8BC,cAA9B,EAA8CC,IAA9C,EAAoDC,MAApD,QAAkE,aAAlE;AACA,SAASC,KAAT,QAAsB,sBAAtB;AAEA,OAAO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mBACHH,IAAI,CAAE,oBAAF,CADD,iBAELA,IAAI,CAAE,kBAAF,CAFC,OAIhBD,cAJgB,ygFAAb;;AAOP,MAAMK,qBAAqB,GAAG,SAA2C;AAAA,MAAzC;AAAEC,IAAAA,uBAAuB,GAAG;AAA5B,GAAyC;AACxE,SACC,CAAEA,uBAAF,iBACAR,GADA,mBAEmBK,KAAK,CAAE,CAAF,CAFxB,ulFADD;AAMA,CAPD;;AASA,OAAO,MAAMI,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,GACpBF,qBADoB,6jFAAjB;AAQP,MAAMG,WAAW,gBAAGV,GAAH,CACbC,mBADa,0CAIEI,KAAK,CAAE,CAAF,CAJP,2lFAAjB;AAYA,OAAO,MAAMM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,GACpBD,WADoB,6gFAAjB;;;;;;;;;;;;AAIP,MAAME,oBAAoB,GAAG,SAA2C;AAAA,MAAzC;AAAEJ,IAAAA,uBAAuB,GAAG;AAA5B,GAAyC;AACvE,SACC,CAAEA,uBAAF,QADD;AAMA,CAPD;;AASA,OAAO,MAAMK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,kBACPR,KAAK,CAAE,CAAF,CADE,iCAGRF,IAAI,CAAE,mBAAF,CAHI,+BAKZC,MAAM,CAACU,IAAP,CAAa,GAAb,CALY,OAOnBF,oBAPmB,6gFAAhB;AAUP,OAAO,MAAMG,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,GAC1BL,WAD0B,6gFAAvB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { baseLabelTypography, boxSizingReset, font, COLORS } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nexport const Wrapper = styled.div`\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tfont-size: ${ font( 'default.fontSize' ) };\n\n\t${ boxSizingReset }\n`;\n\nconst deprecatedMarginField = ( { __nextHasNoMarginBottom = false } ) => {\n\treturn (\n\t\t! __nextHasNoMarginBottom &&\n\t\tcss`\n\t\t\tmargin-bottom: ${ space( 2 ) };\n\t\t`\n\t);\n};\n\nexport const StyledField = styled.div`\n\t${ deprecatedMarginField }\n\n\t.components-panel__row & {\n\t\tmargin-bottom: inherit;\n\t}\n`;\n\nconst labelStyles = css`\n\t${ baseLabelTypography };\n\n\tdisplay: inline-block;\n\tmargin-bottom: ${ space( 2 ) };\n\t/**\n\t * Removes Chrome/Safari/Firefox user agent stylesheet padding from\n\t * StyledLabel when it is rendered as a legend.\n\t */\n\tpadding: 0;\n`;\n\nexport const StyledLabel = styled.label`\n\t${ labelStyles }\n`;\n\nconst deprecatedMarginHelp = ( { __nextHasNoMarginBottom = false } ) => {\n\treturn (\n\t\t! __nextHasNoMarginBottom &&\n\t\tcss`\n\t\t\tmargin-bottom: revert;\n\t\t`\n\t);\n};\n\nexport const StyledHelp = styled.p`\n\tmargin-top: ${ space( 2 ) };\n\tmargin-bottom: 0;\n\tfont-size: ${ font( 'helpText.fontSize' ) };\n\tfont-style: normal;\n\tcolor: ${ COLORS.gray[ 700 ] };\n\n\t${ deprecatedMarginHelp }\n`;\n\nexport const StyledVisualLabel = styled.span`\n\t${ labelStyles }\n`;\n"]}

package/build-module/base-field/styles.js

@@ -8,11 +8,11 @@ import { css } from '@emotion/react';
 
 import { CONFIG, COLORS, reduceMotion } from '../utils';
 import { safariOnly } from '../utils/browsers';
-export const BaseField = /*#__PURE__*/css("background:", CONFIG.controlBackgroundColor, ";border-radius:", CONFIG.controlBorderRadius, ";border:1px solid;border-color:", CONFIG.controlBorderColor, ";box-shadow:", CONFIG.controlBoxShadow, ";display:flex;flex:1;font-size:", CONFIG.fontSize, ";outline:none;padding:0 8px;position:relative;transition:border-color ", CONFIG.transitionDurationFastest, " ease;", reduceMotion('transition'), " width:100%;&[disabled]{opacity:0.6;}&:hover{border-color:", CONFIG.controlBorderColorHover, ";}&:focus,&[data-focused='true']{border-color:", COLORS.admin.theme, ";box-shadow:", CONFIG.controlBoxShadowFocus, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:BaseField;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVzRCIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBzYWZhcmlPbmx5IH0gZnJvbSAnLi4vdXRpbHMvYnJvd3NlcnMnO1xuXG5leHBvcnQgY29uc3QgQmFzZUZpZWxkID0gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29udHJvbEJhY2tncm91bmRDb2xvciB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRib3JkZXI6IDFweCBzb2xpZDtcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbEJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93IH07XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZsZXg6IDE7XG5cdGZvbnQtc2l6ZTogJHsgQ09ORklHLmZvbnRTaXplIH07XG5cdG91dGxpbmU6IG5vbmU7XG5cdHBhZGRpbmc6IDAgOHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR3aWR0aDogMTAwJTtcblxuXHQmW2Rpc2FibGVkXSB7XG5cdFx0b3BhY2l0eTogMC42O1xuXHR9XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbEJvcmRlckNvbG9ySG92ZXIgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLmFkbWluLnRoZW1lIH07XG5cdFx0Ym94LXNoYWRvdzogJHsgQ09ORklHLmNvbnRyb2xCb3hTaGFkb3dGb2N1cyB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3VidGxlID0gY3NzYFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSxcblx0Jjpmb2N1cyxcblx0JltkYXRhLWZvY3VzZWQ9J3RydWUnXSB7XG5cdFx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yID0gY3NzYFxuXHRib3JkZXItY29sb3I6ICR7IENPTkZJRy5jb250cm9sRGVzdHJ1Y3RpdmVCb3JkZXJDb2xvciB9O1xuXG5cdCY6aG92ZXIsXG5cdCY6YWN0aXZlIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTkZJRy5jb250cm9sRGVzdHJ1Y3RpdmVCb3JkZXJDb2xvciB9O1xuXHR9XG5cblx0Jjpmb2N1cyxcblx0JltkYXRhLWZvY3VzZWQ9J3RydWUnXSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0XHRib3gtc2hhZG93OiAwIDAgMCwgMC41cHgsICR7IENPTkZJRy5jb250cm9sRGVzdHJ1Y3RpdmVCb3JkZXJDb2xvciB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgZXJyb3JGb2N1cyA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTkZJRy5jb250cm9sRGVzdHJ1Y3RpdmVCb3JkZXJDb2xvciB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgaW5saW5lID0gY3NzYFxuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0dmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xuXHR3aWR0aDogYXV0bztcblxuXHQkeyBzYWZhcmlPbmx5YFxuXHRcdFx0dmVydGljYWwtYWxpZ246IG1pZGRsZTtcblx0YCB9XG5gO1xuIl19 */");
-export const subtle = /*#__PURE__*/css("background-color:transparent;&:hover,&:active,&:focus,&[data-focused='true']{background:", CONFIG.controlBackgroundColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:subtle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEN5QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtZmllbGQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc2FmYXJpT25seSB9IGZyb20gJy4uL3V0aWxzL2Jyb3dzZXJzJztcblxuZXhwb3J0IGNvbnN0IEJhc2VGaWVsZCA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvciB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvdyB9O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4OiAxO1xuXHRmb250LXNpemU6ICR7IENPTkZJRy5mb250U2l6ZSB9O1xuXHRvdXRsaW5lOiBub25lO1xuXHRwYWRkaW5nOiAwIDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0d2lkdGg6IDEwMCU7XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNjtcblx0fVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLFxuXHQmW2RhdGEtZm9jdXNlZD0ndHJ1ZSddIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy5hZG1pbi50aGVtZSB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHN1YnRsZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cblx0Jjpob3Zlcixcblx0JjphY3RpdmUsXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb250cm9sQmFja2dyb3VuZENvbG9yIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBlcnJvciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6IDAgMCAwLCAwLjVweCwgJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGlubGluZSA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcblx0d2lkdGg6IGF1dG87XG5cblx0JHsgc2FmYXJpT25seWBcblx0XHRcdHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cdGAgfVxuYDtcbiJdfQ== */");
-export const error = /*#__PURE__*/css("border-color:", CONFIG.controlDestructiveBorderColor, ";&:hover,&:active{border-color:", CONFIG.controlDestructiveBorderColor, ";}&:focus,&[data-focused='true']{border-color:", CONFIG.controlDestructiveBorderColor, ";box-shadow:0 0 0,0.5px,", CONFIG.controlDestructiveBorderColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:error;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUR3QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtZmllbGQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc2FmYXJpT25seSB9IGZyb20gJy4uL3V0aWxzL2Jyb3dzZXJzJztcblxuZXhwb3J0IGNvbnN0IEJhc2VGaWVsZCA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvciB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvdyB9O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4OiAxO1xuXHRmb250LXNpemU6ICR7IENPTkZJRy5mb250U2l6ZSB9O1xuXHRvdXRsaW5lOiBub25lO1xuXHRwYWRkaW5nOiAwIDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0d2lkdGg6IDEwMCU7XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNjtcblx0fVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLFxuXHQmW2RhdGEtZm9jdXNlZD0ndHJ1ZSddIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy5hZG1pbi50aGVtZSB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHN1YnRsZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cblx0Jjpob3Zlcixcblx0JjphY3RpdmUsXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb250cm9sQmFja2dyb3VuZENvbG9yIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBlcnJvciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6IDAgMCAwLCAwLjVweCwgJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGlubGluZSA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcblx0d2lkdGg6IGF1dG87XG5cblx0JHsgc2FmYXJpT25seWBcblx0XHRcdHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cdGAgfVxuYDtcbiJdfQ== */");
-export const errorFocus = /*#__PURE__*/css("border-color:", CONFIG.controlDestructiveBorderColor, ";box-shadow:0 0 0,0.5px,", CONFIG.controlDestructiveBorderColor, ";&:hover{border-color:", CONFIG.controlDestructiveBorderColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:errorFocus;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0U2QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtZmllbGQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc2FmYXJpT25seSB9IGZyb20gJy4uL3V0aWxzL2Jyb3dzZXJzJztcblxuZXhwb3J0IGNvbnN0IEJhc2VGaWVsZCA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvciB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvdyB9O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4OiAxO1xuXHRmb250LXNpemU6ICR7IENPTkZJRy5mb250U2l6ZSB9O1xuXHRvdXRsaW5lOiBub25lO1xuXHRwYWRkaW5nOiAwIDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0d2lkdGg6IDEwMCU7XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNjtcblx0fVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLFxuXHQmW2RhdGEtZm9jdXNlZD0ndHJ1ZSddIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy5hZG1pbi50aGVtZSB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHN1YnRsZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cblx0Jjpob3Zlcixcblx0JjphY3RpdmUsXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb250cm9sQmFja2dyb3VuZENvbG9yIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBlcnJvciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6IDAgMCAwLCAwLjVweCwgJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGlubGluZSA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcblx0d2lkdGg6IGF1dG87XG5cblx0JHsgc2FmYXJpT25seWBcblx0XHRcdHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cdGAgfVxuYDtcbiJdfQ== */");
+export const BaseField = /*#__PURE__*/css("background:", CONFIG.controlBackgroundColor, ";border-radius:", CONFIG.controlBorderRadius, ";border:1px solid;border-color:", CONFIG.controlBorderColor, ";box-shadow:", CONFIG.controlBoxShadow, ";display:flex;flex:1;font-size:", CONFIG.fontSize, ";outline:none;padding:0 8px;position:relative;transition:border-color ", CONFIG.transitionDurationFastest, " ease;", reduceMotion('transition'), " width:100%;&[disabled]{opacity:0.6;}&:hover{border-color:", CONFIG.controlBorderColorHover, ";}&:focus,&[data-focused='true']{border-color:", COLORS.ui.theme, ";box-shadow:", CONFIG.controlBoxShadowFocus, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:BaseField;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVzRCIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBzYWZhcmlPbmx5IH0gZnJvbSAnLi4vdXRpbHMvYnJvd3NlcnMnO1xuXG5leHBvcnQgY29uc3QgQmFzZUZpZWxkID0gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29udHJvbEJhY2tncm91bmRDb2xvciB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRib3JkZXI6IDFweCBzb2xpZDtcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbEJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93IH07XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZsZXg6IDE7XG5cdGZvbnQtc2l6ZTogJHsgQ09ORklHLmZvbnRTaXplIH07XG5cdG91dGxpbmU6IG5vbmU7XG5cdHBhZGRpbmc6IDAgOHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR3aWR0aDogMTAwJTtcblxuXHQmW2Rpc2FibGVkXSB7XG5cdFx0b3BhY2l0eTogMC42O1xuXHR9XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbEJvcmRlckNvbG9ySG92ZXIgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdFx0Ym94LXNoYWRvdzogJHsgQ09ORklHLmNvbnRyb2xCb3hTaGFkb3dGb2N1cyB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3Qgc3VidGxlID0gY3NzYFxuXHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSxcblx0Jjpmb2N1cyxcblx0JltkYXRhLWZvY3VzZWQ9J3RydWUnXSB7XG5cdFx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yID0gY3NzYFxuXHRib3JkZXItY29sb3I6ICR7IENPTkZJRy5jb250cm9sRGVzdHJ1Y3RpdmVCb3JkZXJDb2xvciB9O1xuXG5cdCY6aG92ZXIsXG5cdCY6YWN0aXZlIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTkZJRy5jb250cm9sRGVzdHJ1Y3RpdmVCb3JkZXJDb2xvciB9O1xuXHR9XG5cblx0Jjpmb2N1cyxcblx0JltkYXRhLWZvY3VzZWQ9J3RydWUnXSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0XHRib3gtc2hhZG93OiAwIDAgMCwgMC41cHgsICR7IENPTkZJRy5jb250cm9sRGVzdHJ1Y3RpdmVCb3JkZXJDb2xvciB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgZXJyb3JGb2N1cyA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTkZJRy5jb250cm9sRGVzdHJ1Y3RpdmVCb3JkZXJDb2xvciB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgaW5saW5lID0gY3NzYFxuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0dmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xuXHR3aWR0aDogYXV0bztcblxuXHQkeyBzYWZhcmlPbmx5YFxuXHRcdFx0dmVydGljYWwtYWxpZ246IG1pZGRsZTtcblx0YCB9XG5gO1xuIl19 */");
+export const subtle = /*#__PURE__*/css("background-color:transparent;&:hover,&:active,&:focus,&[data-focused='true']{background:", CONFIG.controlBackgroundColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:subtle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEN5QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtZmllbGQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc2FmYXJpT25seSB9IGZyb20gJy4uL3V0aWxzL2Jyb3dzZXJzJztcblxuZXhwb3J0IGNvbnN0IEJhc2VGaWVsZCA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvciB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvdyB9O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4OiAxO1xuXHRmb250LXNpemU6ICR7IENPTkZJRy5mb250U2l6ZSB9O1xuXHRvdXRsaW5lOiBub25lO1xuXHRwYWRkaW5nOiAwIDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0d2lkdGg6IDEwMCU7XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNjtcblx0fVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLFxuXHQmW2RhdGEtZm9jdXNlZD0ndHJ1ZSddIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHN1YnRsZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cblx0Jjpob3Zlcixcblx0JjphY3RpdmUsXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb250cm9sQmFja2dyb3VuZENvbG9yIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBlcnJvciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6IDAgMCAwLCAwLjVweCwgJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGlubGluZSA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcblx0d2lkdGg6IGF1dG87XG5cblx0JHsgc2FmYXJpT25seWBcblx0XHRcdHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cdGAgfVxuYDtcbiJdfQ== */");
+export const error = /*#__PURE__*/css("border-color:", CONFIG.controlDestructiveBorderColor, ";&:hover,&:active{border-color:", CONFIG.controlDestructiveBorderColor, ";}&:focus,&[data-focused='true']{border-color:", CONFIG.controlDestructiveBorderColor, ";box-shadow:0 0 0,0.5px,", CONFIG.controlDestructiveBorderColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:error;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUR3QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtZmllbGQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc2FmYXJpT25seSB9IGZyb20gJy4uL3V0aWxzL2Jyb3dzZXJzJztcblxuZXhwb3J0IGNvbnN0IEJhc2VGaWVsZCA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvciB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvdyB9O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4OiAxO1xuXHRmb250LXNpemU6ICR7IENPTkZJRy5mb250U2l6ZSB9O1xuXHRvdXRsaW5lOiBub25lO1xuXHRwYWRkaW5nOiAwIDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0d2lkdGg6IDEwMCU7XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNjtcblx0fVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLFxuXHQmW2RhdGEtZm9jdXNlZD0ndHJ1ZSddIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHN1YnRsZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cblx0Jjpob3Zlcixcblx0JjphY3RpdmUsXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb250cm9sQmFja2dyb3VuZENvbG9yIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBlcnJvciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6IDAgMCAwLCAwLjVweCwgJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGlubGluZSA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcblx0d2lkdGg6IGF1dG87XG5cblx0JHsgc2FmYXJpT25seWBcblx0XHRcdHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cdGAgfVxuYDtcbiJdfQ== */");
+export const errorFocus = /*#__PURE__*/css("border-color:", CONFIG.controlDestructiveBorderColor, ";box-shadow:0 0 0,0.5px,", CONFIG.controlDestructiveBorderColor, ";&:hover{border-color:", CONFIG.controlDestructiveBorderColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:errorFocus;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0U2QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtZmllbGQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc2FmYXJpT25seSB9IGZyb20gJy4uL3V0aWxzL2Jyb3dzZXJzJztcblxuZXhwb3J0IGNvbnN0IEJhc2VGaWVsZCA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvciB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvdyB9O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4OiAxO1xuXHRmb250LXNpemU6ICR7IENPTkZJRy5mb250U2l6ZSB9O1xuXHRvdXRsaW5lOiBub25lO1xuXHRwYWRkaW5nOiAwIDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0d2lkdGg6IDEwMCU7XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNjtcblx0fVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLFxuXHQmW2RhdGEtZm9jdXNlZD0ndHJ1ZSddIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHN1YnRsZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cblx0Jjpob3Zlcixcblx0JjphY3RpdmUsXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb250cm9sQmFja2dyb3VuZENvbG9yIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBlcnJvciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6IDAgMCAwLCAwLjVweCwgJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGlubGluZSA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcblx0d2lkdGg6IGF1dG87XG5cblx0JHsgc2FmYXJpT25seWBcblx0XHRcdHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cdGAgfVxuYDtcbiJdfQ== */");
 export const inline = /*#__PURE__*/css("display:inline-flex;vertical-align:baseline;width:auto;", safariOnly`
 			vertical-align: middle;
-	`, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:inline;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkV5QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtZmllbGQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc2FmYXJpT25seSB9IGZyb20gJy4uL3V0aWxzL2Jyb3dzZXJzJztcblxuZXhwb3J0IGNvbnN0IEJhc2VGaWVsZCA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvciB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvdyB9O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4OiAxO1xuXHRmb250LXNpemU6ICR7IENPTkZJRy5mb250U2l6ZSB9O1xuXHRvdXRsaW5lOiBub25lO1xuXHRwYWRkaW5nOiAwIDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0d2lkdGg6IDEwMCU7XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNjtcblx0fVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLFxuXHQmW2RhdGEtZm9jdXNlZD0ndHJ1ZSddIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy5hZG1pbi50aGVtZSB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHN1YnRsZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cblx0Jjpob3Zlcixcblx0JjphY3RpdmUsXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb250cm9sQmFja2dyb3VuZENvbG9yIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBlcnJvciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6IDAgMCAwLCAwLjVweCwgJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGlubGluZSA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcblx0d2lkdGg6IGF1dG87XG5cblx0JHsgc2FmYXJpT25seWBcblx0XHRcdHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cdGAgfVxuYDtcbiJdfQ== */");
+	`, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:inline;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYmFzZS1maWVsZC9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkV5QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Jhc2UtZmllbGQvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcsIENPTE9SUywgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc2FmYXJpT25seSB9IGZyb20gJy4uL3V0aWxzL2Jyb3dzZXJzJztcblxuZXhwb3J0IGNvbnN0IEJhc2VGaWVsZCA9IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09ORklHLmNvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Ym9yZGVyOiAxcHggc29saWQ7XG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvciB9O1xuXHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvdyB9O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4OiAxO1xuXHRmb250LXNpemU6ICR7IENPTkZJRy5mb250U2l6ZSB9O1xuXHRvdXRsaW5lOiBub25lO1xuXHRwYWRkaW5nOiAwIDhweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0d2lkdGg6IDEwMCU7XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNjtcblx0fVxuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJDb2xvckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLFxuXHQmW2RhdGEtZm9jdXNlZD0ndHJ1ZSddIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IHN1YnRsZSA9IGNzc2Bcblx0YmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG5cblx0Jjpob3Zlcixcblx0JjphY3RpdmUsXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb250cm9sQmFja2dyb3VuZENvbG9yIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBlcnJvciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblxuXHQmOmhvdmVyLFxuXHQmOmFjdGl2ZSB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuXG5cdCY6Zm9jdXMsXG5cdCZbZGF0YS1mb2N1c2VkPSd0cnVlJ10ge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdFx0Ym94LXNoYWRvdzogMCAwIDAsIDAuNXB4LCAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGVycm9yRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cdGJveC1zaGFkb3c6IDAgMCAwLCAwLjVweCwgJHsgQ09ORklHLmNvbnRyb2xEZXN0cnVjdGl2ZUJvcmRlckNvbG9yIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT05GSUcuY29udHJvbERlc3RydWN0aXZlQm9yZGVyQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGlubGluZSA9IGNzc2Bcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcblx0d2lkdGg6IGF1dG87XG5cblx0JHsgc2FmYXJpT25seWBcblx0XHRcdHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cdGAgfVxuYDtcbiJdfQ== */");
 //# sourceMappingURL=styles.js.map

package/build-module/base-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/base-field/styles.js"],"names":["css","CONFIG","COLORS","reduceMotion","safariOnly","BaseField","controlBackgroundColor","controlBorderRadius","controlBorderColor","controlBoxShadow","fontSize","transitionDurationFastest","controlBorderColorHover","admin","theme","controlBoxShadowFocus","subtle","error","controlDestructiveBorderColor","errorFocus","inline"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,YAAzB,QAA6C,UAA7C;AACA,SAASC,UAAT,QAA2B,mBAA3B;AAEA,OAAO,MAAMC,SAAS,gBAAGL,GAAH,gBACNC,MAAM,CAACK,sBADD,qBAEHL,MAAM,CAACM,mBAFJ,qCAIJN,MAAM,CAACO,kBAJH,kBAKNP,MAAM,CAACQ,gBALD,qCAQPR,MAAM,CAACS,QARA,4EAYOT,MAAM,CAACU,yBAZd,YAalBR,YAAY,CAAE,YAAF,CAbM,gEAqBHF,MAAM,CAACW,uBArBJ,oDA0BHV,MAAM,CAACW,KAAP,CAAaC,KA1BV,kBA2BLb,MAAM,CAACc,qBA3BF,g/FAAf;AA+BP,OAAO,MAAMC,MAAM,gBAAGhB,GAAH,6FAOFC,MAAM,CAACK,sBAPL,i/FAAZ;AAWP,OAAO,MAAMW,KAAK,gBAAGjB,GAAH,kBACAC,MAAM,CAACiB,6BADP,qCAKCjB,MAAM,CAACiB,6BALR,oDAUCjB,MAAM,CAACiB,6BAVR,8BAWajB,MAAM,CAACiB,6BAXpB,g/FAAX;AAeP,OAAO,MAAMC,UAAU,gBAAGnB,GAAH,kBACLC,MAAM,CAACiB,6BADF,8BAEOjB,MAAM,CAACiB,6BAFd,4BAKJjB,MAAM,CAACiB,6BALH,q/FAAhB;AASP,OAAO,MAAME,MAAM,gBAAGpB,GAAH,4DAKfI,UAAW;AACf;AACA,EAPmB,g/FAAZ","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG, COLORS, reduceMotion } from '../utils';\nimport { safariOnly } from '../utils/browsers';\n\nexport const BaseField = css`\n\tbackground: ${ CONFIG.controlBackgroundColor };\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tborder: 1px solid;\n\tborder-color: ${ CONFIG.controlBorderColor };\n\tbox-shadow: ${ CONFIG.controlBoxShadow };\n\tdisplay: flex;\n\tflex: 1;\n\tfont-size: ${ CONFIG.fontSize };\n\toutline: none;\n\tpadding: 0 8px;\n\tposition: relative;\n\ttransition: border-color ${ CONFIG.transitionDurationFastest } ease;\n\t${ reduceMotion( 'transition' ) }\n\twidth: 100%;\n\n\t&[disabled] {\n\t\topacity: 0.6;\n\t}\n\n\t&:hover {\n\t\tborder-color: ${ CONFIG.controlBorderColorHover };\n\t}\n\n\t&:focus,\n\t&[data-focused='true'] {\n\t\tborder-color: ${ COLORS.admin.theme };\n\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t}\n`;\n\nexport const subtle = css`\n\tbackground-color: transparent;\n\n\t&:hover,\n\t&:active,\n\t&:focus,\n\t&[data-focused='true'] {\n\t\tbackground: ${ CONFIG.controlBackgroundColor };\n\t}\n`;\n\nexport const error = css`\n\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\n\t&:hover,\n\t&:active {\n\t\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\t}\n\n\t&:focus,\n\t&[data-focused='true'] {\n\t\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\t\tbox-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };\n\t}\n`;\n\nexport const errorFocus = css`\n\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\tbox-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };\n\n\t&:hover {\n\t\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\t}\n`;\n\nexport const inline = css`\n\tdisplay: inline-flex;\n\tvertical-align: baseline;\n\twidth: auto;\n\n\t${ safariOnly`\n\t\t\tvertical-align: middle;\n\t` }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/base-field/styles.js"],"names":["css","CONFIG","COLORS","reduceMotion","safariOnly","BaseField","controlBackgroundColor","controlBorderRadius","controlBorderColor","controlBoxShadow","fontSize","transitionDurationFastest","controlBorderColorHover","ui","theme","controlBoxShadowFocus","subtle","error","controlDestructiveBorderColor","errorFocus","inline"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,YAAzB,QAA6C,UAA7C;AACA,SAASC,UAAT,QAA2B,mBAA3B;AAEA,OAAO,MAAMC,SAAS,gBAAGL,GAAH,gBACNC,MAAM,CAACK,sBADD,qBAEHL,MAAM,CAACM,mBAFJ,qCAIJN,MAAM,CAACO,kBAJH,kBAKNP,MAAM,CAACQ,gBALD,qCAQPR,MAAM,CAACS,QARA,4EAYOT,MAAM,CAACU,yBAZd,YAalBR,YAAY,CAAE,YAAF,CAbM,gEAqBHF,MAAM,CAACW,uBArBJ,oDA0BHV,MAAM,CAACW,EAAP,CAAUC,KA1BP,kBA2BLb,MAAM,CAACc,qBA3BF,4+FAAf;AA+BP,OAAO,MAAMC,MAAM,gBAAGhB,GAAH,6FAOFC,MAAM,CAACK,sBAPL,6+FAAZ;AAWP,OAAO,MAAMW,KAAK,gBAAGjB,GAAH,kBACAC,MAAM,CAACiB,6BADP,qCAKCjB,MAAM,CAACiB,6BALR,oDAUCjB,MAAM,CAACiB,6BAVR,8BAWajB,MAAM,CAACiB,6BAXpB,4+FAAX;AAeP,OAAO,MAAMC,UAAU,gBAAGnB,GAAH,kBACLC,MAAM,CAACiB,6BADF,8BAEOjB,MAAM,CAACiB,6BAFd,4BAKJjB,MAAM,CAACiB,6BALH,i/FAAhB;AASP,OAAO,MAAME,MAAM,gBAAGpB,GAAH,4DAKfI,UAAW;AACf;AACA,EAPmB,4+FAAZ","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG, COLORS, reduceMotion } from '../utils';\nimport { safariOnly } from '../utils/browsers';\n\nexport const BaseField = css`\n\tbackground: ${ CONFIG.controlBackgroundColor };\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tborder: 1px solid;\n\tborder-color: ${ CONFIG.controlBorderColor };\n\tbox-shadow: ${ CONFIG.controlBoxShadow };\n\tdisplay: flex;\n\tflex: 1;\n\tfont-size: ${ CONFIG.fontSize };\n\toutline: none;\n\tpadding: 0 8px;\n\tposition: relative;\n\ttransition: border-color ${ CONFIG.transitionDurationFastest } ease;\n\t${ reduceMotion( 'transition' ) }\n\twidth: 100%;\n\n\t&[disabled] {\n\t\topacity: 0.6;\n\t}\n\n\t&:hover {\n\t\tborder-color: ${ CONFIG.controlBorderColorHover };\n\t}\n\n\t&:focus,\n\t&[data-focused='true'] {\n\t\tborder-color: ${ COLORS.ui.theme };\n\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t}\n`;\n\nexport const subtle = css`\n\tbackground-color: transparent;\n\n\t&:hover,\n\t&:active,\n\t&:focus,\n\t&[data-focused='true'] {\n\t\tbackground: ${ CONFIG.controlBackgroundColor };\n\t}\n`;\n\nexport const error = css`\n\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\n\t&:hover,\n\t&:active {\n\t\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\t}\n\n\t&:focus,\n\t&[data-focused='true'] {\n\t\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\t\tbox-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };\n\t}\n`;\n\nexport const errorFocus = css`\n\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\tbox-shadow: 0 0 0, 0.5px, ${ CONFIG.controlDestructiveBorderColor };\n\n\t&:hover {\n\t\tborder-color: ${ CONFIG.controlDestructiveBorderColor };\n\t}\n`;\n\nexport const inline = css`\n\tdisplay: inline-flex;\n\tvertical-align: baseline;\n\twidth: auto;\n\n\t${ safariOnly`\n\t\t\tvertical-align: middle;\n\t` }\n`;\n"]}

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

@@ -1,9 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+
 import BorderControlDropdown from '../border-control-dropdown';
 import UnitControl from '../../unit-control';
 import RangeControl from '../../range-control';
@@ -25,8 +30,10 @@ const BorderLabel = props => {
   }
 
   return hideLabelFromVision ? createElement(VisuallyHidden, {
-    as: "label"
-  }, label) : createElement(StyledLabel, null, label);
+    as: "legend"
+  }, label) : createElement(StyledLabel, {
+    as: "legend"
+  }, label);
 };
 
 const UnconnectedBorderControl = (props, forwardedRef) => {
@@ -37,6 +44,7 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     enableStyle = true,
     hideLabelFromVision,
     innerWrapperClassName,
+    inputWidth,
     label,
     onBorderChange,
     onSliderChange,
@@ -47,7 +55,6 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     showDropdownHeader,
     sliderClassName,
     value: border,
-    widthControlClassName,
     widthUnit,
     widthValue,
     withSlider,
@@ -56,36 +63,41 @@ const UnconnectedBorderControl = (props, forwardedRef) => {
     __next36pxDefaultSize,
     ...otherProps
   } = useBorderControl(props);
-  return createElement(View, _extends({}, otherProps, {
+  return createElement(View, _extends({
+    as: "fieldset"
+  }, otherProps, {
     ref: forwardedRef
   }), createElement(BorderLabel, {
     label: label,
     hideLabelFromVision: hideLabelFromVision
   }), createElement(HStack, {
-    spacing: 3
-  }, createElement(HStack, {
-    className: innerWrapperClassName,
-    alignment: "stretch"
-  }, createElement(BorderControlDropdown, {
-    border: border,
-    colors: colors,
-    __unstablePopoverProps: __unstablePopoverProps,
-    disableCustomColors: disableCustomColors,
-    enableAlpha: enableAlpha,
-    enableStyle: enableStyle,
-    onChange: onBorderChange,
-    previousStyleSelection: previousStyleSelection,
-    showDropdownHeader: showDropdownHeader,
-    __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
-    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-    __next36pxDefaultSize: __next36pxDefaultSize
-  }), createElement(UnitControl, {
-    className: widthControlClassName,
+    spacing: 3,
+    className: innerWrapperClassName
+  }, createElement(UnitControl, {
+    prefix: createElement(BorderControlDropdown, {
+      border: border,
+      colors: colors,
+      __unstablePopoverProps: __unstablePopoverProps,
+      disableCustomColors: disableCustomColors,
+      enableAlpha: enableAlpha,
+      enableStyle: enableStyle,
+      onChange: onBorderChange,
+      previousStyleSelection: previousStyleSelection,
+      showDropdownHeader: showDropdownHeader,
+      __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
+      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      __next36pxDefaultSize: __next36pxDefaultSize
+    }),
+    label: __('Border width'),
+    hideLabelFromVision: true,
     min: 0,
     onChange: onWidthChange,
     value: (border === null || border === void 0 ? void 0 : border.width) || '',
-    placeholder: placeholder
-  })), withSlider && createElement(RangeControl, {
+    placeholder: placeholder,
+    __unstableInputWidth: inputWidth
+  }), withSlider && createElement(RangeControl, {
+    label: __('Border width'),
+    hideLabelFromVision: true,
     className: sliderClassName,
     initialPosition: 0,
     max: 100,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","enableAlpha","enableStyle","innerWrapperClassName","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","sliderClassName","value","border","widthControlClassName","widthUnit","widthValue","withSlider","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","width","includes","undefined","BorderControl"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-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 { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../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 UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle = true,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View { ...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 spacing={ 3 }>\n\t\t\t\t<HStack className={ innerWrapperClassName } alignment=\"stretch\">\n\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\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={ onBorderChange }\n\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\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\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\tclassName={ widthControlClassName }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/component.tsx"],"names":["__","BorderControlDropdown","UnitControl","RangeControl","HStack","StyledLabel","View","VisuallyHidden","contextConnect","useBorderControl","BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderControl","forwardedRef","colors","disableCustomColors","enableAlpha","enableStyle","innerWrapperClassName","inputWidth","onBorderChange","onSliderChange","onWidthChange","placeholder","__unstablePopoverProps","previousStyleSelection","showDropdownHeader","sliderClassName","value","border","widthUnit","widthValue","withSlider","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","width","includes","undefined","BorderControl"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-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 { useBorderControl } from './hook';\n\nimport type { BorderControlProps, LabelProps } from '../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=\"legend\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel as=\"legend\">{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderControl = (\n\tprops: WordPressComponentProps< BorderControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle = true,\n\t\thideLabelFromVision,\n\t\tinnerWrapperClassName,\n\t\tinputWidth,\n\t\tlabel,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tplaceholder,\n\t\t__unstablePopoverProps,\n\t\tpreviousStyleSelection,\n\t\tshowDropdownHeader,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\twithSlider,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useBorderControl( props );\n\n\treturn (\n\t\t<View as=\"fieldset\" { ...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 spacing={ 3 } className={ innerWrapperClassName }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tprefix={\n\t\t\t\t\t\t<BorderControlDropdown\n\t\t\t\t\t\t\tborder={ border }\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t__unstablePopoverProps={ __unstablePopoverProps }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\t\tpreviousStyleSelection={ previousStyleSelection }\n\t\t\t\t\t\t\tshowDropdownHeader={ showDropdownHeader }\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ onWidthChange }\n\t\t\t\t\tvalue={ border?.width || '' }\n\t\t\t\t\tplaceholder={ placeholder }\n\t\t\t\t\t__unstableInputWidth={ inputWidth }\n\t\t\t\t/>\n\t\t\t\t{ withSlider && (\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tlabel={ __( 'Border width' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tclassName={ sliderClassName }\n\t\t\t\t\t\tinitialPosition={ 0 }\n\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tonChange={ onSliderChange }\n\t\t\t\t\t\tstep={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }\n\t\t\t\t\t\tvalue={ widthValue || undefined }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(\n\tUnconnectedBorderControl,\n\t'BorderControl'\n);\n\nexport default BorderControl;\n"]}

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

@@ -88,28 +88,25 @@ export function useBorderControl(props) {
   const classes = useMemo(() => {
     return cx(styles.borderControl, className);
   }, [className, cx]);
+  const wrapperWidth = isCompact ? '90px' : width;
   const innerWrapperClassName = useMemo(() => {
-    const wrapperWidth = isCompact ? '90px' : width;
-    const widthStyle = !!wrapperWidth && styles.wrapperWidth(wrapperWidth);
+    const widthStyle = !!wrapperWidth && styles.wrapperWidth;
     const heightStyle = styles.wrapperHeight(__next36pxDefaultSize);
     return cx(styles.innerWrapper(), widthStyle, heightStyle);
-  }, [isCompact, width, cx, __next36pxDefaultSize]);
-  const widthControlClassName = useMemo(() => {
-    return cx(styles.borderWidthControl());
-  }, [cx]);
+  }, [wrapperWidth, cx, __next36pxDefaultSize]);
   const sliderClassName = useMemo(() => {
     return cx(styles.borderSlider());
   }, [cx]);
   return { ...otherProps,
     className: classes,
     innerWrapperClassName,
+    inputWidth: wrapperWidth,
     onBorderChange,
     onSliderChange,
     onWidthChange,
     previousStyleSelection: styleSelection,
     sliderClassName,
     value: border,
-    widthControlClassName,
     widthUnit,
     widthValue,
     __next36pxDefaultSize

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","__next36pxDefaultSize","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","innerWrapperClassName","wrapperWidth","widthStyle","heightStyle","wrapperHeight","innerWrapper","widthControlClassName","borderWidthControl","sliderClassName","borderSlider","previousStyleSelection"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value?: number ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst wrapperWidth = isCompact ? '90px' : width;\n\t\tconst widthStyle =\n\t\t\t!! wrapperWidth && styles.wrapperWidth( wrapperWidth );\n\t\tconst heightStyle = styles.wrapperHeight( __next36pxDefaultSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ isCompact, width, cx, __next36pxDefaultSize ] );\n\n\tconst widthControlClassName = useMemo( () => {\n\t\treturn cx( styles.borderWidthControl() );\n\t}, [ cx ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tinnerWrapperClassName,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthControlClassName,\n\t\twidthUnit,\n\t\twidthValue,\n\t\t__next36pxDefaultSize,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/border-control/hook.ts"],"names":["useCallback","useMemo","useState","styles","parseQuantityAndUnitFromRawValue","useContextSystem","useCx","sanitizeBorder","border","hasNoWidth","width","undefined","hasNoColor","color","useBorderControl","props","className","isCompact","onChange","shouldSanitizeBorder","value","__next36pxDefaultSize","otherProps","widthValue","originalWidthUnit","widthUnit","hadPreviousZeroWidth","colorSelection","setColorSelection","styleSelection","setStyleSelection","onBorderChange","newBorder","onWidthChange","newWidth","newWidthValue","parsedValue","hasZeroWidth","updatedBorder","style","onSliderChange","cx","classes","borderControl","wrapperWidth","innerWrapperClassName","widthStyle","heightStyle","wrapperHeight","innerWrapper","sliderClassName","borderSlider","inputWidth","previousStyleSelection"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border, BorderControlProps } from '../types';\n\nconst sanitizeBorder = ( border?: Border ) => {\n\tconst hasNoWidth = border?.width === undefined || border.width === '';\n\tconst hasNoColor = border?.color === undefined;\n\n\t// If width and color are undefined, unset any style selection as well.\n\tif ( hasNoWidth && hasNoColor ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n};\n\nexport function useBorderControl(\n\tprops: WordPressComponentProps< BorderControlProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tisCompact,\n\t\tonChange,\n\t\tshouldSanitizeBorder = true,\n\t\tvalue: border,\n\t\twidth,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderControl' );\n\n\tconst [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(\n\t\tborder?.width\n\t);\n\tconst widthUnit = originalWidthUnit || 'px';\n\tconst hadPreviousZeroWidth = widthValue === 0;\n\n\tconst [ colorSelection, setColorSelection ] = useState< string >();\n\tconst [ styleSelection, setStyleSelection ] = useState< string >();\n\n\tconst onBorderChange = useCallback(\n\t\t( newBorder?: Border ) => {\n\t\t\tif ( shouldSanitizeBorder ) {\n\t\t\t\treturn onChange( sanitizeBorder( newBorder ) );\n\t\t\t}\n\n\t\t\tonChange( newBorder );\n\t\t},\n\t\t[ onChange, shouldSanitizeBorder ]\n\t);\n\n\tconst onWidthChange = useCallback(\n\t\t( newWidth?: string ) => {\n\t\t\tconst newWidthValue = newWidth === '' ? undefined : newWidth;\n\t\t\tconst [ parsedValue ] =\n\t\t\t\tparseQuantityAndUnitFromRawValue( newWidth );\n\t\t\tconst hasZeroWidth = parsedValue === 0;\n\n\t\t\tconst updatedBorder = { ...border, width: newWidthValue };\n\n\t\t\t// Setting the border width explicitly to zero will also set the\n\t\t\t// border style to `none` and clear the border color.\n\t\t\tif ( hasZeroWidth && ! hadPreviousZeroWidth ) {\n\t\t\t\t// Before clearing the color and style selections, keep track of\n\t\t\t\t// the current selections so they can be restored when the width\n\t\t\t\t// changes to a non-zero value.\n\t\t\t\tsetColorSelection( border?.color );\n\t\t\t\tsetStyleSelection( border?.style );\n\n\t\t\t\t// Clear the color and style border properties.\n\t\t\t\tupdatedBorder.color = undefined;\n\t\t\t\tupdatedBorder.style = 'none';\n\t\t\t}\n\n\t\t\t// Selection has changed from zero border width to non-zero width.\n\t\t\tif ( ! hasZeroWidth && hadPreviousZeroWidth ) {\n\t\t\t\t// Restore previous border color and style selections if width\n\t\t\t\t// is now not zero.\n\t\t\t\tif ( updatedBorder.color === undefined ) {\n\t\t\t\t\tupdatedBorder.color = colorSelection;\n\t\t\t\t}\n\t\t\t\tif ( updatedBorder.style === 'none' ) {\n\t\t\t\t\tupdatedBorder.style = styleSelection;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tonBorderChange( updatedBorder );\n\t\t},\n\t\t[\n\t\t\tborder,\n\t\t\thadPreviousZeroWidth,\n\t\t\tcolorSelection,\n\t\t\tstyleSelection,\n\t\t\tonBorderChange,\n\t\t]\n\t);\n\n\tconst onSliderChange = useCallback(\n\t\t( value?: number ) => {\n\t\t\tonWidthChange( `${ value }${ widthUnit }` );\n\t\t},\n\t\t[ onWidthChange, widthUnit ]\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderControl, className );\n\t}, [ className, cx ] );\n\n\tconst wrapperWidth = isCompact ? '90px' : width;\n\tconst innerWrapperClassName = useMemo( () => {\n\t\tconst widthStyle = !! wrapperWidth && styles.wrapperWidth;\n\t\tconst heightStyle = styles.wrapperHeight( __next36pxDefaultSize );\n\n\t\treturn cx( styles.innerWrapper(), widthStyle, heightStyle );\n\t}, [ wrapperWidth, cx, __next36pxDefaultSize ] );\n\n\tconst sliderClassName = useMemo( () => {\n\t\treturn cx( styles.borderSlider() );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\tinnerWrapperClassName,\n\t\tinputWidth: wrapperWidth,\n\t\tonBorderChange,\n\t\tonSliderChange,\n\t\tonWidthChange,\n\t\tpreviousStyleSelection: styleSelection,\n\t\tsliderClassName,\n\t\tvalue: border,\n\t\twidthUnit,\n\t\twidthValue,\n\t\t__next36pxDefaultSize,\n\t};\n}\n"]}