npm - @wordpress/components - Versions diffs - 19.2.3 → 19.4.1-next.f435e9e01b.0 - Mend

@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1000) hide show

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

	@@ -1 +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","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"]}
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","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: 6 } ) }\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/resizable-box/index.js.map CHANGED Viewed

	@@ -1 +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","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"]}
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","ref","className","children","showHandle","__experimentalShowTooltip","showTooltip","__experimentalTooltipProps","tooltipProps","props"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AACA;;AAOA;;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;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';\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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"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":";;;;;;;;;AAUA;;;;AAPA;;AACA;;AAWA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;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';\nimport type { Ref } from 'react';\n\n/\n WordPress dependencies\n /\nimport { forwardRef } from '@wordpress/element';\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 CHANGED Viewed

@@ -20,7 +20,6 @@ var _resizeTooltip = require("./styles/resize-tooltip.styles");
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 /**
  * WordPress dependencies

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

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"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":";;;;;;;;;AAQA;;;;AACA;;AAKA;;AACA;;AAfA;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 /\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/sandbox/index.native.js CHANGED Viewed

@@ -39,8 +39,8 @@ const observeAndResizeJS = `
 		function sendResize() {
 			var clientBoundingRect = document.body.getBoundingClientRect();
-			// The function postMessage is exposed by the react-native-webview library
-			// to communicate between React Native and the WebView, in this case,
+			// The function postMessage is exposed by the react-native-webview library
+			// to communicate between React Native and the WebView, in this case,
 			// we use it for notifying resize changes.
             window.ReactNativeWebView.postMessage(JSON.stringify( {
                 action: 'resize',
@@ -115,7 +115,7 @@ const style = `
 	/**
 	 * Add responsiveness to embeds with aspect ratios.
-	 *
+	 *
 	 * These styles have been copied from the web version (https://git.io/JEFcX) and
 	 * adapted for the native version.
 	 */
