@wordpress/components 19.14.0 → 19.15.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.js"],"names":["rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","colorProp","COLORS","ui","borderFocus","wrapperMargin","marks","marginBottom","Wrapper","blue","medium","focus","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","lightGray","Rail","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","darkGray","MarkLabel","thumbColor","css","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","NumberControl","ActionRightWrapper"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\tbox-sizing: border-box;\n\talign-items: flex-start;\n\tdisplay: inline-flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color: colorProp = COLORS.ui.borderFocus } ) => {\n\treturn css( { color: colorProp } );\n};\nconst wrapperMargin = ( { marks } ) =>\n\tcss( { marginBottom: marks ? 16 : null } );\n\nexport const Wrapper = styled.div`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.blue.medium.focus };\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor } ) => {\n\tlet background = railColor || null;\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.lightGray[ 600 ] };\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor } ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackground,\n\t} );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\tbox-sizing: border-box;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled } ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\tbox-sizing: border-box;\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled } ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.lightGray[ 600 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled } ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.lightGray[ 800 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused } ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span`\n\talign-items: center;\n\tborder-radius: 50%;\n\tbox-sizing: border-box;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show } ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position } ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tbox-sizing: border-box;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack.\nexport const InputNumber = styled( NumberControl )`\n\tbox-sizing: border-box;\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"names":["rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","COLORS","ui","borderFocus","wrapperMargin","marks","marginBottom","undefined","Wrapper","blue","medium","focus","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","lightGray","Rail","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","darkGray","MarkLabel","thumbColor","css","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","NumberControl","ActionRightWrapper"],"mappings":"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","sourcesContent":["/**\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\tbox-sizing: border-box;\n\talign-items: flex-start;\n\tdisplay: inline-flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks }: WrapperProps ) =>\n\tcss( { marginBottom: marks ? 16 : undefined } );\n\nexport const Wrapper = styled.div< WrapperProps >`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.blue.medium.focus };\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor || '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.lightGray[ 600 ] };\n\tbox-sizing: border-box;\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\tbox-sizing: border-box;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[ 600 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.lightGray[ 800 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\tbox-sizing: border-box;\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.darkGray[ 300 ] : COLORS.lightGray[ 600 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tbox-sizing: border-box;\n\tcolor: ${ COLORS.lightGray[ 600 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.lightGray[ 800 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused }: 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\tbox-sizing: border-box;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show }: 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\tbox-sizing: border-box;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack.\nexport const InputNumber = styled( NumberControl )`\n\tbox-sizing: border-box;\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}

package/build/range-control/tooltip.js

@@ -15,8 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _rangeControlStyles = require("./styles/range-control-styles");
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -28,8 +26,8 @@ var _rangeControlStyles = require("./styles/range-control-styles");
 /**
  * Internal dependencies
  */
