@wordpress/components 19.0.0 → 19.0.4

package/build/range-control/styles/range-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.js"],"names":["rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","colorProp","COLORS","ui","borderFocus","wrapperMargin","marks","marginBottom","Wrapper","blue","medium","focus","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","lightGray","Rail","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","darkGray","MarkLabel","thumbColor","css","ThumbWrapper","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","transform","InputNumber","NumberControl","ActionRightWrapper"],"mappings":";;;;;;;;;;;AAIA;;AAMA;;AACA;;AACA;;;;AAEA,MAAMA,gBAAgB,GAAG,EAAzB;AACA,MAAMC,UAAU,GAAG,CAAnB;;AACA,MAAMC,WAAW,GAAG,mBACnB,gBAAK;AAAEC,EAAAA,MAAM,EAAEH,gBAAV;AAA4BI,EAAAA,SAAS,EAAEJ;AAAvC,CAAL,q8SADD;;AAEA,MAAMK,SAAS,GAAG,EAAlB;AAEO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;;;AAYP,MAAMC,YAAY,GAAG,CAAE;AAAEC,EAAAA,KAAK,EAAEC,SAAS,GAAGC,cAAOC,EAAP,CAAUC;AAA/B,CAAF,KAAoD;AACxE,sBAAO,gBAAK;AAAEJ,IAAAA,KAAK,EAAEC;AAAT,GAAL,s8SAAP;AACA,CAFD;;AAGA,MAAMI,aAAa,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,kBACrB,gBAAK;AAAEC,EAAAA,YAAY,EAAED,KAAK,GAAG,EAAH,GAAQ;AAA7B,CAAL,u8SADD;;AAGO,MAAME,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mCAETN,cAAOO,IAAP,CAAYC,MAAZ,CAAmBC,KAFV,yDAQhBZ,YARgB,OAShBL,WATgB,OAUhBW,aAVgB,64SAAb;;AAaA,MAAMO,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACdnB,UADc,SAG1B,gBAAK;AAAEoB,EAAAA,WAAW,EAAE;AAAf,CAAL,CAH0B,64SAAvB;;AAMA,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,kBACbrB,UADa,SAGzB,gBAAK;AAAEsB,EAAAA,UAAU,EAAE;AAAd,CAAL,CAHyB,64SAAtB;;;AAMP,MAAMC,mBAAmB,GAAG,CAAE;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAF,KAA+B;AAC1D,MAAIC,UAAU,GAAGD,SAAS,IAAI,IAA9B;;AAEA,MAAKD,QAAL,EAAgB;AACfE,IAAAA,UAAU,GAAGjB,cAAOkB,SAAP,CAAkB,GAAlB,CAAb;AACA;;AAED,sBAAO,gBAAK;AACXD,IAAAA;AADW,GAAL,68SAAP;AAGA,CAVD;;AAYO,MAAME,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wBACKnB,cAAOkB,SAAP,CAAkB,GAAlB,CADL,qFAOL3B,UAPK,sCASD,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CATnC,6BAWEA,UAXF,SAabuB,mBAba,64SAAV;;;AAgBP,MAAMM,oBAAoB,GAAG,CAAE;AAAEL,EAAAA,QAAF;AAAYM,EAAAA;AAAZ,CAAF,KAAgC;AAC5D,MAAIJ,UAAU,GAAGI,UAAU,IAAI,cAA/B;;AAEA,MAAKN,QAAL,EAAgB;AACfE,IAAAA,UAAU,GAAGjB,cAAOkB,SAAP,CAAkB,GAAlB,CAAb;AACA;;AAED,sBAAO,gBAAK;AACXD,IAAAA;AADW,GAAL,88SAAP;AAGA,CAVD;;AAYO,MAAMK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,mDAEC/B,UAFD,sCAINA,UAJM,wEAQF,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CARlC,eAWd6B,oBAXc,64SAAX;;AAcA,MAAMG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;;AASP,MAAMC,QAAQ,GAAG,CAAE;AAAET,EAAAA,QAAF;AAAYU,EAAAA;AAAZ,CAAF,KAA8B;AAC9C,MAAIC,eAAe,GAAGD,QAAQ,GAAG,cAAH,GAAoBzB,cAAOkB,SAAP,CAAkB,GAAlB,CAAlD;;AAEA,MAAKH,QAAL,EAAgB;AACfW,IAAAA,eAAe,GAAG1B,cAAOkB,SAAP,CAAkB,GAAlB,CAAlB;AACA;;AAED,sBAAO,gBAAK;AACXQ,IAAAA;AADW,GAAL,k8SAAP;AAGA,CAVD;;AAYO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,oCAELhC,SAFK,qDAQb6B,QARa,64SAAV;;;AAWP,MAAMI,aAAa,GAAG,CAAE;AAAEH,EAAAA;AAAF,CAAF,KAAoB;AACzC,sBAAO,gBAAK;AACX3B,IAAAA,KAAK,EAAE2B,QAAQ,GAAGzB,cAAO6B,QAAP,CAAiB,GAAjB,CAAH,GAA4B7B,cAAOkB,SAAP,CAAkB,GAAlB;AADhC,GAAL,u8SAAP;AAGA,CAJD;;AAMO,MAAMY,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,mCAEX9B,cAAOkB,SAAP,CAAkB,GAAlB,CAFW,wGAUlBU,aAVkB,64SAAf;;;;;;;;;;;;;AAaP,MAAMG,UAAU,GAAG,CAAE;AAAEhB,EAAAA;AAAF,CAAF,KAClBA,QAAQ,oBACLiB,UADK,uBAEgBhC,cAAOkB,SAAP,CAAkB,GAAlB,CAFhB,o9SADT;;AASO,MAAMe,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,oEAIbtC,SAJa,2CAMT,CAAEL,gBAAgB,GAAGK,SAArB,IAAmC,CAN1B,sFAYdA,SAZc,yDAgBrBoC,UAhBqB,OAiBrB,gBAAK;AAAElB,EAAAA,UAAU,EAAE,CAAC;AAAf,CAAL,CAjBqB,64SAAlB;;;AAoBP,MAAMqB,UAAU,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAqB;AACvC,SAAOA,SAAS,oBACbH,UADa,kIAQDrC,SAAS,GAAG,CARX,eASFA,SAAS,GAAG,CATV,q+SAcb,EAdH;AAeA,CAhBD;;AAkBO,MAAMyC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,sIAUdL,UAVc,OAWdG,UAXc,64SAAX;;AAcA,MAAMG,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,uFAMR1C,SAAS,GAAG,CANJ,mFAYCA,SAZD,i5SAAhB;;;AAeP,MAAM2C,WAAW,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAgB;AACnC,sBAAO,gBAAK;AACXC,IAAAA,OAAO,EAAED,IAAI,GAAG,CAAH,GAAO;AADT,GAAL,q8SAAP;AAGA,CAJD;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAME,eAAe,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAoB;AAC3C,QAAMC,QAAQ,GAAGD,QAAQ,KAAK,QAA9B;;AAEA,MAAKC,QAAL,EAAgB;AACf;AAGA;;AAED;AAGA,CAZD;;AAcO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,+RAiBhBN,WAjBgB,OAkBhBG,eAlBgB,OAmBhB,yBAAc,YAAd,CAnBgB,OAoBhB,gBACF;AAAEI,EAAAA,SAAS,EAAE;AAAb,CADE,EAEF;AAAEA,EAAAA,SAAS,EAAE;AAAb,CAFE,CApBgB,64SAAb,C,CA0BP;AACA;;;AACO,MAAMC,WAAW,GAAG,iCAAQC,sBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,kFAKb,kBAAO,EAAP,CALa,uCAQnBvD,WARmB,QAWpB,gBAAK;AAAEqB,EAAAA,UAAU,EAAG,GAAG,kBAAO,CAAP,CAAY;AAA9B,CAAL,CAXoB,64SAAjB;;AAcA,MAAMmC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,6FAQ1BxD,WAR0B,QAW3B,gBAAK;AAAEqB,EAAAA,UAAU,EAAE;AAAd,CAAL,CAX2B,64SAAxB","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\tbox-sizing: border-box;\n\talign-items: flex-start;\n\tdisplay: inline-flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color: colorProp = COLORS.ui.borderFocus } ) => {\n\treturn css( { color: colorProp } );\n};\nconst wrapperMargin = ( { marks } ) =>\n\tcss( { marginBottom: marks ? 16 : null } );\n\nexport const Wrapper = styled.div`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.blue.medium.focus };\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 16 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor } ) => {\n\tlet background = railColor || null;\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.lightGray[ 600 ] };\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor } ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\tbox-sizing: border-box;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled } ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\tbox-sizing: border-box;\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled } ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.lightGray[ 600 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled } ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.lightGray[ 800 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\ttransform: translateX( 4.5px );\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n`;\n\nconst thumbFocus = ( { isFocused } ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span`\n\talign-items: center;\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show } ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position } ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack\nexport const InputNumber = styled( NumberControl )`\n\tbox-sizing: border-box;\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.js"],"names":["rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","colorProp","COLORS","ui","borderFocus","wrapperMargin","marks","marginBottom","Wrapper","blue","medium","focus","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","lightGray","Rail","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","darkGray","MarkLabel","thumbColor","css","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","NumberControl","ActionRightWrapper"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\tbox-sizing: border-box;\n\talign-items: flex-start;\n\tdisplay: inline-flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color: colorProp = COLORS.ui.borderFocus } ) => {\n\treturn css( { color: colorProp } );\n};\nconst wrapperMargin = ( { marks } ) =>\n\tcss( { marginBottom: marks ? 16 : null } );\n\nexport const Wrapper = styled.div`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.blue.medium.focus };\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 16 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor } ) => {\n\tlet background = railColor || null;\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.lightGray[ 600 ] };\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor } ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\tbox-sizing: border-box;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled } ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\tbox-sizing: border-box;\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled } ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.lightGray[ 600 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled } ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.lightGray[ 800 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused } ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span`\n\talign-items: center;\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show } ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position } ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack\nexport const InputNumber = styled( NumberControl )`\n\tbox-sizing: border-box;\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}

package/build/range-control/tooltip.js

@@ -28,17 +28,18 @@ var _rangeControlStyles = require("./styles/range-control-styles");
 /**
  * Internal dependencies
  */
-function SimpleTooltip({
-  className,
-  inputRef,
-  tooltipPosition,
-  show = false,
-  style = {},
-  value = 0,
-  renderTooltipContent = v => v,
-  zIndex = 100,
-  ...restProps
-}) {
+function SimpleTooltip(_ref) {
+  let {
+    className,
+    inputRef,
+    tooltipPosition,
+    show = false,
+    style = {},
+    value = 0,
+    renderTooltipContent = v => v,
+    zIndex = 100,
+    ...restProps
+  } = _ref;
   const position = useTooltipPosition({
     inputRef,
     tooltipPosition
@@ -57,10 +58,11 @@ function SimpleTooltip({
   }), renderTooltipContent(value));
 }
 
-function useTooltipPosition({
-  inputRef,
-  tooltipPosition
-}) {
+function useTooltipPosition(_ref2) {
+  let {
+    inputRef,
+    tooltipPosition
+  } = _ref2;
   const [position, setPosition] = (0, _element.useState)();
   const setTooltipPosition = (0, _element.useCallback)(() => {
     if (inputRef && inputRef.current) {

package/build/range-control/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/tooltip.js"],"names":["SimpleTooltip","className","inputRef","tooltipPosition","show","style","value","renderTooltipContent","v","zIndex","restProps","position","useTooltipPosition","classes","styles","setPosition","setTooltipPosition","current","window","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AASA;;;;AALA;;AAUA;;AAdA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,aAAT,CAAwB;AACtCC,EAAAA,SADsC;AAEtCC,EAAAA,QAFsC;AAGtCC,EAAAA,eAHsC;AAItCC,EAAAA,IAAI,GAAG,KAJ+B;AAKtCC,EAAAA,KAAK,GAAG,EAL8B;AAMtCC,EAAAA,KAAK,GAAG,CAN8B;AAOtCC,EAAAA,oBAAoB,GAAKC,CAAF,IAASA,CAPM;AAQtCC,EAAAA,MAAM,GAAG,GAR6B;AAStC,KAAGC;AATmC,CAAxB,EAUX;AACH,QAAMC,QAAQ,GAAGC,kBAAkB,CAAE;AAAEV,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAF,CAAnC;AACA,QAAMU,OAAO,GAAG,yBAAY,2BAAZ,EAAyCZ,SAAzC,CAAhB;AACA,QAAMa,MAAM,GAAG,EACd,GAAGT,KADW;AAEdI,IAAAA;AAFc,GAAf;AAKA,SACC,4BAAC,2BAAD,6BACMC,SADN;AAEC,mBAAcN,IAFf;AAGC,IAAA,SAAS,EAAGS,OAHb;AAIC,IAAA,QAAQ,EAAGF,QAJZ;AAKC,IAAA,IAAI,EAAGP,IALR;AAMC,IAAA,IAAI,EAAC,SANN;AAOC,IAAA,KAAK,EAAGU;AAPT,MASGP,oBAAoB,CAAED,KAAF,CATvB,CADD;AAaA;;AAED,SAASM,kBAAT,CAA6B;AAAEV,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAA7B,EAA6D;AAC5D,QAAM,CAAEQ,QAAF,EAAYI,WAAZ,IAA4B,wBAAlC;AAEA,QAAMC,kBAAkB,GAAG,0BAAa,MAAM;AAC7C,QAAKd,QAAQ,IAAIA,QAAQ,CAACe,OAA1B,EAAoC;AACnCF,MAAAA,WAAW,CAAEZ,eAAF,CAAX;AACA;AACD,GAJ0B,EAIxB,CAAEA,eAAF,CAJwB,CAA3B;AAMA,0BAAW,MAAM;AAChBa,IAAAA,kBAAkB;AAClB,GAFD,EAEG,CAAEA,kBAAF,CAFH;AAIA,0BAAW,MAAM;AAChBE,IAAAA,MAAM,CAACC,gBAAP,CAAyB,QAAzB,EAAmCH,kBAAnC;AAEA,WAAO,MAAM;AACZE,MAAAA,MAAM,CAACE,mBAAP,CAA4B,QAA5B,EAAsCJ,kBAAtC;AACA,KAFD;AAGA,GAND;AAQA,SAAOL,QAAP;AACA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Tooltip } from './styles/range-control-styles';\n\nexport default function SimpleTooltip( {\n\tclassName,\n\tinputRef,\n\ttooltipPosition,\n\tshow = false,\n\tstyle = {},\n\tvalue = 0,\n\trenderTooltipContent = ( v ) => v,\n\tzIndex = 100,\n\t...restProps\n} ) {\n\tconst position = useTooltipPosition( { inputRef, tooltipPosition } );\n\tconst classes = classnames( 'components-simple-tooltip', className );\n\tconst styles = {\n\t\t...style,\n\t\tzIndex,\n\t};\n\n\treturn (\n\t\t<Tooltip\n\t\t\t{ ...restProps }\n\t\t\taria-hidden={ show }\n\t\t\tclassName={ classes }\n\t\t\tposition={ position }\n\t\t\tshow={ show }\n\t\t\trole=\"tooltip\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ renderTooltipContent( value ) }\n\t\t</Tooltip>\n\t);\n}\n\nfunction useTooltipPosition( { inputRef, tooltipPosition } ) {\n\tconst [ position, setPosition ] = useState();\n\n\tconst setTooltipPosition = useCallback( () => {\n\t\tif ( inputRef && inputRef.current ) {\n\t\t\tsetPosition( tooltipPosition );\n\t\t}\n\t}, [ tooltipPosition ] );\n\n\tuseEffect( () => {\n\t\tsetTooltipPosition();\n\t}, [ setTooltipPosition ] );\n\n\tuseEffect( () => {\n\t\twindow.addEventListener( 'resize', setTooltipPosition );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'resize', setTooltipPosition );\n\t\t};\n\t} );\n\n\treturn position;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/tooltip.js"],"names":["SimpleTooltip","className","inputRef","tooltipPosition","show","style","value","renderTooltipContent","v","zIndex","restProps","position","useTooltipPosition","classes","styles","setPosition","setTooltipPosition","current","window","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AASA;;;;AALA;;AAUA;;AAdA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,aAAT,OAUX;AAAA,MAVmC;AACtCC,IAAAA,SADsC;AAEtCC,IAAAA,QAFsC;AAGtCC,IAAAA,eAHsC;AAItCC,IAAAA,IAAI,GAAG,KAJ+B;AAKtCC,IAAAA,KAAK,GAAG,EAL8B;AAMtCC,IAAAA,KAAK,GAAG,CAN8B;AAOtCC,IAAAA,oBAAoB,GAAKC,CAAF,IAASA,CAPM;AAQtCC,IAAAA,MAAM,GAAG,GAR6B;AAStC,OAAGC;AATmC,GAUnC;AACH,QAAMC,QAAQ,GAAGC,kBAAkB,CAAE;AAAEV,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAF,CAAnC;AACA,QAAMU,OAAO,GAAG,yBAAY,2BAAZ,EAAyCZ,SAAzC,CAAhB;AACA,QAAMa,MAAM,GAAG,EACd,GAAGT,KADW;AAEdI,IAAAA;AAFc,GAAf;AAKA,SACC,4BAAC,2BAAD,6BACMC,SADN;AAEC,mBAAcN,IAFf;AAGC,IAAA,SAAS,EAAGS,OAHb;AAIC,IAAA,QAAQ,EAAGF,QAJZ;AAKC,IAAA,IAAI,EAAGP,IALR;AAMC,IAAA,IAAI,EAAC,SANN;AAOC,IAAA,KAAK,EAAGU;AAPT,MASGP,oBAAoB,CAAED,KAAF,CATvB,CADD;AAaA;;AAED,SAASM,kBAAT,QAA6D;AAAA,MAAhC;AAAEV,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAgC;AAC5D,QAAM,CAAEQ,QAAF,EAAYI,WAAZ,IAA4B,wBAAlC;AAEA,QAAMC,kBAAkB,GAAG,0BAAa,MAAM;AAC7C,QAAKd,QAAQ,IAAIA,QAAQ,CAACe,OAA1B,EAAoC;AACnCF,MAAAA,WAAW,CAAEZ,eAAF,CAAX;AACA;AACD,GAJ0B,EAIxB,CAAEA,eAAF,CAJwB,CAA3B;AAMA,0BAAW,MAAM;AAChBa,IAAAA,kBAAkB;AAClB,GAFD,EAEG,CAAEA,kBAAF,CAFH;AAIA,0BAAW,MAAM;AAChBE,IAAAA,MAAM,CAACC,gBAAP,CAAyB,QAAzB,EAAmCH,kBAAnC;AAEA,WAAO,MAAM;AACZE,MAAAA,MAAM,CAACE,mBAAP,CAA4B,QAA5B,EAAsCJ,kBAAtC;AACA,KAFD;AAGA,GAND;AAQA,SAAOL,QAAP;AACA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { Tooltip } from './styles/range-control-styles';\n\nexport default function SimpleTooltip( {\n\tclassName,\n\tinputRef,\n\ttooltipPosition,\n\tshow = false,\n\tstyle = {},\n\tvalue = 0,\n\trenderTooltipContent = ( v ) => v,\n\tzIndex = 100,\n\t...restProps\n} ) {\n\tconst position = useTooltipPosition( { inputRef, tooltipPosition } );\n\tconst classes = classnames( 'components-simple-tooltip', className );\n\tconst styles = {\n\t\t...style,\n\t\tzIndex,\n\t};\n\n\treturn (\n\t\t<Tooltip\n\t\t\t{ ...restProps }\n\t\t\taria-hidden={ show }\n\t\t\tclassName={ classes }\n\t\t\tposition={ position }\n\t\t\tshow={ show }\n\t\t\trole=\"tooltip\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ renderTooltipContent( value ) }\n\t\t</Tooltip>\n\t);\n}\n\nfunction useTooltipPosition( { inputRef, tooltipPosition } ) {\n\tconst [ position, setPosition ] = useState();\n\n\tconst setTooltipPosition = useCallback( () => {\n\t\tif ( inputRef && inputRef.current ) {\n\t\t\tsetPosition( tooltipPosition );\n\t\t}\n\t}, [ tooltipPosition ] );\n\n\tuseEffect( () => {\n\t\tsetTooltipPosition();\n\t}, [ setTooltipPosition ] );\n\n\tuseEffect( () => {\n\t\twindow.addEventListener( 'resize', setTooltipPosition );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'resize', setTooltipPosition );\n\t\t};\n\t} );\n\n\treturn position;\n}\n"]}

package/build/range-control/utils.js

@@ -56,12 +56,13 @@ function floatClamp(value, min, max) {
  */
 
 
-function useControlledRangeValue({
-  min,
-  max,
-  value: valueProp,
-  initial
-}) {
+function useControlledRangeValue(_ref) {
+  let {
+    min,
+    max,
+    value: valueProp,
+    initial
+  } = _ref;
   const [state, setInternalState] = (0, _hooks.useControlledState)(floatClamp(valueProp, min, max), {
     initial,
     fallback: null
@@ -90,13 +91,14 @@ function useControlledRangeValue({
  */
 
 
-function useDebouncedHoverInteraction({
-  onHide = _lodash.noop,
-  onMouseLeave = _lodash.noop,
-  onMouseMove = _lodash.noop,
-  onShow = _lodash.noop,
-  timeout = 300
-}) {
+function useDebouncedHoverInteraction(_ref2) {
+  let {
+    onHide = _lodash.noop,
+    onMouseLeave = _lodash.noop,
+    onMouseMove = _lodash.noop,
+    onShow = _lodash.noop,
+    timeout = 300
+  } = _ref2;
   const [show, setShow] = (0, _element.useState)(false);
   const timeoutRef = (0, _element.useRef)();
   const setDebouncedTimeout = (0, _element.useCallback)(callback => {

package/build/range-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/utils.js"],"names":["floatClamp","value","min","max","parseFloat","useControlledRangeValue","valueProp","initial","state","setInternalState","fallback","setState","nextValue","useDebouncedHoverInteraction","onHide","noop","onMouseLeave","onMouseMove","onShow","timeout","show","setShow","timeoutRef","setDebouncedTimeout","callback","window","clearTimeout","current","setTimeout","handleOnMouseMove","event","handleOnMouseLeave"],"mappings":";;;;;;;;;AAIA;;AAKA;;AAKA;;AAdA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,UAAT,CAAqBC,KAArB,EAA4BC,GAA5B,EAAiCC,GAAjC,EAAuC;AAC7C,MAAK,OAAOF,KAAP,KAAiB,QAAtB,EAAiC;AAChC,WAAO,IAAP;AACA;;AAED,SAAOG,UAAU,CAAE,mBAAOH,KAAP,EAAcC,GAAd,EAAmBC,GAAnB,CAAF,CAAjB;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASE,uBAAT,CAAkC;AACxCH,EAAAA,GADwC;AAExCC,EAAAA,GAFwC;AAGxCF,EAAAA,KAAK,EAAEK,SAHiC;AAIxCC,EAAAA;AAJwC,CAAlC,EAKH;AACH,QAAM,CAAEC,KAAF,EAASC,gBAAT,IAA8B,+BACnCT,UAAU,CAAEM,SAAF,EAAaJ,GAAb,EAAkBC,GAAlB,CADyB,EAEnC;AAAEI,IAAAA,OAAF;AAAWG,IAAAA,QAAQ,EAAE;AAArB,GAFmC,CAApC;AAKA,QAAMC,QAAQ,GAAG,0BACdC,SAAF,IAAiB;AAChB,QAAKA,SAAS,KAAK,IAAnB,EAA0B;AACzBH,MAAAA,gBAAgB,CAAE,IAAF,CAAhB;AACA,KAFD,MAEO;AACNA,MAAAA,gBAAgB,CAAET,UAAU,CAAEY,SAAF,EAAaV,GAAb,EAAkBC,GAAlB,CAAZ,CAAhB;AACA;AACD,GAPe,EAQhB,CAAED,GAAF,EAAOC,GAAP,CARgB,CAAjB;AAWA,SAAO,CAAEK,KAAF,EAASG,QAAT,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASE,4BAAT,CAAuC;AAC7CC,EAAAA,MAAM,GAAGC,YADoC;AAE7CC,EAAAA,YAAY,GAAGD,YAF8B;AAG7CE,EAAAA,WAAW,GAAGF,YAH+B;AAI7CG,EAAAA,MAAM,GAAGH,YAJoC;AAK7CI,EAAAA,OAAO,GAAG;AALmC,CAAvC,EAMH;AACH,QAAM,CAAEC,IAAF,EAAQC,OAAR,IAAoB,uBAAU,KAAV,CAA1B;AACA,QAAMC,UAAU,GAAG,sBAAnB;AAEA,QAAMC,mBAAmB,GAAG,0BACzBC,QAAF,IAAgB;AACfC,IAAAA,MAAM,CAACC,YAAP,CAAqBJ,UAAU,CAACK,OAAhC;AAEAL,IAAAA,UAAU,CAACK,OAAX,GAAqBC,UAAU,CAAEJ,QAAF,EAAYL,OAAZ,CAA/B;AACA,GAL0B,EAM3B,CAAEA,OAAF,CAN2B,CAA5B;AASA,QAAMU,iBAAiB,GAAG,0BAAeC,KAAF,IAAa;AACnDb,IAAAA,WAAW,CAAEa,KAAF,CAAX;AAEAP,IAAAA,mBAAmB,CAAE,MAAM;AAC1B,UAAK,CAAEH,IAAP,EAAc;AACbC,QAAAA,OAAO,CAAE,IAAF,CAAP;AACAH,QAAAA,MAAM;AACN;AACD,KALkB,CAAnB;AAMA,GATyB,EASvB,EATuB,CAA1B;AAWA,QAAMa,kBAAkB,GAAG,0BAAeD,KAAF,IAAa;AACpDd,IAAAA,YAAY,CAAEc,KAAF,CAAZ;AAEAP,IAAAA,mBAAmB,CAAE,MAAM;AAC1BF,MAAAA,OAAO,CAAE,KAAF,CAAP;AACAP,MAAAA,MAAM;AACN,KAHkB,CAAnB;AAIA,GAP0B,EAOxB,EAPwB,CAA3B;AASA,0BAAW,MAAM;AAChB,WAAO,MAAM;AACZW,MAAAA,MAAM,CAACC,YAAP,CAAqBJ,UAAU,CAACK,OAAhC;AACA,KAFD;AAGA,GAJD;AAMA,SAAO;AACNV,IAAAA,WAAW,EAAEY,iBADP;AAENb,IAAAA,YAAY,EAAEe;AAFR,GAAP;AAIA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { clamp, noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useControlledState } from '../utils/hooks';\n\n/**\n * A float supported clamp function for a specific value.\n *\n * @param {number|null} value The value to clamp.\n * @param {number}      min   The minimum value.\n * @param {number}      max   The maximum value.\n *\n * @return {number} A (float) number\n */\nexport function floatClamp( value, min, max ) {\n\tif ( typeof value !== 'number' ) {\n\t\treturn null;\n\t}\n\n\treturn parseFloat( clamp( value, min, max ) );\n}\n\n/**\n * Hook to store a clamped value, derived from props.\n *\n * @param {Object} settings         Hook settings.\n * @param {number} settings.min     The minimum value.\n * @param {number} settings.max     The maximum value.\n * @param {number} settings.value   The current value.\n * @param {any}    settings.initial The initial value.\n *\n * @return {[*, Function]} The controlled value and the value setter.\n */\nexport function useControlledRangeValue( {\n\tmin,\n\tmax,\n\tvalue: valueProp,\n\tinitial,\n} ) {\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{ initial, fallback: null }\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue ) => {\n\t\t\tif ( nextValue === null ) {\n\t\t\t\tsetInternalState( null );\n\t\t\t} else {\n\t\t\t\tsetInternalState( floatClamp( nextValue, min, max ) );\n\t\t\t}\n\t\t},\n\t\t[ min, max ]\n\t);\n\n\treturn [ state, setState ];\n}\n\n/**\n * Hook to encapsulate the debouncing \"hover\" to better handle the showing\n * and hiding of the Tooltip.\n *\n * @param {Object}   settings                     Hook settings.\n * @param {Function} [settings.onShow=noop]       A callback function invoked when the element is shown.\n * @param {Function} [settings.onHide=noop]       A callback function invoked when the element is hidden.\n * @param {Function} [settings.onMouseMove=noop]  A callback function invoked when the mouse is moved.\n * @param {Function} [settings.onMouseLeave=noop] A callback function invoked when the mouse is moved out of the element.\n * @param {number}   [settings.timeout=300]       Timeout before the element is shown or hidden.\n *\n * @return {Object} Bound properties for use on a React.Node.\n */\nexport function useDebouncedHoverInteraction( {\n\tonHide = noop,\n\tonMouseLeave = noop,\n\tonMouseMove = noop,\n\tonShow = noop,\n\ttimeout = 300,\n} ) {\n\tconst [ show, setShow ] = useState( false );\n\tconst timeoutRef = useRef();\n\n\tconst setDebouncedTimeout = useCallback(\n\t\t( callback ) => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\n\t\t\ttimeoutRef.current = setTimeout( callback, timeout );\n\t\t},\n\t\t[ timeout ]\n\t);\n\n\tconst handleOnMouseMove = useCallback( ( event ) => {\n\t\tonMouseMove( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tif ( ! show ) {\n\t\t\t\tsetShow( true );\n\t\t\t\tonShow();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\tconst handleOnMouseLeave = useCallback( ( event ) => {\n\t\tonMouseLeave( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tsetShow( false );\n\t\t\tonHide();\n\t\t} );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t};\n\t} );\n\n\treturn {\n\t\tonMouseMove: handleOnMouseMove,\n\t\tonMouseLeave: handleOnMouseLeave,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/utils.js"],"names":["floatClamp","value","min","max","parseFloat","useControlledRangeValue","valueProp","initial","state","setInternalState","fallback","setState","nextValue","useDebouncedHoverInteraction","onHide","noop","onMouseLeave","onMouseMove","onShow","timeout","show","setShow","timeoutRef","setDebouncedTimeout","callback","window","clearTimeout","current","setTimeout","handleOnMouseMove","event","handleOnMouseLeave"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { clamp, noop } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useControlledState } from '../utils/hooks';\n\n/**\n * A float supported clamp function for a specific value.\n *\n * @param {number|null} value The value to clamp.\n * @param {number}      min   The minimum value.\n * @param {number}      max   The maximum value.\n *\n * @return {number} A (float) number\n */\nexport function floatClamp( value, min, max ) {\n\tif ( typeof value !== 'number' ) {\n\t\treturn null;\n\t}\n\n\treturn parseFloat( clamp( value, min, max ) );\n}\n\n/**\n * Hook to store a clamped value, derived from props.\n *\n * @param {Object} settings         Hook settings.\n * @param {number} settings.min     The minimum value.\n * @param {number} settings.max     The maximum value.\n * @param {number} settings.value   The current value.\n * @param {any}    settings.initial The initial value.\n *\n * @return {[*, Function]} The controlled value and the value setter.\n */\nexport function useControlledRangeValue( {\n\tmin,\n\tmax,\n\tvalue: valueProp,\n\tinitial,\n} ) {\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{ initial, fallback: null }\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue ) => {\n\t\t\tif ( nextValue === null ) {\n\t\t\t\tsetInternalState( null );\n\t\t\t} else {\n\t\t\t\tsetInternalState( floatClamp( nextValue, min, max ) );\n\t\t\t}\n\t\t},\n\t\t[ min, max ]\n\t);\n\n\treturn [ state, setState ];\n}\n\n/**\n * Hook to encapsulate the debouncing \"hover\" to better handle the showing\n * and hiding of the Tooltip.\n *\n * @param {Object}   settings                     Hook settings.\n * @param {Function} [settings.onShow=noop]       A callback function invoked when the element is shown.\n * @param {Function} [settings.onHide=noop]       A callback function invoked when the element is hidden.\n * @param {Function} [settings.onMouseMove=noop]  A callback function invoked when the mouse is moved.\n * @param {Function} [settings.onMouseLeave=noop] A callback function invoked when the mouse is moved out of the element.\n * @param {number}   [settings.timeout=300]       Timeout before the element is shown or hidden.\n *\n * @return {Object} Bound properties for use on a React.Node.\n */\nexport function useDebouncedHoverInteraction( {\n\tonHide = noop,\n\tonMouseLeave = noop,\n\tonMouseMove = noop,\n\tonShow = noop,\n\ttimeout = 300,\n} ) {\n\tconst [ show, setShow ] = useState( false );\n\tconst timeoutRef = useRef();\n\n\tconst setDebouncedTimeout = useCallback(\n\t\t( callback ) => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\n\t\t\ttimeoutRef.current = setTimeout( callback, timeout );\n\t\t},\n\t\t[ timeout ]\n\t);\n\n\tconst handleOnMouseMove = useCallback( ( event ) => {\n\t\tonMouseMove( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tif ( ! show ) {\n\t\t\t\tsetShow( true );\n\t\t\t\tonShow();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\tconst handleOnMouseLeave = useCallback( ( event ) => {\n\t\tonMouseLeave( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tsetShow( false );\n\t\t\tonHide();\n\t\t} );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t};\n\t} );\n\n\treturn {\n\t\tonMouseMove: handleOnMouseMove,\n\t\tonMouseLeave: handleOnMouseLeave,\n\t};\n}\n"]}

package/build/resizable-box/index.js

@@ -61,14 +61,15 @@ const HANDLE_STYLES = {
   bottomLeft: HANDLE_STYLES_OVERRIDES
 };
 
-function ResizableBox({
-  className,
-  children,
-  showHandle = true,
-  __experimentalShowTooltip: showTooltip = false,
-  __experimentalTooltipProps: tooltipProps = {},
-  ...props
-}, ref) {
+function ResizableBox(_ref, ref) {
+  let {
+    className,
+    children,
+    showHandle = true,
+    __experimentalShowTooltip: showTooltip = false,
+    __experimentalTooltipProps: tooltipProps = {},
+    ...props
+  } = _ref;
   return (0, _element.createElement)(_reResizable.Resizable, (0, _extends2.default)({
     className: (0, _classnames.default)('components-resizable-box__container', showHandle && 'has-show-handle', className),
     handleClasses: HANDLE_CLASSES,

package/build/resizable-box/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/resizable-box/index.tsx"],"names":["HANDLE_CLASS_NAME","SIDE_HANDLE_CLASS_NAME","CORNER_HANDLE_CLASS_NAME","HANDLE_CLASSES","top","right","bottom","left","topLeft","topRight","bottomRight","bottomLeft","HANDLE_STYLES_OVERRIDES","width","undefined","height","HANDLE_STYLES","ResizableBox","className","children","showHandle","__experimentalShowTooltip","showTooltip","__experimentalTooltipProps","tooltipProps","props","ref"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AACA;;AAQA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;AAGA,MAAMA,iBAAiB,GAAG,kCAA1B;AACA,MAAMC,sBAAsB,GAAG,uCAA/B;AACA,MAAMC,wBAAwB,GAAG,yCAAjC;AAEA,MAAMC,cAAc,GAAG;AACtBC,EAAAA,GAAG,EAAE,yBACJJ,iBADI,EAEJC,sBAFI,EAGJ,sCAHI,CADiB;AAMtBI,EAAAA,KAAK,EAAE,yBACNL,iBADM,EAENC,sBAFM,EAGN,wCAHM,CANe;AAWtBK,EAAAA,MAAM,EAAE,yBACPN,iBADO,EAEPC,sBAFO,EAGP,yCAHO,CAXc;AAgBtBM,EAAAA,IAAI,EAAE,yBACLP,iBADK,EAELC,sBAFK,EAGL,uCAHK,CAhBgB;AAqBtBO,EAAAA,OAAO,EAAE,yBACRR,iBADQ,EAERE,wBAFQ,EAGR,sCAHQ,EAIR,uCAJQ,CArBa;AA2BtBO,EAAAA,QAAQ,EAAE,yBACTT,iBADS,EAETE,wBAFS,EAGT,sCAHS,EAIT,wCAJS,CA3BY;AAiCtBQ,EAAAA,WAAW,EAAE,yBACZV,iBADY,EAEZE,wBAFY,EAGZ,yCAHY,EAIZ,wCAJY,CAjCS;AAuCtBS,EAAAA,UAAU,EAAE,yBACXX,iBADW,EAEXE,wBAFW,EAGX,yCAHW,EAIX,uCAJW;AAvCU,CAAvB,C,CA+CA;;AACA,MAAMU,uBAAuB,GAAG;AAC/BC,EAAAA,KAAK,EAAEC,SADwB;AAE/BC,EAAAA,MAAM,EAAED,SAFuB;AAG/BV,EAAAA,GAAG,EAAEU,SAH0B;AAI/BT,EAAAA,KAAK,EAAES,SAJwB;AAK/BR,EAAAA,MAAM,EAAEQ,SALuB;AAM/BP,EAAAA,IAAI,EAAEO;AANyB,CAAhC;AAQA,MAAME,aAAa,GAAG;AACrBZ,EAAAA,GAAG,EAAEQ,uBADgB;AAErBP,EAAAA,KAAK,EAAEO,uBAFc;AAGrBN,EAAAA,MAAM,EAAEM,uBAHa;AAIrBL,EAAAA,IAAI,EAAEK,uBAJe;AAKrBJ,EAAAA,OAAO,EAAEI,uBALY;AAMrBH,EAAAA,QAAQ,EAAEG,uBANW;AAOrBF,EAAAA,WAAW,EAAEE,uBAPQ;AAQrBD,EAAAA,UAAU,EAAEC;AARS,CAAtB;;AAmBA,SAASK,YAAT,CACC;AACCC,EAAAA,SADD;AAECC,EAAAA,QAFD;AAGCC,EAAAA,UAAU,GAAG,IAHd;AAICC,EAAAA,yBAAyB,EAAEC,WAAW,GAAG,KAJ1C;AAKCC,EAAAA,0BAA0B,EAAEC,YAAY,GAAG,EAL5C;AAMC,KAAGC;AANJ,CADD,EASCC,GATD,EAUe;AACd,SACC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAG,yBACX,qCADW,EAEXN,UAAU,IAAI,iBAFH,EAGXF,SAHW,CADb;AAMC,IAAA,aAAa,EAAGf,cANjB;AAOC,IAAA,YAAY,EAAGa,aAPhB;AAQC,IAAA,GAAG,EAAGU;AARP,KASMD,KATN,GAWGN,QAXH,EAYGG,WAAW,IAAI,4BAAC,sBAAD,EAAoBE,YAApB,CAZlB,CADD;AAgBA;;eAEc,yBAAYP,YAAZ,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { Resizable } from 're-resizable';\nimport type { ResizableProps } from 're-resizable';\n// eslint-disable-next-line no-restricted-imports\nimport type { ReactNode, Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ResizeTooltip from './resize-tooltip';\n\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\n\nconst HANDLE_CLASSES = {\n\ttop: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top'\n\t),\n\tright: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottom: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom'\n\t),\n\tleft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-left'\n\t),\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\nconst HANDLE_STYLES = {\n\ttop: HANDLE_STYLES_OVERRIDES,\n\tright: HANDLE_STYLES_OVERRIDES,\n\tbottom: HANDLE_STYLES_OVERRIDES,\n\tleft: HANDLE_STYLES_OVERRIDES,\n\ttopLeft: HANDLE_STYLES_OVERRIDES,\n\ttopRight: HANDLE_STYLES_OVERRIDES,\n\tbottomRight: HANDLE_STYLES_OVERRIDES,\n\tbottomLeft: HANDLE_STYLES_OVERRIDES,\n};\n\ntype ResizableBoxProps = ResizableProps & {\n\tclassName: string;\n\tchildren: ReactNode;\n\tshowHandle: boolean;\n\t__experimentalShowTooltip: boolean;\n\t__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];\n};\n\nfunction ResizableBox(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tshowHandle = true,\n\t\t__experimentalShowTooltip: showTooltip = false,\n\t\t__experimentalTooltipProps: tooltipProps = {},\n\t\t...props\n\t}: ResizableBoxProps,\n\tref: Ref< Resizable >\n): JSX.Element {\n\treturn (\n\t\t<Resizable\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-resizable-box__container',\n\t\t\t\tshowHandle && 'has-show-handle',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\thandleClasses={ HANDLE_CLASSES }\n\t\t\thandleStyles={ HANDLE_STYLES }\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }\n\t\t</Resizable>\n\t);\n}\n\nexport default forwardRef( ResizableBox );\n"]}
+{"version":3,"sources":["@wordpress/components/src/resizable-box/index.tsx"],"names":["HANDLE_CLASS_NAME","SIDE_HANDLE_CLASS_NAME","CORNER_HANDLE_CLASS_NAME","HANDLE_CLASSES","top","right","bottom","left","topLeft","topRight","bottomRight","bottomLeft","HANDLE_STYLES_OVERRIDES","width","undefined","height","HANDLE_STYLES","ResizableBox","ref","className","children","showHandle","__experimentalShowTooltip","showTooltip","__experimentalTooltipProps","tooltipProps","props"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AACA;;AAQA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;AAGA,MAAMA,iBAAiB,GAAG,kCAA1B;AACA,MAAMC,sBAAsB,GAAG,uCAA/B;AACA,MAAMC,wBAAwB,GAAG,yCAAjC;AAEA,MAAMC,cAAc,GAAG;AACtBC,EAAAA,GAAG,EAAE,yBACJJ,iBADI,EAEJC,sBAFI,EAGJ,sCAHI,CADiB;AAMtBI,EAAAA,KAAK,EAAE,yBACNL,iBADM,EAENC,sBAFM,EAGN,wCAHM,CANe;AAWtBK,EAAAA,MAAM,EAAE,yBACPN,iBADO,EAEPC,sBAFO,EAGP,yCAHO,CAXc;AAgBtBM,EAAAA,IAAI,EAAE,yBACLP,iBADK,EAELC,sBAFK,EAGL,uCAHK,CAhBgB;AAqBtBO,EAAAA,OAAO,EAAE,yBACRR,iBADQ,EAERE,wBAFQ,EAGR,sCAHQ,EAIR,uCAJQ,CArBa;AA2BtBO,EAAAA,QAAQ,EAAE,yBACTT,iBADS,EAETE,wBAFS,EAGT,sCAHS,EAIT,wCAJS,CA3BY;AAiCtBQ,EAAAA,WAAW,EAAE,yBACZV,iBADY,EAEZE,wBAFY,EAGZ,yCAHY,EAIZ,wCAJY,CAjCS;AAuCtBS,EAAAA,UAAU,EAAE,yBACXX,iBADW,EAEXE,wBAFW,EAGX,yCAHW,EAIX,uCAJW;AAvCU,CAAvB,C,CA+CA;;AACA,MAAMU,uBAAuB,GAAG;AAC/BC,EAAAA,KAAK,EAAEC,SADwB;AAE/BC,EAAAA,MAAM,EAAED,SAFuB;AAG/BV,EAAAA,GAAG,EAAEU,SAH0B;AAI/BT,EAAAA,KAAK,EAAES,SAJwB;AAK/BR,EAAAA,MAAM,EAAEQ,SALuB;AAM/BP,EAAAA,IAAI,EAAEO;AANyB,CAAhC;AAQA,MAAME,aAAa,GAAG;AACrBZ,EAAAA,GAAG,EAAEQ,uBADgB;AAErBP,EAAAA,KAAK,EAAEO,uBAFc;AAGrBN,EAAAA,MAAM,EAAEM,uBAHa;AAIrBL,EAAAA,IAAI,EAAEK,uBAJe;AAKrBJ,EAAAA,OAAO,EAAEI,uBALY;AAMrBH,EAAAA,QAAQ,EAAEG,uBANW;AAOrBF,EAAAA,WAAW,EAAEE,uBAPQ;AAQrBD,EAAAA,UAAU,EAAEC;AARS,CAAtB;;AAmBA,SAASK,YAAT,OASCC,GATD,EAUe;AAAA,MATd;AACCC,IAAAA,SADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,UAAU,GAAG,IAHd;AAICC,IAAAA,yBAAyB,EAAEC,WAAW,GAAG,KAJ1C;AAKCC,IAAAA,0BAA0B,EAAEC,YAAY,GAAG,EAL5C;AAMC,OAAGC;AANJ,GASc;AACd,SACC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAG,yBACX,qCADW,EAEXL,UAAU,IAAI,iBAFH,EAGXF,SAHW,CADb;AAMC,IAAA,aAAa,EAAGhB,cANjB;AAOC,IAAA,YAAY,EAAGa,aAPhB;AAQC,IAAA,GAAG,EAAGE;AARP,KASMQ,KATN,GAWGN,QAXH,EAYGG,WAAW,IAAI,4BAAC,sBAAD,EAAoBE,YAApB,CAZlB,CADD;AAgBA;;eAEc,yBAAYR,YAAZ,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { Resizable } from 're-resizable';\nimport type { ResizableProps } from 're-resizable';\n// eslint-disable-next-line no-restricted-imports\nimport type { ReactNode, Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ResizeTooltip from './resize-tooltip';\n\nconst HANDLE_CLASS_NAME = 'components-resizable-box__handle';\nconst SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';\nconst CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';\n\nconst HANDLE_CLASSES = {\n\ttop: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top'\n\t),\n\tright: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottom: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom'\n\t),\n\tleft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tSIDE_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-left'\n\t),\n\ttopRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-top',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomRight: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-right'\n\t),\n\tbottomLeft: classnames(\n\t\tHANDLE_CLASS_NAME,\n\t\tCORNER_HANDLE_CLASS_NAME,\n\t\t'components-resizable-box__handle-bottom',\n\t\t'components-resizable-box__handle-left'\n\t),\n};\n\n// Removes the inline styles in the drag handles.\nconst HANDLE_STYLES_OVERRIDES = {\n\twidth: undefined,\n\theight: undefined,\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\nconst HANDLE_STYLES = {\n\ttop: HANDLE_STYLES_OVERRIDES,\n\tright: HANDLE_STYLES_OVERRIDES,\n\tbottom: HANDLE_STYLES_OVERRIDES,\n\tleft: HANDLE_STYLES_OVERRIDES,\n\ttopLeft: HANDLE_STYLES_OVERRIDES,\n\ttopRight: HANDLE_STYLES_OVERRIDES,\n\tbottomRight: HANDLE_STYLES_OVERRIDES,\n\tbottomLeft: HANDLE_STYLES_OVERRIDES,\n};\n\ntype ResizableBoxProps = ResizableProps & {\n\tclassName: string;\n\tchildren: ReactNode;\n\tshowHandle: boolean;\n\t__experimentalShowTooltip: boolean;\n\t__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];\n};\n\nfunction ResizableBox(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tshowHandle = true,\n\t\t__experimentalShowTooltip: showTooltip = false,\n\t\t__experimentalTooltipProps: tooltipProps = {},\n\t\t...props\n\t}: ResizableBoxProps,\n\tref: Ref< Resizable >\n): JSX.Element {\n\treturn (\n\t\t<Resizable\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-resizable-box__container',\n\t\t\t\tshowHandle && 'has-show-handle',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\thandleClasses={ HANDLE_CLASSES }\n\t\t\thandleStyles={ HANDLE_STYLES }\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }\n\t\t</Resizable>\n\t);\n}\n\nexport default forwardRef( ResizableBox );\n"]}

package/build/resizable-box/resize-tooltip/index.js

@@ -32,18 +32,19 @@ var _resizeTooltip = require("./styles/resize-tooltip.styles");
 /**
  * Internal dependencies
  */
-function ResizeTooltip({
-  axis,
-  className,
-  fadeTimeout = 180,
-  isVisible = true,
-  labelRef,
-  onResize = _lodash.noop,
-  position = _utils.POSITIONS.bottom,
-  showPx = true,
-  zIndex = 1000,
-  ...props
-}, ref) {
+function ResizeTooltip(_ref, ref) {
+  let {
+    axis,
+    className,
+    fadeTimeout = 180,
+    isVisible = true,
+    labelRef,
+    onResize = _lodash.noop,
+    position = _utils.POSITIONS.bottom,
+    showPx = true,
+    zIndex = 1000,
+    ...props
+  } = _ref;
   const {
     label,
     resizeListener

package/build/resizable-box/resize-tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/index.tsx"],"names":["ResizeTooltip","axis","className","fadeTimeout","isVisible","labelRef","onResize","noop","position","POSITIONS","bottom","showPx","zIndex","props","ref","label","resizeListener","classes","ForwardedComponent"],"mappings":";;;;;;;;;AASA;;;;AANA;;AACA;;AAYA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAkBA,SAASA,aAAT,CACC;AACCC,EAAAA,IADD;AAECC,EAAAA,SAFD;AAGCC,EAAAA,WAAW,GAAG,GAHf;AAICC,EAAAA,SAAS,GAAG,IAJb;AAKCC,EAAAA,QALD;AAMCC,EAAAA,QAAQ,GAAGC,YANZ;AAOCC,EAAAA,QAAQ,GAAGC,iBAAUC,MAPtB;AAQCC,EAAAA,MAAM,GAAG,IARV;AASCC,EAAAA,MAAM,GAAG,IATV;AAUC,KAAGC;AAVJ,CADD,EAaCC,GAbD,EAcsB;AACrB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAA4B,2BAAgB;AACjDf,IAAAA,IADiD;AAEjDE,IAAAA,WAFiD;AAGjDG,IAAAA,QAHiD;AAIjDK,IAAAA,MAJiD;AAKjDH,IAAAA;AALiD,GAAhB,CAAlC;AAQA,MAAK,CAAEJ,SAAP,EAAmB,OAAO,IAAP;AAEnB,QAAMa,OAAO,GAAG,yBAAY,2BAAZ,EAAyCf,SAAzC,CAAhB;AAEA,SACC,4BAAC,mBAAD;AAAM,mBAAY,MAAlB;AAAyB,IAAA,SAAS,EAAGe,OAArC;AAA+C,IAAA,GAAG,EAAGH;AAArD,KAAgED,KAAhE,GACGG,cADH,EAEC,4BAAC,cAAD;AACC,mBAAcH,KAAK,CAAE,aAAF,CADpB;AAEC,IAAA,KAAK,EAAGE,KAFT;AAGC,IAAA,QAAQ,EAAGP,QAHZ;AAIC,IAAA,GAAG,EAAGH,QAJP;AAKC,IAAA,MAAM,EAAGO;AALV,IAFD,CADD;AAYA;;AAED,MAAMM,kBAAkB,GAAG,yBAAYlB,aAAZ,CAA3B;eAEekB,kB","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport Label from './label';\nimport { useResizeLabel, Axis, Position, POSITIONS } from './utils';\nimport { Root } from './styles/resize-tooltip.styles';\n\ntype ResizeTooltipProps = React.ComponentProps< typeof Root > & {\n\t'aria-hidden'?: boolean;\n\taxis?: Axis;\n\tclassName?: string;\n\tfadeTimeout?: number;\n\tisVisible?: boolean;\n\tlabelRef?: Ref< HTMLDivElement >;\n\tonResize?: Parameters< typeof useResizeLabel >[ 0 ][ 'onResize' ];\n\tposition?: Position;\n\tshowPx?: boolean;\n\tzIndex?: number;\n};\n\nfunction ResizeTooltip(\n\t{\n\t\taxis,\n\t\tclassName,\n\t\tfadeTimeout = 180,\n\t\tisVisible = true,\n\t\tlabelRef,\n\t\tonResize = noop,\n\t\tposition = POSITIONS.bottom,\n\t\tshowPx = true,\n\t\tzIndex = 1000,\n\t\t...props\n\t}: ResizeTooltipProps,\n\tref: Ref< HTMLDivElement >\n): JSX.Element | null {\n\tconst { label, resizeListener } = useResizeLabel( {\n\t\taxis,\n\t\tfadeTimeout,\n\t\tonResize,\n\t\tshowPx,\n\t\tposition,\n\t} );\n\n\tif ( ! isVisible ) return null;\n\n\tconst classes = classnames( 'components-resize-tooltip', className );\n\n\treturn (\n\t\t<Root aria-hidden=\"true\" className={ classes } ref={ ref } { ...props }>\n\t\t\t{ resizeListener }\n\t\t\t<Label\n\t\t\t\taria-hidden={ props[ 'aria-hidden' ] }\n\t\t\t\tlabel={ label }\n\t\t\t\tposition={ position }\n\t\t\t\tref={ labelRef }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( ResizeTooltip );\n\nexport default ForwardedComponent;\n"]}
+{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/index.tsx"],"names":["ResizeTooltip","ref","axis","className","fadeTimeout","isVisible","labelRef","onResize","noop","position","POSITIONS","bottom","showPx","zIndex","props","label","resizeListener","classes","ForwardedComponent"],"mappings":";;;;;;;;;AASA;;;;AANA;;AACA;;AAYA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAkBA,SAASA,aAAT,OAaCC,GAbD,EAcsB;AAAA,MAbrB;AACCC,IAAAA,IADD;AAECC,IAAAA,SAFD;AAGCC,IAAAA,WAAW,GAAG,GAHf;AAICC,IAAAA,SAAS,GAAG,IAJb;AAKCC,IAAAA,QALD;AAMCC,IAAAA,QAAQ,GAAGC,YANZ;AAOCC,IAAAA,QAAQ,GAAGC,iBAAUC,MAPtB;AAQCC,IAAAA,MAAM,GAAG,IARV;AASCC,IAAAA,MAAM,GAAG,IATV;AAUC,OAAGC;AAVJ,GAaqB;AACrB,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAA4B,2BAAgB;AACjDd,IAAAA,IADiD;AAEjDE,IAAAA,WAFiD;AAGjDG,IAAAA,QAHiD;AAIjDK,IAAAA,MAJiD;AAKjDH,IAAAA;AALiD,GAAhB,CAAlC;AAQA,MAAK,CAAEJ,SAAP,EAAmB,OAAO,IAAP;AAEnB,QAAMY,OAAO,GAAG,yBAAY,2BAAZ,EAAyCd,SAAzC,CAAhB;AAEA,SACC,4BAAC,mBAAD;AAAM,mBAAY,MAAlB;AAAyB,IAAA,SAAS,EAAGc,OAArC;AAA+C,IAAA,GAAG,EAAGhB;AAArD,KAAgEa,KAAhE,GACGE,cADH,EAEC,4BAAC,cAAD;AACC,mBAAcF,KAAK,CAAE,aAAF,CADpB;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,QAAQ,EAAGN,QAHZ;AAIC,IAAA,GAAG,EAAGH,QAJP;AAKC,IAAA,MAAM,EAAGO;AALV,IAFD,CADD;AAYA;;AAED,MAAMK,kBAAkB,GAAG,yBAAYlB,aAAZ,CAA3B;eAEekB,kB","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport Label from './label';\nimport { useResizeLabel, Axis, Position, POSITIONS } from './utils';\nimport { Root } from './styles/resize-tooltip.styles';\n\ntype ResizeTooltipProps = React.ComponentProps< typeof Root > & {\n\t'aria-hidden'?: boolean;\n\taxis?: Axis;\n\tclassName?: string;\n\tfadeTimeout?: number;\n\tisVisible?: boolean;\n\tlabelRef?: Ref< HTMLDivElement >;\n\tonResize?: Parameters< typeof useResizeLabel >[ 0 ][ 'onResize' ];\n\tposition?: Position;\n\tshowPx?: boolean;\n\tzIndex?: number;\n};\n\nfunction ResizeTooltip(\n\t{\n\t\taxis,\n\t\tclassName,\n\t\tfadeTimeout = 180,\n\t\tisVisible = true,\n\t\tlabelRef,\n\t\tonResize = noop,\n\t\tposition = POSITIONS.bottom,\n\t\tshowPx = true,\n\t\tzIndex = 1000,\n\t\t...props\n\t}: ResizeTooltipProps,\n\tref: Ref< HTMLDivElement >\n): JSX.Element | null {\n\tconst { label, resizeListener } = useResizeLabel( {\n\t\taxis,\n\t\tfadeTimeout,\n\t\tonResize,\n\t\tshowPx,\n\t\tposition,\n\t} );\n\n\tif ( ! isVisible ) return null;\n\n\tconst classes = classnames( 'components-resize-tooltip', className );\n\n\treturn (\n\t\t<Root aria-hidden=\"true\" className={ classes } ref={ ref } { ...props }>\n\t\t\t{ resizeListener }\n\t\t\t<Label\n\t\t\t\taria-hidden={ props[ 'aria-hidden' ] }\n\t\t\t\tlabel={ label }\n\t\t\t\tposition={ position }\n\t\t\t\tref={ labelRef }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( ResizeTooltip );\n\nexport default ForwardedComponent;\n"]}

package/build/resizable-box/resize-tooltip/label.js

@@ -32,12 +32,13 @@ var _resizeTooltip = require("./styles/resize-tooltip.styles");
 const CORNER_OFFSET = 4;
 const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
 
-function Label({
-  label,
-  position = _utils.POSITIONS.corner,
-  zIndex = 1000,
-  ...props
-}, ref) {
+function Label(_ref, ref) {
+  let {
+    label,
+    position = _utils.POSITIONS.corner,
+    zIndex = 1000,
+    ...props
+  } = _ref;
   const showLabel = !!label;
   const isBottom = position === _utils.POSITIONS.bottom;
   const isCorner = position === _utils.POSITIONS.corner;

package/build/resizable-box/resize-tooltip/label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/label.tsx"],"names":["CORNER_OFFSET","CURSOR_OFFSET_TOP","Label","label","position","POSITIONS","corner","zIndex","props","ref","showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","ForwardedComponent"],"mappings":";;;;;;;;;AASA;;;;AACA;;AAKA;;AACA;;AAhBA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAQA,MAAMA,aAAa,GAAG,CAAtB;AACA,MAAMC,iBAAiB,GAAGD,aAAa,GAAG,GAA1C;;AAWA,SAASE,KAAT,CACC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,QAAQ,GAAGC,iBAAUC,MAA9B;AAAsCC,EAAAA,MAAM,GAAG,IAA/C;AAAqD,KAAGC;AAAxD,CADD,EAECC,GAFD,EAGsB;AACrB,QAAMC,SAAS,GAAG,CAAC,CAAEP,KAArB;AAEA,QAAMQ,QAAQ,GAAGP,QAAQ,KAAKC,iBAAUO,MAAxC;AACA,QAAMC,QAAQ,GAAGT,QAAQ,KAAKC,iBAAUC,MAAxC;AAEA,MAAK,CAAEI,SAAP,EAAmB,OAAO,IAAP;AAEnB,MAAII,KAA0B,GAAG;AAChCC,IAAAA,OAAO,EAAEL,SAAS,GAAG,CAAH,GAAOM,SADO;AAEhCT,IAAAA;AAFgC,GAAjC;AAKA,MAAIU,UAAU,GAAG,EAAjB;;AAEA,MAAKN,QAAL,EAAgB;AACfG,IAAAA,KAAK,GAAG,EACP,GAAGA,KADI;AAEPV,MAAAA,QAAQ,EAAE,UAFH;AAGPQ,MAAAA,MAAM,EAAEX,iBAAiB,GAAG,CAAC,CAHtB;AAIPiB,MAAAA,IAAI,EAAE,KAJC;AAKPC,MAAAA,SAAS,EAAE;AALJ,KAAR;AAQAF,IAAAA,UAAU,GAAG;AACZE,MAAAA,SAAS,EAAG;AADA,KAAb;AAGA;;AAED,MAAKN,QAAL,EAAgB;AACfC,IAAAA,KAAK,GAAG,EACP,GAAGA,KADI;AAEPV,MAAAA,QAAQ,EAAE,UAFH;AAGPgB,MAAAA,GAAG,EAAEpB,aAHE;AAIPqB,MAAAA,KAAK,EAAE,qBAAUL,SAAV,GAAsBhB,aAJtB;AAKPkB,MAAAA,IAAI,EAAE,qBAAUlB,aAAV,GAA0BgB;AALzB,KAAR;AAOA;;AAED,SACC,4BAAC,6BAAD;AACC,mBAAY,MADb;AAEC,IAAA,SAAS,EAAC,+CAFX;AAGC,IAAA,GAAG,EAAGP,GAHP;AAIC,IAAA,KAAK,EAAGK;AAJT,KAKMN,KALN,GAOC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,EAAGS;AAFT,KAIC,4BAAC,wBAAD;AAAW,IAAA,EAAE,EAAC;AAAd,KAAuBd,KAAvB,CAJD,CAPD,CADD;AAgBA;;AAED,MAAMmB,kBAAkB,GAAG,yBAAYpB,KAAZ,CAA3B;eAEeoB,kB","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Position, POSITIONS } from './utils';\nimport {\n\tTooltipWrapper,\n\tTooltip,\n\tLabelText,\n} from './styles/resize-tooltip.styles';\n\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\n\ntype LabelProps = React.DetailedHTMLProps<\n\tReact.HTMLAttributes< HTMLDivElement >,\n\tHTMLDivElement\n> & {\n\tlabel?: string;\n\tposition: Position;\n\tzIndex: number;\n};\n\nfunction Label(\n\t{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,\n\tref: Ref< HTMLDivElement >\n): JSX.Element | null {\n\tconst showLabel = !! label;\n\n\tconst isBottom = position === POSITIONS.bottom;\n\tconst isCorner = position === POSITIONS.corner;\n\n\tif ( ! showLabel ) return null;\n\n\tlet style: React.CSSProperties = {\n\t\topacity: showLabel ? 1 : undefined,\n\t\tzIndex,\n\t};\n\n\tlet labelStyle = {};\n\n\tif ( isBottom ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\tbottom: CURSOR_OFFSET_TOP * -1,\n\t\t\tleft: '50%',\n\t\t\ttransform: 'translate(-50%, 0)',\n\t\t};\n\n\t\tlabelStyle = {\n\t\t\ttransform: `translate(0, 100%)`,\n\t\t};\n\t}\n\n\tif ( isCorner ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\ttop: CORNER_OFFSET,\n\t\t\tright: isRTL() ? undefined : CORNER_OFFSET,\n\t\t\tleft: isRTL() ? CORNER_OFFSET : undefined,\n\t\t};\n\t}\n\n\treturn (\n\t\t<TooltipWrapper\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"components-resizable-tooltip__tooltip-wrapper\"\n\t\t\tref={ ref }\n\t\t\tstyle={ style }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<Tooltip\n\t\t\t\tclassName=\"components-resizable-tooltip__tooltip\"\n\t\t\t\tstyle={ labelStyle }\n\t\t\t>\n\t\t\t\t<LabelText as=\"span\">{ label }</LabelText>\n\t\t\t</Tooltip>\n\t\t</TooltipWrapper>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( Label );\n\nexport default ForwardedComponent;\n"]}
+{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/label.tsx"],"names":["CORNER_OFFSET","CURSOR_OFFSET_TOP","Label","ref","label","position","POSITIONS","corner","zIndex","props","showLabel","isBottom","bottom","isCorner","style","opacity","undefined","labelStyle","left","transform","top","right","ForwardedComponent"],"mappings":";;;;;;;;;AASA;;;;AACA;;AAKA;;AACA;;AAhBA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAQA,MAAMA,aAAa,GAAG,CAAtB;AACA,MAAMC,iBAAiB,GAAGD,aAAa,GAAG,GAA1C;;AAWA,SAASE,KAAT,OAECC,GAFD,EAGsB;AAAA,MAFrB;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAQ,GAAGC,iBAAUC,MAA9B;AAAsCC,IAAAA,MAAM,GAAG,IAA/C;AAAqD,OAAGC;AAAxD,GAEqB;AACrB,QAAMC,SAAS,GAAG,CAAC,CAAEN,KAArB;AAEA,QAAMO,QAAQ,GAAGN,QAAQ,KAAKC,iBAAUM,MAAxC;AACA,QAAMC,QAAQ,GAAGR,QAAQ,KAAKC,iBAAUC,MAAxC;AAEA,MAAK,CAAEG,SAAP,EAAmB,OAAO,IAAP;AAEnB,MAAII,KAA0B,GAAG;AAChCC,IAAAA,OAAO,EAAEL,SAAS,GAAG,CAAH,GAAOM,SADO;AAEhCR,IAAAA;AAFgC,GAAjC;AAKA,MAAIS,UAAU,GAAG,EAAjB;;AAEA,MAAKN,QAAL,EAAgB;AACfG,IAAAA,KAAK,GAAG,EACP,GAAGA,KADI;AAEPT,MAAAA,QAAQ,EAAE,UAFH;AAGPO,MAAAA,MAAM,EAAEX,iBAAiB,GAAG,CAAC,CAHtB;AAIPiB,MAAAA,IAAI,EAAE,KAJC;AAKPC,MAAAA,SAAS,EAAE;AALJ,KAAR;AAQAF,IAAAA,UAAU,GAAG;AACZE,MAAAA,SAAS,EAAG;AADA,KAAb;AAGA;;AAED,MAAKN,QAAL,EAAgB;AACfC,IAAAA,KAAK,GAAG,EACP,GAAGA,KADI;AAEPT,MAAAA,QAAQ,EAAE,UAFH;AAGPe,MAAAA,GAAG,EAAEpB,aAHE;AAIPqB,MAAAA,KAAK,EAAE,qBAAUL,SAAV,GAAsBhB,aAJtB;AAKPkB,MAAAA,IAAI,EAAE,qBAAUlB,aAAV,GAA0BgB;AALzB,KAAR;AAOA;;AAED,SACC,4BAAC,6BAAD;AACC,mBAAY,MADb;AAEC,IAAA,SAAS,EAAC,+CAFX;AAGC,IAAA,GAAG,EAAGb,GAHP;AAIC,IAAA,KAAK,EAAGW;AAJT,KAKML,KALN,GAOC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,EAAGQ;AAFT,KAIC,4BAAC,wBAAD;AAAW,IAAA,EAAE,EAAC;AAAd,KAAuBb,KAAvB,CAJD,CAPD,CADD;AAgBA;;AAED,MAAMkB,kBAAkB,GAAG,yBAAYpB,KAAZ,CAA3B;eAEeoB,kB","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Position, POSITIONS } from './utils';\nimport {\n\tTooltipWrapper,\n\tTooltip,\n\tLabelText,\n} from './styles/resize-tooltip.styles';\n\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\n\ntype LabelProps = React.DetailedHTMLProps<\n\tReact.HTMLAttributes< HTMLDivElement >,\n\tHTMLDivElement\n> & {\n\tlabel?: string;\n\tposition: Position;\n\tzIndex: number;\n};\n\nfunction Label(\n\t{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,\n\tref: Ref< HTMLDivElement >\n): JSX.Element | null {\n\tconst showLabel = !! label;\n\n\tconst isBottom = position === POSITIONS.bottom;\n\tconst isCorner = position === POSITIONS.corner;\n\n\tif ( ! showLabel ) return null;\n\n\tlet style: React.CSSProperties = {\n\t\topacity: showLabel ? 1 : undefined,\n\t\tzIndex,\n\t};\n\n\tlet labelStyle = {};\n\n\tif ( isBottom ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\tbottom: CURSOR_OFFSET_TOP * -1,\n\t\t\tleft: '50%',\n\t\t\ttransform: 'translate(-50%, 0)',\n\t\t};\n\n\t\tlabelStyle = {\n\t\t\ttransform: `translate(0, 100%)`,\n\t\t};\n\t}\n\n\tif ( isCorner ) {\n\t\tstyle = {\n\t\t\t...style,\n\t\t\tposition: 'absolute',\n\t\t\ttop: CORNER_OFFSET,\n\t\t\tright: isRTL() ? undefined : CORNER_OFFSET,\n\t\t\tleft: isRTL() ? CORNER_OFFSET : undefined,\n\t\t};\n\t}\n\n\treturn (\n\t\t<TooltipWrapper\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"components-resizable-tooltip__tooltip-wrapper\"\n\t\t\tref={ ref }\n\t\t\tstyle={ style }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<Tooltip\n\t\t\t\tclassName=\"components-resizable-tooltip__tooltip\"\n\t\t\t\tstyle={ labelStyle }\n\t\t\t>\n\t\t\t\t<LabelText as=\"span\">{ label }</LabelText>\n\t\t\t</Tooltip>\n\t\t</TooltipWrapper>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( Label );\n\nexport default ForwardedComponent;\n"]}

package/build/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LabelText = exports.Tooltip = exports.TooltipWrapper = exports.Root = void 0;
+exports.TooltipWrapper = exports.Tooltip = exports.Root = exports.LabelText = void 0;
 
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 

package/build/resizable-box/resize-tooltip/utils.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useResizeLabel = useResizeLabel;
 exports.POSITIONS = void 0;
+exports.useResizeLabel = useResizeLabel;
 
 var _lodash = require("lodash");
 
@@ -44,13 +44,15 @@ exports.POSITIONS = POSITIONS;
  *
  * @return Properties for hook.
  */
-function useResizeLabel({
-  axis,
-  fadeTimeout = 180,
-  onResize = _lodash.noop,
-  position = POSITIONS.bottom,
-  showPx = false
-}) {
+function useResizeLabel(_ref) {
+  let {
+    axis,
+    fadeTimeout = 180,
+    onResize = _lodash.noop,
+    position = POSITIONS.bottom,
+    showPx = false
+  } = _ref;
+
   /*
    * The width/height values derive from this special useResizeAware hook.
    * This custom hook uses injects an iFrame into the element, allowing it
@@ -179,15 +181,16 @@ function useResizeLabel({
  *
  * @return The rendered label.
  */
-function getSizeLabel({
-  axis,
-  height,
-  moveX = false,
-  moveY = false,
-  position = POSITIONS.bottom,
-  showPx = false,
-  width
-}) {
+function getSizeLabel(_ref2) {
+  let {
+    axis,
+    height,
+    moveX = false,
+    moveY = false,
+    position = POSITIONS.bottom,
+    showPx = false,
+    width
+  } = _ref2;
   if (!moveX && !moveY) return undefined;
   /*
    * Corner position...

package/build/resizable-box/resize-tooltip/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["clearTimeout","setTimeout","window","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","noop","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","unsetMoveXY","debounceUnsetMoveXY","current","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport useResizeAware from 'react-resize-aware';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\n\nconst { clearTimeout, setTimeout } = window;\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = typeof POSITIONS[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param  props\n * @param  props.axis        Only shows the label corresponding to the axis.\n * @param  props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param  props.onResize    Callback when a resize occurs. Provides { width, height } callback.\n * @param  props.position    Adjusts label value.\n * @param  props.showPx      Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeAware hook.\n\t * This custom hook uses injects an iFrame into the element, allowing it\n\t * to tap into the onResize (window) callback events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeAware();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst unsetMoveXY = () => {\n\t\t/*\n\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t */\n\t\tif ( isAxisControlled ) return;\n\t\tsetMoveX( false );\n\t\tsetMoveY( false );\n\t};\n\n\tconst debounceUnsetMoveXY = () => {\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\tclearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = setTimeout( unsetMoveXY, fadeTimeout );\n\t};\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param  props\n * @param  props.axis     Only shows the label corresponding to the axis.\n * @param  props.height   Height value.\n * @param  props.moveX    Recent width (x axis) changes.\n * @param  props.moveY    Recent width (y axis) changes.\n * @param  props.position Adjusts label value.\n * @param  props.showPx   Whether to add `PX` to the label.\n * @param  props.width    Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["clearTimeout","setTimeout","window","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","noop","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","unsetMoveXY","debounceUnsetMoveXY","current","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport useResizeAware from 'react-resize-aware';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\n\nconst { clearTimeout, setTimeout } = window;\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = typeof POSITIONS[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param  props\n * @param  props.axis        Only shows the label corresponding to the axis.\n * @param  props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param  props.onResize    Callback when a resize occurs. Provides { width, height } callback.\n * @param  props.position    Adjusts label value.\n * @param  props.showPx      Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeAware hook.\n\t * This custom hook uses injects an iFrame into the element, allowing it\n\t * to tap into the onResize (window) callback events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeAware();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst unsetMoveXY = () => {\n\t\t/*\n\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t */\n\t\tif ( isAxisControlled ) return;\n\t\tsetMoveX( false );\n\t\tsetMoveY( false );\n\t};\n\n\tconst debounceUnsetMoveXY = () => {\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\tclearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = setTimeout( unsetMoveXY, fadeTimeout );\n\t};\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param  props\n * @param  props.axis     Only shows the label corresponding to the axis.\n * @param  props.height   Height value.\n * @param  props.moveX    Recent width (x axis) changes.\n * @param  props.moveY    Recent width (y axis) changes.\n * @param  props.position Adjusts label value.\n * @param  props.showPx   Whether to add `PX` to the label.\n * @param  props.width    Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}

package/build/responsive-wrapper/index.js

@@ -20,12 +20,13 @@ var _compose = require("@wordpress/compose");
 /**
  * WordPress dependencies
  */
-function ResponsiveWrapper({
-  naturalWidth,
-  naturalHeight,
-  children,
-  isInline = false
-}) {
+function ResponsiveWrapper(_ref) {
+  let {
+    naturalWidth,
+    naturalHeight,
+    children,
+    isInline = false
+  } = _ref;
   const [containerResizeListener, {
     width: containerWidth
   }] = (0, _compose.useResizeObserver)();

package/build/responsive-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.js"],"names":["ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","Children","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,iBAAT,CAA4B;AAC3BC,EAAAA,YAD2B;AAE3BC,EAAAA,aAF2B;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA,QAAQ,GAAG;AAJgB,CAA5B,EAKI;AACH,QAAM,CACLC,uBADK,EAEL;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAFK,IAGF,iCAHJ;;AAIA,MAAKC,kBAASC,KAAT,CAAgBN,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMO,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZV,YAAY,GAAGM,cAAf,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMW,OAAO,GAAGR,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,4BAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,4BAAC,OAAD;AAAS,IAAA,KAAK,EAAGK;AAAjB,IAFD,EAGG,2BAAcP,QAAd,EAAwB;AACzBU,IAAAA,SAAS,EAAE,yBACV,wCADU,EAEVV,QAAQ,CAACW,KAAT,CAAeD,SAFL;AADc,GAAxB,CAHH,CADD;AAYA;;eAEcb,iB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n} ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\tconst imageStyle = {\n\t\tpaddingBottom:\n\t\t\tnaturalWidth < containerWidth\n\t\t\t\t? naturalHeight\n\t\t\t\t: ( naturalHeight / naturalWidth ) * 100 + '%',\n\t};\n\tconst TagName = isInline ? 'span' : 'div';\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t{ containerResizeListener }\n\t\t\t<TagName style={ imageStyle } />\n\t\t\t{ cloneElement( children, {\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\tchildren.props.className\n\t\t\t\t),\n\t\t\t} ) }\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}
+{"version":3,"sources":["@wordpress/components/src/responsive-wrapper/index.js"],"names":["ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","containerResizeListener","width","containerWidth","Children","count","imageStyle","paddingBottom","TagName","className","props"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,iBAAT,OAKI;AAAA,MALwB;AAC3BC,IAAAA,YAD2B;AAE3BC,IAAAA,aAF2B;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA,QAAQ,GAAG;AAJgB,GAKxB;AACH,QAAM,CACLC,uBADK,EAEL;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAFK,IAGF,iCAHJ;;AAIA,MAAKC,kBAASC,KAAT,CAAgBN,QAAhB,MAA+B,CAApC,EAAwC;AACvC,WAAO,IAAP;AACA;;AACD,QAAMO,UAAU,GAAG;AAClBC,IAAAA,aAAa,EACZV,YAAY,GAAGM,cAAf,GACGL,aADH,GAEKA,aAAa,GAAGD,YAAlB,GAAmC,GAAnC,GAAyC;AAJ3B,GAAnB;AAMA,QAAMW,OAAO,GAAGR,QAAQ,GAAG,MAAH,GAAY,KAApC;AACA,SACC,4BAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGC,uBADH,EAEC,4BAAC,OAAD;AAAS,IAAA,KAAK,EAAGK;AAAjB,IAFD,EAGG,2BAAcP,QAAd,EAAwB;AACzBU,IAAAA,SAAS,EAAE,yBACV,wCADU,EAEVV,QAAQ,CAACW,KAAT,CAAeD,SAFL;AADc,GAAxB,CAHH,CADD;AAYA;;eAEcb,iB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n} ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\tconst imageStyle = {\n\t\tpaddingBottom:\n\t\t\tnaturalWidth < containerWidth\n\t\t\t\t? naturalHeight\n\t\t\t\t: ( naturalHeight / naturalWidth ) * 100 + '%',\n\t};\n\tconst TagName = isInline ? 'span' : 'div';\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t{ containerResizeListener }\n\t\t\t<TagName style={ imageStyle } />\n\t\t\t{ cloneElement( children, {\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\tchildren.props.className\n\t\t\t\t),\n\t\t\t} ) }\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"]}

package/build/sandbox/index.js

@@ -93,14 +93,15 @@ const style = `
 	}
 `;
 
-function Sandbox({
-  html = '',
-  title = '',
-  type,
-  styles = [],
-  scripts = [],
-  onFocus
-}) {
+function Sandbox(_ref) {
+  let {
+    html = '',
+    title = '',
+    type,
+    styles = [],
+    scripts = [],
+    onFocus
+  } = _ref;
   const ref = (0, _element.useRef)();
   const [width, setWidth] = (0, _element.useState)(0);
   const [height, setHeight] = (0, _element.useState)(0);
@@ -113,7 +114,9 @@ function Sandbox({
     }
   }
 
-  function trySandbox(forceRerender = false) {
+  function trySandbox() {
+    let forceRerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
     if (!isFrameAccessible()) {
       return;
     }