@@ -274,10 +274,10 @@ function Sandbox(_ref) {
   }
   (0, _element.useEffect)(() => {
-    _reactNative.Dimensions.addEventListener('change', onChangeDimensions);
+    const dimensionsChangeSubscription = _reactNative.Dimensions.addEventListener('change', onChangeDimensions);
     return () => {
-      _reactNative.Dimensions.removeEventListener('change', onChangeDimensions);
+      dimensionsChangeSubscription.remove();
     };
   }, []);
   (0, _element.useEffect)(() => {

package/build/sandbox/index.native.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","colorScheme","ref","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","key","Platform","select","android","ios","htmlDoc","__html","map","rules","i","src","updateContentHtml","forceRerender","newContentHtml","setImmediate","checkMessageForResize","event","data","nativeEvent","JSON","parse","e","action","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","addEventListener","removeEventListener","current","sandboxStyles","baseUrl"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAYA;;AAKA;;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OA5DA;AA8DA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,OAAT,OAWI;AAAA,MAXc;AACjBC,IAAAA,cADiB;AAEjBC,IAAAA,QAFiB;AAGjBC,IAAAA,IAAI,GAAG,EAHU;AAIjBC,IAAAA,IAAI,GAAG,IAJU;AAKjBC,IAAAA,WAAW,GAAG,EALG;AAMjBC,IAAAA,OAAO,GAAGP,WANO;AAOjBQ,IAAAA,MAAM,GAAGR,WAPQ;AAQjBS,IAAAA,KAAK,GAAG,EARS;AASjBC,IAAAA,IATiB;AAUjBC,IAAAA;AAViB,GAWd;AACH,QAAMC,WAAW,GAAG,uCAApB;AACA,QAAMC,GAAG,GAAG,sBAAZ;AACA,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,CAAV,CAA9B;AACA,QAAM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","sourcesContent":["/*\n External dependencies\n /\nimport { Dimensions, Platform } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/\n WordPress dependencies\n /\nimport {\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver \|\| ! document.body \|\| ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library \n\t\t\t// to communicate between React Native and the WebView, in this case, \n\t\t\t// we use it for notifying resize changes.\n window.ReactNativeWebView.postMessage(JSON.stringify( {\n action: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n }));\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin\|vmax\|vh\|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules \|\| stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. /\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; / If it has an aspect ratio, it shouldn't scroll. /\n\t}\n\n\t/\n\t Add responsiveness to embeds with aspect ratios.\n\t * \n\t * These styles have been copied from the web version (https://git.io/JEFcX) and\n\t * adapted for the native version.\n\t /\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nfunction Sandbox( {\n\tcontainerStyle,\n\tcustomJS,\n\thtml = '',\n\tlang = 'en',\n\tproviderUrl = '',\n\tscripts = EMPTY_ARRAY,\n\tstyles = EMPTY_ARRAY,\n\ttitle = '',\n\ttype,\n\turl,\n} ) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst ref = useRef();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent=\"width=device-width, initial-scale=1\"\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: customJS \|\| observeAndResizeJS,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction checkMessageForResize( event ) {\n\t\t// Attempt to parse the message data as JSON if passed as string\n\t\tlet data = event.nativeEvent.data \|\| {};\n\n\t\tif ( 'string' === typeof data ) {\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {}\n\t\t}\n\n\t\t// Update the state only if the message is formatted as we expect,\n\t\t// i.e. as an object with a 'resize' action.\n\t\tif ( 'resize' !== data.action ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetHeight( data.height );\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tDimensions.addEventListener( 'change', onChangeDimensions );\n\t\treturn () => {\n\t\t\tDimensions.removeEventListener( 'change', onChangeDimensions );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t] }\n\t\t\tonMessage={ checkMessageForResize }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t/>\n\t);\n}\n\nexport default memo( Sandbox );\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/sandbox/index.native.js"],"names":["observeAndResizeJS","style","EMPTY_ARRAY","Sandbox","containerStyle","customJS","html","lang","providerUrl","scripts","styles","title","type","url","colorScheme","ref","height","setHeight","contentHtml","setContentHtml","getHtmlDoc","windowSize","Dimensions","get","isLandscape","setIsLandscape","width","wasLandscape","key","Platform","select","android","ios","htmlDoc","__html","map","rules","i","src","updateContentHtml","forceRerender","newContentHtml","setImmediate","checkMessageForResize","event","data","nativeEvent","JSON","parse","e","action","getSizeStyle","contentHeight","Math","ceil","aspectRatio","onChangeDimensions","dimensions","window","dimensionsChangeSubscription","addEventListener","remove","current","sandboxStyles","baseUrl"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAYA;;AAKA;;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAUA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAI;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OA5DA;AA8DA,MAAMC,KAAK,GAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAjEA;AAmEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,OAAT,OAWI;AAAA,MAXc;AACjBC,IAAAA,cADiB;AAEjBC,IAAAA,QAFiB;AAGjBC,IAAAA,IAAI,GAAG,EAHU;AAIjBC,IAAAA,IAAI,GAAG,IAJU;AAKjBC,IAAAA,WAAW,GAAG,EALG;AAMjBC,IAAAA,OAAO,GAAGP,WANO;AAOjBQ,IAAAA,MAAM,GAAGR,WAPQ;AAQjBS,IAAAA,KAAK,GAAG,EARS;AASjBC,IAAAA,IATiB;AAUjBC,IAAAA;AAViB,GAWd;AACH,QAAMC,WAAW,GAAG,uCAApB;AACA,QAAMC,GAAG,GAAG,sBAAZ;AACA,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,CAAV,CAA9B;AACA,QAAM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","sourcesContent":["/*\n External dependencies\n /\nimport { Dimensions, Platform } from 'react-native';\nimport { WebView } from 'react-native-webview';\n\n/\n WordPress dependencies\n /\nimport {\n\trenderToString,\n\tmemo,\n\tuseRef,\n\tuseState,\n\tuseEffect,\n} from '@wordpress/element';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport sandboxStyles from './style.scss';\n\nconst observeAndResizeJS = `\n\t( function() {\n\t\tvar observer;\n\n\t\tif ( ! window.MutationObserver \|\| ! document.body \|\| ! window.parent ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction sendResize() {\n\t\t\tvar clientBoundingRect = document.body.getBoundingClientRect();\n\n\t\t\t// The function postMessage is exposed by the react-native-webview library\n\t\t\t// to communicate between React Native and the WebView, in this case,\n\t\t\t// we use it for notifying resize changes.\n window.ReactNativeWebView.postMessage(JSON.stringify( {\n action: 'resize',\n\t\t\t\twidth: clientBoundingRect.width,\n\t\t\t\theight: clientBoundingRect.height,\n }));\n\t\t}\n\n\t\tobserver = new MutationObserver( sendResize );\n\t\tobserver.observe( document.body, {\n\t\t\tattributes: true,\n\t\t\tattributeOldValue: false,\n\t\t\tcharacterData: true,\n\t\t\tcharacterDataOldValue: false,\n\t\t\tchildList: true,\n\t\t\tsubtree: true\n\t\t} );\n\n\t\twindow.addEventListener( 'load', sendResize, true );\n\n\t\t// Hack: Remove viewport unit styles, as these are relative\n\t\t// the iframe root and interfere with our mechanism for\n\t\t// determining the unconstrained page bounds.\n\t\tfunction removeViewportStyles( ruleOrNode ) {\n\t\t\tif( ruleOrNode.style ) {\n\t\t\t\t[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {\n\t\t\t\t\tif ( /^\\\\d+(vmin\|vmax\|vh\|vw)$/.test( ruleOrNode.style[ style ] ) ) {\n\t\t\t\t\t\truleOrNode.style[ style ] = '';\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\n\t\tArray.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );\n\t\tArray.prototype.forEach.call( document.styleSheets, function( stylesheet ) {\n\t\t\tArray.prototype.forEach.call( stylesheet.cssRules \|\| stylesheet.rules, removeViewportStyles );\n\t\t} );\n\n\t\tdocument.body.style.position = 'absolute';\n\t\tdocument.body.style.width = '100%';\n\t\tdocument.body.setAttribute( 'data-resizable-iframe-connected', '' );\n\n\t\tsendResize();\n\n\t\t// Resize events can change the width of elements with 100% width, but we don't\n\t\t// get an DOM mutations for that, so do the resize when the window is resized, too.\n\t\twindow.addEventListener( 'resize', sendResize, true );\n} )();`;\n\nconst style = `\n\tbody {\n\t\tmargin: 0;\n\t}\n\thtml,\n\tbody,\n\tbody > div,\n\tbody > div iframe {\n\t\twidth: 100%;\n\t}\n\tbody > div > {\n\t\tmargin-top: 0 !important; /* Has to have !important to override inline styles. /\n\t\tmargin-bottom: 0 !important;\n\t}\n\n\t.wp-block-embed__wrapper {\n\t\tposition: relative;\n\t}\n\n\tbody.wp-has-aspect-ratio > div iframe {\n\t\theight: 100%;\n\t\toverflow: hidden; / If it has an aspect ratio, it shouldn't scroll. /\n\t}\n\n\t/\n\t Add responsiveness to embeds with aspect ratios.\n\t \n\t These styles have been copied from the web version (https://git.io/JEFcX) and\n\t * adapted for the native version.\n\t /\n\t.wp-has-aspect-ratio.wp-block-embed__wrapper::before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\tpadding-top: 50%; // Default to 2:1 aspect ratio.\n\t}\n\t.wp-has-aspect-ratio iframe {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.wp-embed-aspect-21-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 42.85%; // 9 / 21 100\n\t}\n\t.wp-embed-aspect-18-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 50%; // 9 / 18 * 100\n\t}\n\t.wp-embed-aspect-16-9.wp-block-embed__wrapper::before {\n\t\tpadding-top: 56.25%; // 9 / 16 * 100\n\t}\n\t.wp-embed-aspect-4-3.wp-block-embed__wrapper::before {\n\t\tpadding-top: 75%; // 3 / 4 * 100\n\t}\n\t.wp-embed-aspect-1-1.wp-block-embed__wrapper::before {\n\t\tpadding-top: 100%; // 1 / 1 * 100\n\t}\n\t.wp-embed-aspect-9-16.wp-block-embed__wrapper::before {\n\t\tpadding-top: 177.77%; // 16 / 9 * 100\n\t}\n\t.wp-embed-aspect-1-2.wp-block-embed__wrapper::before {\n\t\tpadding-top: 200%; // 2 / 1 * 100\n\t}\n`;\n\nconst EMPTY_ARRAY = [];\n\nfunction Sandbox( {\n\tcontainerStyle,\n\tcustomJS,\n\thtml = '',\n\tlang = 'en',\n\tproviderUrl = '',\n\tscripts = EMPTY_ARRAY,\n\tstyles = EMPTY_ARRAY,\n\ttitle = '',\n\ttype,\n\turl,\n} ) {\n\tconst colorScheme = usePreferredColorScheme();\n\tconst ref = useRef();\n\tconst [ height, setHeight ] = useState( 0 );\n\tconst [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );\n\n\tconst windowSize = Dimensions.get( 'window' );\n\tconst [ isLandscape, setIsLandscape ] = useState(\n\t\twindowSize.width >= windowSize.height\n\t);\n\tconst wasLandscape = useRef( isLandscape );\n\t// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:\n\t// - Device rotation\n\t// - Light/dark mode changes\n\t// For this purpose, the key prop used in the WebView will be updated with the value of the actions.\n\tconst key = Platform.select( {\n\t\tandroid: `${ url }-${\n\t\t\tisLandscape ? 'landscape' : 'portrait'\n\t\t}-${ colorScheme }`,\n\t\tios: url,\n\t} );\n\n\tfunction getHtmlDoc() {\n\t\t// Put the html snippet into a html document, and update the state to refresh the WebView,\n\t\t// we can use this in the future to inject custom styles or scripts.\n\t\t// Scripts go into the body rather than the head, to support embedded content such as Instagram\n\t\t// that expect the scripts to be part of the body.\n\t\tconst htmlDoc = (\n\t\t\t<html lang={ lang }>\n\t\t\t\t<head>\n\t\t\t\t\t<title>{ title }</title>\n\t\t\t\t\t<meta\n\t\t\t\t\t\tname=\"viewport\"\n\t\t\t\t\t\tcontent=\"width=device-width, initial-scale=1\"\n\t\t\t\t\t></meta>\n\t\t\t\t\t<style dangerouslySetInnerHTML={ { __html: style } } />\n\t\t\t\t\t{ styles.map( ( rules, i ) => (\n\t\t\t\t\t\t<style\n\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={ { __html: rules } }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</head>\n\t\t\t\t<body\n\t\t\t\t\tdata-resizable-iframe-connected=\"data-resizable-iframe-connected\"\n\t\t\t\t\tclassName={ type }\n\t\t\t\t>\n\t\t\t\t\t<div dangerouslySetInnerHTML={ { __html: html } } />\n\t\t\t\t\t<script\n\t\t\t\t\t\ttype=\"text/javascript\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: customJS \|\| observeAndResizeJS,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t{ scripts.map( ( src ) => (\n\t\t\t\t\t\t<script key={ src } src={ src } />\n\t\t\t\t\t) ) }\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t);\n\t\treturn '<!DOCTYPE html>' + renderToString( htmlDoc );\n\t}\n\n\tfunction updateContentHtml( forceRerender = false ) {\n\t\tconst newContentHtml = getHtmlDoc();\n\n\t\tif ( forceRerender && contentHtml === newContentHtml ) {\n\t\t\t// The re-render is forced by updating the state with empty HTML,\n\t\t\t// waiting for the JS code to be executed with \"setImmediate\" and then\n\t\t\t// setting the content HTML again.\n\t\t\tsetContentHtml( '' );\n\t\t\tsetImmediate( () => setContentHtml( newContentHtml ) );\n\t\t} else {\n\t\t\tsetContentHtml( newContentHtml );\n\t\t}\n\t}\n\n\tfunction checkMessageForResize( event ) {\n\t\t// Attempt to parse the message data as JSON if passed as string\n\t\tlet data = event.nativeEvent.data \|\| {};\n\n\t\tif ( 'string' === typeof data ) {\n\t\t\ttry {\n\t\t\t\tdata = JSON.parse( data );\n\t\t\t} catch ( e ) {}\n\t\t}\n\n\t\t// Update the state only if the message is formatted as we expect,\n\t\t// i.e. as an object with a 'resize' action.\n\t\tif ( 'resize' !== data.action ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetHeight( data.height );\n\t}\n\n\tfunction getSizeStyle() {\n\t\tconst contentHeight = Math.ceil( height );\n\n\t\treturn contentHeight ? { height: contentHeight } : { aspectRatio: 1 };\n\t}\n\n\tfunction onChangeDimensions( dimensions ) {\n\t\tsetIsLandscape( dimensions.window.width >= dimensions.window.height );\n\t}\n\n\tuseEffect( () => {\n\t\tconst dimensionsChangeSubscription = Dimensions.addEventListener(\n\t\t\t'change',\n\t\t\tonChangeDimensions\n\t\t);\n\t\treturn () => {\n\t\t\tdimensionsChangeSubscription.remove();\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tupdateContentHtml();\n\t}, [ html, title, type, styles, scripts ] );\n\n\tuseEffect( () => {\n\t\t// When device orientation changes we have to recalculate the size,\n\t\t// for this purpose we reset the current size value.\n\t\tif ( wasLandscape.current !== isLandscape ) {\n\t\t\tsetHeight( 0 );\n\t\t}\n\t\twasLandscape.current = isLandscape;\n\t}, [ isLandscape ] );\n\n\treturn (\n\t\t<WebView\n\t\t\tcontainerStyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__container' ],\n\t\t\t\tcontainerStyle,\n\t\t\t] }\n\t\t\tkey={ key }\n\t\t\tref={ ref }\n\t\t\tsource={ { baseUrl: providerUrl, html: contentHtml } }\n\t\t\t// Wildcard value is required for static HTML\n\t\t\t// Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source\n\t\t\toriginWhitelist={ [ '*' ] }\n\t\t\tstyle={ [\n\t\t\t\tsandboxStyles[ 'sandbox-webview__content' ],\n\t\t\t\tgetSizeStyle(),\n\t\t\t] }\n\t\t\tonMessage={ checkMessageForResize }\n\t\t\tscrollEnabled={ false }\n\t\t\tsetBuiltInZoomControls={ false }\n\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\tshowsVerticalScrollIndicator={ false }\n\t\t/>\n\t);\n}\n\nexport default memo( Sandbox );\n"]}

package/build/scrollable/hook.js CHANGED Viewed

@@ -40,7 +40,7 @@ function useScrollable(props) {
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'Scrollable');
   const cx = (0, _useCx.useCx)();
-  const classes = (0, _element.useMemo)(() => cx(styles.Scrollable, styles.scrollableScrollbar, smoothScroll && styles.smoothScroll, scrollDirection === 'x' && styles.scrollX, scrollDirection === 'y' && styles.scrollY, scrollDirection === 'auto' && styles.scrollAuto, className), [className, scrollDirection, smoothScroll]);
+  const classes = (0, _element.useMemo)(() => cx(styles.Scrollable, styles.scrollableScrollbar, smoothScroll && styles.smoothScroll, scrollDirection === 'x' && styles.scrollX, scrollDirection === 'y' && styles.scrollY, scrollDirection === 'auto' && styles.scrollAuto, className), [className, cx, scrollDirection, smoothScroll]);
   return { ...otherProps,
     className: classes
   };

package/build/scrollable/hook.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/scrollable/hook.js"],"names":["useScrollable","props","className","scrollDirection","smoothScroll","otherProps","cx","classes","styles","Scrollable","scrollableScrollbar","scrollX","scrollY","scrollAuto"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;;AACA;AACA;AACA;;AACA;AACO,SAASA,aAAT,CAAwBC,KAAxB,EAAgC;AACtC,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,eAAe,GAAG,GAFb;AAGLC,IAAAA,YAAY,GAAG,KAHV;AAIL,OAAGC;AAJE,MAKF,+BAAkBJ,KAAlB,EAAyB,YAAzB,CALJ;AAOA,QAAMK,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBACf,MACCD,EAAE,CACDE,MAAM,CAACC,UADN,EAEDD,MAAM,CAACE,mBAFN,EAGDN,YAAY,IAAII,MAAM,CAACJ,YAHtB,EAIDD,eAAe,KAAK,GAApB,IAA2BK,MAAM,CAACG,OAJjC,EAKDR,eAAe,KAAK,GAApB,IAA2BK,MAAM,CAACI,OALjC,EAMDT,eAAe,KAAK,MAApB,IAA8BK,MAAM,CAACK,UANpC,EAODX,SAPC,CAFY,EAWf,CAAEA,SAAF,~~EAAaC~~,~~eAAb~~,~~EAA8BC~~,~~YAA9B~~,CAXe,CAAhB;AAcA,SAAO,EAAE,GAAGC,UAAL;AAAiBH,IAAAA,SAAS,EAAEK;AAA5B,GAAP;AACA","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { useContextSystem } from '../ui/context';\nimport as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/* eslint-disable jsdoc/valid-types /\n/\n @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n /\n/ eslint-enable jsdoc/valid-types */\nexport function useScrollable( props ) {\n\tconst {\n\t\tclassName,\n\t\tscrollDirection = 'y',\n\t\tsmoothScroll = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Scrollable' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Scrollable,\n\t\t\t\tstyles.scrollableScrollbar,\n\t\t\t\tsmoothScroll && styles.smoothScroll,\n\t\t\t\tscrollDirection === 'x' && styles.scrollX,\n\t\t\t\tscrollDirection === 'y' && styles.scrollY,\n\t\t\t\tscrollDirection === 'auto' && styles.scrollAuto,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, scrollDirection, smoothScroll ]\n\t);\n\n\treturn { ...otherProps, className: classes };\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/scrollable/hook.js"],"names":["useScrollable","props","className","scrollDirection","smoothScroll","otherProps","cx","classes","styles","Scrollable","scrollableScrollbar","scrollX","scrollY","scrollAuto"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;;AACA;AACA;AACA;;AACA;AACO,SAASA,aAAT,CAAwBC,KAAxB,EAAgC;AACtC,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,eAAe,GAAG,GAFb;AAGLC,IAAAA,YAAY,GAAG,KAHV;AAIL,OAAGC;AAJE,MAKF,+BAAkBJ,KAAlB,EAAyB,YAAzB,CALJ;AAOA,QAAMK,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBACf,MACCD,EAAE,CACDE,MAAM,CAACC,UADN,EAEDD,MAAM,CAACE,mBAFN,EAGDN,YAAY,IAAII,MAAM,CAACJ,YAHtB,EAIDD,eAAe,KAAK,GAApB,IAA2BK,MAAM,CAACG,OAJjC,EAKDR,eAAe,KAAK,GAApB,IAA2BK,MAAM,CAACI,OALjC,EAMDT,eAAe,KAAK,MAApB,IAA8BK,MAAM,CAACK,UANpC,EAODX,SAPC,CAFY,EAWf,CAAEA,SAAF,EAAaI,EAAb,EAAiBH,eAAjB,EAAkCC,YAAlC,CAXe,CAAhB;AAcA,SAAO,EAAE,GAAGC,UAAL;AAAiBH,IAAAA,SAAS,EAAEK;AAA5B,GAAP;AACA","sourcesContent":["/*\n WordPress dependencies\n /\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport { useContextSystem } from '../ui/context';\nimport as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/* eslint-disable jsdoc/valid-types /\n/\n @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n /\n/ eslint-enable jsdoc/valid-types */\nexport function useScrollable( props ) {\n\tconst {\n\t\tclassName,\n\t\tscrollDirection = 'y',\n\t\tsmoothScroll = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Scrollable' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.Scrollable,\n\t\t\t\tstyles.scrollableScrollbar,\n\t\t\t\tsmoothScroll && styles.smoothScroll,\n\t\t\t\tscrollDirection === 'x' && styles.scrollX,\n\t\t\t\tscrollDirection === 'y' && styles.scrollY,\n\t\t\t\tscrollDirection === 'auto' && styles.scrollAuto,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, scrollDirection, smoothScroll ]\n\t);\n\n\treturn { ...otherProps, className: classes };\n}\n"]}

package/build/select-control/styles/select-control-styles.js CHANGED Viewed

@@ -27,7 +27,7 @@ const disabledStyles = _ref => {
   if (!disabled) return '';
   return /*#__PURE__*/(0, _react.css)({
     color: _utils.COLORS.ui.textDisabled
-  }, process.env.NODE_ENV === "production" ? "" : ";label:disabledStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQlEiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9zZWxlY3QtY29udHJvbC9zdHlsZXMvc2VsZWN0LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU2l6ZSB9IGZyb20gJy4uL3R5cGVzJztcblxuaW50ZXJmYWNlIFNlbGVjdFByb3BzIHtcblx0ZGlzYWJsZWQ/OiBib29sZWFuO1xuXHRzZWxlY3RTaXplPzogU2l6ZTtcbn1cblxuY29uc3QgZGlzYWJsZWRTdHlsZXMgPSAoIHsgZGlzYWJsZWQgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGlmICggISBkaXNhYmxlZCApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Y29sb3I6IENPTE9SUy51aS50ZXh0RGlzYWJsZWQsXG5cdH0gKTtcbn07XG5cbmNvbnN0IGZvbnRTaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6ICcxM3B4Jyxcblx0XHRzbWFsbDogJzExcHgnLFxuXHR9O1xuXG5cdGNvbnN0IGZvbnRTaXplID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdO1xuXHRjb25zdCBmb250U2l6ZU1vYmlsZSA9ICcxNnB4JztcblxuXHRpZiAoICEgZm9udFNpemUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRmb250LXNpemU6ICR7IGZvbnRTaXplTW9iaWxlIH07XG5cblx0XHRAbWVkaWEgKCBtaW4td2lkdGg6IDYwMHB4ICkge1xuXHRcdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZSB9O1xuXHRcdH1cblx0YDtcbn07XG5cbmNvbnN0IHNpemVTdHlsZXMgPSAoIHsgc2VsZWN0U2l6ZSB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDoge1xuXHRcdFx0aGVpZ2h0OiAzMCxcblx0XHRcdGxpbmVIZWlnaHQ6IDEsXG5cdFx0XHRtaW5IZWlnaHQ6IDMwLFxuXHRcdH0sXG5cdFx0c21hbGw6IHtcblx0XHRcdGhlaWdodDogMjQsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAyNCxcblx0XHR9LFxuXHR9O1xuXG5cdGNvbnN0IHN0eWxlID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdIHx8IHNpemVzLmRlZmF1bHQ7XG5cblx0cmV0dXJuIGNzcyggc3R5bGUgKTtcbn07XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9IHN0eWxlZC5zZWxlY3Q8IFNlbGVjdFByb3BzID5gXG5cdCYmJiB7XG5cdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGJvcmRlcjogbm9uZTtcblx0XHRib3gtc2hhZG93OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ibGFjayB9O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdG1hcmdpbjogMDtcblx0XHR3aWR0aDogMTAwJTtcblxuXHRcdCR7IGRpc2FibGVkU3R5bGVzIH07XG5cdFx0JHsgZm9udFNpemVTdHlsZXMgfTtcblx0XHQkeyBzaXplU3R5bGVzIH07XG5cblx0XHQkeyBydGwoIHsgcGFkZGluZ0xlZnQ6IDgsIHBhZGRpbmdSaWdodDogMjQgfSApIH1cblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvd25BcnJvd1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBhZGRpbmc6IDAgNHB4O1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9XG5cblx0c3ZnIHtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuYDtcbiJdfQ== */");
+  }, process.env.NODE_ENV === "production" ? "" : ";label:disabledStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQlEiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9zZWxlY3QtY29udHJvbC9zdHlsZXMvc2VsZWN0LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU2l6ZSB9IGZyb20gJy4uL3R5cGVzJztcblxuaW50ZXJmYWNlIFNlbGVjdFByb3BzIHtcblx0ZGlzYWJsZWQ/OiBib29sZWFuO1xuXHRzZWxlY3RTaXplPzogU2l6ZTtcbn1cblxuY29uc3QgZGlzYWJsZWRTdHlsZXMgPSAoIHsgZGlzYWJsZWQgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGlmICggISBkaXNhYmxlZCApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Y29sb3I6IENPTE9SUy51aS50ZXh0RGlzYWJsZWQsXG5cdH0gKTtcbn07XG5cbmNvbnN0IGZvbnRTaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6ICcxM3B4Jyxcblx0XHRzbWFsbDogJzExcHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzEzcHgnLFxuXHR9O1xuXG5cdGNvbnN0IGZvbnRTaXplID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdO1xuXHRjb25zdCBmb250U2l6ZU1vYmlsZSA9ICcxNnB4JztcblxuXHRpZiAoICEgZm9udFNpemUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRmb250LXNpemU6ICR7IGZvbnRTaXplTW9iaWxlIH07XG5cblx0XHRAbWVkaWEgKCBtaW4td2lkdGg6IDYwMHB4ICkge1xuXHRcdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZSB9O1xuXHRcdH1cblx0YDtcbn07XG5cbmNvbnN0IHNpemVTdHlsZXMgPSAoIHsgc2VsZWN0U2l6ZSB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDoge1xuXHRcdFx0aGVpZ2h0OiAzMCxcblx0XHRcdGxpbmVIZWlnaHQ6IDEsXG5cdFx0XHRtaW5IZWlnaHQ6IDMwLFxuXHRcdH0sXG5cdFx0c21hbGw6IHtcblx0XHRcdGhlaWdodDogMjQsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAyNCxcblx0XHR9LFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzoge1xuXHRcdFx0aGVpZ2h0OiA0MCxcblx0XHRcdGxpbmVIZWlnaHQ6IDEsXG5cdFx0XHRtaW5IZWlnaHQ6IDQwLFxuXHRcdH0sXG5cdH07XG5cblx0Y29uc3Qgc3R5bGUgPSBzaXplc1sgc2VsZWN0U2l6ZSBhcyBTaXplIF0gfHwgc2l6ZXMuZGVmYXVsdDtcblxuXHRyZXR1cm4gY3NzKCBzdHlsZSApO1xufTtcblxuY29uc3Qgc2l6ZVBhZGRpbmdzID0gKCB7IHNlbGVjdFNpemUgPSAnZGVmYXVsdCcgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IHtcblx0XHRcdHBhZGRpbmdMZWZ0OiA4LFxuXHRcdFx0cGFkZGluZ1JpZ2h0OiAyNCxcblx0XHR9LFxuXHRcdHNtYWxsOiB7XG5cdFx0XHRwYWRkaW5nTGVmdDogOCxcblx0XHRcdHBhZGRpbmdSaWdodDogMjQsXG5cdFx0fSxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6IHtcblx0XHRcdHBhZGRpbmdMZWZ0OiAxNixcblx0XHRcdHBhZGRpbmdSaWdodDogMzIsXG5cdFx0fSxcblx0fTtcblx0cmV0dXJuIHJ0bCggc2l6ZXNbIHNlbGVjdFNpemUgXSApO1xufTtcblxuLy8gVE9ETzogUmVzb2x2ZSBuZWVkIHRvIHVzZSAmJiYgdG8gaW5jcmVhc2Ugc3BlY2lmaWNpdHlcbi8vIGh0dHBzOi8vZ2l0aHViLmNvbS9Xb3JkUHJlc3MvZ3V0ZW5iZXJnL2lzc3Vlcy8xODQ4M1xuXG5leHBvcnQgY29uc3QgU2VsZWN0ID0gc3R5bGVkLnNlbGVjdDwgU2VsZWN0UHJvcHMgPmBcblx0JiYmIHtcblx0XHRhcHBlYXJhbmNlOiBub25lO1xuXHRcdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0Ym9yZGVyOiBub25lO1xuXHRcdGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcblx0XHRjb2xvcjogJHsgQ09MT1JTLmJsYWNrIH07XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0bWFyZ2luOiAwO1xuXHRcdHdpZHRoOiAxMDAlO1xuXG5cdFx0JHsgZGlzYWJsZWRTdHlsZXMgfTtcblx0XHQkeyBmb250U2l6ZVN0eWxlcyB9O1xuXHRcdCR7IHNpemVTdHlsZXMgfTtcblx0XHQkeyBzaXplUGFkZGluZ3MgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvd25BcnJvd1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBhZGRpbmc6IDAgNHB4O1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9XG5cblx0c3ZnIHtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuYDtcbiJdfQ== */");
 };
 const fontSizeStyles = _ref2 => {
@@ -36,12 +36,13 @@ const fontSizeStyles = _ref2 => {
   } = _ref2;
   const sizes = {
     default: '13px',
-    small: '11px'
+    small: '11px',
+    '__unstable-large': '13px'
   };
   const fontSize = sizes[selectSize];
   const fontSizeMobile = '16px';
   if (!fontSize) return '';
-  return /*#__PURE__*/(0, _react.css)("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:fontSizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQ1ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9zZWxlY3QtY29udHJvbC9zdHlsZXMvc2VsZWN0LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU2l6ZSB9IGZyb20gJy4uL3R5cGVzJztcblxuaW50ZXJmYWNlIFNlbGVjdFByb3BzIHtcblx0ZGlzYWJsZWQ/OiBib29sZWFuO1xuXHRzZWxlY3RTaXplPzogU2l6ZTtcbn1cblxuY29uc3QgZGlzYWJsZWRTdHlsZXMgPSAoIHsgZGlzYWJsZWQgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGlmICggISBkaXNhYmxlZCApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Y29sb3I6IENPTE9SUy51aS50ZXh0RGlzYWJsZWQsXG5cdH0gKTtcbn07XG5cbmNvbnN0IGZvbnRTaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6ICcxM3B4Jyxcblx0XHRzbWFsbDogJzExcHgnLFxuXHR9O1xuXG5cdGNvbnN0IGZvbnRTaXplID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdO1xuXHRjb25zdCBmb250U2l6ZU1vYmlsZSA9ICcxNnB4JztcblxuXHRpZiAoICEgZm9udFNpemUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRmb250LXNpemU6ICR7IGZvbnRTaXplTW9iaWxlIH07XG5cblx0XHRAbWVkaWEgKCBtaW4td2lkdGg6IDYwMHB4ICkge1xuXHRcdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZSB9O1xuXHRcdH1cblx0YDtcbn07XG5cbmNvbnN0IHNpemVTdHlsZXMgPSAoIHsgc2VsZWN0U2l6ZSB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDoge1xuXHRcdFx0aGVpZ2h0OiAzMCxcblx0XHRcdGxpbmVIZWlnaHQ6IDEsXG5cdFx0XHRtaW5IZWlnaHQ6IDMwLFxuXHRcdH0sXG5cdFx0c21hbGw6IHtcblx0XHRcdGhlaWdodDogMjQsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAyNCxcblx0XHR9LFxuXHR9O1xuXG5cdGNvbnN0IHN0eWxlID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdIHx8IHNpemVzLmRlZmF1bHQ7XG5cblx0cmV0dXJuIGNzcyggc3R5bGUgKTtcbn07XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9IHN0eWxlZC5zZWxlY3Q8IFNlbGVjdFByb3BzID5gXG5cdCYmJiB7XG5cdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGJvcmRlcjogbm9uZTtcblx0XHRib3gtc2hhZG93OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ibGFjayB9O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdG1hcmdpbjogMDtcblx0XHR3aWR0aDogMTAwJTtcblxuXHRcdCR7IGRpc2FibGVkU3R5bGVzIH07XG5cdFx0JHsgZm9udFNpemVTdHlsZXMgfTtcblx0XHQkeyBzaXplU3R5bGVzIH07XG5cblx0XHQkeyBydGwoIHsgcGFkZGluZ0xlZnQ6IDgsIHBhZGRpbmdSaWdodDogMjQgfSApIH1cblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvd25BcnJvd1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBhZGRpbmc6IDAgNHB4O1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9XG5cblx0c3ZnIHtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuYDtcbiJdfQ== */");
+  return /*#__PURE__*/(0, _react.css)("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:fontSizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ1ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9zZWxlY3QtY29udHJvbC9zdHlsZXMvc2VsZWN0LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU2l6ZSB9IGZyb20gJy4uL3R5cGVzJztcblxuaW50ZXJmYWNlIFNlbGVjdFByb3BzIHtcblx0ZGlzYWJsZWQ/OiBib29sZWFuO1xuXHRzZWxlY3RTaXplPzogU2l6ZTtcbn1cblxuY29uc3QgZGlzYWJsZWRTdHlsZXMgPSAoIHsgZGlzYWJsZWQgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGlmICggISBkaXNhYmxlZCApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Y29sb3I6IENPTE9SUy51aS50ZXh0RGlzYWJsZWQsXG5cdH0gKTtcbn07XG5cbmNvbnN0IGZvbnRTaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6ICcxM3B4Jyxcblx0XHRzbWFsbDogJzExcHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzEzcHgnLFxuXHR9O1xuXG5cdGNvbnN0IGZvbnRTaXplID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdO1xuXHRjb25zdCBmb250U2l6ZU1vYmlsZSA9ICcxNnB4JztcblxuXHRpZiAoICEgZm9udFNpemUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRmb250LXNpemU6ICR7IGZvbnRTaXplTW9iaWxlIH07XG5cblx0XHRAbWVkaWEgKCBtaW4td2lkdGg6IDYwMHB4ICkge1xuXHRcdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZSB9O1xuXHRcdH1cblx0YDtcbn07XG5cbmNvbnN0IHNpemVTdHlsZXMgPSAoIHsgc2VsZWN0U2l6ZSB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDoge1xuXHRcdFx0aGVpZ2h0OiAzMCxcblx0XHRcdGxpbmVIZWlnaHQ6IDEsXG5cdFx0XHRtaW5IZWlnaHQ6IDMwLFxuXHRcdH0sXG5cdFx0c21hbGw6IHtcblx0XHRcdGhlaWdodDogMjQsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAyNCxcblx0XHR9LFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzoge1xuXHRcdFx0aGVpZ2h0OiA0MCxcblx0XHRcdGxpbmVIZWlnaHQ6IDEsXG5cdFx0XHRtaW5IZWlnaHQ6IDQwLFxuXHRcdH0sXG5cdH07XG5cblx0Y29uc3Qgc3R5bGUgPSBzaXplc1sgc2VsZWN0U2l6ZSBhcyBTaXplIF0gfHwgc2l6ZXMuZGVmYXVsdDtcblxuXHRyZXR1cm4gY3NzKCBzdHlsZSApO1xufTtcblxuY29uc3Qgc2l6ZVBhZGRpbmdzID0gKCB7IHNlbGVjdFNpemUgPSAnZGVmYXVsdCcgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IHtcblx0XHRcdHBhZGRpbmdMZWZ0OiA4LFxuXHRcdFx0cGFkZGluZ1JpZ2h0OiAyNCxcblx0XHR9LFxuXHRcdHNtYWxsOiB7XG5cdFx0XHRwYWRkaW5nTGVmdDogOCxcblx0XHRcdHBhZGRpbmdSaWdodDogMjQsXG5cdFx0fSxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6IHtcblx0XHRcdHBhZGRpbmdMZWZ0OiAxNixcblx0XHRcdHBhZGRpbmdSaWdodDogMzIsXG5cdFx0fSxcblx0fTtcblx0cmV0dXJuIHJ0bCggc2l6ZXNbIHNlbGVjdFNpemUgXSApO1xufTtcblxuLy8gVE9ETzogUmVzb2x2ZSBuZWVkIHRvIHVzZSAmJiYgdG8gaW5jcmVhc2Ugc3BlY2lmaWNpdHlcbi8vIGh0dHBzOi8vZ2l0aHViLmNvbS9Xb3JkUHJlc3MvZ3V0ZW5iZXJnL2lzc3Vlcy8xODQ4M1xuXG5leHBvcnQgY29uc3QgU2VsZWN0ID0gc3R5bGVkLnNlbGVjdDwgU2VsZWN0UHJvcHMgPmBcblx0JiYmIHtcblx0XHRhcHBlYXJhbmNlOiBub25lO1xuXHRcdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0Ym9yZGVyOiBub25lO1xuXHRcdGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcblx0XHRjb2xvcjogJHsgQ09MT1JTLmJsYWNrIH07XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0bWFyZ2luOiAwO1xuXHRcdHdpZHRoOiAxMDAlO1xuXG5cdFx0JHsgZGlzYWJsZWRTdHlsZXMgfTtcblx0XHQkeyBmb250U2l6ZVN0eWxlcyB9O1xuXHRcdCR7IHNpemVTdHlsZXMgfTtcblx0XHQkeyBzaXplUGFkZGluZ3MgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvd25BcnJvd1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBhZGRpbmc6IDAgNHB4O1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9XG5cblx0c3ZnIHtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuYDtcbiJdfQ== */");
 };
 const sizeStyles = _ref3 => {
@@ -58,10 +59,36 @@ const sizeStyles = _ref3 => {
       height: 24,
       lineHeight: 1,
       minHeight: 24
+    },
+    '__unstable-large': {
+      height: 40,
+      lineHeight: 1,
+      minHeight: 40
     }
   };
   const style = sizes[selectSize] || sizes.default;