-function SimpleTooltip(_ref) {
-  let {
+function SimpleTooltip(props) {
+  const {
     className,
     inputRef,
     tooltipPosition,
@@ -39,7 +37,7 @@ function SimpleTooltip(_ref) {
     renderTooltipContent = v => v,
     zIndex = 100,
     ...restProps
-  } = _ref;
+  } = props;
   const position = useTooltipPosition({
     inputRef,
     tooltipPosition
@@ -58,11 +56,11 @@ function SimpleTooltip(_ref) {
   }), renderTooltipContent(value));
 }
 
-function useTooltipPosition(_ref2) {
+function useTooltipPosition(_ref) {
   let {
     inputRef,
     tooltipPosition
-  } = _ref2;
+  } = _ref;
   const [position, setPosition] = (0, _element.useState)();
   const setTooltipPosition = (0, _element.useCallback)(() => {
     if (inputRef && inputRef.current) {

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

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

package/build/range-control/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/range-control/utils.js

@@ -13,7 +13,9 @@ var _hooks = require("../utils/hooks");
 
 var _math = require("../utils/math");
 
-// @ts-nocheck
+/**
+ * External dependencies
+ */
 
 /**
  * WordPress dependencies
@@ -26,11 +28,11 @@ const noop = () => {};
 /**
  * A float supported clamp function for a specific value.
  *
- * @param {number|null} value The value to clamp.
- * @param {number}      min   The minimum value.
- * @param {number}      max   The maximum value.
+ * @param  value The value to clamp.
+ * @param  min   The minimum value.
+ * @param  max   The maximum value.
  *
- * @return {number} A (float) number
+ * @return A (float) number
  */
 
 
@@ -39,28 +41,23 @@ function floatClamp(value, min, max) {
     return null;
   }
 
-  return parseFloat((0, _math.clamp)(value, min, max));
+  return parseFloat(`${(0, _math.clamp)(value, min, max)}`);
 }
 /**
  * Hook to store a clamped value, derived from props.
  *
- * @param {Object} settings         Hook settings.
- * @param {number} settings.min     The minimum value.
- * @param {number} settings.max     The maximum value.
- * @param {number} settings.value   The current value.
- * @param {any}    settings.initial The initial value.
- *
- * @return {[*, Function]} The controlled value and the value setter.
+ * @param  settings
+ * @return The controlled value and the value setter.
  */
 
 
-function useControlledRangeValue(_ref) {
-  let {
+function useControlledRangeValue(settings) {
+  const {
     min,
     max,
     value: valueProp,
     initial
-  } = _ref;
+  } = settings;
   const [state, setInternalState] = (0, _hooks.useControlledState)(floatClamp(valueProp, min, max), {
     initial,
     fallback: null
@@ -71,37 +68,33 @@ function useControlledRangeValue(_ref) {
     } else {
       setInternalState(floatClamp(nextValue, min, max));
     }
-  }, [min, max]);
+  }, [min, max]); // `state` can't be an empty string because we specified a fallback value of
+  // `null` in `useControlledState`
+
   return [state, setState];
 }
 /**
  * Hook to encapsulate the debouncing "hover" to better handle the showing
  * and hiding of the Tooltip.
  *
- * @param {Object}   settings                     Hook settings.
- * @param {Function} [settings.onShow=noop]       A callback function invoked when the element is shown.
- * @param {Function} [settings.onHide=noop]       A callback function invoked when the element is hidden.
- * @param {Function} [settings.onMouseMove=noop]  A callback function invoked when the mouse is moved.
- * @param {Function} [settings.onMouseLeave=noop] A callback function invoked when the mouse is moved out of the element.
- * @param {number}   [settings.timeout=300]       Timeout before the element is shown or hidden.
- *
- * @return {Object} Bound properties for use on a React.Node.
+ * @param  settings
+ * @return Bound properties for use on a React.Node.
  */
 
 
-function useDebouncedHoverInteraction(_ref2) {
-  let {
+function useDebouncedHoverInteraction(settings) {
+  const {
     onHide = noop,
     onMouseLeave = noop,
     onMouseMove = noop,
     onShow = noop,
     timeout = 300
-  } = _ref2;
+  } = settings;
   const [show, setShow] = (0, _element.useState)(false);
   const timeoutRef = (0, _element.useRef)();
   const setDebouncedTimeout = (0, _element.useCallback)(callback => {
     window.clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(callback, timeout);
+    timeoutRef.current = window.setTimeout(callback, timeout);
   }, [timeout]);
   const handleOnMouseMove = (0, _element.useCallback)(event => {
     onMouseMove(event);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/utils.js"],"names":["noop","floatClamp","value","min","max","parseFloat","useControlledRangeValue","valueProp","initial","state","setInternalState","fallback","setState","nextValue","useDebouncedHoverInteraction","onHide","onMouseLeave","onMouseMove","onShow","timeout","show","setShow","timeoutRef","setDebouncedTimeout","callback","window","clearTimeout","current","setTimeout","handleOnMouseMove","event","handleOnMouseLeave"],"mappings":"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","sourcesContent":["// @ts-nocheck\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useControlledState } from '../utils/hooks';\nimport { clamp } from '../utils/math';\n\nconst noop = () => {};\n\n/**\n * A float supported clamp function for a specific value.\n *\n * @param {number|null} value The value to clamp.\n * @param {number}      min   The minimum value.\n * @param {number}      max   The maximum value.\n *\n * @return {number} A (float) number\n */\nexport function floatClamp( value, min, max ) {\n\tif ( typeof value !== 'number' ) {\n\t\treturn null;\n\t}\n\n\treturn parseFloat( clamp( value, min, max ) );\n}\n\n/**\n * Hook to store a clamped value, derived from props.\n *\n * @param {Object} settings         Hook settings.\n * @param {number} settings.min     The minimum value.\n * @param {number} settings.max     The maximum value.\n * @param {number} settings.value   The current value.\n * @param {any}    settings.initial The initial value.\n *\n * @return {[*, Function]} The controlled value and the value setter.\n */\nexport function useControlledRangeValue( {\n\tmin,\n\tmax,\n\tvalue: valueProp,\n\tinitial,\n} ) {\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{ initial, fallback: null }\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue ) => {\n\t\t\tif ( nextValue === null ) {\n\t\t\t\tsetInternalState( null );\n\t\t\t} else {\n\t\t\t\tsetInternalState( floatClamp( nextValue, min, max ) );\n\t\t\t}\n\t\t},\n\t\t[ min, max ]\n\t);\n\n\treturn [ state, setState ];\n}\n\n/**\n * Hook to encapsulate the debouncing \"hover\" to better handle the showing\n * and hiding of the Tooltip.\n *\n * @param {Object}   settings                     Hook settings.\n * @param {Function} [settings.onShow=noop]       A callback function invoked when the element is shown.\n * @param {Function} [settings.onHide=noop]       A callback function invoked when the element is hidden.\n * @param {Function} [settings.onMouseMove=noop]  A callback function invoked when the mouse is moved.\n * @param {Function} [settings.onMouseLeave=noop] A callback function invoked when the mouse is moved out of the element.\n * @param {number}   [settings.timeout=300]       Timeout before the element is shown or hidden.\n *\n * @return {Object} Bound properties for use on a React.Node.\n */\nexport function useDebouncedHoverInteraction( {\n\tonHide = noop,\n\tonMouseLeave = noop,\n\tonMouseMove = noop,\n\tonShow = noop,\n\ttimeout = 300,\n} ) {\n\tconst [ show, setShow ] = useState( false );\n\tconst timeoutRef = useRef();\n\n\tconst setDebouncedTimeout = useCallback(\n\t\t( callback ) => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\n\t\t\ttimeoutRef.current = setTimeout( callback, timeout );\n\t\t},\n\t\t[ timeout ]\n\t);\n\n\tconst handleOnMouseMove = useCallback( ( event ) => {\n\t\tonMouseMove( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tif ( ! show ) {\n\t\t\t\tsetShow( true );\n\t\t\t\tonShow();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\tconst handleOnMouseLeave = useCallback( ( event ) => {\n\t\tonMouseLeave( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tsetShow( false );\n\t\t\tonHide();\n\t\t} );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t};\n\t} );\n\n\treturn {\n\t\tonMouseMove: handleOnMouseMove,\n\t\tonMouseLeave: handleOnMouseLeave,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/utils.ts"],"names":["noop","floatClamp","value","min","max","parseFloat","useControlledRangeValue","settings","valueProp","initial","state","setInternalState","fallback","setState","nextValue","useDebouncedHoverInteraction","onHide","onMouseLeave","onMouseMove","onShow","timeout","show","setShow","timeoutRef","setDebouncedTimeout","callback","window","clearTimeout","current","setTimeout","handleOnMouseMove","event","handleOnMouseLeave"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { MouseEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useControlledState } from '../utils/hooks';\nimport { clamp } from '../utils/math';\n\nimport type {\n\tUseControlledRangeValueArgs,\n\tUseDebouncedHoverInteractionArgs,\n} from './types';\n\nconst noop = () => {};\n\n/**\n * A float supported clamp function for a specific value.\n *\n * @param  value The value to clamp.\n * @param  min   The minimum value.\n * @param  max   The maximum value.\n *\n * @return A (float) number\n */\nexport function floatClamp( value: number | null, min: number, max: number ) {\n\tif ( typeof value !== 'number' ) {\n\t\treturn null;\n\t}\n\n\treturn parseFloat( `${ clamp( value, min, max ) }` );\n}\n\n/**\n * Hook to store a clamped value, derived from props.\n *\n * @param  settings\n * @return The controlled value and the value setter.\n */\nexport function useControlledRangeValue(\n\tsettings: UseControlledRangeValueArgs\n) {\n\tconst { min, max, value: valueProp, initial } = settings;\n\tconst [ state, setInternalState ] = useControlledState(\n\t\tfloatClamp( valueProp, min, max ),\n\t\t{ initial, fallback: null }\n\t);\n\n\tconst setState = useCallback(\n\t\t( nextValue: number | null ) => {\n\t\t\tif ( nextValue === null ) {\n\t\t\t\tsetInternalState( null );\n\t\t\t} else {\n\t\t\t\tsetInternalState( floatClamp( nextValue, min, max ) );\n\t\t\t}\n\t\t},\n\t\t[ min, max ]\n\t);\n\n\t// `state` can't be an empty string because we specified a fallback value of\n\t// `null` in `useControlledState`\n\treturn [ state as Exclude< typeof state, '' >, setState ] as const;\n}\n\n/**\n * Hook to encapsulate the debouncing \"hover\" to better handle the showing\n * and hiding of the Tooltip.\n *\n * @param  settings\n * @return Bound properties for use on a React.Node.\n */\nexport function useDebouncedHoverInteraction(\n\tsettings: UseDebouncedHoverInteractionArgs\n) {\n\tconst {\n\t\tonHide = noop,\n\t\tonMouseLeave = noop as MouseEventHandler,\n\t\tonMouseMove = noop as MouseEventHandler,\n\t\tonShow = noop,\n\t\ttimeout = 300,\n\t} = settings;\n\n\tconst [ show, setShow ] = useState( false );\n\tconst timeoutRef = useRef< number | undefined >();\n\n\tconst setDebouncedTimeout = useCallback(\n\t\t( callback ) => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\n\t\t\ttimeoutRef.current = window.setTimeout( callback, timeout );\n\t\t},\n\t\t[ timeout ]\n\t);\n\n\tconst handleOnMouseMove = useCallback( ( event ) => {\n\t\tonMouseMove( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tif ( ! show ) {\n\t\t\t\tsetShow( true );\n\t\t\t\tonShow();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\tconst handleOnMouseLeave = useCallback( ( event ) => {\n\t\tonMouseLeave( event );\n\n\t\tsetDebouncedTimeout( () => {\n\t\t\tsetShow( false );\n\t\t\tonHide();\n\t\t} );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\twindow.clearTimeout( timeoutRef.current );\n\t\t};\n\t} );\n\n\treturn {\n\t\tonMouseMove: handleOnMouseMove,\n\t\tonMouseLeave: handleOnMouseLeave,\n\t};\n}\n"]}

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

@@ -13,11 +13,6 @@ var _compose = require("@wordpress/compose");
 /**
  * WordPress dependencies
  */
-const {
-  clearTimeout,
-  setTimeout
-} = window;
-
 const noop = () => {};
 
 const POSITIONS = {
@@ -97,10 +92,10 @@ function useResizeLabel(_ref) {
 
   const debounceUnsetMoveXY = () => {
     if (moveTimeoutRef.current) {
-      clearTimeout(moveTimeoutRef.current);
+      window.clearTimeout(moveTimeoutRef.current);
     }
 
-    moveTimeoutRef.current = setTimeout(unsetMoveXY, fadeTimeout);
+    moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);
   };
 
   (0, _element.useEffect)(() => {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["clearTimeout","setTimeout","window","noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","unsetMoveXY","debounceUnsetMoveXY","current","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst { clearTimeout, setTimeout } = window;\nconst noop = () => {};\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = typeof POSITIONS[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param  props\n * @param  props.axis        Only shows the label corresponding to the axis.\n * @param  props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param  props.onResize    Callback when a resize occurs. Provides { width, height } callback.\n * @param  props.position    Adjusts label value.\n * @param  props.showPx      Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst unsetMoveXY = () => {\n\t\t/*\n\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t */\n\t\tif ( isAxisControlled ) return;\n\t\tsetMoveX( false );\n\t\tsetMoveY( false );\n\t};\n\n\tconst debounceUnsetMoveXY = () => {\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\tclearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = setTimeout( unsetMoveXY, fadeTimeout );\n\t};\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param  props\n * @param  props.axis     Only shows the label corresponding to the axis.\n * @param  props.height   Height value.\n * @param  props.moveX    Recent width (x axis) changes.\n * @param  props.moveY    Recent width (y axis) changes.\n * @param  props.position Adjusts label value.\n * @param  props.showPx   Whether to add `PX` to the label.\n * @param  props.width    Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","unsetMoveXY","debounceUnsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":";;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAIO,MAAMC,SAAS,GAAG;AACxBC,EAAAA,MAAM,EAAE,QADgB;AAExBC,EAAAA,MAAM,EAAE;AAFgB,CAAlB;;;AAsBP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAT,OAMsC;AAAA,MANb;AAC/BC,IAAAA,IAD+B;AAE/BC,IAAAA,WAAW,GAAG,GAFiB;AAG/BC,IAAAA,QAAQ,GAAGP,IAHoB;AAI/BQ,IAAAA,QAAQ,GAAGP,SAAS,CAACC,MAJU;AAK/BO,IAAAA,MAAM,GAAG;AALsB,GAMa;;AAC5C;AACD;AACA;AACA;AACC,QAAM,CAAEC,cAAF,EAAkBC,KAAlB,IAA4B,iCAAlC;AAEA;AACD;AACA;AACA;AACA;;AACC,QAAMC,gBAAgB,GAAG,CAAC,CAAEP,IAA5B;AAEA;AACD;AACA;AACA;;AACC,QAAM,CAAEQ,KAAF,EAASC,QAAT,IAAsB,uBAAU,KAAV,CAA5B;AACA,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAAU,KAAV,CAA5B;AAEA;AACD;AACA;AACA;;AACC,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAoBP,KAA1B;AACA,QAAMQ,SAAS,GAAG,qBAAQD,MAAR,CAAlB;AACA,QAAME,QAAQ,GAAG,qBAAQH,KAAR,CAAjB;AAEA;AACD;AACA;AACA;;AACC,QAAMI,cAAc,GAAG,sBAAvB;;AAEA,QAAMC,WAAW,GAAG,MAAM;AACzB;AACF;AACA;AACA;AACE,QAAKV,gBAAL,EAAwB;AACxBE,IAAAA,QAAQ,CAAE,KAAF,CAAR;AACAE,IAAAA,QAAQ,CAAE,KAAF,CAAR;AACA,GARD;;AAUA,QAAMO,mBAAmB,GAAG,MAAM;AACjC,QAAKF,cAAc,CAACG,OAApB,EAA8B;AAC7BC,MAAAA,MAAM,CAACC,YAAP,CAAqBL,cAAc,CAACG,OAApC;AACA;;AAEDH,IAAAA,cAAc,CAACG,OAAf,GAAyBC,MAAM,CAACE,UAAP,CAAmBL,WAAnB,EAAgChB,WAAhC,CAAzB;AACA,GAND;;AAQA,0BAAW,MAAM;AAChB;AACF;AACA;AACA;AACE,UAAMsB,UAAU,GAAGX,KAAK,KAAK,IAAV,IAAkBC,MAAM,KAAK,IAAhD;AAEA,QAAK,CAAEU,UAAP,EAAoB;AAEpB,UAAMC,cAAc,GAAGZ,KAAK,KAAKG,QAAQ,CAACI,OAA1C;AACA,UAAMM,eAAe,GAAGZ,MAAM,KAAKC,SAAS,CAACK,OAA7C;AAEA,QAAK,CAAEK,cAAF,IAAoB,CAAEC,eAA3B,EAA6C;AAE7C;AACF;AACA;AACA;AACA;AACA;;AACE,QAAKb,KAAK,IAAI,CAAEG,QAAQ,CAACI,OAApB,IAA+BN,MAA/B,IAAyC,CAAEC,SAAS,CAACK,OAA1D,EAAoE;AACnEJ,MAAAA,QAAQ,CAACI,OAAT,GAAmBP,KAAnB;AACAE,MAAAA,SAAS,CAACK,OAAV,GAAoBN,MAApB;AACA;AACA;AAED;AACF;AACA;;;AACE,QAAKW,cAAL,EAAsB;AACrBf,MAAAA,QAAQ,CAAE,IAAF,CAAR;AACAM,MAAAA,QAAQ,CAACI,OAAT,GAAmBP,KAAnB;AACA;;AAED,QAAKa,eAAL,EAAuB;AACtBd,MAAAA,QAAQ,CAAE,IAAF,CAAR;AACAG,MAAAA,SAAS,CAACK,OAAV,GAAoBN,MAApB;AACA;;AAEDX,IAAAA,QAAQ,CAAE;AAAEU,MAAAA,KAAF;AAASC,MAAAA;AAAT,KAAF,CAAR;AACAK,IAAAA,mBAAmB;AACnB,GAzCD,EAyCG,CAAEN,KAAF,EAASC,MAAT,CAzCH;AA2CA,QAAMa,KAAK,GAAGC,YAAY,CAAE;AAC3B3B,IAAAA,IAD2B;AAE3Ba,IAAAA,MAF2B;AAG3BL,IAAAA,KAH2B;AAI3BE,IAAAA,KAJ2B;AAK3BP,IAAAA,QAL2B;AAM3BC,IAAAA,MAN2B;AAO3BQ,IAAAA;AAP2B,GAAF,CAA1B;AAUA,SAAO;AACNc,IAAAA,KADM;AAENrB,IAAAA;AAFM,GAAP;AAIA;;AAYD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASsB,YAAT,QAQ0C;AAAA,MARnB;AACtB3B,IAAAA,IADsB;AAEtBa,IAAAA,MAFsB;AAGtBL,IAAAA,KAAK,GAAG,KAHc;AAItBE,IAAAA,KAAK,GAAG,KAJc;AAKtBP,IAAAA,QAAQ,GAAGP,SAAS,CAACC,MALC;AAMtBO,IAAAA,MAAM,GAAG,KANa;AAOtBQ,IAAAA;AAPsB,GAQmB;AACzC,MAAK,CAAEJ,KAAF,IAAW,CAAEE,KAAlB,EAA0B,OAAOkB,SAAP;AAE1B;AACD;AACA;AACA;;AACC,MAAKzB,QAAQ,KAAKP,SAAS,CAACE,MAA5B,EAAqC;AACpC,WAAQ,GAAGc,KAAO,MAAMC,MAAQ,EAAhC;AACA;AAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;;AACC,QAAMgB,SAAS,GAAGzB,MAAM,GAAG,KAAH,GAAW,EAAnC;;AAEA,MAAKJ,IAAL,EAAY;AACX,QAAKA,IAAI,KAAK,GAAT,IAAgBQ,KAArB,EAA6B;AAC5B,aAAQ,GAAGI,KAAO,GAAGiB,SAAW,EAAhC;AACA;;AACD,QAAK7B,IAAI,KAAK,GAAT,IAAgBU,KAArB,EAA6B;AAC5B,aAAQ,GAAGG,MAAQ,GAAGgB,SAAW,EAAjC;AACA;AACD;;AAED,MAAKrB,KAAK,IAAIE,KAAd,EAAsB;AACrB,WAAQ,GAAGE,KAAO,MAAMC,MAAQ,EAAhC;AACA;;AACD,MAAKL,KAAL,EAAa;AACZ,WAAQ,GAAGI,KAAO,GAAGiB,SAAW,EAAhC;AACA;;AACD,MAAKnB,KAAL,EAAa;AACZ,WAAQ,GAAGG,MAAQ,GAAGgB,SAAW,EAAjC;AACA;;AAED,SAAOD,SAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = typeof POSITIONS[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param  props\n * @param  props.axis        Only shows the label corresponding to the axis.\n * @param  props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param  props.onResize    Callback when a resize occurs. Provides { width, height } callback.\n * @param  props.position    Adjusts label value.\n * @param  props.showPx      Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst unsetMoveXY = () => {\n\t\t/*\n\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t */\n\t\tif ( isAxisControlled ) return;\n\t\tsetMoveX( false );\n\t\tsetMoveY( false );\n\t};\n\n\tconst debounceUnsetMoveXY = () => {\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t};\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param  props\n * @param  props.axis     Only shows the label corresponding to the axis.\n * @param  props.height   Height value.\n * @param  props.moveX    Recent width (x axis) changes.\n * @param  props.moveY    Recent width (y axis) changes.\n * @param  props.position Adjusts label value.\n * @param  props.showPx   Whether to add `PX` to the label.\n * @param  props.width    Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}

package/build/scrollable/component.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Scrollable = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -18,14 +18,13 @@ var _view = require("../view");
 var _hook = require("./hook");
 
 /**
- * Internal dependencies
+ * External dependencies
  */
 
 /**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                               forwardedRef
+ * Internal dependencies
  */
-function Scrollable(props, forwardedRef) {
+function UnconnectedScrollable(props, forwardedRef) {
   const scrollableProps = (0, _hook.useScrollable)(props);
   return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, scrollableProps, {
     ref: forwardedRef
@@ -34,7 +33,6 @@ function Scrollable(props, forwardedRef) {
 /**
  * `Scrollable` is a layout component that content in a scrollable container.
  *
- * @example
  * ```jsx
  * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;
  *
@@ -49,7 +47,8 @@ function Scrollable(props, forwardedRef) {
  */
 
 
-const ConnectedScrollable = (0, _context.contextConnect)(Scrollable, 'Scrollable');
-var _default = ConnectedScrollable;
+const Scrollable = (0, _context.contextConnect)(UnconnectedScrollable, 'Scrollable');
+exports.Scrollable = Scrollable;
+var _default = Scrollable;
 exports.default = _default;
 //# sourceMappingURL=component.js.map

package/build/scrollable/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/scrollable/component.js"],"names":["Scrollable","props","forwardedRef","scrollableProps","ConnectedScrollable"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,SAASA,UAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA2C;AAC1C,QAAMC,eAAe,GAAG,yBAAeF,KAAf,CAAxB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,eAAX;AAA6B,IAAA,GAAG,EAAGD;AAAnC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAEA,MAAME,mBAAmB,GAAG,6BAAgBJ,UAAhB,EAA4B,YAA5B,CAA5B;eAEeI,mB","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect } from '../ui/context';\nimport { View } from '../view';\nimport { useScrollable } from './hook';\n\n/**\n * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                                               forwardedRef\n */\nfunction Scrollable( props, forwardedRef ) {\n\tconst scrollableProps = useScrollable( props );\n\n\treturn <View { ...scrollableProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Scrollable` is a layout component that content in a scrollable container.\n *\n * @example\n * ```jsx\n * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Scrollable style={ { maxHeight: 200 } }>\n * \t\t\t<div style={ { height: 500 } }>...</div>\n * \t\t</Scrollable>\n * \t);\n * }\n * ```\n */\n\nconst ConnectedScrollable = contextConnect( Scrollable, 'Scrollable' );\n\nexport default ConnectedScrollable;\n"]}
+{"version":3,"sources":["@wordpress/components/src/scrollable/component.tsx"],"names":["UnconnectedScrollable","props","forwardedRef","scrollableProps","Scrollable"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,qBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,eAAe,GAAG,yBAAeF,KAAf,CAAxB;AAEA,SAAO,4BAAC,UAAD,6BAAWE,eAAX;AAA6B,IAAA,GAAG,EAAGD;AAAnC,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,UAAU,GAAG,6BAAgBJ,qBAAhB,EAAuC,YAAvC,CAAnB;;eAEQI,U","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/context';\nimport { View } from '../view';\nimport { useScrollable } from './hook';\nimport type { ScrollableProps } from './types';\n\nfunction UnconnectedScrollable(\n\tprops: WordPressComponentProps< ScrollableProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst scrollableProps = useScrollable( props );\n\n\treturn <View { ...scrollableProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Scrollable` is a layout component that content in a scrollable container.\n *\n * ```jsx\n * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Scrollable style={ { maxHeight: 200 } }>\n * \t\t\t<div style={ { height: 500 } }>...</div>\n * \t\t</Scrollable>\n * \t);\n * }\n * ```\n */\nexport const Scrollable = contextConnect( UnconnectedScrollable, 'Scrollable' );\n\nexport default Scrollable;\n"]}

package/build/scrollable/hook.js

@@ -24,14 +24,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
-
-/* eslint-disable jsdoc/valid-types */
-
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- */
-
-/* eslint-enable jsdoc/valid-types */
 function useScrollable(props) {
   const {
     className,

package/build/scrollable/hook.js.map

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

package/build/scrollable/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/scrollable/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as Scrollable } from './component';\n\nexport * from './hook';\n"]}
+{"version":3,"sources":["@wordpress/components/src/scrollable/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default as Scrollable } from './component';\n\nexport * from './hook';\n"]}

package/build/scrollable/styles.js

@@ -11,7 +11,7 @@ var _utils = require("../utils");
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
-const scrollableScrollbar = /*#__PURE__*/(0, _react.css)("@media only screen and ( min-device-width: 40em ){&::-webkit-scrollbar{height:12px;width:12px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-track{background:", _utils.CONFIG.colorScrollbarTrack, ";border-radius:8px;}&::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:", _utils.CONFIG.colorScrollbarThumb, ";border:2px solid rgba( 0, 0, 0, 0 );border-radius:7px;}&:hover::-webkit-scrollbar-thumb{background-color:", _utils.CONFIG.colorScrollbarThumbHover, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollableScrollbar;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXNDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IHNjcm9sbGFibGVTY3JvbGxiYXIgPSBjc3NgXG5cdEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKCBtaW4tZGV2aWNlLXdpZHRoOiA0MGVtICkge1xuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyIHtcblx0XHRcdGhlaWdodDogMTJweDtcblx0XHRcdHdpZHRoOiAxMnB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrIHtcblx0XHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRyYWNrIH07XG5cdFx0XHRib3JkZXItcmFkaXVzOiA4cHg7XG5cdFx0fVxuXG5cdFx0Jjo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIge1xuXHRcdFx0YmFja2dyb3VuZC1jbGlwOiBwYWRkaW5nLWJveDtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iIH07XG5cdFx0XHRib3JkZXI6IDJweCBzb2xpZCByZ2JhKCAwLCAwLCAwLCAwICk7XG5cdFx0XHRib3JkZXItcmFkaXVzOiA3cHg7XG5cdFx0fVxuXG5cdFx0Jjpob3Zlcjo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIge1xuXHRcdFx0YmFja2dyb3VuZC1jb2xvcjogJHsgQ09ORklHLmNvbG9yU2Nyb2xsYmFyVGh1bWJIb3ZlciB9O1xuXHRcdH1cblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IFNjcm9sbGFibGUgPSBjc3NgXG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb250ZW50ID0gY3NzYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG5leHBvcnQgY29uc3Qgc21vb3RoU2Nyb2xsID0gY3NzYFxuXHRzY3JvbGwtYmVoYXZpb3I6IHNtb290aDtcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxYID0gY3NzYFxuXHRvdmVyZmxvdy14OiBhdXRvO1xuXHRvdmVyZmxvdy15OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWSA9IGNzc2Bcblx0b3ZlcmZsb3cteDogaGlkZGVuO1xuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbEF1dG8gPSBjc3NgXG5cdG92ZXJmbG93LXk6IGF1dG87XG5gO1xuIl19 */");
+const scrollableScrollbar = /*#__PURE__*/(0, _react.css)("@media only screen and ( min-device-width: 40em ){&::-webkit-scrollbar{height:12px;width:12px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-track{background:", _utils.CONFIG.colorScrollbarTrack, ";border-radius:8px;}&::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:", _utils.CONFIG.colorScrollbarThumb, ";border:2px solid rgba( 0, 0, 0, 0 );border-radius:7px;}&:hover::-webkit-scrollbar-thumb{background-color:", _utils.CONFIG.colorScrollbarThumbHover, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:scrollableScrollbar;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXNDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRyB9IGZyb20gJy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IHNjcm9sbGFibGVTY3JvbGxiYXIgPSBjc3NgXG5cdEBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKCBtaW4tZGV2aWNlLXdpZHRoOiA0MGVtICkge1xuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyIHtcblx0XHRcdGhlaWdodDogMTJweDtcblx0XHRcdHdpZHRoOiAxMnB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrIHtcblx0XHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRyYWNrIH07XG5cdFx0XHRib3JkZXItcmFkaXVzOiA4cHg7XG5cdFx0fVxuXG5cdFx0Jjo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIge1xuXHRcdFx0YmFja2dyb3VuZC1jbGlwOiBwYWRkaW5nLWJveDtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iIH07XG5cdFx0XHRib3JkZXI6IDJweCBzb2xpZCByZ2JhKCAwLCAwLCAwLCAwICk7XG5cdFx0XHRib3JkZXItcmFkaXVzOiA3cHg7XG5cdFx0fVxuXG5cdFx0Jjpob3Zlcjo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWIge1xuXHRcdFx0YmFja2dyb3VuZC1jb2xvcjogJHsgQ09ORklHLmNvbG9yU2Nyb2xsYmFyVGh1bWJIb3ZlciB9O1xuXHRcdH1cblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IFNjcm9sbGFibGUgPSBjc3NgXG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDb250ZW50ID0gY3NzYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5gO1xuXG5leHBvcnQgY29uc3Qgc21vb3RoU2Nyb2xsID0gY3NzYFxuXHRzY3JvbGwtYmVoYXZpb3I6IHNtb290aDtcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxYID0gY3NzYFxuXHRvdmVyZmxvdy14OiBhdXRvO1xuXHRvdmVyZmxvdy15OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWSA9IGNzc2Bcblx0b3ZlcmZsb3cteDogaGlkZGVuO1xuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbEF1dG8gPSBjc3NgXG5cdG92ZXJmbG93LXk6IGF1dG87XG5gO1xuIl19 */");
 exports.scrollableScrollbar = scrollableScrollbar;
 const Scrollable = process.env.NODE_ENV === "production" ? {
   name: "13udsys",
@@ -19,7 +19,7 @@ const Scrollable = process.env.NODE_ENV === "production" ? {
 } : {
   name: "drdujb-Scrollable",
   styles: "height:100%;label:Scrollable;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUM2QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUM2QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.Scrollable = Scrollable;
@@ -29,7 +29,7 @@ const Content = process.env.NODE_ENV === "production" ? {
 } : {
   name: "3h0zaz-Content",
   styles: "position:relative;label:Content;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkMwQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkMwQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.Content = Content;
@@ -39,7 +39,7 @@ const smoothScroll = process.env.NODE_ENV === "production" ? {
 } : {
   name: "rnnynm-smoothScroll",
   styles: "scroll-behavior:smooth;label:smoothScroll;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0MrQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0MrQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.smoothScroll = smoothScroll;
@@ -49,7 +49,7 @@ const scrollX = process.env.NODE_ENV === "production" ? {
 } : {
   name: "17z0rvw-scrollX",
   styles: "overflow-x:auto;overflow-y:hidden;label:scrollX;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUQwQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUQwQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.scrollX = scrollX;
@@ -59,7 +59,7 @@ const scrollY = process.env.NODE_ENV === "production" ? {
 } : {
   name: "flie1-scrollY",
   styles: "overflow-x:hidden;overflow-y:auto;label:scrollY;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0QwQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0QwQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.scrollY = scrollY;
@@ -69,7 +69,7 @@ const scrollAuto = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1lcuu7v-scrollAuto",
   styles: "overflow-y:auto;label:scrollAuto;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkQ2QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc2Nyb2xsYWJsZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkQ2QiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3Njcm9sbGFibGUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxhYmxlU2Nyb2xsYmFyID0gY3NzYFxuXHRAbWVkaWEgb25seSBzY3JlZW4gYW5kICggbWluLWRldmljZS13aWR0aDogNDBlbSApIHtcblx0XHQmOjotd2Via2l0LXNjcm9sbGJhciB7XG5cdFx0XHRoZWlnaHQ6IDEycHg7XG5cdFx0XHR3aWR0aDogMTJweDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcblx0XHR9XG5cblx0XHQmOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XG5cdFx0XHRiYWNrZ3JvdW5kOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUcmFjayB9O1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogOHB4O1xuXHRcdH1cblxuXHRcdCY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY2xpcDogcGFkZGluZy1ib3g7XG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT05GSUcuY29sb3JTY3JvbGxiYXJUaHVtYiB9O1xuXHRcdFx0Ym9yZGVyOiAycHggc29saWQgcmdiYSggMCwgMCwgMCwgMCApO1xuXHRcdFx0Ym9yZGVyLXJhZGl1czogN3B4O1xuXHRcdH1cblxuXHRcdCY6aG92ZXI6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTkZJRy5jb2xvclNjcm9sbGJhclRodW1iSG92ZXIgfTtcblx0XHR9XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBTY3JvbGxhYmxlID0gY3NzYFxuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgQ29udGVudCA9IGNzc2Bcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNtb290aFNjcm9sbCA9IGNzc2Bcblx0c2Nyb2xsLWJlaGF2aW9yOiBzbW9vdGg7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2Nyb2xsWCA9IGNzc2Bcblx0b3ZlcmZsb3cteDogYXV0bztcblx0b3ZlcmZsb3cteTogaGlkZGVuO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNjcm9sbFkgPSBjc3NgXG5cdG92ZXJmbG93LXg6IGhpZGRlbjtcblx0b3ZlcmZsb3cteTogYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBzY3JvbGxBdXRvID0gY3NzYFxuXHRvdmVyZmxvdy15OiBhdXRvO1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 exports.scrollAuto = scrollAuto;

package/build/scrollable/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/scrollable/styles.js"],"names":["scrollableScrollbar","css","CONFIG","colorScrollbarTrack","colorScrollbarThumb","colorScrollbarThumbHover","Scrollable","Content","smoothScroll","scrollX","scrollY","scrollAuto"],"mappings":";;;;;;;AAGA;;AAKA;;;;AAEO,MAAMA,mBAAmB,oBAAGC,UAAH,oMAYdC,cAAOC,mBAZO,kGAkBRD,cAAOE,mBAlBC,gHAwBRF,cAAOG,wBAxBC,ukEAAzB;;AA6BA,MAAMC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAhB;;AAIA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAb;;AAIA,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlB;;AAIA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAb;;AAKA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAb;;AAKA,MAAMC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG } from '../utils';\n\nexport const scrollableScrollbar = css`\n\t@media only screen and ( min-device-width: 40em ) {\n\t\t&::-webkit-scrollbar {\n\t\t\theight: 12px;\n\t\t\twidth: 12px;\n\t\t}\n\n\t\t&::-webkit-scrollbar-track {\n\t\t\tbackground-color: transparent;\n\t\t}\n\n\t\t&::-webkit-scrollbar-track {\n\t\t\tbackground: ${ CONFIG.colorScrollbarTrack };\n\t\t\tborder-radius: 8px;\n\t\t}\n\n\t\t&::-webkit-scrollbar-thumb {\n\t\t\tbackground-clip: padding-box;\n\t\t\tbackground-color: ${ CONFIG.colorScrollbarThumb };\n\t\t\tborder: 2px solid rgba( 0, 0, 0, 0 );\n\t\t\tborder-radius: 7px;\n\t\t}\n\n\t\t&:hover::-webkit-scrollbar-thumb {\n\t\t\tbackground-color: ${ CONFIG.colorScrollbarThumbHover };\n\t\t}\n\t}\n`;\n\nexport const Scrollable = css`\n\theight: 100%;\n`;\n\nexport const Content = css`\n\tposition: relative;\n`;\n\nexport const smoothScroll = css`\n\tscroll-behavior: smooth;\n`;\n\nexport const scrollX = css`\n\toverflow-x: auto;\n\toverflow-y: hidden;\n`;\n\nexport const scrollY = css`\n\toverflow-x: hidden;\n\toverflow-y: auto;\n`;\n\nexport const scrollAuto = css`\n\toverflow-y: auto;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/scrollable/styles.ts"],"names":["scrollableScrollbar","css","CONFIG","colorScrollbarTrack","colorScrollbarThumb","colorScrollbarThumbHover","Scrollable","Content","smoothScroll","scrollX","scrollY","scrollAuto"],"mappings":";;;;;;;AAGA;;AAKA;;;;AAEO,MAAMA,mBAAmB,oBAAGC,UAAH,oMAYdC,cAAOC,mBAZO,kGAkBRD,cAAOE,mBAlBC,gHAwBRF,cAAOG,wBAxBC,ukEAAzB;;AA6BA,MAAMC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAhB;;AAIA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAb;;AAIA,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAlB;;AAIA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAb;;AAKA,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAb;;AAKA,MAAMC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG } from '../utils';\n\nexport const scrollableScrollbar = css`\n\t@media only screen and ( min-device-width: 40em ) {\n\t\t&::-webkit-scrollbar {\n\t\t\theight: 12px;\n\t\t\twidth: 12px;\n\t\t}\n\n\t\t&::-webkit-scrollbar-track {\n\t\t\tbackground-color: transparent;\n\t\t}\n\n\t\t&::-webkit-scrollbar-track {\n\t\t\tbackground: ${ CONFIG.colorScrollbarTrack };\n\t\t\tborder-radius: 8px;\n\t\t}\n\n\t\t&::-webkit-scrollbar-thumb {\n\t\t\tbackground-clip: padding-box;\n\t\t\tbackground-color: ${ CONFIG.colorScrollbarThumb };\n\t\t\tborder: 2px solid rgba( 0, 0, 0, 0 );\n\t\t\tborder-radius: 7px;\n\t\t}\n\n\t\t&:hover::-webkit-scrollbar-thumb {\n\t\t\tbackground-color: ${ CONFIG.colorScrollbarThumbHover };\n\t\t}\n\t}\n`;\n\nexport const Scrollable = css`\n\theight: 100%;\n`;\n\nexport const Content = css`\n\tposition: relative;\n`;\n\nexport const smoothScroll = css`\n\tscroll-behavior: smooth;\n`;\n\nexport const scrollX = css`\n\toverflow-x: auto;\n\toverflow-y: hidden;\n`;\n\nexport const scrollY = css`\n\toverflow-x: hidden;\n\toverflow-y: auto;\n`;\n\nexport const scrollAuto = css`\n\toverflow-y: auto;\n`;\n"]}