@wordpress/components 25.0.0 → 25.1.1

package/build/dropdown-menu-v2/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"names":["ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","ITEM_PREFIX_WIDTH","ITEM_PADDING_INLINE_START","ITEM_PADDING_INLINE_END","slideUpAndFade","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","baseContent","css","COLORS","ui","background","itemPrefix","itemSuffix","ItemPrefixWrapper","ItemSuffixWrapper","baseItem","gray","theme","Content","DropdownMenu","SubContent","Item","CheckboxItem","RadioItem","SubTrigger","Label","Separator","borderDisabled","ItemIndicator","SubmenuRtlChevronIcon","Icon"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, font, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\nimport Icon from '../icon';\n\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst ITEM_PREFIX_WIDTH = space( 7 );\nconst ITEM_PADDING_INLINE_START = space( 2 );\nconst ITEM_PADDING_INLINE_END = space( 2.5 );\n\nconst slideUpAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideRightAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideLeftAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst baseContent = css`\n\tmin-width: 220px;\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: 6px;\n\tpadding: ${ space( 2 ) };\n\tbox-shadow: 0.1px 4px 16.4px -0.5px rgba( 0, 0, 0, 0.1 ),\n\t\t0px 5.5px 7.8px -0.3px rgba( 0, 0, 0, 0.1 ),\n\t\t0px 2.7px 3.8px -0.2px rgba( 0, 0, 0, 0.1 ),\n\t\t0px 0.7px 1px rgba( 0, 0, 0, 0.1 );\n\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\twill-change: transform, opacity;\n\n\t&[data-side='top'] {\n\t\tanimation-name: ${ slideDownAndFade };\n\t}\n\n\t&[data-side='right'] {\n\t\tanimation-name: ${ slideLeftAndFade };\n\t}\n\n\t&[data-side='bottom'] {\n\t\tanimation-name: ${ slideUpAndFade };\n\t}\n\n\t&[data-side='left'] {\n\t\tanimation-name: ${ slideRightAndFade };\n\t}\n\n\t@media ( prefers-reduced-motion ) {\n\t\tanimation-duration: 0s;\n\t}\n`;\n\nconst itemPrefix = css`\n\twidth: ${ ITEM_PREFIX_WIDTH };\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/* Prefixes don't get affected by the item's inline start padding */\n\tmargin-inline-start: calc( -1 * ${ ITEM_PADDING_INLINE_START } );\n\t/*\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t*/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n`;\n\nconst itemSuffix = css`\n\twidth: max-content;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/* Push prefix to the inline-end of the item */\n\tmargin-inline-start: auto;\n\t/* Minimum space between the item's content and suffix */\n\tpadding-inline-start: ${ space( 6 ) };\n\t/*\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t*/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n\n\t/*\n\t\tOverride color in normal conditions, but inherit the item's color\n\t  for altered conditions.\n\n\t\tTODO:\n\t\t  - For now, used opacity like for disabled item, which makes it work\n\t\t\t  regardless of the theme\n\t\t  - how do we translate this for themes? Should we have a new variable\n\t\tfor \"secondary\" text?\n\t*/\n\topacity: 0.6;\n\n\t[data-highlighted] > &,\n\t[data-state='open'] > &,\n\t[data-disabled] > & {\n\t\topacity: 1;\n\t}\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t${ itemPrefix }\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\t${ itemSuffix }\n`;\n\nconst baseItem = css`\n\tall: unset;\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tborder-radius: 3px;\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PADDING_INLINE_START };\n\tposition: relative;\n\tuser-select: none;\n\toutline: none;\n\n\t&[data-disabled] {\n\t\t/*\n\t\t\tTODO:\n\t\t\t  - we need a disabled color in the Theme variables\n\t\t\t  - design specs use opacity instead of setting a new text color\n\t\t*/\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t&[data-highlighted] {\n\t\t/*\n\t\t\tTODO: reconcile with global focus styles\n\t\t\t(incl high contrast mode fallbacks)\n\t\t */\n\n\t\tbackground-color: ${ COLORS.ui.theme };\n\t\tcolor: white;\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n\n\t&:not( :has( ${ ItemPrefixWrapper } ) ) {\n\t\tpadding-inline-start: ${ ITEM_PREFIX_WIDTH };\n\t}\n`;\n\nexport const Content = styled( DropdownMenu.Content )`\n\t${ baseContent }\n`;\nexport const SubContent = styled( DropdownMenu.SubContent )`\n\t${ baseContent }\n`;\n\nexport const Item = styled( DropdownMenu.Item )`\n\t${ baseItem }\n`;\nexport const CheckboxItem = styled( DropdownMenu.CheckboxItem )`\n\t${ baseItem }\n`;\nexport const RadioItem = styled( DropdownMenu.RadioItem )`\n\t${ baseItem }\n`;\nexport const SubTrigger = styled( DropdownMenu.SubTrigger )`\n\t&[data-state='open']:not( [data-highlighted] ) {\n\t\t/* TODO: use variable */\n\t\tbackground-color: rgba( 56, 88, 233, 0.04 );\n\t\tcolor: ${ COLORS.ui.theme };\n\t}\n\n\t${ baseItem }\n`;\n\nexport const Label = styled( DropdownMenu.Label )`\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\talign-items: center;\n\tmin-height: ${ space( 8 ) };\n\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PREFIX_WIDTH };\n\t/* TODO: color doesn't match available UI variables */\n\tcolor: ${ COLORS.gray[ 700 ] };\n\n\t/* TODO: font size doesn't match available ones via \"font\" utils */\n\tfont-size: 11px;\n\tline-height: 1.4;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n`;\n\nexport const Separator = styled( DropdownMenu.Separator )`\n\theight: 1px;\n\t/* TODO: doesn't match border color from variables */\n\tbackground-color: ${ COLORS.ui.borderDisabled };\n\t/* Negative horizontal margin to make separator go from side to side */\n\tmargin: ${ space( 2 ) } 0;\n`;\n\nexport const ItemIndicator = styled( DropdownMenu.ItemIndicator )`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const SubmenuRtlChevronIcon = styled( Icon )`\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1) translateX(${ space( 2 ) })`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1) translateX(${ space( 2 ) })`,\n\t\t}\n\t)() }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/dropdown-menu-v2/styles.ts"],"names":["ANIMATION_PARAMS","SLIDE_AMOUNT","DURATION","EASING","CONTENT_WRAPPER_PADDING","ITEM_PREFIX_WIDTH","ITEM_PADDING_INLINE_START","ITEM_PADDING_INLINE_END","DEFAULT_BORDER_COLOR","COLORS","ui","borderDisabled","TOOLBAR_VARIANT_BORDER_COLOR","gray","DEFAULT_BOX_SHADOW","CONFIG","borderWidth","popoverShadow","TOOLBAR_VARIANT_BOX_SHADOW","slideUpAndFade","opacity","transform","slideRightAndFade","slideDownAndFade","slideLeftAndFade","baseContent","variant","css","background","radiusBlockUi","itemPrefix","itemSuffix","ItemPrefixWrapper","ItemSuffixWrapper","baseItem","Content","DropdownMenu","props","SubContent","Item","CheckboxItem","RadioItem","SubTrigger","Label","Separator","ItemIndicator","SubmenuRtlChevronIcon","Icon"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, font, rtl, CONFIG } from '../utils';\nimport { space } from '../ui/utils/space';\nimport Icon from '../icon';\nimport type { DropdownMenuInternalContext } from './types';\n\nconst ANIMATION_PARAMS = {\n\tSLIDE_AMOUNT: '2px',\n\tDURATION: '400ms',\n\tEASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',\n};\n\nconst CONTENT_WRAPPER_PADDING = space( 2 );\nconst ITEM_PREFIX_WIDTH = space( 7 );\nconst ITEM_PADDING_INLINE_START = space( 2 );\nconst ITEM_PADDING_INLINE_END = space( 2.5 );\n\n// TODO: should bring this into the config, and make themeable\nconst DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled;\nconst TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];\nconst DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;\nconst TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;\n\nconst slideUpAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideRightAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst slideDownAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateY(-${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateY(0)' },\n} );\n\nconst slideLeftAndFade = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX(${ ANIMATION_PARAMS.SLIDE_AMOUNT })`,\n\t},\n\t'100%': { opacity: 1, transform: 'translateX(0)' },\n} );\n\nconst baseContent = (\n\tvariant: DropdownMenuInternalContext[ 'variant' ]\n) => css`\n\tmin-width: 220px;\n\tbackground-color: ${ COLORS.ui.background };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tpadding: ${ CONTENT_WRAPPER_PADDING };\n\tbox-shadow: ${ variant === 'toolbar'\n\t\t? TOOLBAR_VARIANT_BOX_SHADOW\n\t\t: DEFAULT_BOX_SHADOW };\n\tanimation-duration: ${ ANIMATION_PARAMS.DURATION };\n\tanimation-timing-function: ${ ANIMATION_PARAMS.EASING };\n\twill-change: transform, opacity;\n\n\t&[data-side='top'] {\n\t\tanimation-name: ${ slideDownAndFade };\n\t}\n\n\t&[data-side='right'] {\n\t\tanimation-name: ${ slideLeftAndFade };\n\t}\n\n\t&[data-side='bottom'] {\n\t\tanimation-name: ${ slideUpAndFade };\n\t}\n\n\t&[data-side='left'] {\n\t\tanimation-name: ${ slideRightAndFade };\n\t}\n\n\t@media ( prefers-reduced-motion ) {\n\t\tanimation-duration: 0s;\n\t}\n`;\n\nconst itemPrefix = css`\n\twidth: ${ ITEM_PREFIX_WIDTH };\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/* Prefixes don't get affected by the item's inline start padding */\n\tmargin-inline-start: calc( -1 * ${ ITEM_PADDING_INLINE_START } );\n\t/*\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t*/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n`;\n\nconst itemSuffix = css`\n\twidth: max-content;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/* Push prefix to the inline-end of the item */\n\tmargin-inline-start: auto;\n\t/* Minimum space between the item's content and suffix */\n\tpadding-inline-start: ${ space( 6 ) };\n\t/*\n\t\tNegative margin allows the suffix to be as tall as the whole item\n\t\t(incl. padding) before increasing the items' height. This can be useful,\n\t\te.g., when using icons that are bigger than 20x20 px\n\t*/\n\tmargin-top: ${ space( -2 ) };\n\tmargin-bottom: ${ space( -2 ) };\n\n\t/*\n\t\tOverride color in normal conditions, but inherit the item's color\n\t  for altered conditions.\n\n\t\tTODO:\n\t\t  - For now, used opacity like for disabled item, which makes it work\n\t\t\t  regardless of the theme\n\t\t  - how do we translate this for themes? Should we have a new variable\n\t\tfor \"secondary\" text?\n\t*/\n\topacity: 0.6;\n\n\t[data-highlighted] > &,\n\t[data-state='open'] > &,\n\t[data-disabled] > & {\n\t\topacity: 1;\n\t}\n`;\n\nexport const ItemPrefixWrapper = styled.span`\n\t${ itemPrefix }\n`;\n\nexport const ItemSuffixWrapper = styled.span`\n\t${ itemSuffix }\n`;\n\nconst baseItem = css`\n\tall: unset;\n\tfont-size: ${ font( 'default.fontSize' ) };\n\tfont-family: inherit;\n\tfont-weight: normal;\n\tline-height: 20px;\n\tcolor: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PADDING_INLINE_START };\n\tposition: relative;\n\tuser-select: none;\n\toutline: none;\n\n\t&[data-disabled] {\n\t\t/*\n\t\t\tTODO:\n\t\t\t  - we need a disabled color in the Theme variables\n\t\t\t  - design specs use opacity instead of setting a new text color\n\t\t*/\n\t\topacity: 0.5;\n\t\tpointer-events: none;\n\t}\n\n\t/* Hover and Focus styles */\n\t&[data-highlighted] {\n\t\t/* TODO: reconcile with global focus styles */\n\t\tbackground-color: ${ COLORS.gray[ '100' ] };\n\n\t\t/* Only visible in Windows High Contrast mode */\n\t\toutline: 2px solid transparent;\n\t}\n\n\tsvg {\n\t\tfill: currentColor;\n\t}\n\n\t&:not( :has( ${ ItemPrefixWrapper } ) ) {\n\t\tpadding-inline-start: ${ ITEM_PREFIX_WIDTH };\n\t}\n`;\n\nexport const Content = styled( DropdownMenu.Content )<\n\tPick< DropdownMenuInternalContext, 'variant' >\n>`\n\t${ ( props ) => baseContent( props.variant ) }\n`;\nexport const SubContent = styled( DropdownMenu.SubContent )<\n\tPick< DropdownMenuInternalContext, 'variant' >\n>`\n\t${ ( props ) => baseContent( props.variant ) }\n`;\n\nexport const Item = styled( DropdownMenu.Item )`\n\t${ baseItem }\n`;\nexport const CheckboxItem = styled( DropdownMenu.CheckboxItem )`\n\t${ baseItem }\n`;\nexport const RadioItem = styled( DropdownMenu.RadioItem )`\n\t${ baseItem }\n`;\nexport const SubTrigger = styled( DropdownMenu.SubTrigger )`\n\t${ baseItem }\n\n\t&[data-state='open'] {\n\t\tbackground-color: ${ COLORS.gray[ '100' ] };\n\t}\n`;\n\nexport const Label = styled( DropdownMenu.Label )`\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\talign-items: center;\n\tmin-height: ${ space( 8 ) };\n\n\tpadding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }\n\t\t${ ITEM_PREFIX_WIDTH };\n\t/* TODO: color doesn't match available UI variables */\n\tcolor: ${ COLORS.gray[ 700 ] };\n\n\t/* TODO: font size doesn't match available ones via \"font\" utils */\n\tfont-size: 11px;\n\tline-height: 1.4;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n`;\n\nexport const Separator = styled( DropdownMenu.Separator )<\n\tPick< DropdownMenuInternalContext, 'variant' >\n>`\n\theight: ${ CONFIG.borderWidth };\n\t/* TODO: doesn't match border color from variables */\n\tbackground-color: ${ ( props ) =>\n\t\tprops.variant === 'toolbar'\n\t\t\t? TOOLBAR_VARIANT_BORDER_COLOR\n\t\t\t: DEFAULT_BORDER_COLOR };\n\t/* Negative horizontal margin to make separator go from side to side */\n\tmargin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } );\n`;\n\nexport const ItemIndicator = styled( DropdownMenu.ItemIndicator )`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const SubmenuRtlChevronIcon = styled( Icon )`\n\t${ rtl(\n\t\t{\n\t\t\ttransform: `scaleX(1) translateX(${ space( 2 ) })`,\n\t\t},\n\t\t{\n\t\t\ttransform: `scaleX(-1) translateX(${ space( 2 ) })`,\n\t\t}\n\t)() }\n`;\n"]}