-  return /*#__PURE__*/(0, _react.css)(style, process.env.NODE_ENV === "production" ? "" : ";label:sizeStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RFEiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9zZWxlY3QtY29udHJvbC9zdHlsZXMvc2VsZWN0LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU2l6ZSB9IGZyb20gJy4uL3R5cGVzJztcblxuaW50ZXJmYWNlIFNlbGVjdFByb3BzIHtcblx0ZGlzYWJsZWQ/OiBib29sZWFuO1xuXHRzZWxlY3RTaXplPzogU2l6ZTtcbn1cblxuY29uc3QgZGlzYWJsZWRTdHlsZXMgPSAoIHsgZGlzYWJsZWQgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGlmICggISBkaXNhYmxlZCApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Y29sb3I6IENPTE9SUy51aS50ZXh0RGlzYWJsZWQsXG5cdH0gKTtcbn07XG5cbmNvbnN0IGZvbnRTaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6ICcxM3B4Jyxcblx0XHRzbWFsbDogJzExcHgnLFxuXHR9O1xuXG5cdGNvbnN0IGZvbnRTaXplID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdO1xuXHRjb25zdCBmb250U2l6ZU1vYmlsZSA9ICcxNnB4JztcblxuXHRpZiAoICEgZm9udFNpemUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRmb250LXNpemU6ICR7IGZvbnRTaXplTW9iaWxlIH07XG5cblx0XHRAbWVkaWEgKCBtaW4td2lkdGg6IDYwMHB4ICkge1xuXHRcdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZSB9O1xuXHRcdH1cblx0YDtcbn07XG5cbmNvbnN0IHNpemVTdHlsZXMgPSAoIHsgc2VsZWN0U2l6ZSB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDoge1xuXHRcdFx0aGVpZ2h0OiAzMCxcblx0XHRcdGxpbmVIZWlnaHQ6IDEsXG5cdFx0XHRtaW5IZWlnaHQ6IDMwLFxuXHRcdH0sXG5cdFx0c21hbGw6IHtcblx0XHRcdGhlaWdodDogMjQsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAyNCxcblx0XHR9LFxuXHR9O1xuXG5cdGNvbnN0IHN0eWxlID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdIHx8IHNpemVzLmRlZmF1bHQ7XG5cblx0cmV0dXJuIGNzcyggc3R5bGUgKTtcbn07XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9IHN0eWxlZC5zZWxlY3Q8IFNlbGVjdFByb3BzID5gXG5cdCYmJiB7XG5cdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGJvcmRlcjogbm9uZTtcblx0XHRib3gtc2hhZG93OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ibGFjayB9O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdG1hcmdpbjogMDtcblx0XHR3aWR0aDogMTAwJTtcblxuXHRcdCR7IGRpc2FibGVkU3R5bGVzIH07XG5cdFx0JHsgZm9udFNpemVTdHlsZXMgfTtcblx0XHQkeyBzaXplU3R5bGVzIH07XG5cblx0XHQkeyBydGwoIHsgcGFkZGluZ0xlZnQ6IDgsIHBhZGRpbmdSaWdodDogMjQgfSApIH1cblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvd25BcnJvd1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBhZGRpbmc6IDAgNHB4O1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9XG5cblx0c3ZnIHtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuYDtcbiJdfQ== */");
+  return /*#__PURE__*/(0, _react.css)(style, process.env.NODE_ENV === "production" ? "" : ";label:sizeStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRVEiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9zZWxlY3QtY29udHJvbC9zdHlsZXMvc2VsZWN0LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgU2l6ZSB9IGZyb20gJy4uL3R5cGVzJztcblxuaW50ZXJmYWNlIFNlbGVjdFByb3BzIHtcblx0ZGlzYWJsZWQ/OiBib29sZWFuO1xuXHRzZWxlY3RTaXplPzogU2l6ZTtcbn1cblxuY29uc3QgZGlzYWJsZWRTdHlsZXMgPSAoIHsgZGlzYWJsZWQgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGlmICggISBkaXNhYmxlZCApIHJldHVybiAnJztcblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Y29sb3I6IENPTE9SUy51aS50ZXh0RGlzYWJsZWQsXG5cdH0gKTtcbn07XG5cbmNvbnN0IGZvbnRTaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6ICcxM3B4Jyxcblx0XHRzbWFsbDogJzExcHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzEzcHgnLFxuXHR9O1xuXG5cdGNvbnN0IGZvbnRTaXplID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdO1xuXHRjb25zdCBmb250U2l6ZU1vYmlsZSA9ICcxNnB4JztcblxuXHRpZiAoICEgZm9udFNpemUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRmb250LXNpemU6ICR7IGZvbnRTaXplTW9iaWxlIH07XG5cblx0XHRAbWVkaWEgKCBtaW4td2lkdGg6IDYwMHB4ICkge1xuXHRcdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZSB9O1xuXHRcdH1cblx0YDtcbn07XG5cbmNvbnN0IHNpemVTdHlsZXMgPSAoIHsgc2VsZWN0U2l6ZSB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDoge1xuXHRcdFx0aGVpZ2h0OiAzMCxcblx0XHRcdGxpbmVIZWlnaHQ6IDEsXG5cdFx0XHRtaW5IZWlnaHQ6IDMwLFxuXHRcdH0sXG5cdFx0c21hbGw6IHtcblx0XHRcdGhlaWdodDogMjQsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAyNCxcblx0XHR9LFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzoge1xuXHRcdFx0aGVpZ2h0OiA0MCxcblx0XHRcdGxpbmVIZWlnaHQ6IDEsXG5cdFx0XHRtaW5IZWlnaHQ6IDQwLFxuXHRcdH0sXG5cdH07XG5cblx0Y29uc3Qgc3R5bGUgPSBzaXplc1sgc2VsZWN0U2l6ZSBhcyBTaXplIF0gfHwgc2l6ZXMuZGVmYXVsdDtcblxuXHRyZXR1cm4gY3NzKCBzdHlsZSApO1xufTtcblxuY29uc3Qgc2l6ZVBhZGRpbmdzID0gKCB7IHNlbGVjdFNpemUgPSAnZGVmYXVsdCcgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IHtcblx0XHRcdHBhZGRpbmdMZWZ0OiA4LFxuXHRcdFx0cGFkZGluZ1JpZ2h0OiAyNCxcblx0XHR9LFxuXHRcdHNtYWxsOiB7XG5cdFx0XHRwYWRkaW5nTGVmdDogOCxcblx0XHRcdHBhZGRpbmdSaWdodDogMjQsXG5cdFx0fSxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6IHtcblx0XHRcdHBhZGRpbmdMZWZ0OiAxNixcblx0XHRcdHBhZGRpbmdSaWdodDogMzIsXG5cdFx0fSxcblx0fTtcblx0cmV0dXJuIHJ0bCggc2l6ZXNbIHNlbGVjdFNpemUgXSApO1xufTtcblxuLy8gVE9ETzogUmVzb2x2ZSBuZWVkIHRvIHVzZSAmJiYgdG8gaW5jcmVhc2Ugc3BlY2lmaWNpdHlcbi8vIGh0dHBzOi8vZ2l0aHViLmNvbS9Xb3JkUHJlc3MvZ3V0ZW5iZXJnL2lzc3Vlcy8xODQ4M1xuXG5leHBvcnQgY29uc3QgU2VsZWN0ID0gc3R5bGVkLnNlbGVjdDwgU2VsZWN0UHJvcHMgPmBcblx0JiYmIHtcblx0XHRhcHBlYXJhbmNlOiBub25lO1xuXHRcdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0Ym9yZGVyOiBub25lO1xuXHRcdGJveC1zaGFkb3c6IG5vbmUgIWltcG9ydGFudDtcblx0XHRjb2xvcjogJHsgQ09MT1JTLmJsYWNrIH07XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0bWFyZ2luOiAwO1xuXHRcdHdpZHRoOiAxMDAlO1xuXG5cdFx0JHsgZGlzYWJsZWRTdHlsZXMgfTtcblx0XHQkeyBmb250U2l6ZVN0eWxlcyB9O1xuXHRcdCR7IHNpemVTdHlsZXMgfTtcblx0XHQkeyBzaXplUGFkZGluZ3MgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IERvd25BcnJvd1dyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdHBhZGRpbmc6IDAgNHB4O1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDA7XG5cblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9XG5cblx0c3ZnIHtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0fVxuYDtcbiJdfQ== */");
+};
+const sizePaddings = _ref4 => {
+  let {
+    selectSize = 'default'
+  } = _ref4;
+  const sizes = {
+    default: {
+      paddingLeft: 8,
+      paddingRight: 24
+    },
+    small: {
+      paddingLeft: 8,
+      paddingRight: 24
+    },
+    '__unstable-large': {
+      paddingLeft: 16,
+      paddingRight: 32
+    }
+  };
+  return (0, _utils.rtl)(sizes[selectSize]);
 }; // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
