npm - @wordpress/components - Versions diffs - 22.0.0 → 22.1.0 - Mend

@wordpress/components 22.0.0 → 22.1.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 (356) hide show

package/build-module/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.ts"],"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","ActionRightWrapper"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,OAAOC,aAAP,MAA0B,sBAA1B;AACA,SAASC,MAAT,EAAiBC,YAAjB,EAA+BC,GAA/B,QAA0C,aAA1C;AACA,SAASC,KAAT,QAAsB,sBAAtB;AAWA,MAAMC,gBAAgB,GAAG,EAAzB;AACA,MAAMC,UAAU,GAAG,CAAnB;;AACA,MAAMC,WAAW,GAAG,mBACnBR,GAAG,CAAE;AAAES,EAAAA,MAAM,EAAEH,gBAAV;AAA4BI,EAAAA,SAAS,EAAEJ;AAAvC,CAAF,ipTADJ;;AAEA,MAAMK,SAAS,GAAG,EAAlB;AAEA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;;AAWP,MAAMC,YAAY,GAAG;AAAA,MAAE;AAAEC,IAAAA,KAAK,GAAGZ,MAAM,CAACa,EAAP,CAAUC;AAApB,GAAF;AAAA,sBACpBhB,GAAG,CAAE;AAAEc,IAAAA;AAAF,GAAF,kpTADiB;AAAA,CAArB;;AAGA,MAAMG,aAAa,GAAG,SAAwD;AAAA,MAAtD;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAsD;;AAC7E,MAAK,CAAEA,uBAAP,EAAiC;AAChC,wBAAOnB,GAAG,CAAE;AAAEoB,MAAAA,YAAY,EAAEF,KAAK,GAAG,EAAH,GAAQG;AAA7B,KAAF,mpTAAV;AACA;;AACD,SAAO,EAAP;AACA,CALD;;AAOA,OAAO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,yDAMhBT,YANgB,OAOhBL,WAPgB,OAQhBS,aARgB,qlTAAb;AAWP,OAAO,MAAMM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,+BAEdhB,UAFc,SAI1BH,GAAG,CAAE;AAAEoB,EAAAA,WAAW,EAAE;AAAf,CAAF,CAJuB,qlTAAvB;AAOP,OAAO,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,+BAEblB,UAFa,SAIzBH,GAAG,CAAE;AAAEsB,EAAAA,UAAU,EAAE;AAAd,CAAF,CAJsB,qlTAAtB;;AAOP,MAAMC,mBAAmB,GAAG,SAA0C;AAAA,MAAxC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAwC;AACrE,MAAIC,UAAU,GAAGD,SAAS,IAAI,EAA9B;;AAEA,MAAKD,QAAL,EAAgB;AACfE,IAAAA,UAAU,GAAG5B,MAAM,CAACa,EAAP,CAAUgB,kBAAvB;AACA;;AAED,sBAAO/B,GAAG,CAAE;AAAE8B,IAAAA;AAAF,GAAF,ypTAAV;AACA,CARD;;AAUA,OAAO,MAAME,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wBACK9B,MAAM,CAAC+B,IAAP,CAAa,GAAb,CADL,+DAML1B,UANK,sCAQD,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CARnC,6BAUEA,UAVF,SAYboB,mBAZa,qlTAAV;;AAeP,MAAMO,oBAAoB,GAAG,SAA4C;AAAA,MAA1C;AAAEN,IAAAA,QAAF;AAAYO,IAAAA;AAAZ,GAA0C;AACxE,MAAIL,UAAU,GAAGK,UAAU,IAAI,cAA/B;;AAEA,MAAKP,QAAL,EAAgB;AACfE,IAAAA,UAAU,GAAG5B,MAAM,CAAC+B,IAAP,CAAa,GAAb,CAAb;AACA;;AAED,sBAAOjC,GAAG,CAAE;AAAE8B,IAAAA;AAAF,GAAF,0pTAAV;AACA,CARD;;AAUA,OAAO,MAAMM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,mDAEC7B,UAFD,gBAGNA,UAHM,wEAOF,CAAED,gBAAgB,GAAGC,UAArB,IAAoC,CAPlC,eAUd2B,oBAVc,qlTAAX;AAaP,OAAO,MAAMG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAQP,MAAMC,QAAQ,GAAG,SAA8C;AAAA,MAA5C;AAAEV,IAAAA,QAAF;AAAYW,IAAAA;AAAZ,GAA4C;AAC9D,MAAIC,eAAe,GAAGD,QAAQ,GAAG,cAAH,GAAoBrC,MAAM,CAAC+B,IAAP,CAAa,GAAb,CAAlD;;AAEA,MAAKL,QAAL,EAAgB;AACfY,IAAAA,eAAe,GAAGtC,MAAM,CAAC+B,IAAP,CAAa,GAAb,CAAlB;AACA;;AAED,sBAAOjC,GAAG,CAAE;AACXwC,IAAAA;AADW,GAAF,8oTAAV;AAGA,CAVD;;AAYA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,cACL9B,SADK,qDAOb2B,QAPa,qlTAAV;;AAUP,MAAMI,aAAa,GAAG,SAAoC;AAAA,MAAlC;AAAEH,IAAAA;AAAF,GAAkC;AACzD,sBAAOvC,GAAG,CAAE;AACXc,IAAAA,KAAK,EAAEyB,QAAQ,GAAGrC,MAAM,CAAC+B,IAAP,CAAa,GAAb,CAAH,GAAwB/B,MAAM,CAAC+B,IAAP,CAAa,GAAb;AAD5B,GAAF,mpTAAV;AAGA,CAJD;;AAMA,OAAO,MAAMU,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,aACXzC,MAAM,CAAC+B,IAAP,CAAa,GAAb,CADW,wGASlBS,aATkB,qlTAAf;;;;;;;;;;;;AAYP,MAAME,UAAU,GAAG;AAAA,MAAE;AAAEhB,IAAAA;AAAF,GAAF;AAAA,SAClBA,QAAQ,gBACL5B,GADK,sBAEgBE,MAAM,CAAC+B,IAAP,CAAa,GAAb,CAFhB,gqTADU;AAAA,CAAnB;;AASA,OAAO,MAAMY,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,8CAGblC,SAHa,2CAKT,CAAEL,gBAAgB,GAAGK,SAArB,IAAmC,CAL1B,sFAWdA,SAXc,2BAcrBiC,UAdqB,OAerBxC,GAAG,CAAE;AAAEsB,EAAAA,UAAU,EAAE,CAAC;AAAf,CAAF,CAfkB,OAgBrBtB,GAAG,CACL;AAAE0C,EAAAA,SAAS,EAAE;AAAb,CADK,EAEL;AAAEA,EAAAA,SAAS,EAAE;AAAb,CAFK,CAhBkB,qlTAAlB;;AAsBP,MAAMC,UAAU,GAAG,UAAiC;AAAA,MAA/B;AAAEC,IAAAA;AAAF,GAA+B;AACnD,SAAOA,SAAS,gBACbhD,GADa,iIAQDW,SAAS,GAAG,CARX,eASFA,SAAS,GAAG,CATV,irTAcb,EAdH;AAeA,CAhBD;;AAkBA,OAAO,MAAMsC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gHASdL,UATc,OAUdG,UAVc,qlTAAX;AAaP,OAAO,MAAMG,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,uFAMRvC,SAAS,GAAG,CANJ,mFAYCA,SAZD,ylTAAhB;;AAeP,MAAMwC,WAAW,GAAG,UAA8B;AAAA,MAA5B;AAAEC,IAAAA;AAAF,GAA4B;AACjD,sBAAOpD,GAAG,CAAE;AACXqD,IAAAA,OAAO,EAAED,IAAI,GAAG,CAAH,GAAO;AADT,GAAF,ipTAAV;AAGA,CAJD;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAME,eAAe,GAAG,UAAkC;AAAA,MAAhC;AAAEC,IAAAA;AAAF,GAAgC;AACzD,QAAMC,QAAQ,GAAGD,QAAQ,KAAK,QAA9B;;AAEA,MAAKC,QAAL,EAAgB;AACf;AAGA;;AAED;AAGA,CAZD;;AAcA,OAAO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,yQAgBhBN,WAhBgB,OAiBhBG,eAjBgB,OAkBhBnD,YAAY,CAAE,YAAF,CAlBI,OAmBhBC,GAAG,CACL;AAAE0C,EAAAA,SAAS,EAAE;AAAb,CADK,EAEL;AAAEA,EAAAA,SAAS,EAAE;AAAb,CAFK,CAnBa,qlTAAb,C,CAyBP;AACA;;AACA,OAAO,MAAMY,WAAW,GAAG,qBAAQzD,aAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,4DAIbI,KAAK,CAAE,EAAF,CAJQ,uCAOnBG,WAPmB,QAUpBJ,GAAG,CAAE;AAAEsB,EAAAA,UAAU,EAAG,GAAGrB,KAAK,CAAE,CAAF,CAAO;AAA9B,CAAF,CAViB,qlTAAjB;AAaP,OAAO,MAAMsD,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,uEAO1BnD,WAP0B,QAU3BJ,GAAG,CAAE;AAAEsB,EAAAA,UAAU,EAAE;AAAd,CAAF,CAVwB,qlTAAxB","sourcesContent":["/*\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\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n} from '../types';\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\talign-items: flex-start;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\treturn css( { marginBottom: marks ? 16 : undefined } );\n\t}\n\treturn '';\n};\n\nexport const Wrapper = styled.div< WrapperProps >`\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\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor \|\| '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\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 }: TrackProps ) => {\n\tlet background = trackColor \|\| 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\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\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\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 }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\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 }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.gray[ 400 ] };\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\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 }: ThumbProps ) => {\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< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\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 }: TooltipProps ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\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< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\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\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\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.ts"],"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","theme","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","ActionRightWrapper"],"mappings":"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","sourcesContent":["/*\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\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n} from '../types';\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\talign-items: flex-start;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\treturn css( { marginBottom: marks ? 16 : undefined } );\n\t}\n\treturn '';\n};\n\nexport const Wrapper = styled.div< WrapperProps >`\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\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor \|\| '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\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 }: TrackProps ) => {\n\tlet background = trackColor \|\| 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\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\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\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 }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\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 }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.gray[ 400 ] };\n\t\t `\n\t\t: css`\n\t\t\t\tbackground-color: ${ COLORS.ui.theme };\n\t\t `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\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 }: ThumbProps ) => {\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: ${ COLORS.ui.theme };\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< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\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 }: TooltipProps ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\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< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\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\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\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-module/spinner/styles.js CHANGED Viewed

@@ -24,14 +24,14 @@ export const StyledSpinner = _styled("svg", process.env.NODE_ENV === "production
 } : {
   target: "ea4tfvq2",
   label: "StyledSpinner"
-})("width:", CONFIG.spinnerSize, "px;height:", CONFIG.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:var( --wp-admin-theme-color );overflow:visible;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0J1QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
+})("width:", CONFIG.spinnerSize, "px;height:", CONFIG.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:", COLORS.ui.theme, ";overflow:visible;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0J1QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
 const commonPathProps = process.env.NODE_ENV === "production" ? {
   name: "9s4963",
   styles: "fill:transparent;stroke-width:1.5px"
 } : {
   name: "o2zng0-commonPathProps",
   styles: "fill:transparent;stroke-width:1.5px;label:commonPathProps;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEIyQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEIyQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export const SpinnerTrack = _styled("circle", process.env.NODE_ENV === "production" ? {
@@ -39,11 +39,11 @@ export const SpinnerTrack = _styled("circle", process.env.NODE_ENV === "producti
 } : {
   target: "ea4tfvq1",
   label: "SpinnerTrack"
-})(commonPathProps, ";stroke:", COLORS.gray[300], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUN5QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
+})(commonPathProps, ";stroke:", COLORS.gray[300], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUN5QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
 export const SpinnerIndicator = _styled("path", process.env.NODE_ENV === "production" ? {
   target: "ea4tfvq0"
 } : {
   target: "ea4tfvq0",
   label: "SpinnerIndicator"
-})(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0MyQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
+})(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0MyQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
 //# sourceMappingURL=styles.js.map

package/build-module/spinner/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/spinner/styles.ts"],"names":["css","keyframes","COLORS","CONFIG","spinAnimation","StyledSpinner","spinnerSize","commonPathProps","SpinnerTrack","gray","SpinnerIndicator"],"mappings":";;;;AAAA;AACA;AACA;AAEA,SAASA,GAAT,EAAcC,SAAd,QAA+B,gBAA/B;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,UAA/B;AAEA,MAAMC,aAAa,GAAGH,SAAU;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,EAPA;AASA,OAAO,MAAMI,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,aACfF,MAAM,CAACG,WADQ,gBAEdH,MAAM,CAACG,WAFO,~~yxDAAnB~~;AAUP,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAArB;AAKA,OAAO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GACrBD,eADqB,~~cAEbL~~,MAAM,~~CAACO~~,IAAP,CAAa,GAAb,CAFa,~~yqDAAlB~~;AAKP,OAAO,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,GACzBH,eADyB,~~6GAKYH~~,aALZ,~~yqDAAtB~~","sourcesContent":["/*\n External dependencies\n /\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\n\n/\n Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\n\nconst spinAnimation = keyframes`\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n `;\n\nexport const StyledSpinner = styled.svg`\n\twidth: ${ CONFIG.spinnerSize }px;\n\theight: ${ CONFIG.spinnerSize }px;\n\tdisplay: inline-block;\n\tmargin: 5px 11px 0;\n\tposition: relative;\n\tcolor: ~~var(~~ ~~--wp-admin-~~theme~~-color~~ );\n\toverflow: visible;\n`;\n\nconst commonPathProps = css`\n\tfill: transparent;\n\tstroke-width: 1.5px;\n`;\n\nexport const SpinnerTrack = styled.circle`\n\t${ commonPathProps };\n\tstroke: ${ COLORS.gray[ 300 ] };\n`;\n\nexport const SpinnerIndicator = styled.path`\n\t${ commonPathProps };\n\tstroke: currentColor;\n\tstroke-linecap: round;\n\ttransform-origin: 50% 50%;\n\tanimation: 1.4s linear infinite both ${ spinAnimation };\n`;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/spinner/styles.ts"],"names":["css","keyframes","COLORS","CONFIG","spinAnimation","StyledSpinner","spinnerSize","ui","theme","commonPathProps","SpinnerTrack","gray","SpinnerIndicator"],"mappings":";;;;AAAA;AACA;AACA;AAEA,SAASA,GAAT,EAAcC,SAAd,QAA+B,gBAA/B;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,UAA/B;AAEA,MAAMC,aAAa,GAAGH,SAAU;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,EAPA;AASA,OAAO,MAAMI,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,aACfF,MAAM,CAACG,WADQ,gBAEdH,MAAM,CAACG,WAFO,wEAMfJ,MAAM,CAACK,EAAP,CAAUC,KANK,8qDAAnB;AAUP,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAArB;AAKA,OAAO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GACrBD,eADqB,cAEbP,MAAM,CAACS,IAAP,CAAa,GAAb,CAFa,6pDAAlB;AAKP,OAAO,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,GACzBH,eADyB,6GAKYL,aALZ,6pDAAtB","sourcesContent":["/*\n External dependencies\n /\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\n\n/\n Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\n\nconst spinAnimation = keyframes`\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n `;\n\nexport const StyledSpinner = styled.svg`\n\twidth: ${ CONFIG.spinnerSize }px;\n\theight: ${ CONFIG.spinnerSize }px;\n\tdisplay: inline-block;\n\tmargin: 5px 11px 0;\n\tposition: relative;\n\tcolor: ${ COLORS.ui.theme };\n\toverflow: visible;\n`;\n\nconst commonPathProps = css`\n\tfill: transparent;\n\tstroke-width: 1.5px;\n`;\n\nexport const SpinnerTrack = styled.circle`\n\t${ commonPathProps };\n\tstroke: ${ COLORS.gray[ 300 ] };\n`;\n\nexport const SpinnerIndicator = styled.path`\n\t${ commonPathProps };\n\tstroke: currentColor;\n\tstroke-linecap: round;\n\ttransform-origin: 50% 50%;\n\tanimation: 1.4s linear infinite both ${ spinAnimation };\n`;\n"]}

package/build-module/tab-panel/index.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { find } from 'lodash';
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -87,11 +87,10 @@ export function TabPanel(_ref2) {
   } = _ref2;
   const instanceId = useInstanceId(TabPanel, 'tab-panel');
   const [selected, setSelected] = useState();
-  const handleTabSelection = tabKey => {
+  const handleTabSelection = useCallback(tabKey => {
     setSelected(tabKey);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(tabKey);
-  };
+  }, [onSelect]);
   const onNavigate = (_childIndex, child) => {
     child.click();
@@ -105,7 +104,7 @@ export function TabPanel(_ref2) {
     if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.name) && tabs.length > 0) {
       handleTabSelection(initialTabName || tabs[0].name);
     }
-  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, initialTabName]);
+  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, initialTabName, handleTabSelection]);
   return createElement("div", {
     className: className
   }, createElement(NavigableMenu, {

package/build-module/tab-panel/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","find","useState","useEffect","useInstanceId","NavigableMenu","Button","TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","length","map","tab","title"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,QAArB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,SAAnB,~~QAAoC~~,~~oBAApC~~;AACA,SAASC,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,wBAA9B;AACA,OAAOC,MAAP,MAAmB,WAAnB;;AAIA,MAAMC,SAAS,GAAG;AAAA,MAAE;AACnBC,IAAAA,KADmB;AAEnBC,IAAAA,OAFmB;AAGnBC,IAAAA,QAHmB;AAInBC,IAAAA,QAJmB;AAKnB,OAAGC;AALgB,GAAF;AAAA,SAOjB,cAAC,MAAD;AACC,IAAA,IAAI,EAAC,KADN;AAEC,IAAA,QAAQ,EAAGD,QAAQ,GAAG,IAAH,GAAU,CAAC,CAF/B;AAGC,qBAAgBA,QAHjB;AAIC,IAAA,EAAE,EAAGH,KAJN;AAKC,IAAA,OAAO,EAAGC;AALX,KAMMG,IANN,GAQGF,QARH,CAPiB;AAAA,CAAlB;AAmBA;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,OAAO,SAASG,QAAT,QAQqD;AAAA;;AAAA,MARlC;AACzBC,IAAAA,SADyB;AAEzBJ,IAAAA,QAFyB;AAGzBK,IAAAA,IAHyB;AAIzBC,IAAAA,cAJyB;AAKzBC,IAAAA,WAAW,GAAG,YALW;AAMzBC,IAAAA,WAAW,GAAG,WANW;AAOzBC,IAAAA;AAPyB,GAQkC;AAC3D,QAAMC,UAAU,GAAGhB,aAAa,CAAES,QAAF,EAAY,WAAZ,CAAhC;AACA,QAAM,CAAEF,QAAF,EAAYU,WAAZ,~~IAA4BnB~~,QAAQ,EAA1C;;AAEA,~~QAAMoB~~,kBAAkB,~~GAAKC~~,MAAF,IAAsB;~~AAChDF~~,IAAAA,WAAW,CAAEE,MAAF,CAAX;AACAJ,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAII,MAAJ,CAAR;AACA,~~GAHD~~;;~~AAKA~~,~~QAAMC~~,UAAU,GAAG,CAAEC,WAAF,EAAuBC,KAAvB,KAAqD;AACvEA,IAAAA,KAAK,CAACC,KAAN;AACA,GAFD;;AAGA,QAAMC,WAAW,~~GAAG3B~~,IAAI,~~CAAEc~~,IAAF,EAAQ;AAAEc,IAAAA,IAAI,EAAElB;AAAR,GAAR,CAAxB;AACA,QAAMmB,UAAU,GAAI,GAAGV,UAAY,IAAhB,qBAAoBQ,WAApB,aAAoBA,WAApB,uBAAoBA,WAAW,CAAEC,IAAjC,iEAAyC,MAAQ,EAApE;~~AAEA1B~~,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,~~EAAEyB~~,WAAF,aAAEA,WAAF,eAAEA,WAAW,CAAEC,IAAf,KAAuBd,IAAI,CAACgB,MAAL,GAAc,CAA1C,EAA8C;AAC7CT,MAAAA,kBAAkB,CAAEN,cAAc,IAAID,IAAI,CAAE,CAAF,CAAJ,CAAUc,IAA9B,CAAlB;AACA;AACD,GAJQ,EAIN,CAAEd,IAAF,EAAQa,WAAR,aAAQA,WAAR,uBAAQA,WAAW,CAAEC,IAArB,EAA2Bb,cAA3B,CAJM,CAAT;AAMA,SACC;AAAK,IAAA,SAAS,~~EAAGF~~;AAAjB,KACC,cAAC,aAAD;AACC,IAAA,IAAI,EAAC,SADN;AAEC,IAAA,WAAW,EAAGG,WAFf;AAGC,IAAA,UAAU,EAAGO,UAHd;AAIC,IAAA,SAAS,EAAC;AAJX,KAMGT,IAAI,CAACiB,GAAL,CAAYC,GAAF,IACX,cAAC,SAAD;AACC,IAAA,SAAS,~~EAAGjC~~,UAAU,CACrB,iCADqB,~~EAErBiC~~,GAAG,CAACnB,SAFiB,EAGrB;AACC,OAAEI,WAAF,GAAiBe,GAAG,CAACJ,IAAJ,KAAalB;AAD/B,KAHqB,CADvB;AAQC,IAAA,KAAK,EAAI,GAAGS,UAAY,IAAIa,GAAG,CAACJ,IAAM,EARvC;AASC,qBAAiB,GAAGT,UAAY,IAAIa,GAAG,CAACJ,IAAM,OAT/C;AAUC,IAAA,QAAQ,EAAGI,GAAG,CAACJ,IAAJ,KAAalB,QAVzB;AAWC,IAAA,GAAG,EAAGsB,GAAG,CAACJ,IAXX;AAYC,IAAA,OAAO,EAAG,MAAMP,kBAAkB,CAAEW,GAAG,CAACJ,IAAN;AAZnC,KAcGI,GAAG,CAACC,KAdP,CADC,CANH,CADD,EA0BGN,WAAW,IACZ;AACC,IAAA,GAAG,EAAGE,UADP;AAEC,uBAAkBA,UAFnB;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,EAAE,EAAI,GAAGA,UAAY,OAJtB;AAKC,IAAA,SAAS,EAAC;AALX,KAOGpB,QAAQ,CAAEkB,WAAF,CAPX,CA3BF,CADD;AAwCA;AAED,eAAef,QAAf","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { useState, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/\n TabPanel is an ARIA-compliant tabpanel.\n \n TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n \n ```jsx\n * import { TabPanel } from '@wordpress/components';\n \n const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n \n const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = ( tabKey: string ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect?.( tabKey );\n\t};\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tif ( ! selectedTab?.name && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName \|\| tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs, selectedTab?.name, initialTabName ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={ onNavigate }\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","find","useState","useEffect","useCallback","useInstanceId","NavigableMenu","Button","TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","length","map","tab","title"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { useState, useEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/\n TabPanel is an ARIA-compliant tabpanel.\n \n TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n \n ```jsx\n * import { TabPanel } from '@wordpress/components';\n \n const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n \n const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tif ( ! selectedTab?.name && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName \|\| tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={ onNavigate }\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}

package/build-module/toggle-group-control/toggle-group-control/component.js CHANGED Viewed

@@ -41,6 +41,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
   } = useContextSystem(props, 'ToggleGroupControl');
   const cx = useCx();
   const classes = useMemo(() => cx(styles.ToggleGroupControl({
+    isBlock,
     isDeselectable,
     size
   }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, size]);

package/build-module/toggle-group-control/toggle-group-control/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"names":["useMemo","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","noop","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","cx","classes","ToggleGroupControl","block","MainControl"],"mappings":";;;AAAA;AACA;AACA;;AAEA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,kBAJP;AAKA,SAASC,KAAT,QAAsB,mBAAtB;AACA,OAAOC,WAAP,MAAwB,oBAAxB;AAEA,SAASC,kBAAT,QAAmC,UAAnC;AACA,OAAO,KAAKC,MAAZ,MAAwB,UAAxB;AACA,SAASC,8BAAT,QAA+C,kBAA/C;AACA,SAASC,+BAAT,QAAgD,mBAAhD;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,6BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBAAuB,GAAG,KADrB;AAELC,IAAAA,SAFK;AAGLC,IAAAA,eAAe,GAAG,KAHb;AAILC,IAAAA,OAAO,GAAG,KAJL;AAKLC,IAAAA,cAAc,GAAG,KALZ;AAMLC,IAAAA,KANK;AAOLC,IAAAA,mBAAmB,GAAG,KAPjB;AAQLC,IAAAA,IARK;AASLC,IAAAA,QAAQ,GAAGZ,IATN;AAULa,IAAAA,IAAI,GAAG,SAVF;AAWLC,IAAAA,KAXK;AAYLC,IAAAA,QAZK;AAaL,OAAGC;AAbE,MAcFvB,gBAAgB,CAAES,KAAF,EAAS,oBAAT,CAdpB;AAeA,QAAMe,EAAE,GAAGvB,KAAK,EAAhB;AAEA,QAAMwB,OAAO,GAAG3B,OAAO,CACtB,MACC0B,EAAE,CACDpB,MAAM,CAACsB,kBAAP,CAA2B;~~AAAEX~~,IAAAA,~~cAAF~~;~~AAAkBK~~,IAAAA;~~AAAlB~~,GAA3B,CADC,EAEDN,OAAO,IAAIV,MAAM,CAACuB,KAFjB,EAGDf,SAHC,CAFmB,EAOtB,CAAEA,SAAF,EAAaY,EAAb,EAAiBV,OAAjB,EAA0BC,cAA1B,EAA0CK,IAA1C,CAPsB,CAAvB;AAUA,QAAMQ,WAAW,GAAGb,cAAc,GAC/BT,+BAD+B,GAE/BD,8BAFH;AAIA,SACC,cAAC,WAAD;AACC,IAAA,IAAI,EAAGa,IADR;AAEC,IAAA,uBAAuB,EAAGP;AAF3B,KAIG,CAAEM,mBAAF,IACD,cAAC,kBAAD,QACC,cAAC,WAAD,CAAa,WAAb,QAA2BD,KAA3B,CADD,CALF,EASC,cAAC,WAAD,eACMO,UADN;AAEC,IAAA,QAAQ,EAAGD,QAFZ;AAGC,IAAA,SAAS,EAAGG,OAHb;AAIC,IAAA,eAAe,EAAGZ,eAJnB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGG,QANZ;AAOC,IAAA,GAAG,EAAGT,YAPP;AAQC,IAAA,IAAI,EAAGU,IARR;AASC,IAAA,KAAK,EAAGC;AATT,KATD,CADD;AAuBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMK,kBAAkB,GAAG3B,cAAc,CAC/CS,6BAD+C,EAE/C,oBAF+C,CAAzC;AAKP,eAAekB,kBAAf","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nconst noop = () => {};\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange = noop,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.ToggleGroupControl( { isDeselectable, size } ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, size ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tchildren={ children }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tvalue={ value }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/*\n `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n \n This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n \n Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n \n ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n \n function Example() {\n * return (\n * <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"names":["useMemo","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","noop","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","cx","classes","ToggleGroupControl","block","MainControl"],"mappings":";;;AAAA;AACA;AACA;;AAEA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,kBAJP;AAKA,SAASC,KAAT,QAAsB,mBAAtB;AACA,OAAOC,WAAP,MAAwB,oBAAxB;AAEA,SAASC,kBAAT,QAAmC,UAAnC;AACA,OAAO,KAAKC,MAAZ,MAAwB,UAAxB;AACA,SAASC,8BAAT,QAA+C,kBAA/C;AACA,SAASC,+BAAT,QAAgD,mBAAhD;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,6BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBAAuB,GAAG,KADrB;AAELC,IAAAA,SAFK;AAGLC,IAAAA,eAAe,GAAG,KAHb;AAILC,IAAAA,OAAO,GAAG,KAJL;AAKLC,IAAAA,cAAc,GAAG,KALZ;AAMLC,IAAAA,KANK;AAOLC,IAAAA,mBAAmB,GAAG,KAPjB;AAQLC,IAAAA,IARK;AASLC,IAAAA,QAAQ,GAAGZ,IATN;AAULa,IAAAA,IAAI,GAAG,SAVF;AAWLC,IAAAA,KAXK;AAYLC,IAAAA,QAZK;AAaL,OAAGC;AAbE,MAcFvB,gBAAgB,CAAES,KAAF,EAAS,oBAAT,CAdpB;AAeA,QAAMe,EAAE,GAAGvB,KAAK,EAAhB;AAEA,QAAMwB,OAAO,GAAG3B,OAAO,CACtB,MACC0B,EAAE,CACDpB,MAAM,CAACsB,kBAAP,CAA2B;AAAEZ,IAAAA,OAAF;AAAWC,IAAAA,cAAX;AAA2BK,IAAAA;AAA3B,GAA3B,CADC,EAEDN,OAAO,IAAIV,MAAM,CAACuB,KAFjB,EAGDf,SAHC,CAFmB,EAOtB,CAAEA,SAAF,EAAaY,EAAb,EAAiBV,OAAjB,EAA0BC,cAA1B,EAA0CK,IAA1C,CAPsB,CAAvB;AAUA,QAAMQ,WAAW,GAAGb,cAAc,GAC/BT,+BAD+B,GAE/BD,8BAFH;AAIA,SACC,cAAC,WAAD;AACC,IAAA,IAAI,EAAGa,IADR;AAEC,IAAA,uBAAuB,EAAGP;AAF3B,KAIG,CAAEM,mBAAF,IACD,cAAC,kBAAD,QACC,cAAC,WAAD,CAAa,WAAb,QAA2BD,KAA3B,CADD,CALF,EASC,cAAC,WAAD,eACMO,UADN;AAEC,IAAA,QAAQ,EAAGD,QAFZ;AAGC,IAAA,SAAS,EAAGG,OAHb;AAIC,IAAA,eAAe,EAAGZ,eAJnB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGG,QANZ;AAOC,IAAA,GAAG,EAAGT,YAPP;AAQC,IAAA,IAAI,EAAGU,IARR;AASC,IAAA,KAAK,EAAGC;AATT,KATD,CADD;AAuBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMK,kBAAkB,GAAG3B,cAAc,CAC/CS,6BAD+C,EAE/C,oBAF+C,CAAzC;AAKP,eAAekB,kBAAf","sourcesContent":["/*\n External dependencies\n /\nimport type { ForwardedRef } from 'react';\n/\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nconst noop = () => {};\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange = noop,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.ToggleGroupControl( { isBlock, isDeselectable, size } ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, size ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tchildren={ children }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tvalue={ value }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/*\n `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n \n This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n \n Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n \n ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n \n function Example() {\n * return (\n * <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"]}

package/build-module/toggle-group-control/toggle-group-control/styles.js CHANGED Viewed

@@ -13,18 +13,24 @@ import { css } from '@emotion/react';
 import { CONFIG, COLORS, reduceMotion } from '../../utils';
 export const ToggleGroupControl = _ref => {
   let {
+    isBlock,
     isDeselectable,
     size
   } = _ref;
-  return /*#__PURE__*/css("background:", COLORS.ui.background, ";border:1px solid transparent;display:inline-flex;min-width:0;padding:2px;position:relative;transition:transform ", CONFIG.transitionDurationFastest, " linear;", reduceMotion('transition'), " ", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorder, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ToggleGroupControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCVSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0aXNEZXNlbGVjdGFibGUsXG5cdHNpemUsXG59OiB7XG5cdGlzRGVzZWxlY3RhYmxlPzogYm9vbGVhbjtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVyIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVySG92ZXIgfTtcblx0fVxuXG5cdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRvdXRsaW5lOiBub25lO1xuXHRcdHotaW5kZXg6IDE7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbExhYmVsV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdC8vIE1ha2VzIHRoZSBpbmxpbmUgbGFiZWwgYmUgdGhlIGNvcnJlY3QgaGVpZ2h0LCBlcXVpdmFsZW50IHRvIHNldHRpbmcgbGluZS1oZWlnaHQ6IDBcblx0ZGlzcGxheTogZmxleDtcbmA7XG4iXX0= */");
+  return /*#__PURE__*/css("background:", COLORS.ui.background, ";border:1px solid transparent;border-radius:", CONFIG.controlBorderRadius, ";display:inline-flex;min-width:0;padding:2px;position:relative;transition:transform ", CONFIG.transitionDurationFastest, " linear;", reduceMotion('transition'), " ", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorders(isBlock), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ToggleGroupControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCVSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0aXNCbG9jayxcblx0aXNEZXNlbGVjdGFibGUsXG5cdHNpemUsXG59OiBQaWNrPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wcywgJ2lzQmxvY2snIHwgJ2lzRGVzZWxlY3RhYmxlJyA+ICYge1xuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID47XG59ICkgPT4gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkuYmFja2dyb3VuZCB9O1xuXHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdG1pbi13aWR0aDogMDtcblx0cGFkZGluZzogMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGxpbmVhcjtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cblx0JHsgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSggc2l6ZSApIH1cblx0JHsgISBpc0Rlc2VsZWN0YWJsZSAmJiBlbmNsb3NpbmdCb3JkZXJzKCBpc0Jsb2NrICkgfVxuYDtcblxuY29uc3QgZW5jbG9zaW5nQm9yZGVycyA9ICggaXNCbG9jazogVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdpc0Jsb2NrJyBdICkgPT4ge1xuXHRjb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGA7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHQkeyBpc0Jsb2NrICYmIGVuY2xvc2luZ0JvcmRlciB9XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdFx0fVxuXG5cdFx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRcdG91dGxpbmU6IG5vbmU7XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbExhYmVsV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdC8vIE1ha2VzIHRoZSBpbmxpbmUgbGFiZWwgYmUgdGhlIGNvcnJlY3QgaGVpZ2h0LCBlcXVpdmFsZW50IHRvIHNldHRpbmcgbGluZS1oZWlnaHQ6IDBcblx0ZGlzcGxheTogZmxleDtcbmA7XG4iXX0= */");
 };
-const enclosingBorder = /*#__PURE__*/css("border-color:", COLORS.ui.border, ";border-radius:", CONFIG.controlBorderRadius, ";&:hover{border-color:", COLORS.ui.borderHover, ";}&:focus-within{border-color:", COLORS.ui.borderFocus, ";box-shadow:", CONFIG.controlBoxShadowFocus, ";outline:none;z-index:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:enclosingBorder;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDMkIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufToge1xuXHRpc0Rlc2VsZWN0YWJsZT86IGJvb2xlYW47XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0ZXN0IH0gbGluZWFyO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXHQkeyAhIGlzRGVzZWxlY3RhYmxlICYmIGVuY2xvc2luZ0JvcmRlciB9XG5gO1xuXG5jb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0b3V0bGluZTogbm9uZTtcblx0XHR6LWluZGV4OiAxO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */");
+const enclosingBorders = isBlock => {
+  const enclosingBorder = /*#__PURE__*/css("border-color:", COLORS.ui.border, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:enclosingBorder;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDNEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHRvdXRsaW5lOiBub25lO1xuXHRcdFx0ei1pbmRleDogMTtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */");
+  return /*#__PURE__*/css(isBlock && enclosingBorder, " &:hover{border-color:", COLORS.ui.borderHover, ";}&:focus-within{border-color:", COLORS.ui.borderFocus, ";box-shadow:", CONFIG.controlBoxShadowFocus, ";outline:none;z-index:1;}" + (process.env.NODE_ENV === "production" ? "" : ";label:enclosingBorders;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0aXNCbG9jayxcblx0aXNEZXNlbGVjdGFibGUsXG5cdHNpemUsXG59OiBQaWNrPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wcywgJ2lzQmxvY2snIHwgJ2lzRGVzZWxlY3RhYmxlJyA+ICYge1xuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID47XG59ICkgPT4gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkuYmFja2dyb3VuZCB9O1xuXHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdG1pbi13aWR0aDogMDtcblx0cGFkZGluZzogMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGxpbmVhcjtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cblx0JHsgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSggc2l6ZSApIH1cblx0JHsgISBpc0Rlc2VsZWN0YWJsZSAmJiBlbmNsb3NpbmdCb3JkZXJzKCBpc0Jsb2NrICkgfVxuYDtcblxuY29uc3QgZW5jbG9zaW5nQm9yZGVycyA9ICggaXNCbG9jazogVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdpc0Jsb2NrJyBdICkgPT4ge1xuXHRjb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGA7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHQkeyBpc0Jsb2NrICYmIGVuY2xvc2luZ0JvcmRlciB9XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdFx0fVxuXG5cdFx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRcdG91dGxpbmU6IG5vbmU7XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbExhYmVsV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdC8vIE1ha2VzIHRoZSBpbmxpbmUgbGFiZWwgYmUgdGhlIGNvcnJlY3QgaGVpZ2h0LCBlcXVpdmFsZW50IHRvIHNldHRpbmcgbGluZS1oZWlnaHQ6IDBcblx0ZGlzcGxheTogZmxleDtcbmA7XG4iXX0= */");
+};
 export const toggleGroupControlSize = size => {
   const heights = {
     default: '36px',
     '__unstable-large': '40px'
   };
-  return /*#__PURE__*/css("min-height:", heights[size], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:toggleGroupControlSize;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdEVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0aXNEZXNlbGVjdGFibGUsXG5cdHNpemUsXG59OiB7XG5cdGlzRGVzZWxlY3RhYmxlPzogYm9vbGVhbjtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVyIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlciA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cblx0Jjpob3ZlciB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVySG92ZXIgfTtcblx0fVxuXG5cdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRvdXRsaW5lOiBub25lO1xuXHRcdHotaW5kZXg6IDE7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbExhYmVsV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdC8vIE1ha2VzIHRoZSBpbmxpbmUgbGFiZWwgYmUgdGhlIGNvcnJlY3QgaGVpZ2h0LCBlcXVpdmFsZW50IHRvIHNldHRpbmcgbGluZS1oZWlnaHQ6IDBcblx0ZGlzcGxheTogZmxleDtcbmA7XG4iXX0= */");
+  return /*#__PURE__*/css("min-height:", heights[size], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:toggleGroupControlSize;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThEVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0aXNCbG9jayxcblx0aXNEZXNlbGVjdGFibGUsXG5cdHNpemUsXG59OiBQaWNrPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wcywgJ2lzQmxvY2snIHwgJ2lzRGVzZWxlY3RhYmxlJyA+ICYge1xuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID47XG59ICkgPT4gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkuYmFja2dyb3VuZCB9O1xuXHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdG1pbi13aWR0aDogMDtcblx0cGFkZGluZzogMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGxpbmVhcjtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cblx0JHsgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSggc2l6ZSApIH1cblx0JHsgISBpc0Rlc2VsZWN0YWJsZSAmJiBlbmNsb3NpbmdCb3JkZXJzKCBpc0Jsb2NrICkgfVxuYDtcblxuY29uc3QgZW5jbG9zaW5nQm9yZGVycyA9ICggaXNCbG9jazogVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdpc0Jsb2NrJyBdICkgPT4ge1xuXHRjb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGA7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHQkeyBpc0Jsb2NrICYmIGVuY2xvc2luZ0JvcmRlciB9XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdFx0fVxuXG5cdFx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRcdG91dGxpbmU6IG5vbmU7XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbExhYmVsV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdC8vIE1ha2VzIHRoZSBpbmxpbmUgbGFiZWwgYmUgdGhlIGNvcnJlY3QgaGVpZ2h0LCBlcXVpdmFsZW50IHRvIHNldHRpbmcgbGluZS1oZWlnaHQ6IDBcblx0ZGlzcGxheTogZmxleDtcbmA7XG4iXX0= */");
 };
 export const block = process.env.NODE_ENV === "production" ? {
   name: "7whenc",
@@ -32,7 +38,7 @@ export const block = process.env.NODE_ENV === "production" ? {
 } : {
   name: "2dfrl8-block",
   styles: "display:flex;width:100%;label:block;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZEd0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufToge1xuXHRpc0Rlc2VsZWN0YWJsZT86IGJvb2xlYW47XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0ZXN0IH0gbGluZWFyO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXHQkeyAhIGlzRGVzZWxlY3RhYmxlICYmIGVuY2xvc2luZ0JvcmRlciB9XG5gO1xuXG5jb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0b3V0bGluZTogbm9uZTtcblx0XHR6LWluZGV4OiAxO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1Fd0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHRvdXRsaW5lOiBub25lO1xuXHRcdFx0ei1pbmRleDogMTtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export const BackdropView = _styled("div", process.env.NODE_ENV === "production" ? {
@@ -40,7 +46,7 @@ export const BackdropView = _styled("div", process.env.NODE_ENV === "production"
 } : {
   target: "eakva831",
   label: "BackdropView"
-})("background:", COLORS.gray[900], ";border-radius:", CONFIG.controlBorderRadius, ";left:0;position:absolute;top:2px;bottom:2px;transition:transform ", CONFIG.transitionDurationFast, " ease;", reduceMotion('transition'), " z-index:1;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtFc0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufToge1xuXHRpc0Rlc2VsZWN0YWJsZT86IGJvb2xlYW47XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0ZXN0IH0gbGluZWFyO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXHQkeyAhIGlzRGVzZWxlY3RhYmxlICYmIGVuY2xvc2luZ0JvcmRlciB9XG5gO1xuXG5jb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0b3V0bGluZTogbm9uZTtcblx0XHR6LWluZGV4OiAxO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */"));
+})("background:", COLORS.gray[900], ";border-radius:", CONFIG.controlBorderRadius, ";left:0;position:absolute;top:2px;bottom:2px;transition:transform ", CONFIG.transitionDurationFast, " ease;", reduceMotion('transition'), " z-index:1;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdFc0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHRvdXRsaW5lOiBub25lO1xuXHRcdFx0ei1pbmRleDogMTtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */"));
 export const VisualLabelWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "eakva830"
 } : {
@@ -52,7 +58,7 @@ export const VisualLabelWrapper = _styled("div", process.env.NODE_ENV === "produ
 } : {
   name: "zjik7",
   styles: "display:flex",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThFNEMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufToge1xuXHRpc0Rlc2VsZWN0YWJsZT86IGJvb2xlYW47XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0ZXN0IH0gbGluZWFyO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXHQkeyAhIGlzRGVzZWxlY3RhYmxlICYmIGVuY2xvc2luZ0JvcmRlciB9XG5gO1xuXG5jb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXG5cdCY6aG92ZXIge1xuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdH1cblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0b3V0bGluZTogbm9uZTtcblx0XHR6LWluZGV4OiAxO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9GNEMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHRvdXRsaW5lOiBub25lO1xuXHRcdFx0ei1pbmRleDogMTtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQmFja2Ryb3BWaWV3ID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGxlZnQ6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAycHg7XG5cdGJvdHRvbTogMnB4O1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3QgfSBlYXNlO1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cblx0ei1pbmRleDogMTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 //# sourceMappingURL=styles.js.map

package/build-module/toggle-group-control/toggle-group-control/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/styles.ts"],"names":["css","CONFIG","COLORS","reduceMotion","ToggleGroupControl","isDeselectable","size","ui","background","transitionDurationFastest","toggleGroupControlSize","~~enclosingBorder~~","~~border~~","~~controlBorderRadius~~","borderHover","borderFocus","controlBoxShadowFocus","heights","default","block","BackdropView","gray","transitionDurationFast","VisualLabelWrapper"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,YAAzB,QAA6C,aAA7C;AAGA,OAAO,MAAMC,kBAAkB,GAAG;AAAA,MAAE;AACnCC,IAAAA,~~cADmC~~;AAEnCC,IAAAA;~~AAFmC~~,GAAF;AAAA,~~sBAM3BN~~,GAN2B,gBAOlBE,MAAM,~~CAACK~~,EAAP,CAAUC,UAPQ,~~uHAaRP~~,MAAM,~~CAACQ~~,~~yBAbC~~,~~cAc9BN~~,YAAY,CAAE,YAAF,~~CAdkB~~,~~OAgB9BO~~,sBAAsB,~~CAAEJ~~,IAAF,~~CAhBQ~~,~~OAiB9B~~,CAAED,cAAF,~~IAAoBM~~,~~eAjBU~~;AAAA,CAA3B;~~AAoBP~~,~~MAAMA~~,eAAe,~~gBAAGX~~,GAAH,kBACHE,MAAM,~~CAACK~~,EAAP,~~CAAUK~~,MADP,~~qBAEFX~~,~~MAAM~~,~~CAACY~~,~~mBAFL~~,~~4BAKFX~~,MAAM,~~CAACK~~,EAAP,~~CAAUO~~,~~WALR~~,~~oCASFZ~~,MAAM,~~CAACK~~,EAAP,~~CAAUQ~~,~~WATR~~,~~kBAUJd~~,MAAM,~~CAACe~~,~~qBAVH,6lGAArB~~;~~AAgBA~~,OAAO,MAAMN,sBAAsB,~~GAClCJ~~,IADqC,IAEjC;AACJ,~~QAAMW~~,OAAO,GAAG;AACfC,IAAAA,OAAO,EAAE,MADM;AAEf,wBAAoB;AAFL,GAAhB;AAKA,~~sBAAOlB~~,GAAP,~~gBACgBiB~~,OAAO,~~CAAEX~~,IAAF,CADvB;AAGA,CAXM;AAaP,OAAO,~~MAAMa~~,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX;AAKP,OAAO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,~~kBACTlB~~,MAAM,~~CAACmB~~,IAAP,CAAa,GAAb,CADS,~~qBAENpB~~,MAAM,~~CAACY~~,mBAFD,~~wEAOCZ~~,MAAM,~~CAACqB~~,sBAPR,~~YAQrBnB~~,YAAY,CAAE,YAAF,CARS,~~ugGAAlB~~;AAYP,OAAO,~~MAAMoB~~,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/\n Internal dependencies\n */\nimport { CONFIG, COLORS, reduceMotion } from '../../utils';\nimport type { ToggleGroupControlProps } from '../types';\n\nexport const ToggleGroupControl = ( {\n\tisDeselectable,\n\tsize,\n}: {\n\~~tisDeselectable?: boolean;\n\~~tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >;\n} ) => css`\n\tbackground: ${ COLORS.ui.background };\n\tborder: 1px solid transparent;\n\tdisplay: inline-flex;\n\tmin-width: 0;\n\tpadding: 2px;\n\tposition: relative;\n\ttransition: transform ${ CONFIG.transitionDurationFastest } linear;\n\t${ reduceMotion( 'transition' ) }\n\n\t${ toggleGroupControlSize( size ) }\n\t${ ! isDeselectable && ~~enclosingBorder~~ }\n`;\n\nconst enclosingBorder = css`\n\tborder-color: ${ COLORS.ui.border };\n\~~tborder-radius:~~ ${ ~~CONFIG.controlBorderRadius~~ };\n\n\t&:hover {\n\t\tborder-color: ${ COLORS.ui.borderHover };\n\t}\n\n\t&:focus-within {\n\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t\toutline: none;\n\t\tz-index: 1;\n\t}\n`;\n\nexport const toggleGroupControlSize = (\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >\n) => {\n\tconst heights = {\n\t\tdefault: '36px',\n\t\t'__unstable-large': '40px',\n\t};\n\n\treturn css`\n\t\tmin-height: ${ heights[ size ] };\n\t`;\n};\n\nexport const block = css`\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nexport const BackdropView = styled.div`\n\tbackground: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tleft: 0;\n\tposition: absolute;\n\ttop: 2px;\n\tbottom: 2px;\n\ttransition: transform ${ CONFIG.transitionDurationFast } ease;\n\t${ reduceMotion( 'transition' ) }\n\tz-index: 1;\n`;\n\nexport const VisualLabelWrapper = styled.div`\n\t// Makes the inline label be the correct height, equivalent to setting line-height: 0\n\tdisplay: flex;\n`;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/styles.ts"],"names":["css","CONFIG","COLORS","reduceMotion","ToggleGroupControl","isBlock","isDeselectable","size","ui","background","controlBorderRadius","transitionDurationFastest","toggleGroupControlSize","enclosingBorders","enclosingBorder","border","borderHover","borderFocus","controlBoxShadowFocus","heights","default","block","BackdropView","gray","transitionDurationFast","VisualLabelWrapper"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,YAAzB,QAA6C,aAA7C;AAGA,OAAO,MAAMC,kBAAkB,GAAG;AAAA,MAAE;AACnCC,IAAAA,OADmC;AAEnCC,IAAAA,cAFmC;AAGnCC,IAAAA;AAHmC,GAAF;AAAA,sBAM3BP,GAN2B,gBAOlBE,MAAM,CAACM,EAAP,CAAUC,UAPQ,kDASfR,MAAM,CAACS,mBATQ,0FAcRT,MAAM,CAACU,yBAdC,cAe9BR,YAAY,CAAE,YAAF,CAfkB,OAiB9BS,sBAAsB,CAAEL,IAAF,CAjBQ,OAkB9B,CAAED,cAAF,IAAoBO,gBAAgB,CAAER,OAAF,CAlBN;AAAA,CAA3B;;AAqBP,MAAMQ,gBAAgB,GAAKR,OAAF,IAAqD;AAC7E,QAAMS,eAAe,gBAAGd,GAAH,kBACHE,MAAM,CAACM,EAAP,CAAUO,MADP,q3GAArB;AAIA,sBAAOf,GAAP,CACIK,OAAO,IAAIS,eADf,4BAImBZ,MAAM,CAACM,EAAP,CAAUQ,WAJ7B,oCAQmBd,MAAM,CAACM,EAAP,CAAUS,WAR7B,kBASiBhB,MAAM,CAACiB,qBATxB;AAcA,CAnBD;;AAqBA,OAAO,MAAMN,sBAAsB,GAClCL,IADqC,IAEjC;AACJ,QAAMY,OAAO,GAAG;AACfC,IAAAA,OAAO,EAAE,MADM;AAEf,wBAAoB;AAFL,GAAhB;AAKA,sBAAOpB,GAAP,gBACgBmB,OAAO,CAAEZ,IAAF,CADvB;AAGA,CAXM;AAaP,OAAO,MAAMc,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX;AAKP,OAAO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBACTpB,MAAM,CAACqB,IAAP,CAAa,GAAb,CADS,qBAENtB,MAAM,CAACS,mBAFD,wEAOCT,MAAM,CAACuB,sBAPR,YAQrBrB,YAAY,CAAE,YAAF,CARS,uzGAAlB;AAYP,OAAO,MAAMsB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB","sourcesContent":["/*\n External dependencies\n /\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/\n Internal dependencies\n */\nimport { CONFIG, COLORS, reduceMotion } from '../../utils';\nimport type { ToggleGroupControlProps } from '../types';\n\nexport const ToggleGroupControl = ( {\n\tisBlock,\n\tisDeselectable,\n\tsize,\n}: Pick< ToggleGroupControlProps, 'isBlock' \| 'isDeselectable' > & {\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >;\n} ) => css`\n\tbackground: ${ COLORS.ui.background };\n\tborder: 1px solid transparent;\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tdisplay: inline-flex;\n\tmin-width: 0;\n\tpadding: 2px;\n\tposition: relative;\n\ttransition: transform ${ CONFIG.transitionDurationFastest } linear;\n\t${ reduceMotion( 'transition' ) }\n\n\t${ toggleGroupControlSize( size ) }\n\t${ ! isDeselectable && enclosingBorders( isBlock ) }\n`;\n\nconst enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {\n\tconst enclosingBorder = css`\n\t\tborder-color: ${ COLORS.ui.border };\n\t`;\n\n\treturn css`\n\t\t${ isBlock && enclosingBorder }\n\n\t\t&:hover {\n\t\t\tborder-color: ${ COLORS.ui.borderHover };\n\t\t}\n\n\t\t&:focus-within {\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t\t\toutline: none;\n\t\t\tz-index: 1;\n\t\t}\n\t`;\n};\n\nexport const toggleGroupControlSize = (\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >\n) => {\n\tconst heights = {\n\t\tdefault: '36px',\n\t\t'__unstable-large': '40px',\n\t};\n\n\treturn css`\n\t\tmin-height: ${ heights[ size ] };\n\t`;\n};\n\nexport const block = css`\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nexport const BackdropView = styled.div`\n\tbackground: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tleft: 0;\n\tposition: absolute;\n\ttop: 2px;\n\tbottom: 2px;\n\ttransition: transform ${ CONFIG.transitionDurationFast } ease;\n\t${ reduceMotion( 'transition' ) }\n\tz-index: 1;\n`;\n\nexport const VisualLabelWrapper = styled.div`\n\t// Makes the inline label be the correct height, equivalent to setting line-height: 0\n\tdisplay: flex;\n`;\n"]}