package/build/duotone-picker/color-list-picker/index.js

@@ -28,15 +28,14 @@ var _hStack = require("../../h-stack");
 /**
  * Internal dependencies
  */
-function ColorOption(_ref) {
-  let {
-    label,
-    value,
-    colors,
-    disableCustomColors,
-    enableAlpha,
-    onChange
-  } = _ref;
+function ColorOption({
+  label,
+  value,
+  colors,
+  disableCustomColors,
+  enableAlpha,
+  onChange
+}) {
   const [isOpen, setIsOpen] = (0, _element.useState)(false);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_button.default, {
     className: "components-color-list-picker__swatch-button",
@@ -60,15 +59,14 @@ function ColorOption(_ref) {
   }));
 }
 
-function ColorListPicker(_ref2) {
-  let {
-    colors,
-    labels,
-    value = [],
-    disableCustomColors,
-    enableAlpha,
-    onChange
-  } = _ref2;
+function ColorListPicker({
+  colors,
+  labels,
+  value = [],
+  disableCustomColors,
+  enableAlpha,
+  onChange
+}) {
   return (0, _element.createElement)("div", {
     className: "components-color-list-picker"
   }, labels.map((label, index) => (0, _element.createElement)(ColorOption, {

package/build/duotone-picker/color-list-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/color-list-picker/index.tsx"],"names":["ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","swatch","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AAQA,SAASA,WAAT,OAOsB;AAAA,MAPA;AACrBC,IAAAA,KADqB;AAErBC,IAAAA,KAFqB;AAGrBC,IAAAA,MAHqB;AAIrBC,IAAAA,mBAJqB;AAKrBC,IAAAA,WALqB;AAMrBC,IAAAA;AANqB,GAOA;AACrB,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;AACA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,OAAO,EAAG,MAAMA,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAF1B,KAIC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACGP,KAAK,GACN,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAGA,KADd;AAEC,IAAA,SAAS,EAAC;AAFX,IADM,GAMN,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGQ;AAAb,IAPF,EASC,0CAAQT,KAAR,CATD,CAJD,CADD,EAiBGM,MAAM,IACP,4BAAC,qBAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,KAAK,EAAGD,KAHT;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGI,QALZ;AAMC,IAAA,mBAAmB,EAAGF,mBANvB;AAOC,IAAA,WAAW,EAAGC;AAPf,IAlBF,CADD;AA+BA;;AAED,SAASM,eAAT,QAO0B;AAAA,MAPA;AACzBR,IAAAA,MADyB;AAEzBS,IAAAA,MAFyB;AAGzBV,IAAAA,KAAK,GAAG,EAHiB;AAIzBE,IAAAA,mBAJyB;AAKzBC,IAAAA,WALyB;AAMzBC,IAAAA;AANyB,GAOA;AACzB,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGM,MAAM,CAACC,GAAP,CAAY,CAAEZ,KAAF,EAASa,KAAT,KACb,4BAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGb,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEY,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGX,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKU,QAAF,IAAgB;AAC1B,YAAMC,SAAmC,GACxCd,KAAK,CAACe,KAAN,EADD;AAEAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAT,MAAAA,QAAQ,CAAEU,SAAF,CAAR;AACA;AAZF,IADC,CADH,CADD;AAoBA;;eAEcL,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport ColorPalette from '../../color-palette';\nimport ColorIndicator from '../../color-indicator';\nimport Icon from '../../icon';\nimport { HStack } from '../../h-stack';\nimport type { ColorListPickerProps, ColorOptionProps } from './types';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorOptionProps ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t\t{ value ? (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\t\tclassName=\"components-color-list-picker__swatch-color\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon icon={ swatch } />\n\t\t\t\t\t) }\n\t\t\t\t\t<span>{ label }</span>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorListPickerProps ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors: ( string | undefined )[] =\n\t\t\t\t\t\t\tvalue.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/color-list-picker/index.tsx"],"names":["ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","swatch","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AAQA,SAASA,WAAT,CAAsB;AACrBC,EAAAA,KADqB;AAErBC,EAAAA,KAFqB;AAGrBC,EAAAA,MAHqB;AAIrBC,EAAAA,mBAJqB;AAKrBC,EAAAA,WALqB;AAMrBC,EAAAA;AANqB,CAAtB,EAOsB;AACrB,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;AACA,SACC,qDACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,OAAO,EAAG,MAAMA,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAF1B,KAIC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACGP,KAAK,GACN,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAGA,KADd;AAEC,IAAA,SAAS,EAAC;AAFX,IADM,GAMN,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGQ;AAAb,IAPF,EASC,0CAAQT,KAAR,CATD,CAJD,CADD,EAiBGM,MAAM,IACP,4BAAC,qBAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,KAAK,EAAGD,KAHT;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGI,QALZ;AAMC,IAAA,mBAAmB,EAAGF,mBANvB;AAOC,IAAA,WAAW,EAAGC;AAPf,IAlBF,CADD;AA+BA;;AAED,SAASM,eAAT,CAA0B;AACzBR,EAAAA,MADyB;AAEzBS,EAAAA,MAFyB;AAGzBV,EAAAA,KAAK,GAAG,EAHiB;AAIzBE,EAAAA,mBAJyB;AAKzBC,EAAAA,WALyB;AAMzBC,EAAAA;AANyB,CAA1B,EAO0B;AACzB,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGM,MAAM,CAACC,GAAP,CAAY,CAAEZ,KAAF,EAASa,KAAT,KACb,4BAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGb,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEY,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGX,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKU,QAAF,IAAgB;AAC1B,YAAMC,SAAmC,GACxCd,KAAK,CAACe,KAAN,EADD;AAEAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAT,MAAAA,QAAQ,CAAEU,SAAF,CAAR;AACA;AAZF,IADC,CADH,CADD;AAoBA;;eAEcL,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport ColorPalette from '../../color-palette';\nimport ColorIndicator from '../../color-indicator';\nimport Icon from '../../icon';\nimport { HStack } from '../../h-stack';\nimport type { ColorListPickerProps, ColorOptionProps } from './types';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorOptionProps ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t\t{ value ? (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\t\tclassName=\"components-color-list-picker__swatch-color\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon icon={ swatch } />\n\t\t\t\t\t) }\n\t\t\t\t\t<span>{ label }</span>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorListPickerProps ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors: ( string | undefined )[] =\n\t\t\t\t\t\t\tvalue.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}

package/build/duotone-picker/custom-duotone-bar.js

@@ -18,11 +18,10 @@ var _utils = require("./utils");
  */
 const PLACEHOLDER_VALUES = ['#333', '#CCC'];
 
-function CustomDuotoneBar(_ref) {
-  let {
-    value,
-    onChange
-  } = _ref;
+function CustomDuotoneBar({
+  value,
+  onChange
+}) {
   const hasGradient = !!value;
   const values = hasGradient ? value : PLACEHOLDER_VALUES;
   const background = (0, _utils.getGradientFromCSSColors)(values);

package/build/duotone-picker/custom-duotone-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/custom-duotone-bar.tsx"],"names":["PLACEHOLDER_VALUES","CustomDuotoneBar","value","onChange","hasGradient","values","background","controlPoints","newColorStops","newValue"],"mappings":";;;;;;;;;;;AAGA;;AAEA;;AALA;AACA;AACA;AASA,MAAMA,kBAAkB,GAAG,CAAE,MAAF,EAAU,MAAV,CAA3B;;AAEe,SAASC,gBAAT,OAMX;AAAA,MANsC;AACzCC,IAAAA,KADyC;AAEzCC,IAAAA;AAFyC,GAMtC;AACH,QAAMC,WAAW,GAAG,CAAC,CAAEF,KAAvB;AACA,QAAMG,MAAM,GAAGD,WAAW,GAAGF,KAAH,GAAWF,kBAArC;AACA,QAAMM,UAAU,GAAG,qCAA0BD,MAA1B,CAAnB;AACA,QAAME,aAAa,GAAG,oCAAyBF,MAAzB,CAAtB;AACA,SACC,4BAAC,oBAAD;AACC,IAAA,eAAe,MADhB;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,WAAW,EAAGF,WAHf;AAIC,IAAA,KAAK,EAAGG,aAJT;AAKC,IAAA,QAAQ,EAAKC,aAAF,IAAqB;AAC/B,YAAMC,QAAQ,GAAG,oCAAyBD,aAAzB,CAAjB;AACAL,MAAAA,QAAQ,CAAEM,QAAF,CAAR;AACA;AARF,IADD;AAYA","sourcesContent":["/**\n * Internal dependencies\n */\nimport CustomGradientBar from '../custom-gradient-picker/gradient-bar';\n\nimport {\n\tgetColorStopsFromColors,\n\tgetGradientFromCSSColors,\n\tgetColorsFromColorStops,\n} from './utils';\n\nconst PLACEHOLDER_VALUES = [ '#333', '#CCC' ];\n\nexport default function CustomDuotoneBar( {\n\tvalue,\n\tonChange,\n}: {\n\tvalue?: string[];\n\tonChange: ( value?: string[] ) => void;\n} ) {\n\tconst hasGradient = !! value;\n\tconst values = hasGradient ? value : PLACEHOLDER_VALUES;\n\tconst background = getGradientFromCSSColors( values );\n\tconst controlPoints = getColorStopsFromColors( values );\n\treturn (\n\t\t<CustomGradientBar\n\t\t\tdisableInserter\n\t\t\tbackground={ background }\n\t\t\thasGradient={ hasGradient }\n\t\t\tvalue={ controlPoints }\n\t\t\tonChange={ ( newColorStops ) => {\n\t\t\t\tconst newValue = getColorsFromColorStops( newColorStops );\n\t\t\t\tonChange( newValue );\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/custom-duotone-bar.tsx"],"names":["PLACEHOLDER_VALUES","CustomDuotoneBar","value","onChange","hasGradient","values","background","controlPoints","newColorStops","newValue"],"mappings":";;;;;;;;;;;AAGA;;AAEA;;AALA;AACA;AACA;AASA,MAAMA,kBAAkB,GAAG,CAAE,MAAF,EAAU,MAAV,CAA3B;;AAEe,SAASC,gBAAT,CAA2B;AACzCC,EAAAA,KADyC;AAEzCC,EAAAA;AAFyC,CAA3B,EAMX;AACH,QAAMC,WAAW,GAAG,CAAC,CAAEF,KAAvB;AACA,QAAMG,MAAM,GAAGD,WAAW,GAAGF,KAAH,GAAWF,kBAArC;AACA,QAAMM,UAAU,GAAG,qCAA0BD,MAA1B,CAAnB;AACA,QAAME,aAAa,GAAG,oCAAyBF,MAAzB,CAAtB;AACA,SACC,4BAAC,oBAAD;AACC,IAAA,eAAe,MADhB;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,WAAW,EAAGF,WAHf;AAIC,IAAA,KAAK,EAAGG,aAJT;AAKC,IAAA,QAAQ,EAAKC,aAAF,IAAqB;AAC/B,YAAMC,QAAQ,GAAG,oCAAyBD,aAAzB,CAAjB;AACAL,MAAAA,QAAQ,CAAEM,QAAF,CAAR;AACA;AARF,IADD;AAYA","sourcesContent":["/**\n * Internal dependencies\n */\nimport CustomGradientBar from '../custom-gradient-picker/gradient-bar';\n\nimport {\n\tgetColorStopsFromColors,\n\tgetGradientFromCSSColors,\n\tgetColorsFromColorStops,\n} from './utils';\n\nconst PLACEHOLDER_VALUES = [ '#333', '#CCC' ];\n\nexport default function CustomDuotoneBar( {\n\tvalue,\n\tonChange,\n}: {\n\tvalue?: string[];\n\tonChange: ( value?: string[] ) => void;\n} ) {\n\tconst hasGradient = !! value;\n\tconst values = hasGradient ? value : PLACEHOLDER_VALUES;\n\tconst background = getGradientFromCSSColors( values );\n\tconst controlPoints = getColorStopsFromColors( values );\n\treturn (\n\t\t<CustomGradientBar\n\t\t\tdisableInserter\n\t\t\tbackground={ background }\n\t\t\thasGradient={ hasGradient }\n\t\t\tvalue={ controlPoints }\n\t\t\tonChange={ ( newColorStops ) => {\n\t\t\t\tconst newValue = getColorsFromColorStops( newColorStops );\n\t\t\t\tonChange( newValue );\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}

package/build/duotone-picker/duotone-picker.js

@@ -70,17 +70,16 @@ var _spacer = require("../spacer");
  * };
  * ```
  */
-function DuotonePicker(_ref) {
-  let {
-    clearable = true,
-    unsetable = true,
-    colorPalette,
-    duotonePalette,
-    disableCustomColors,
-    disableCustomDuotone,
-    value,
-    onChange
-  } = _ref;
+function DuotonePicker({
+  clearable = true,
+  unsetable = true,
+  colorPalette,
+  duotonePalette,
+  disableCustomColors,
+  disableCustomDuotone,
+  value,
+  onChange
+}) {
   const [defaultDark, defaultLight] = (0, _element.useMemo)(() => (0, _utils.getDefaultColors)(colorPalette), [colorPalette]);
   const isUnset = value === 'unset';
   const unsetOption = (0, _element.createElement)(_circularOptionPicker.default.Option, {
@@ -93,12 +92,11 @@ function DuotonePicker(_ref) {
       onChange(isUnset ? undefined : 'unset');
     }
   });
-  const options = duotonePalette.map(_ref2 => {
-    let {
-      colors,
-      slug,
-      name
-    } = _ref2;
+  const options = duotonePalette.map(({
+    colors,
+    slug,
+    name
+  }) => {
     const style = {
       background: (0, _utils.getGradientFromCSSColors)(colors, '135deg'),
       color: 'transparent'

package/build/duotone-picker/duotone-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"names":["DuotonePicker","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","defaultDark","defaultLight","isUnset","unsetOption","undefined","options","map","colors","slug","name","style","background","color","tooltipText","label","isSelected","newColors","newValue","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ __( 'Unset' ) }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst options = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t  )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\toptions={ unsetable ? [ unsetOption, ...options ] : options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"names":["DuotonePicker","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","defaultDark","defaultLight","isUnset","unsetOption","undefined","options","map","colors","slug","name","style","background","color","tooltipText","label","isSelected","newColors","newValue","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ __( 'Unset' ) }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst options = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t  )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\toptions={ unsetable ? [ unsetOption, ...options ] : options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"]}

package/build/duotone-picker/duotone-swatch.js

@@ -24,10 +24,9 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
-function DuotoneSwatch(_ref) {
-  let {
-    values
-  } = _ref;
+function DuotoneSwatch({
+  values
+}) {
   return values ? (0, _element.createElement)(_colorIndicator.default, {
     colorValue: (0, _utils.getGradientFromCSSColors)(values, '135deg')
   }) : (0, _element.createElement)(_icon.default, {

package/build/duotone-picker/duotone-swatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-swatch.tsx"],"names":["DuotoneSwatch","values","swatch"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,aAAT,OAAyD;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AACxD,SAAOA,MAAM,GACZ,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAG,qCAA0BA,MAA1B,EAAkC,QAAlC;AADd,IADY,GAKZ,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGC;AAAb,IALD;AAOA;;eAEcF,a","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { getGradientFromCSSColors } from './utils';\nimport type { DuotoneSwatchProps } from './types';\n\nfunction DuotoneSwatch( { values }: DuotoneSwatchProps ) {\n\treturn values ? (\n\t\t<ColorIndicator\n\t\t\tcolorValue={ getGradientFromCSSColors( values, '135deg' ) }\n\t\t/>\n\t) : (\n\t\t<Icon icon={ swatch } />\n\t);\n}\n\nexport default DuotoneSwatch;\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-swatch.tsx"],"names":["DuotoneSwatch","values","swatch"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,aAAT,CAAwB;AAAEC,EAAAA;AAAF,CAAxB,EAAyD;AACxD,SAAOA,MAAM,GACZ,4BAAC,uBAAD;AACC,IAAA,UAAU,EAAG,qCAA0BA,MAA1B,EAAkC,QAAlC;AADd,IADY,GAKZ,4BAAC,aAAD;AAAM,IAAA,IAAI,EAAGC;AAAb,IALD;AAOA;;eAEcF,a","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { getGradientFromCSSColors } from './utils';\nimport type { DuotoneSwatchProps } from './types';\n\nfunction DuotoneSwatch( { values }: DuotoneSwatchProps ) {\n\treturn values ? (\n\t\t<ColorIndicator\n\t\t\tcolorValue={ getGradientFromCSSColors( values, '135deg' ) }\n\t\t/>\n\t) : (\n\t\t<Icon icon={ swatch } />\n\t);\n}\n\nexport default DuotoneSwatch;\n"]}

package/build/duotone-picker/utils.js

@@ -38,16 +38,12 @@ var _names = _interopRequireDefault(require("colord/plugins/names"));
 function getDefaultColors(palette) {
   // A default dark and light color are required.
   if (!palette || palette.length < 2) return ['#000', '#fff'];
-  return palette.map(_ref => {
-    let {
-      color
-    } = _ref;
-    return {
-      color,
-      brightness: (0, _colord.colord)(color).brightness()
-    };
-  }).reduce((_ref2, current) => {
-    let [min, max] = _ref2;
+  return palette.map(({
+    color
+  }) => ({
+    color,
+    brightness: (0, _colord.colord)(color).brightness()
+  })).reduce(([min, max], current) => {
     return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max];
   }, [{
     brightness: 1,
@@ -55,12 +51,9 @@ function getDefaultColors(palette) {
   }, {
     brightness: 0,
     color: ''
-  }]).map(_ref3 => {
-    let {
-      color
-    } = _ref3;
-    return color;
-  });
+  }]).map(({
+    color
+  }) => color);
 }
 /**
  * Generate a duotone gradient from a list of colors.
@@ -72,9 +65,7 @@ function getDefaultColors(palette) {
  */
 
 
-function getGradientFromCSSColors() {
-  let colors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '90deg';
+function getGradientFromCSSColors(colors = [], angle = '90deg') {
   const l = 100 / colors.length;
   const stops = colors.map((c, i) => `${c} ${i * l}%, ${c} ${(i + 1) * l}%`).join(', ');
   return `linear-gradient( ${angle}, ${stops} )`;
@@ -103,13 +94,9 @@ function getColorStopsFromColors(colors) {
  */
 
 
-function getColorsFromColorStops() {
-  let colorStops = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return colorStops.map(_ref4 => {
-    let {
-      color
-    } = _ref4;
-    return color;
-  });
+function getColorsFromColorStops(colorStops = []) {
+  return colorStops.map(({
+    color
+  }) => color);
 }
 //# sourceMappingURL=utils.js.map

package/build/duotone-picker/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/utils.ts"],"names":["namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","current","min","max","getGradientFromCSSColors","colors","angle","l","stops","c","i","join","getColorStopsFromColors","position","getColorsFromColorStops","colorStops"],"mappings":";;;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AASA,oBAAQ,CAAEA,cAAF,CAAR;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,gBAAT,CACNC,OADM,EAEL;AACD;AACA,MAAK,CAAEA,OAAF,IAAaA,OAAO,CAACC,MAAR,GAAiB,CAAnC,EAAuC,OAAO,CAAE,MAAF,EAAU,MAAV,CAAP;AAEvC,SAAOD,OAAO,CACZE,GADK,CACA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAmB;AACxBA,MAAAA,KADwB;AAExBC,MAAAA,UAAU,EAAE,oBAAQD,KAAR,EAAgBC,UAAhB;AAFY,KAAnB;AAAA,GADA,EAKLC,MALK,CAML,QAAgBC,OAAhB,KAA6B;AAAA,QAA3B,CAAEC,GAAF,EAAOC,GAAP,CAA2B;AAC5B,WAAO,CACNF,OAAO,CAACF,UAAR,IAAsBG,GAAG,CAACH,UAA1B,GAAuCE,OAAvC,GAAiDC,GAD3C,EAEND,OAAO,CAACF,UAAR,IAAsBI,GAAG,CAACJ,UAA1B,GAAuCE,OAAvC,GAAiDE,GAF3C,CAAP;AAIA,GAXI,EAYL,CACC;AAAEJ,IAAAA,UAAU,EAAE,CAAd;AAAiBD,IAAAA,KAAK,EAAE;AAAxB,GADD,EAEC;AAAEC,IAAAA,UAAU,EAAE,CAAd;AAAiBD,IAAAA,KAAK,EAAE;AAAxB,GAFD,CAZK,EAiBLD,GAjBK,CAiBA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,GAjBA,CAAP;AAkBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASM,wBAAT,GAGL;AAAA,MAFDC,MAEC,uEAFkB,EAElB;AAAA,MADDC,KACC,uEADO,OACP;AACD,QAAMC,CAAC,GAAG,MAAMF,MAAM,CAACT,MAAvB;AAEA,QAAMY,KAAK,GAAGH,MAAM,CAClBR,GADY,CACP,CAAEY,CAAF,EAAKC,CAAL,KAAa,GAAGD,CAAG,IAAIC,CAAC,GAAGH,CAAG,MAAME,CAAG,IAAI,CAAEC,CAAC,GAAG,CAAN,IAAYH,CAAG,GADnD,EAEZI,IAFY,CAEN,IAFM,CAAd;AAIA,SAAQ,oBAAoBL,KAAO,KAAKE,KAAO,IAA/C;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASI,uBAAT,CAAkCP,MAAlC,EAAqD;AAC3D,SAAOA,MAAM,CAACR,GAAP,CAAY,CAAEC,KAAF,EAASY,CAAT,MAAkB;AACpCG,IAAAA,QAAQ,EAAIH,CAAC,GAAG,GAAN,IAAgBL,MAAM,CAACT,MAAP,GAAgB,CAAhC,CAD0B;AAEpCE,IAAAA;AAFoC,GAAlB,CAAZ,CAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASgB,uBAAT,GAEL;AAAA,MADDC,UACC,uEADmD,EACnD;AACD,SAAOA,UAAU,CAAClB,GAAX,CAAgB;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,GAAhB,CAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport type { DuotonePickerProps } from './types';\n\nextend( [ namesPlugin ] );\n\n/**\n * Object representation for a color.\n *\n * @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n */\n\n/**\n * Calculate the brightest and darkest values from a color palette.\n *\n * @param palette Color palette for the theme.\n *\n * @return Tuple of the darkest color and brightest color.\n */\nexport function getDefaultColors(\n\tpalette: DuotonePickerProps[ 'colorPalette' ]\n) {\n\t// A default dark and light color are required.\n\tif ( ! palette || palette.length < 2 ) return [ '#000', '#fff' ];\n\n\treturn palette\n\t\t.map( ( { color } ) => ( {\n\t\t\tcolor,\n\t\t\tbrightness: colord( color ).brightness(),\n\t\t} ) )\n\t\t.reduce(\n\t\t\t( [ min, max ], current ) => {\n\t\t\t\treturn [\n\t\t\t\t\tcurrent.brightness <= min.brightness ? current : min,\n\t\t\t\t\tcurrent.brightness >= max.brightness ? current : max,\n\t\t\t\t];\n\t\t\t},\n\t\t\t[\n\t\t\t\t{ brightness: 1, color: '' },\n\t\t\t\t{ brightness: 0, color: '' },\n\t\t\t]\n\t\t)\n\t\t.map( ( { color } ) => color );\n}\n\n/**\n * Generate a duotone gradient from a list of colors.\n *\n * @param colors CSS color strings.\n * @param angle  CSS gradient angle.\n *\n * @return  CSS gradient string for the duotone swatch.\n */\nexport function getGradientFromCSSColors(\n\tcolors: string[] = [],\n\tangle = '90deg'\n) {\n\tconst l = 100 / colors.length;\n\n\tconst stops = colors\n\t\t.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )\n\t\t.join( ', ' );\n\n\treturn `linear-gradient( ${ angle }, ${ stops } )`;\n}\n\n/**\n * Convert a color array to an array of color stops.\n *\n * @param colors CSS colors array\n *\n * @return Color stop information.\n */\nexport function getColorStopsFromColors( colors: string[] ) {\n\treturn colors.map( ( color, i ) => ( {\n\t\tposition: ( i * 100 ) / ( colors.length - 1 ),\n\t\tcolor,\n\t} ) );\n}\n\n/**\n * Convert a color stop array to an array colors.\n *\n * @param colorStops Color stop information.\n *\n * @return CSS colors array.\n */\nexport function getColorsFromColorStops(\n\tcolorStops: { position: number; color: string }[] = []\n) {\n\treturn colorStops.map( ( { color } ) => color );\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/utils.ts"],"names":["namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","min","max","current","getGradientFromCSSColors","colors","angle","l","stops","c","i","join","getColorStopsFromColors","position","getColorsFromColorStops","colorStops"],"mappings":";;;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AASA,oBAAQ,CAAEA,cAAF,CAAR;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,gBAAT,CACNC,OADM,EAEL;AACD;AACA,MAAK,CAAEA,OAAF,IAAaA,OAAO,CAACC,MAAR,GAAiB,CAAnC,EAAuC,OAAO,CAAE,MAAF,EAAU,MAAV,CAAP;AAEvC,SAAOD,OAAO,CACZE,GADK,CACA,CAAE;AAAEC,IAAAA;AAAF,GAAF,MAAmB;AACxBA,IAAAA,KADwB;AAExBC,IAAAA,UAAU,EAAE,oBAAQD,KAAR,EAAgBC,UAAhB;AAFY,GAAnB,CADA,EAKLC,MALK,CAML,CAAE,CAAEC,GAAF,EAAOC,GAAP,CAAF,EAAgBC,OAAhB,KAA6B;AAC5B,WAAO,CACNA,OAAO,CAACJ,UAAR,IAAsBE,GAAG,CAACF,UAA1B,GAAuCI,OAAvC,GAAiDF,GAD3C,EAENE,OAAO,CAACJ,UAAR,IAAsBG,GAAG,CAACH,UAA1B,GAAuCI,OAAvC,GAAiDD,GAF3C,CAAP;AAIA,GAXI,EAYL,CACC;AAAEH,IAAAA,UAAU,EAAE,CAAd;AAAiBD,IAAAA,KAAK,EAAE;AAAxB,GADD,EAEC;AAAEC,IAAAA,UAAU,EAAE,CAAd;AAAiBD,IAAAA,KAAK,EAAE;AAAxB,GAFD,CAZK,EAiBLD,GAjBK,CAiBA,CAAE;AAAEC,IAAAA;AAAF,GAAF,KAAiBA,KAjBjB,CAAP;AAkBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASM,wBAAT,CACNC,MAAgB,GAAG,EADb,EAENC,KAAK,GAAG,OAFF,EAGL;AACD,QAAMC,CAAC,GAAG,MAAMF,MAAM,CAACT,MAAvB;AAEA,QAAMY,KAAK,GAAGH,MAAM,CAClBR,GADY,CACP,CAAEY,CAAF,EAAKC,CAAL,KAAa,GAAGD,CAAG,IAAIC,CAAC,GAAGH,CAAG,MAAME,CAAG,IAAI,CAAEC,CAAC,GAAG,CAAN,IAAYH,CAAG,GADnD,EAEZI,IAFY,CAEN,IAFM,CAAd;AAIA,SAAQ,oBAAoBL,KAAO,KAAKE,KAAO,IAA/C;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASI,uBAAT,CAAkCP,MAAlC,EAAqD;AAC3D,SAAOA,MAAM,CAACR,GAAP,CAAY,CAAEC,KAAF,EAASY,CAAT,MAAkB;AACpCG,IAAAA,QAAQ,EAAIH,CAAC,GAAG,GAAN,IAAgBL,MAAM,CAACT,MAAP,GAAgB,CAAhC,CAD0B;AAEpCE,IAAAA;AAFoC,GAAlB,CAAZ,CAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASgB,uBAAT,CACNC,UAAiD,GAAG,EAD9C,EAEL;AACD,SAAOA,UAAU,CAAClB,GAAX,CAAgB,CAAE;AAAEC,IAAAA;AAAF,GAAF,KAAiBA,KAAjC,CAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport type { DuotonePickerProps } from './types';\n\nextend( [ namesPlugin ] );\n\n/**\n * Object representation for a color.\n *\n * @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n */\n\n/**\n * Calculate the brightest and darkest values from a color palette.\n *\n * @param palette Color palette for the theme.\n *\n * @return Tuple of the darkest color and brightest color.\n */\nexport function getDefaultColors(\n\tpalette: DuotonePickerProps[ 'colorPalette' ]\n) {\n\t// A default dark and light color are required.\n\tif ( ! palette || palette.length < 2 ) return [ '#000', '#fff' ];\n\n\treturn palette\n\t\t.map( ( { color } ) => ( {\n\t\t\tcolor,\n\t\t\tbrightness: colord( color ).brightness(),\n\t\t} ) )\n\t\t.reduce(\n\t\t\t( [ min, max ], current ) => {\n\t\t\t\treturn [\n\t\t\t\t\tcurrent.brightness <= min.brightness ? current : min,\n\t\t\t\t\tcurrent.brightness >= max.brightness ? current : max,\n\t\t\t\t];\n\t\t\t},\n\t\t\t[\n\t\t\t\t{ brightness: 1, color: '' },\n\t\t\t\t{ brightness: 0, color: '' },\n\t\t\t]\n\t\t)\n\t\t.map( ( { color } ) => color );\n}\n\n/**\n * Generate a duotone gradient from a list of colors.\n *\n * @param colors CSS color strings.\n * @param angle  CSS gradient angle.\n *\n * @return  CSS gradient string for the duotone swatch.\n */\nexport function getGradientFromCSSColors(\n\tcolors: string[] = [],\n\tangle = '90deg'\n) {\n\tconst l = 100 / colors.length;\n\n\tconst stops = colors\n\t\t.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )\n\t\t.join( ', ' );\n\n\treturn `linear-gradient( ${ angle }, ${ stops } )`;\n}\n\n/**\n * Convert a color array to an array of color stops.\n *\n * @param colors CSS colors array\n *\n * @return Color stop information.\n */\nexport function getColorStopsFromColors( colors: string[] ) {\n\treturn colors.map( ( color, i ) => ( {\n\t\tposition: ( i * 100 ) / ( colors.length - 1 ),\n\t\tcolor,\n\t} ) );\n}\n\n/**\n * Convert a color stop array to an array colors.\n *\n * @param colorStops Color stop information.\n *\n * @return CSS colors array.\n */\nexport function getColorsFromColorStops(\n\tcolorStops: { position: number; color: string }[] = []\n) {\n\treturn colorStops.map( ( { color } ) => color );\n}\n"]}

package/build/elevation/component.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.Elevation = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../ui/context");
 
 var _view = require("../view");
@@ -26,9 +22,9 @@ var _hook = require("./hook");
  */
 function UnconnectedElevation(props, forwardedRef) {
   const elevationProps = (0, _hook.useElevation)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, elevationProps, {
+  return (0, _element.createElement)(_view.View, { ...elevationProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `Elevation` is a core component that renders shadow, using the component

package/build/elevation/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/elevation/component.tsx"],"names":["UnconnectedElevation","props","forwardedRef","elevationProps","Elevation"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,oBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,SAAS,GAAG,6BAAgBJ,oBAAhB,EAAsC,WAAtC,CAAlB;;eAEQI,S","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useElevation } from './hook';\nimport type { ElevationProps } from './types';\n\nfunction UnconnectedElevation(\n\tprops: WordPressComponentProps< ElevationProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst elevationProps = useElevation( props );\n\n\treturn <View { ...elevationProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Elevation` is a core component that renders shadow, using the component\n * system's shadow system.\n *\n * The shadow effect is generated using the `value` prop.\n *\n * ```jsx\n * import {\n *\t__experimentalElevation as Elevation,\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Surface>\n *       <Text>Code is Poetry</Text>\n *       <Elevation value={ 5 } />\n *     </Surface>\n *   );\n * }\n * ```\n */\nexport const Elevation = contextConnect( UnconnectedElevation, 'Elevation' );\n\nexport default Elevation;\n"]}
+{"version":3,"sources":["@wordpress/components/src/elevation/component.tsx"],"names":["UnconnectedElevation","props","forwardedRef","elevationProps","Elevation"],"mappings":";;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,oBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,OAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,SAAS,GAAG,6BAAgBJ,oBAAhB,EAAsC,WAAtC,CAAlB;;eAEQI,S","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useElevation } from './hook';\nimport type { ElevationProps } from './types';\n\nfunction UnconnectedElevation(\n\tprops: WordPressComponentProps< ElevationProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst elevationProps = useElevation( props );\n\n\treturn <View { ...elevationProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Elevation` is a core component that renders shadow, using the component\n * system's shadow system.\n *\n * The shadow effect is generated using the `value` prop.\n *\n * ```jsx\n * import {\n *\t__experimentalElevation as Elevation,\n *\t__experimentalSurface as Surface,\n *\t__experimentalText as Text,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Surface>\n *       <Text>Code is Poetry</Text>\n *       <Elevation value={ 5 } />\n *     </Surface>\n *   );\n * }\n * ```\n */\nexport const Elevation = contextConnect( UnconnectedElevation, 'Elevation' );\n\nexport default Elevation;\n"]}

package/build/external-link/index.js

@@ -9,8 +9,6 @@ exports.default = exports.ExternalLink = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _i18n = require("@wordpress/i18n");
@@ -46,7 +44,7 @@ function UnforwardedExternalLink(props, ref) {
   This constant helps check for on page anchor links,
   to prevent them from being opened in the editor. */
 
-  const isInternalAnchor = !!(href !== null && href !== void 0 && href.startsWith('#'));
+  const isInternalAnchor = !!href?.startsWith('#');
 
   const onClickHandler = event => {
     if (isInternalAnchor) {
@@ -60,14 +58,14 @@ function UnforwardedExternalLink(props, ref) {
 
   return (
     /* eslint-disable react/jsx-no-target-blank */
-    (0, _element.createElement)("a", (0, _extends2.default)({}, additionalProps, {
+    (0, _element.createElement)("a", { ...additionalProps,
       className: classes,
       href: href,
       onClick: onClickHandler,
       target: "_blank",
       rel: optimizedRel,
       ref: ref
-    }), children, (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
+    }, children, (0, _element.createElement)(_visuallyHidden.VisuallyHidden, {
       as: "span"
     },
     /* translators: accessibility text */

package/build/external-link/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/external-link/index.tsx"],"names":["UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","external","ExternalLink"],"mappings":";;;;;;;;;AAUA;;;;AAPA;;AAMA;;AAEA;;AAKA;;AACA;;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAMA,SAASA,uBAAT,CACCC,KADD,EAKCC,GALD,EAME;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,SAAlB;AAA6BC,IAAAA,GAAG,GAAG,EAAnC;AAAuC,OAAGC;AAA1C,MAA8DN,KAApE;AACA,QAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAJ,CACF,CACC,GAAGH,GAAG,CAACI,KAAJ,CAAW,GAAX,CADJ,EAEC,UAFD,EAGC,YAHD,EAIC,UAJD,EAKEC,MALF,CAKUC,OALV,CADE,CADiB,EASnBC,IATmB,CASb,GATa,CAArB;AAUA,QAAMC,OAAO,GAAG,yBAAY,0BAAZ,EAAwCT,SAAxC,CAAhB;AACA;AACD;AACA;;AACC,QAAMU,gBAAgB,GAAG,CAAC,EAAEZ,IAAF,aAAEA,IAAF,eAAEA,IAAI,CAAEa,UAAN,CAAkB,GAAlB,CAAF,CAA1B;;AAEA,QAAMC,cAAc,GACnBC,KADsB,IAElB;AACJ,QAAKH,gBAAL,EAAwB;AACvBG,MAAAA,KAAK,CAACC,cAAN;AACA;;AAED,QAAKlB,KAAK,CAACmB,OAAX,EAAqB;AACpBnB,MAAAA,KAAK,CAACmB,OAAN,CAAeF,KAAf;AACA;AACD,GAVD;;AAYA;AACC;AACA,gEACMX,eADN;AAEC,MAAA,SAAS,EAAGO,OAFb;AAGC,MAAA,IAAI,EAAGX,IAHR;AAIC,MAAA,OAAO,EAAGc,cAJX;AAKC,MAAA,MAAM,EAAC,QALR;AAMC,MAAA,GAAG,EAAGT,YANP;AAOC,MAAA,GAAG,EAAGN;AAPP,QASGE,QATH,EAUC,4BAAC,8BAAD;AAAgB,MAAA,EAAE,EAAC;AAAnB;AAEE;AACA,kBAAI,sBAAJ,CAHF,CAVD,EAgBC,4BAAC,8BAAD;AACC,MAAA,IAAI,EAAGiB,eADR;AAEC,MAAA,SAAS,EAAC;AAFX,MAhBD;AAqBA;;AAvBD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMC,YAAY,GAAG,yBAAYtB,uBAAZ,CAArB;;eAEQsB,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport { external } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { StyledIcon } from './styles/external-link-styles';\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = classnames( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t{\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t</VisuallyHidden>\n\t\t\t<StyledIcon\n\t\t\t\ticon={ external }\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t/>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"]}
+{"version":3,"sources":["@wordpress/components/src/external-link/index.tsx"],"names":["UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","external","ExternalLink"],"mappings":";;;;;;;;;AAUA;;AAPA;;AAMA;;AAEA;;AAKA;;AACA;;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAMA,SAASA,uBAAT,CACCC,KADD,EAKCC,GALD,EAME;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,SAAlB;AAA6BC,IAAAA,GAAG,GAAG,EAAnC;AAAuC,OAAGC;AAA1C,MAA8DN,KAApE;AACA,QAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAJ,CACF,CACC,GAAGH,GAAG,CAACI,KAAJ,CAAW,GAAX,CADJ,EAEC,UAFD,EAGC,YAHD,EAIC,UAJD,EAKEC,MALF,CAKUC,OALV,CADE,CADiB,EASnBC,IATmB,CASb,GATa,CAArB;AAUA,QAAMC,OAAO,GAAG,yBAAY,0BAAZ,EAAwCT,SAAxC,CAAhB;AACA;AACD;AACA;;AACC,QAAMU,gBAAgB,GAAG,CAAC,CAAEZ,IAAI,EAAEa,UAAN,CAAkB,GAAlB,CAA5B;;AAEA,QAAMC,cAAc,GACnBC,KADsB,IAElB;AACJ,QAAKH,gBAAL,EAAwB;AACvBG,MAAAA,KAAK,CAACC,cAAN;AACA;;AAED,QAAKlB,KAAK,CAACmB,OAAX,EAAqB;AACpBnB,MAAAA,KAAK,CAACmB,OAAN,CAAeF,KAAf;AACA;AACD,GAVD;;AAYA;AACC;AACA,0CACMX,eADN;AAEC,MAAA,SAAS,EAAGO,OAFb;AAGC,MAAA,IAAI,EAAGX,IAHR;AAIC,MAAA,OAAO,EAAGc,cAJX;AAKC,MAAA,MAAM,EAAC,QALR;AAMC,MAAA,GAAG,EAAGT,YANP;AAOC,MAAA,GAAG,EAAGN;AAPP,OASGE,QATH,EAUC,4BAAC,8BAAD;AAAgB,MAAA,EAAE,EAAC;AAAnB;AAEE;AACA,kBAAI,sBAAJ,CAHF,CAVD,EAgBC,4BAAC,8BAAD;AACC,MAAA,IAAI,EAAGiB,eADR;AAEC,MAAA,SAAS,EAAC;AAFX,MAhBD;AAqBA;;AAvBD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMC,YAAY,GAAG,yBAAYtB,uBAAZ,CAArB;;eAEQsB,Y","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport { external } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { StyledIcon } from './styles/external-link-styles';\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = classnames( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t{\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t</VisuallyHidden>\n\t\t\t<StyledIcon\n\t\t\t\ticon={ external }\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t/>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"]}

package/build/external-link/index.native.js

@@ -21,11 +21,10 @@ var _icons = require("@wordpress/icons");
 /**
  * WordPress dependencies
  */
-function ExternalLink(_ref) {
-  let {
-    href,
-    children
-  } = _ref;
+function ExternalLink({
+  href,
+  children
+}) {
   return (0, _element.createElement)(_reactNative.TouchableOpacity, {
     onPress: () => _reactNative.Linking.openURL(href),
     accessibilityLabel: (0, _i18n.__)('Open link in a browser')

package/build/external-link/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/external-link/index.native.js"],"names":["ExternalLink","href","children","Linking","openURL","external"],"mappings":";;;;;;;;;;AAIA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIO,SAASA,YAAT,OAA4C;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,SACC,4BAAC,6BAAD;AACC,IAAA,OAAO,EAAG,MAAMC,qBAAQC,OAAR,CAAiBH,IAAjB,CADjB;AAEC,IAAA,kBAAkB,EAAG,cAAI,wBAAJ;AAFtB,KAIC,4BAAC,iBAAD,QAAQC,QAAR,CAJD,EAKC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGG;AAAb,IALD,CADD;AASA;;eAEcL,Y","sourcesContent":["/**\n * External dependencies\n */\n\nimport { TouchableOpacity, Text, Linking } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { external, Icon } from '@wordpress/icons';\n\nexport function ExternalLink( { href, children } ) {\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tonPress={ () => Linking.openURL( href ) }\n\t\t\taccessibilityLabel={ __( 'Open link in a browser' ) }\n\t\t>\n\t\t\t<Text>{ children }</Text>\n\t\t\t<Icon icon={ external } />\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default ExternalLink;\n"]}
+{"version":3,"sources":["@wordpress/components/src/external-link/index.native.js"],"names":["ExternalLink","href","children","Linking","openURL","external"],"mappings":";;;;;;;;;;AAIA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;AAIO,SAASA,YAAT,CAAuB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAAvB,EAA4C;AAClD,SACC,4BAAC,6BAAD;AACC,IAAA,OAAO,EAAG,MAAMC,qBAAQC,OAAR,CAAiBH,IAAjB,CADjB;AAEC,IAAA,kBAAkB,EAAG,cAAI,wBAAJ;AAFtB,KAIC,4BAAC,iBAAD,QAAQC,QAAR,CAJD,EAKC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGG;AAAb,IALD,CADD;AASA;;eAEcL,Y","sourcesContent":["/**\n * External dependencies\n */\n\nimport { TouchableOpacity, Text, Linking } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { external, Icon } from '@wordpress/icons';\n\nexport function ExternalLink( { href, children } ) {\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tonPress={ () => Linking.openURL( href ) }\n\t\t\taccessibilityLabel={ __( 'Open link in a browser' ) }\n\t\t>\n\t\t\t<Text>{ children }</Text>\n\t\t\t<Icon icon={ external } />\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default ExternalLink;\n"]}

package/build/flex/flex/component.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.Flex = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../../ui/context");
 
 var _hook = require("./hook");
@@ -36,9 +32,9 @@ function UnconnectedFlex(props, forwardedRef) {
     value: {
       flexItemDisplay: isColumn ? 'block' : undefined
     }
-  }, (0, _element.createElement)(_view.View, (0, _extends2.default)({}, otherProps, {
+  }, (0, _element.createElement)(_view.View, { ...otherProps,
     ref: forwardedRef
-  }), children));
+  }, children));
 }
 /**
  * `Flex` is a primitive layout component that adaptively aligns child content

package/build/flex/flex/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex/component.tsx"],"names":["UnconnectedFlex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","Flex"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAOA,SAASA,eAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwC,mBAASJ,KAAT,CAA9C;AAEA,SACC,4BAAC,qBAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,4BAAC,UAAD,6BAAWF,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,MACGC,QADH,CAHD,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMK,IAAI,GAAG,6BAAgBR,eAAhB,EAAiC,MAAjC,CAAb;;eAEQQ,I","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\nimport type { FlexProps } from '../types';\n\nfunction UnconnectedFlex(\n\tprops: WordPressComponentProps< FlexProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/**\n * `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n *\n * `Flex` is used with any of its two sub-components, `FlexItem` and\n * `FlexBlock`.\n *\n * ```jsx\n * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>\n *         <p>Code</p>\n *       </FlexItem>\n *       <FlexBlock>\n *         <p>Poetry</p>\n *       </FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const Flex = contextConnect( UnconnectedFlex, 'Flex' );\n\nexport default Flex;\n"]}
+{"version":3,"sources":["@wordpress/components/src/flex/flex/component.tsx"],"names":["UnconnectedFlex","props","forwardedRef","children","isColumn","otherProps","flexItemDisplay","undefined","Flex"],"mappings":";;;;;;;;;AAQA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAOA,SAASA,eAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsB,OAAGC;AAAzB,MAAwC,mBAASJ,KAAT,CAA9C;AAEA,SACC,4BAAC,qBAAD,CAAa,QAAb;AACC,IAAA,KAAK,EAAG;AAAEK,MAAAA,eAAe,EAAEF,QAAQ,GAAG,OAAH,GAAaG;AAAxC;AADT,KAGC,4BAAC,UAAD,OAAWF,UAAX;AAAwB,IAAA,GAAG,EAAGH;AAA9B,KACGC,QADH,CAHD,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMK,IAAI,GAAG,6BAAgBR,eAAhB,EAAiC,MAAjC,CAAb;;eAEQQ,I","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useFlex } from './hook';\nimport { FlexContext } from './../context';\nimport { View } from '../../view';\nimport type { FlexProps } from '../types';\n\nfunction UnconnectedFlex(\n\tprops: WordPressComponentProps< FlexProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { children, isColumn, ...otherProps } = useFlex( props );\n\n\treturn (\n\t\t<FlexContext.Provider\n\t\t\tvalue={ { flexItemDisplay: isColumn ? 'block' : undefined } }\n\t\t>\n\t\t\t<View { ...otherProps } ref={ forwardedRef }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</FlexContext.Provider>\n\t);\n}\n\n/**\n * `Flex` is a primitive layout component that adaptively aligns child content\n * horizontally or vertically. `Flex` powers components like `HStack` and\n * `VStack`.\n *\n * `Flex` is used with any of its two sub-components, `FlexItem` and\n * `FlexBlock`.\n *\n * ```jsx\n * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexItem>\n *         <p>Code</p>\n *       </FlexItem>\n *       <FlexBlock>\n *         <p>Poetry</p>\n *       </FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const Flex = contextConnect( UnconnectedFlex, 'Flex' );\n\nexport default Flex;\n"]}

package/build/flex/flex-block/component.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.FlexBlock = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../../ui/context");
 
 var _view = require("../../view");
@@ -26,9 +22,9 @@ var _hook = require("./hook");
  */
 function UnconnectedFlexBlock(props, forwardedRef) {
   const flexBlockProps = (0, _hook.useFlexBlock)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, flexBlockProps, {
+  return (0, _element.createElement)(_view.View, { ...flexBlockProps,
     ref: forwardedRef
-  }));
+  });
 }
 /**
  * `FlexBlock` is a primitive layout component that adaptively resizes content

package/build/flex/flex-block/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/flex/flex-block/component.tsx"],"names":["UnconnectedFlexBlock","props","forwardedRef","flexBlockProps","FlexBlock"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AAEA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,oBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,SAAS,GAAG,6BAAgBJ,oBAAhB,EAAsC,WAAtC,CAAlB;;eAEQI,S","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport type { FlexBlockProps } from '../types';\nimport { useFlexBlock } from './hook';\n\nfunction UnconnectedFlexBlock(\n\tprops: WordPressComponentProps< FlexBlockProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexBlock` is a primitive layout component that adaptively resizes content\n * within layout containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexBlock } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexBlock>...</FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexBlock = contextConnect( UnconnectedFlexBlock, 'FlexBlock' );\n\nexport default FlexBlock;\n"]}
+{"version":3,"sources":["@wordpress/components/src/flex/flex-block/component.tsx"],"names":["UnconnectedFlexBlock","props","forwardedRef","flexBlockProps","FlexBlock"],"mappings":";;;;;;;;;AAQA;;AACA;;AAEA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,oBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,cAAc,GAAG,wBAAcF,KAAd,CAAvB;AAEA,SAAO,4BAAC,UAAD,OAAWE,cAAX;AAA4B,IAAA,GAAG,EAAGD;AAAlC,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,SAAS,GAAG,6BAAgBJ,oBAAhB,EAAsC,WAAtC,CAAlB;;eAEQI,S","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport type { FlexBlockProps } from '../types';\nimport { useFlexBlock } from './hook';\n\nfunction UnconnectedFlexBlock(\n\tprops: WordPressComponentProps< FlexBlockProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst flexBlockProps = useFlexBlock( props );\n\n\treturn <View { ...flexBlockProps } ref={ forwardedRef } />;\n}\n\n/**\n * `FlexBlock` is a primitive layout component that adaptively resizes content\n * within layout containers like `Flex`.\n *\n * ```jsx\n * import { Flex, FlexBlock } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <Flex>\n *       <FlexBlock>...</FlexBlock>\n *     </Flex>\n *   );\n * }\n * ```\n */\nexport const FlexBlock = contextConnect( UnconnectedFlexBlock, 'FlexBlock' );\n\nexport default FlexBlock;\n"]}