@@ -71,10 +98,7 @@ const Select = (0, _base.default)("select", process.env.NODE_ENV === "production
 } : {
   target: "e1mv6sxx1",
   label: "Select"
-})("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", _utils.COLORS.black, ";display:block;margin:0;width:100%;", disabledStyles, ";", fontSizeStyles, ";", sizeStyles, ";", (0, _utils.rtl)({
-  paddingLeft: 8,
-  paddingRight: 24
-}), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRWtEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBydGwgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFNpemUgfSBmcm9tICcuLi90eXBlcyc7XG5cbmludGVyZmFjZSBTZWxlY3RQcm9wcyB7XG5cdGRpc2FibGVkPzogYm9vbGVhbjtcblx0c2VsZWN0U2l6ZT86IFNpemU7XG59XG5cbmNvbnN0IGRpc2FibGVkU3R5bGVzID0gKCB7IGRpc2FibGVkIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRpZiAoICEgZGlzYWJsZWQgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGNvbG9yOiBDT0xPUlMudWkudGV4dERpc2FibGVkLFxuXHR9ICk7XG59O1xuXG5jb25zdCBmb250U2l6ZVN0eWxlcyA9ICggeyBzZWxlY3RTaXplIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRjb25zdCBzaXplcyA9IHtcblx0XHRkZWZhdWx0OiAnMTNweCcsXG5cdFx0c21hbGw6ICcxMXB4Jyxcblx0fTtcblxuXHRjb25zdCBmb250U2l6ZSA9IHNpemVzWyBzZWxlY3RTaXplIGFzIFNpemUgXTtcblx0Y29uc3QgZm9udFNpemVNb2JpbGUgPSAnMTZweCc7XG5cblx0aWYgKCAhIGZvbnRTaXplICkgcmV0dXJuICcnO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZU1vYmlsZSB9O1xuXG5cdFx0QG1lZGlhICggbWluLXdpZHRoOiA2MDBweCApIHtcblx0XHRcdGZvbnQtc2l6ZTogJHsgZm9udFNpemUgfTtcblx0XHR9XG5cdGA7XG59O1xuXG5jb25zdCBzaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IHtcblx0XHRcdGhlaWdodDogMzAsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAzMCxcblx0XHR9LFxuXHRcdHNtYWxsOiB7XG5cdFx0XHRoZWlnaHQ6IDI0LFxuXHRcdFx0bGluZUhlaWdodDogMSxcblx0XHRcdG1pbkhlaWdodDogMjQsXG5cdFx0fSxcblx0fTtcblxuXHRjb25zdCBzdHlsZSA9IHNpemVzWyBzZWxlY3RTaXplIGFzIFNpemUgXSB8fCBzaXplcy5kZWZhdWx0O1xuXG5cdHJldHVybiBjc3MoIHN0eWxlICk7XG59O1xuXG4vLyBUT0RPOiBSZXNvbHZlIG5lZWQgdG8gdXNlICYmJiB0byBpbmNyZWFzZSBzcGVjaWZpY2l0eVxuLy8gaHR0cHM6Ly9naXRodWIuY29tL1dvcmRQcmVzcy9ndXRlbmJlcmcvaXNzdWVzLzE4NDgzXG5cbmV4cG9ydCBjb25zdCBTZWxlY3QgPSBzdHlsZWQuc2VsZWN0PCBTZWxlY3RQcm9wcyA+YFxuXHQmJiYge1xuXHRcdGFwcGVhcmFuY2U6IG5vbmU7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRib3JkZXI6IG5vbmU7XG5cdFx0Ym94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuYmxhY2sgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRtYXJnaW46IDA7XG5cdFx0d2lkdGg6IDEwMCU7XG5cblx0XHQkeyBkaXNhYmxlZFN0eWxlcyB9O1xuXHRcdCR7IGZvbnRTaXplU3R5bGVzIH07XG5cdFx0JHsgc2l6ZVN0eWxlcyB9O1xuXG5cdFx0JHsgcnRsKCB7IHBhZGRpbmdMZWZ0OiA4LCBwYWRkaW5nUmlnaHQ6IDI0IH0gKSB9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBEb3duQXJyb3dXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRwYWRkaW5nOiAwIDRweDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXG5cdCR7IHJ0bCggeyByaWdodDogMCB9ICkgfVxuXG5cdHN2ZyB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdH1cbmA7XG4iXX0= */"));
+})("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", _utils.COLORS.black, ";display:block;margin:0;width:100%;", disabledStyles, ";", fontSizeStyles, ";", sizeStyles, ";", sizePaddings, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRmtEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBydGwgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFNpemUgfSBmcm9tICcuLi90eXBlcyc7XG5cbmludGVyZmFjZSBTZWxlY3RQcm9wcyB7XG5cdGRpc2FibGVkPzogYm9vbGVhbjtcblx0c2VsZWN0U2l6ZT86IFNpemU7XG59XG5cbmNvbnN0IGRpc2FibGVkU3R5bGVzID0gKCB7IGRpc2FibGVkIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRpZiAoICEgZGlzYWJsZWQgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGNvbG9yOiBDT0xPUlMudWkudGV4dERpc2FibGVkLFxuXHR9ICk7XG59O1xuXG5jb25zdCBmb250U2l6ZVN0eWxlcyA9ICggeyBzZWxlY3RTaXplIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRjb25zdCBzaXplcyA9IHtcblx0XHRkZWZhdWx0OiAnMTNweCcsXG5cdFx0c21hbGw6ICcxMXB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICcxM3B4Jyxcblx0fTtcblxuXHRjb25zdCBmb250U2l6ZSA9IHNpemVzWyBzZWxlY3RTaXplIGFzIFNpemUgXTtcblx0Y29uc3QgZm9udFNpemVNb2JpbGUgPSAnMTZweCc7XG5cblx0aWYgKCAhIGZvbnRTaXplICkgcmV0dXJuICcnO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZU1vYmlsZSB9O1xuXG5cdFx0QG1lZGlhICggbWluLXdpZHRoOiA2MDBweCApIHtcblx0XHRcdGZvbnQtc2l6ZTogJHsgZm9udFNpemUgfTtcblx0XHR9XG5cdGA7XG59O1xuXG5jb25zdCBzaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IHtcblx0XHRcdGhlaWdodDogMzAsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAzMCxcblx0XHR9LFxuXHRcdHNtYWxsOiB7XG5cdFx0XHRoZWlnaHQ6IDI0LFxuXHRcdFx0bGluZUhlaWdodDogMSxcblx0XHRcdG1pbkhlaWdodDogMjQsXG5cdFx0fSxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6IHtcblx0XHRcdGhlaWdodDogNDAsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiA0MCxcblx0XHR9LFxuXHR9O1xuXG5cdGNvbnN0IHN0eWxlID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdIHx8IHNpemVzLmRlZmF1bHQ7XG5cblx0cmV0dXJuIGNzcyggc3R5bGUgKTtcbn07XG5cbmNvbnN0IHNpemVQYWRkaW5ncyA9ICggeyBzZWxlY3RTaXplID0gJ2RlZmF1bHQnIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRjb25zdCBzaXplcyA9IHtcblx0XHRkZWZhdWx0OiB7XG5cdFx0XHRwYWRkaW5nTGVmdDogOCxcblx0XHRcdHBhZGRpbmdSaWdodDogMjQsXG5cdFx0fSxcblx0XHRzbWFsbDoge1xuXHRcdFx0cGFkZGluZ0xlZnQ6IDgsXG5cdFx0XHRwYWRkaW5nUmlnaHQ6IDI0LFxuXHRcdH0sXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiB7XG5cdFx0XHRwYWRkaW5nTGVmdDogMTYsXG5cdFx0XHRwYWRkaW5nUmlnaHQ6IDMyLFxuXHRcdH0sXG5cdH07XG5cdHJldHVybiBydGwoIHNpemVzWyBzZWxlY3RTaXplIF0gKTtcbn07XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9IHN0eWxlZC5zZWxlY3Q8IFNlbGVjdFByb3BzID5gXG5cdCYmJiB7XG5cdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGJvcmRlcjogbm9uZTtcblx0XHRib3gtc2hhZG93OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ibGFjayB9O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdG1hcmdpbjogMDtcblx0XHR3aWR0aDogMTAwJTtcblxuXHRcdCR7IGRpc2FibGVkU3R5bGVzIH07XG5cdFx0JHsgZm9udFNpemVTdHlsZXMgfTtcblx0XHQkeyBzaXplU3R5bGVzIH07XG5cdFx0JHsgc2l6ZVBhZGRpbmdzIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBEb3duQXJyb3dXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRwYWRkaW5nOiAwIDRweDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXG5cdCR7IHJ0bCggeyByaWdodDogMCB9ICkgfVxuXG5cdHN2ZyB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdH1cbmA7XG4iXX0= */"));
 exports.Select = Select;
 const DownArrowWrapper = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "e1mv6sxx0"
@@ -83,6 +107,6 @@ const DownArrowWrapper = (0, _base.default)("div", process.env.NODE_ENV === "pro
   label: "DownArrowWrapper"
 })("align-items:center;bottom:0;box-sizing:border-box;display:flex;padding:0 4px;pointer-events:none;position:absolute;top:0;", (0, _utils.rtl)({
   right: 0
-}), " svg{display:block;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1RjBDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBydGwgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFNpemUgfSBmcm9tICcuLi90eXBlcyc7XG5cbmludGVyZmFjZSBTZWxlY3RQcm9wcyB7XG5cdGRpc2FibGVkPzogYm9vbGVhbjtcblx0c2VsZWN0U2l6ZT86IFNpemU7XG59XG5cbmNvbnN0IGRpc2FibGVkU3R5bGVzID0gKCB7IGRpc2FibGVkIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRpZiAoICEgZGlzYWJsZWQgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGNvbG9yOiBDT0xPUlMudWkudGV4dERpc2FibGVkLFxuXHR9ICk7XG59O1xuXG5jb25zdCBmb250U2l6ZVN0eWxlcyA9ICggeyBzZWxlY3RTaXplIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRjb25zdCBzaXplcyA9IHtcblx0XHRkZWZhdWx0OiAnMTNweCcsXG5cdFx0c21hbGw6ICcxMXB4Jyxcblx0fTtcblxuXHRjb25zdCBmb250U2l6ZSA9IHNpemVzWyBzZWxlY3RTaXplIGFzIFNpemUgXTtcblx0Y29uc3QgZm9udFNpemVNb2JpbGUgPSAnMTZweCc7XG5cblx0aWYgKCAhIGZvbnRTaXplICkgcmV0dXJuICcnO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZU1vYmlsZSB9O1xuXG5cdFx0QG1lZGlhICggbWluLXdpZHRoOiA2MDBweCApIHtcblx0XHRcdGZvbnQtc2l6ZTogJHsgZm9udFNpemUgfTtcblx0XHR9XG5cdGA7XG59O1xuXG5jb25zdCBzaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IHtcblx0XHRcdGhlaWdodDogMzAsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAzMCxcblx0XHR9LFxuXHRcdHNtYWxsOiB7XG5cdFx0XHRoZWlnaHQ6IDI0LFxuXHRcdFx0bGluZUhlaWdodDogMSxcblx0XHRcdG1pbkhlaWdodDogMjQsXG5cdFx0fSxcblx0fTtcblxuXHRjb25zdCBzdHlsZSA9IHNpemVzWyBzZWxlY3RTaXplIGFzIFNpemUgXSB8fCBzaXplcy5kZWZhdWx0O1xuXG5cdHJldHVybiBjc3MoIHN0eWxlICk7XG59O1xuXG4vLyBUT0RPOiBSZXNvbHZlIG5lZWQgdG8gdXNlICYmJiB0byBpbmNyZWFzZSBzcGVjaWZpY2l0eVxuLy8gaHR0cHM6Ly9naXRodWIuY29tL1dvcmRQcmVzcy9ndXRlbmJlcmcvaXNzdWVzLzE4NDgzXG5cbmV4cG9ydCBjb25zdCBTZWxlY3QgPSBzdHlsZWQuc2VsZWN0PCBTZWxlY3RQcm9wcyA+YFxuXHQmJiYge1xuXHRcdGFwcGVhcmFuY2U6IG5vbmU7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRib3JkZXI6IG5vbmU7XG5cdFx0Ym94LXNoYWRvdzogbm9uZSAhaW1wb3J0YW50O1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMuYmxhY2sgfTtcblx0XHRkaXNwbGF5OiBibG9jaztcblx0XHRtYXJnaW46IDA7XG5cdFx0d2lkdGg6IDEwMCU7XG5cblx0XHQkeyBkaXNhYmxlZFN0eWxlcyB9O1xuXHRcdCR7IGZvbnRTaXplU3R5bGVzIH07XG5cdFx0JHsgc2l6ZVN0eWxlcyB9O1xuXG5cdFx0JHsgcnRsKCB7IHBhZGRpbmdMZWZ0OiA4LCBwYWRkaW5nUmlnaHQ6IDI0IH0gKSB9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBEb3duQXJyb3dXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRwYWRkaW5nOiAwIDRweDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXG5cdCR7IHJ0bCggeyByaWdodDogMCB9ICkgfVxuXG5cdHN2ZyB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdH1cbmA7XG4iXX0= */"));
+}), " svg{display:block;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RzBDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2VsZWN0LWNvbnRyb2wvc3R5bGVzL3NlbGVjdC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTLCBydGwgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFNpemUgfSBmcm9tICcuLi90eXBlcyc7XG5cbmludGVyZmFjZSBTZWxlY3RQcm9wcyB7XG5cdGRpc2FibGVkPzogYm9vbGVhbjtcblx0c2VsZWN0U2l6ZT86IFNpemU7XG59XG5cbmNvbnN0IGRpc2FibGVkU3R5bGVzID0gKCB7IGRpc2FibGVkIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRpZiAoICEgZGlzYWJsZWQgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzcygge1xuXHRcdGNvbG9yOiBDT0xPUlMudWkudGV4dERpc2FibGVkLFxuXHR9ICk7XG59O1xuXG5jb25zdCBmb250U2l6ZVN0eWxlcyA9ICggeyBzZWxlY3RTaXplIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRjb25zdCBzaXplcyA9IHtcblx0XHRkZWZhdWx0OiAnMTNweCcsXG5cdFx0c21hbGw6ICcxMXB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICcxM3B4Jyxcblx0fTtcblxuXHRjb25zdCBmb250U2l6ZSA9IHNpemVzWyBzZWxlY3RTaXplIGFzIFNpemUgXTtcblx0Y29uc3QgZm9udFNpemVNb2JpbGUgPSAnMTZweCc7XG5cblx0aWYgKCAhIGZvbnRTaXplICkgcmV0dXJuICcnO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0Zm9udC1zaXplOiAkeyBmb250U2l6ZU1vYmlsZSB9O1xuXG5cdFx0QG1lZGlhICggbWluLXdpZHRoOiA2MDBweCApIHtcblx0XHRcdGZvbnQtc2l6ZTogJHsgZm9udFNpemUgfTtcblx0XHR9XG5cdGA7XG59O1xuXG5jb25zdCBzaXplU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IHtcblx0XHRcdGhlaWdodDogMzAsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiAzMCxcblx0XHR9LFxuXHRcdHNtYWxsOiB7XG5cdFx0XHRoZWlnaHQ6IDI0LFxuXHRcdFx0bGluZUhlaWdodDogMSxcblx0XHRcdG1pbkhlaWdodDogMjQsXG5cdFx0fSxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6IHtcblx0XHRcdGhlaWdodDogNDAsXG5cdFx0XHRsaW5lSGVpZ2h0OiAxLFxuXHRcdFx0bWluSGVpZ2h0OiA0MCxcblx0XHR9LFxuXHR9O1xuXG5cdGNvbnN0IHN0eWxlID0gc2l6ZXNbIHNlbGVjdFNpemUgYXMgU2l6ZSBdIHx8IHNpemVzLmRlZmF1bHQ7XG5cblx0cmV0dXJuIGNzcyggc3R5bGUgKTtcbn07XG5cbmNvbnN0IHNpemVQYWRkaW5ncyA9ICggeyBzZWxlY3RTaXplID0gJ2RlZmF1bHQnIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRjb25zdCBzaXplcyA9IHtcblx0XHRkZWZhdWx0OiB7XG5cdFx0XHRwYWRkaW5nTGVmdDogOCxcblx0XHRcdHBhZGRpbmdSaWdodDogMjQsXG5cdFx0fSxcblx0XHRzbWFsbDoge1xuXHRcdFx0cGFkZGluZ0xlZnQ6IDgsXG5cdFx0XHRwYWRkaW5nUmlnaHQ6IDI0LFxuXHRcdH0sXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiB7XG5cdFx0XHRwYWRkaW5nTGVmdDogMTYsXG5cdFx0XHRwYWRkaW5nUmlnaHQ6IDMyLFxuXHRcdH0sXG5cdH07XG5cdHJldHVybiBydGwoIHNpemVzWyBzZWxlY3RTaXplIF0gKTtcbn07XG5cbi8vIFRPRE86IFJlc29sdmUgbmVlZCB0byB1c2UgJiYmIHRvIGluY3JlYXNlIHNwZWNpZmljaXR5XG4vLyBodHRwczovL2dpdGh1Yi5jb20vV29yZFByZXNzL2d1dGVuYmVyZy9pc3N1ZXMvMTg0ODNcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9IHN0eWxlZC5zZWxlY3Q8IFNlbGVjdFByb3BzID5gXG5cdCYmJiB7XG5cdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdGJvcmRlcjogbm9uZTtcblx0XHRib3gtc2hhZG93OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ibGFjayB9O1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdG1hcmdpbjogMDtcblx0XHR3aWR0aDogMTAwJTtcblxuXHRcdCR7IGRpc2FibGVkU3R5bGVzIH07XG5cdFx0JHsgZm9udFNpemVTdHlsZXMgfTtcblx0XHQkeyBzaXplU3R5bGVzIH07XG5cdFx0JHsgc2l6ZVBhZGRpbmdzIH07XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBEb3duQXJyb3dXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBmbGV4O1xuXHRwYWRkaW5nOiAwIDRweDtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXG5cdCR7IHJ0bCggeyByaWdodDogMCB9ICkgfVxuXG5cdHN2ZyB7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdH1cbmA7XG4iXX0= */"));
 exports.DownArrowWrapper = DownArrowWrapper;
 //# sourceMappingURL=select-control-styles.js.map

package/build/select-control/styles/select-control-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/select-control/styles/select-control-styles.ts"],"names":["disabledStyles","disabled","color","COLORS","ui","textDisabled","fontSizeStyles","selectSize","sizes","default","small","fontSize","fontSizeMobile","css","sizeStyles","height","lineHeight","minHeight","style","~~Select~~","~~black~~","~~paddingLeft~~","~~paddingRight~~","DownArrowWrapper","right"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,cAAc,GAAG,QAAiC;AAAA,MAA/B;AAAEC,IAAAA;AAAF,GAA+B;AACvD,MAAK,CAAEA,QAAP,EAAkB,OAAO,EAAP;AAElB,sBAAO,gBAAK;AACXC,IAAAA,KAAK,EAAEC,cAAOC,EAAP,CAAUC;AADN,GAAL,~~4oGAAP~~;AAGA,CAND;;AAQA,MAAMC,cAAc,GAAG,SAAmC;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AACzD,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,EAAE,MADI;AAEbC,IAAAA,KAAK,EAAE;~~AAFM~~,GAAd;~~AAKA~~,QAAMC,QAAQ,GAAGH,KAAK,CAAED,UAAF,CAAtB;AACA,QAAMK,cAAc,GAAG,MAAvB;AAEA,MAAK,CAAED,QAAP,EAAkB,OAAO,EAAP;AAElB,0BAAOE,UAAP,gBACeD,cADf,6CAIgBD,QAJhB;AAOA,~~CAlBD~~;;~~AAoBA~~,MAAMG,UAAU,GAAG,SAAmC;AAAA,MAAjC;AAAEP,IAAAA;AAAF,GAAiC;AACrD,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,EAAE;AACRM,MAAAA,MAAM,EAAE,EADA;AAERC,MAAAA,UAAU,EAAE,CAFJ;AAGRC,MAAAA,SAAS,EAAE;AAHH,KADI;AAMbP,IAAAA,KAAK,EAAE;AACNK,MAAAA,MAAM,EAAE,EADF;AAENC,MAAAA,UAAU,EAAE,CAFN;AAGNC,MAAAA,SAAS,EAAE;AAHL;~~AANM~~,GAAd;~~AAaA~~,QAAMC,KAAK,GAAGV,KAAK,CAAED,UAAF,CAAL,IAA+BC,KAAK,CAACC,OAAnD;AAEA,sBAAO,gBAAKS,KAAL,~~woGAAP~~;AACA,~~CAjBD~~,C,~~CAmBA~~;~~AACA;;;AAEO~~,~~MAAMC~~,~~MAAM~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~;~~AAAA~~,~~oHAOPhB~~,~~cAAOiB~~,~~KAPA~~,~~yCAYdpB~~,~~cAZc~~,~~OAadM~~,~~cAbc~~,~~OAcdQ~~,~~UAdc~~,~~OAgBd~~,~~gBAAK~~;~~AAAEO~~,~~EAAAA~~,WAAW,EAAE,~~CAAf~~;~~AAAkBC~~,~~EAAAA~~,YAAY,EAAE;~~AAAhC~~,~~CAAL~~,~~CAhBc~~,~~8kGAAZ~~;;~~AAoBA~~,~~MAAMC~~,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,gIAUzB,gBAAK;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAAL,CAVyB,~~gmGAAtB~~","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/\n Internal dependencies\n */\nimport { COLORS, rtl } from '../../utils';\nimport type { Size } from '../types';\n\ninterface SelectProps {\n\tdisabled?: boolean;\n\tselectSize?: Size;\n}\n\nconst disabledStyles = ( { disabled }: SelectProps ) => {\n\tif ( ! disabled ) return '';\n\n\treturn css( {\n\t\tcolor: COLORS.ui.textDisabled,\n\t} );\n};\n\nconst fontSizeStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: '13px',\n\t\tsmall: '11px',\n\t};\n\n\tconst fontSize = sizes[ selectSize as Size ];\n\tconst fontSizeMobile = '16px';\n\n\tif ( ! fontSize ) return '';\n\n\treturn css`\n\t\tfont-size: ${ fontSizeMobile };\n\n\t\t@media ( min-width: 600px ) {\n\t\t\tfont-size: ${ fontSize };\n\t\t}\n\t`;\n};\n\nconst sizeStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: {\n\t\t\theight: 30,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 30,\n\t\t},\n\t\tsmall: {\n\t\t\theight: 24,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 24,\n\t\t},\n\t};\n\n\tconst style = sizes[ selectSize as Size ] \|\| sizes.default;\n\n\treturn css( style );\n};\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const Select = styled.select< SelectProps >`\n\t&&& {\n\t\tappearance: none;\n\t\tbackground: transparent;\n\t\tbox-sizing: border-box;\n\t\tborder: none;\n\t\tbox-shadow: none !important;\n\t\tcolor: ${ COLORS.black };\n\t\tdisplay: block;\n\t\tmargin: 0;\n\t\twidth: 100%;\n\n\t\t${ disabledStyles };\n\t\t${ fontSizeStyles };\n\t\t${ sizeStyles };\n\n\t\t${ ~~rtl(~~ ~~{ paddingLeft: 8, paddingRight: 24~~ } ~~) }\~~n\t}\n`;\n\nexport const DownArrowWrapper = styled.div`\n\talign-items: center;\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tpadding: 0 4px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\n\t${ rtl( { right: 0 } ) }\n\n\tsvg {\n\t\tdisplay: block;\n\t}\n`;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/select-control/styles/select-control-styles.ts"],"names":["disabledStyles","disabled","color","COLORS","ui","textDisabled","fontSizeStyles","selectSize","sizes","default","small","fontSize","fontSizeMobile","css","sizeStyles","height","lineHeight","minHeight","style","sizePaddings","paddingLeft","paddingRight","Select","black","DownArrowWrapper","right"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,cAAc,GAAG,QAAiC;AAAA,MAA/B;AAAEC,IAAAA;AAAF,GAA+B;AACvD,MAAK,CAAEA,QAAP,EAAkB,OAAO,EAAP;AAElB,sBAAO,gBAAK;AACXC,IAAAA,KAAK,EAAEC,cAAOC,EAAP,CAAUC;AADN,GAAL,wvHAAP;AAGA,CAND;;AAQA,MAAMC,cAAc,GAAG,SAAmC;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AACzD,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,EAAE,MADI;AAEbC,IAAAA,KAAK,EAAE,MAFM;AAGb,wBAAoB;AAHP,GAAd;AAMA,QAAMC,QAAQ,GAAGH,KAAK,CAAED,UAAF,CAAtB;AACA,QAAMK,cAAc,GAAG,MAAvB;AAEA,MAAK,CAAED,QAAP,EAAkB,OAAO,EAAP;AAElB,0BAAOE,UAAP,gBACeD,cADf,6CAIgBD,QAJhB;AAOA,CAnBD;;AAqBA,MAAMG,UAAU,GAAG,SAAmC;AAAA,MAAjC;AAAEP,IAAAA;AAAF,GAAiC;AACrD,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,EAAE;AACRM,MAAAA,MAAM,EAAE,EADA;AAERC,MAAAA,UAAU,EAAE,CAFJ;AAGRC,MAAAA,SAAS,EAAE;AAHH,KADI;AAMbP,IAAAA,KAAK,EAAE;AACNK,MAAAA,MAAM,EAAE,EADF;AAENC,MAAAA,UAAU,EAAE,CAFN;AAGNC,MAAAA,SAAS,EAAE;AAHL,KANM;AAWb,wBAAoB;AACnBF,MAAAA,MAAM,EAAE,EADW;AAEnBC,MAAAA,UAAU,EAAE,CAFO;AAGnBC,MAAAA,SAAS,EAAE;AAHQ;AAXP,GAAd;AAkBA,QAAMC,KAAK,GAAGV,KAAK,CAAED,UAAF,CAAL,IAA+BC,KAAK,CAACC,OAAnD;AAEA,sBAAO,gBAAKS,KAAL,ovHAAP;AACA,CAtBD;;AAwBA,MAAMC,YAAY,GAAG,SAA+C;AAAA,MAA7C;AAAEZ,IAAAA,UAAU,GAAG;AAAf,GAA6C;AACnE,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,EAAE;AACRW,MAAAA,WAAW,EAAE,CADL;AAERC,MAAAA,YAAY,EAAE;AAFN,KADI;AAKbX,IAAAA,KAAK,EAAE;AACNU,MAAAA,WAAW,EAAE,CADP;AAENC,MAAAA,YAAY,EAAE;AAFR,KALM;AASb,wBAAoB;AACnBD,MAAAA,WAAW,EAAE,EADM;AAEnBC,MAAAA,YAAY,EAAE;AAFK;AATP,GAAd;AAcA,SAAO,gBAAKb,KAAK,CAAED,UAAF,CAAV,CAAP;AACA,CAhBD,C,CAkBA;AACA;;;AAEO,MAAMe,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,oHAOPnB,cAAOoB,KAPA,yCAYdvB,cAZc,OAadM,cAbc,OAcdQ,UAdc,OAedK,YAfc,0rHAAZ;;AAmBA,MAAMK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,gIAUzB,gBAAK;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAAL,CAVyB,4sHAAtB","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/\n Internal dependencies\n */\nimport { COLORS, rtl } from '../../utils';\nimport type { Size } from '../types';\n\ninterface SelectProps {\n\tdisabled?: boolean;\n\tselectSize?: Size;\n}\n\nconst disabledStyles = ( { disabled }: SelectProps ) => {\n\tif ( ! disabled ) return '';\n\n\treturn css( {\n\t\tcolor: COLORS.ui.textDisabled,\n\t} );\n};\n\nconst fontSizeStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: '13px',\n\t\tsmall: '11px',\n\t\t'__unstable-large': '13px',\n\t};\n\n\tconst fontSize = sizes[ selectSize as Size ];\n\tconst fontSizeMobile = '16px';\n\n\tif ( ! fontSize ) return '';\n\n\treturn css`\n\t\tfont-size: ${ fontSizeMobile };\n\n\t\t@media ( min-width: 600px ) {\n\t\t\tfont-size: ${ fontSize };\n\t\t}\n\t`;\n};\n\nconst sizeStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: {\n\t\t\theight: 30,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 30,\n\t\t},\n\t\tsmall: {\n\t\t\theight: 24,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 24,\n\t\t},\n\t\t'__unstable-large': {\n\t\t\theight: 40,\n\t\t\tlineHeight: 1,\n\t\t\tminHeight: 40,\n\t\t},\n\t};\n\n\tconst style = sizes[ selectSize as Size ] \|\| sizes.default;\n\n\treturn css( style );\n};\n\nconst sizePaddings = ( { selectSize = 'default' }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: {\n\t\t\tpaddingLeft: 8,\n\t\t\tpaddingRight: 24,\n\t\t},\n\t\tsmall: {\n\t\t\tpaddingLeft: 8,\n\t\t\tpaddingRight: 24,\n\t\t},\n\t\t'__unstable-large': {\n\t\t\tpaddingLeft: 16,\n\t\t\tpaddingRight: 32,\n\t\t},\n\t};\n\treturn rtl( sizes[ selectSize ] );\n};\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const Select = styled.select< SelectProps >`\n\t&&& {\n\t\tappearance: none;\n\t\tbackground: transparent;\n\t\tbox-sizing: border-box;\n\t\tborder: none;\n\t\tbox-shadow: none !important;\n\t\tcolor: ${ COLORS.black };\n\t\tdisplay: block;\n\t\tmargin: 0;\n\t\twidth: 100%;\n\n\t\t${ disabledStyles };\n\t\t${ fontSizeStyles };\n\t\t${ sizeStyles };\n\t\t${ sizePaddings };\n\t}\n`;\n\nexport const DownArrowWrapper = styled.div`\n\talign-items: center;\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tpadding: 0 4px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\n\t${ rtl( { right: 0 } ) }\n\n\tsvg {\n\t\tdisplay: block;\n\t}\n`;\n"]}

package/build/slot-fill/bubbles-virtually/fill.js CHANGED Viewed

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 var _useSlot = _interopRequireDefault(require("./use-slot"));
+var _styleProvider = _interopRequireDefault(require("../../style-provider"));
 // @ts-nocheck
 /**
@@ -60,8 +62,15 @@ function Fill(_ref) {
   if (typeof children === 'function') {
     children = children(slot.fillProps);
-  }
+  } // When using a `Fill`, the `children` will be rendered in the document of the
+  // `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
+  // to make sure we're referencing the right document/iframe (instead of the
+  // context of the `Fill`'s parent).
-  return (0, _element.createPortal)(children, slot.ref.current);
+  const wrappedChildren = (0, _element.createElement)(_styleProvider.default, {
+    document: slot.ref.current.ownerDocument
+  }, children);
+  return (0, _element.createPortal)(wrappedChildren, slot.ref.current);
 }
 //# sourceMappingURL=fill.js.map

package/build/slot-fill/bubbles-virtually/fill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.js"],"names":["useForceUpdate","setState","mounted","current","Fill","name","children","slot","ref","rerender","registerFill","unregisterFill","fillProps"],"mappings":";;;;;;;;;AAIA;;AAKA;;~~AATA~~;;AACA;AACA;AACA;;AAGA;AACA;AACA;~~AAGA~~,SAASA,cAAT,GAA0B;AACzB,QAAM,GAAIC,QAAJ,IAAiB,uBAAU,EAAV,CAAvB;AACA,QAAMC,OAAO,GAAG,qBAAQ,IAAR,CAAhB;AAEA,0BAAW,MAAM;AAChB,WAAO,MAAM;AACZA,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACA,KAFD;AAGA,GAJD,EAIG,EAJH;AAMA,SAAO,MAAM;AACZ,QAAKD,OAAO,CAACC,OAAb,EAAuB;AACtBF,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAJD;AAKA;;AAEc,SAASG,IAAT,OAAoC;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,QAAMC,IAAI,GAAG,sBAASF,IAAT,CAAb;AACA,QAAMG,GAAG,GAAG,qBAAQ;AAAEC,IAAAA,QAAQ,EAAET,cAAc;AAA1B,GAAR,CAAZ;AAEA,0BAAW,MAAM;AAChB;AACA;AACA;AACAO,IAAAA,IAAI,CAACG,YAAL,CAAmBF,GAAnB;AACA,WAAO,MAAM;AACZD,MAAAA,IAAI,CAACI,cAAL,CAAqBH,GAArB;AACA,KAFD;AAGA,GARD,EAQG,CAAED,IAAI,CAACG,YAAP,EAAqBH,IAAI,CAACI,cAA1B,CARH;;AAUA,MAAK,CAAEJ,IAAI,CAACC,GAAP,IAAc,CAAED,IAAI,CAACC,GAAL,CAASL,OAA9B,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,MAAK,OAAOG,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEC,IAAI,CAACK,SAAP,CAAnB;AACA~~;;AAED~~,SAAO,~~2BAAcN~~,~~QAAd~~,~~EAAwBC~~,IAAI,CAACC,GAAL,CAASL,~~OAAjC~~,CAAP;AACA","sourcesContent":["// @ts-nocheck\n/*\n WordPress dependencies\n /\nimport { useRef, useState, useEffect, createPortal } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport useSlot from './use-slot';\n\nfunction useForceUpdate() {\n\tconst [ , setState ] = useState( {} );\n\tconst mounted = useRef( true );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t};\n\t}, [] );\n\n\treturn () => {\n\t\tif ( mounted.current ) {\n\t\t\tsetState( {} );\n\t\t}\n\t};\n}\n\nexport default function Fill( { name, children } ) {\n\tconst slot = useSlot( name );\n\tconst ref = useRef( { rerender: useForceUpdate() } );\n\n\tuseEffect( () => {\n\t\t// We register fills so we can keep track of their existance.\n\t\t// Some Slot implementations need to know if there're already fills\n\t\t// registered so they can choose to render themselves or not.\n\t\tslot.registerFill( ref );\n\t\treturn () => {\n\t\t\tslot.unregisterFill( ref );\n\t\t};\n\t}, [ slot.registerFill, slot.unregisterFill ] );\n\n\tif ( ! slot.ref \|\| ! slot.ref.current ) {\n\t\treturn null;\n\t}\n\n\tif ( typeof children === 'function' ) {\n\t\tchildren = children( slot.fillProps );\n\t}\n\n\treturn createPortal( ~~children~~, slot.ref.current );\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/fill.js"],"names":["useForceUpdate","setState","mounted","current","Fill","name","children","slot","ref","rerender","registerFill","unregisterFill","fillProps","wrappedChildren","ownerDocument"],"mappings":";;;;;;;;;AAIA;;AAKA;;AACA;;AAVA;;AACA;AACA;AACA;;AAGA;AACA;AACA;AAIA,SAASA,cAAT,GAA0B;AACzB,QAAM,GAAIC,QAAJ,IAAiB,uBAAU,EAAV,CAAvB;AACA,QAAMC,OAAO,GAAG,qBAAQ,IAAR,CAAhB;AAEA,0BAAW,MAAM;AAChB,WAAO,MAAM;AACZA,MAAAA,OAAO,CAACC,OAAR,GAAkB,KAAlB;AACA,KAFD;AAGA,GAJD,EAIG,EAJH;AAMA,SAAO,MAAM;AACZ,QAAKD,OAAO,CAACC,OAAb,EAAuB;AACtBF,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAJD;AAKA;;AAEc,SAASG,IAAT,OAAoC;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,QAAMC,IAAI,GAAG,sBAASF,IAAT,CAAb;AACA,QAAMG,GAAG,GAAG,qBAAQ;AAAEC,IAAAA,QAAQ,EAAET,cAAc;AAA1B,GAAR,CAAZ;AAEA,0BAAW,MAAM;AAChB;AACA;AACA;AACAO,IAAAA,IAAI,CAACG,YAAL,CAAmBF,GAAnB;AACA,WAAO,MAAM;AACZD,MAAAA,IAAI,CAACI,cAAL,CAAqBH,GAArB;AACA,KAFD;AAGA,GARD,EAQG,CAAED,IAAI,CAACG,YAAP,EAAqBH,IAAI,CAACI,cAA1B,CARH;;AAUA,MAAK,CAAEJ,IAAI,CAACC,GAAP,IAAc,CAAED,IAAI,CAACC,GAAL,CAASL,OAA9B,EAAwC;AACvC,WAAO,IAAP;AACA;;AAED,MAAK,OAAOG,QAAP,KAAoB,UAAzB,EAAsC;AACrCA,IAAAA,QAAQ,GAAGA,QAAQ,CAAEC,IAAI,CAACK,SAAP,CAAnB;AACA,GApBiD,CAsBlD;AACA;AACA;AACA;;;AACA,QAAMC,eAAe,GACpB,4BAAC,sBAAD;AAAe,IAAA,QAAQ,EAAGN,IAAI,CAACC,GAAL,CAASL,OAAT,CAAiBW;AAA3C,KACGR,QADH,CADD;AAMA,SAAO,2BAAcO,eAAd,EAA+BN,IAAI,CAACC,GAAL,CAASL,OAAxC,CAAP;AACA","sourcesContent":["// @ts-nocheck\n/*\n WordPress dependencies\n /\nimport { useRef, useState, useEffect, createPortal } from '@wordpress/element';\n\n/\n Internal dependencies\n */\nimport useSlot from './use-slot';\nimport StyleProvider from '../../style-provider';\n\nfunction useForceUpdate() {\n\tconst [ , setState ] = useState( {} );\n\tconst mounted = useRef( true );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tmounted.current = false;\n\t\t};\n\t}, [] );\n\n\treturn () => {\n\t\tif ( mounted.current ) {\n\t\t\tsetState( {} );\n\t\t}\n\t};\n}\n\nexport default function Fill( { name, children } ) {\n\tconst slot = useSlot( name );\n\tconst ref = useRef( { rerender: useForceUpdate() } );\n\n\tuseEffect( () => {\n\t\t// We register fills so we can keep track of their existance.\n\t\t// Some Slot implementations need to know if there're already fills\n\t\t// registered so they can choose to render themselves or not.\n\t\tslot.registerFill( ref );\n\t\treturn () => {\n\t\t\tslot.unregisterFill( ref );\n\t\t};\n\t}, [ slot.registerFill, slot.unregisterFill ] );\n\n\tif ( ! slot.ref \|\| ! slot.ref.current ) {\n\t\treturn null;\n\t}\n\n\tif ( typeof children === 'function' ) {\n\t\tchildren = children( slot.fillProps );\n\t}\n\n\t// When using a `Fill`, the `children` will be rendered in the document of the\n\t// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`\n\t// to make sure we're referencing the right document/iframe (instead of the\n\t// context of the `Fill`'s parent).\n\tconst wrappedChildren = (\n\t\t<StyleProvider document={ slot.ref.current.ownerDocument }>\n\t\t\t{ children }\n\t\t</StyleProvider>\n\t);\n\n\treturn createPortal( wrappedChildren, slot.ref.current );\n}\n"]}

package/build/spacer/component.js CHANGED Viewed

@@ -20,7 +20,6 @@ var _hook = require("./hook");
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 /**
  * Internal dependencies

package/build/spacer/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/spacer/component.tsx"],"names":["Spacer","props","forwardedRef","spacerProps","ConnectedSpacer"],"mappings":";;;;;;;;;;;;;~~AASA~~;;AACA;;AACA;;~~AAXA~~;AACA;AACA~~;AACA~~;;AAGA;AACA;AACA;AAMA,SAASA,MAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,WAAW,GAAG,qBAAWF,KAAX,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,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;;;AACA,MAAME,eAAe,GAAG,6BAAgBJ,MAAhB,EAAwB,QAAxB,CAAxB;eAEeI,e","sourcesContent":["/*\n External dependencies\n /\~~n// eslint-disable-next-line no-restricted-imports\~~nimport type { Ref } from 'react';\n\n/\n Internal dependencies\n /\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useSpacer } from './hook';\nimport type { Props } from './types';\n\nfunction Spacer(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: Ref< any >\n) {\n\tconst spacerProps = useSpacer( props );\n\n\treturn <View { ...spacerProps } ref={ forwardedRef } />;\n}\n\n/\n `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.\n \n `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).\n \n @example\n * ```jsx\n * import { Spacer } from `@wordpress/components`\n \n function Example() {\n * return (\n * <View>\n * <Spacer>\n * <Heading>WordPress.org</Heading>\n * </Spacer>\n * <Text>\n * Code is Poetry\n * </Text>\n * </View>\n * );\n * }\n * ```\n */\nconst ConnectedSpacer = contextConnect( Spacer, 'Spacer' );\n\nexport default ConnectedSpacer;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/spacer/component.tsx"],"names":["Spacer","props","forwardedRef","spacerProps","ConnectedSpacer"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,MAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,WAAW,GAAG,qBAAWF,KAAX,CAApB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,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;;;AACA,MAAME,eAAe,GAAG,6BAAgBJ,MAAhB,EAAwB,QAAxB,CAAxB;eAEeI,e","sourcesContent":["/*\n External dependencies\n /\nimport type { Ref } from 'react';\n\n/\n Internal dependencies\n /\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useSpacer } from './hook';\nimport type { Props } from './types';\n\nfunction Spacer(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: Ref< any >\n) {\n\tconst spacerProps = useSpacer( props );\n\n\treturn <View { ...spacerProps } ref={ forwardedRef } />;\n}\n\n/\n `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.\n \n `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).\n \n @example\n * ```jsx\n * import { Spacer } from `@wordpress/components`\n \n function Example() {\n * return (\n * <View>\n * <Spacer>\n * <Heading>WordPress.org</Heading>\n * </Spacer>\n * <Text>\n * Code is Poetry\n * </Text>\n * </View>\n * );\n * }\n * ```\n */\nconst ConnectedSpacer = contextConnect( Spacer, 'Spacer' );\n\nexport default ConnectedSpacer;\n"]}

package/build/spinner/index.js CHANGED Viewed

@@ -1,5 +1,7 @@
 "use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,14 +9,51 @@ exports.default = Spinner;
 var _element = require("@wordpress/element");
-var _spinnerStyles = require("./styles/spinner-styles");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = require("./styles");
+/**
+ * External dependencies
+ */
 /**
  * Internal dependencies
  */
-function Spinner() {
-  return (0, _element.createElement)(_spinnerStyles.StyledSpinner, {
-    className: "components-spinner"
-  });
+/**
+ * @typedef OwnProps
+ *
+ * @property {string} [className] Class name
+ */
+/** @typedef {import('react').ComponentPropsWithoutRef<'svg'> & OwnProps} Props */
+/**
+ * @param {Props} props
+ * @return {JSX.Element} Element
+ */
+function Spinner(_ref) {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return (0, _element.createElement)(_styles.StyledSpinner, (0, _extends2.default)({
+    className: (0, _classnames.default)('components-spinner', className),
+    viewBox: "0 0 100 100",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "presentation",
+    focusable: "false"
+  }, props), (0, _element.createElement)(_styles.SpinnerTrack, {
+    cx: "50",
+    cy: "50",
+    r: "50",
+    vectorEffect: "non-scaling-stroke"
+  }), (0, _element.createElement)(_styles.SpinnerIndicator, {
+    d: "m 50 0 a 50 50 0 0 1 50 50",
+    vectorEffect: "non-scaling-stroke"
+  }));
 }
 //# sourceMappingURL=index.js.map