npm - @skbkontur/react-ui - Versions diffs - 0.0.0-bb4cbfe9c6 → 0.0.0-bd4276284d - Mend

@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bd4276284d

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

Files changed (2530) hide show

package/cjs/components/Toggle/Toggle.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Toggle.styles.ts"],"names":["globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","css","toggleLineHeight","toggleFontSize","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","isChrome","toggleBaseBg","toggleButtonOffsetY","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","disabledCaption","textColorDisabled","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('toggle')({\n handle: 'handle',\n container: 'container',\n disabled: 'disabled',\n containerDisabled: 'container-disabled',\n containerLoading: 'container-loading',\n background: 'background',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n return css`\n display: inline-flex;\n cursor: pointer;\n align-items: baseline;\n position: relative;\n line-height: ${t.toggleLineHeight};\n font-size: ${t.toggleFontSize};\n\n &:hover .${globalClasses.handle} {\n background: ${t.toggleBgHover};\n }\n &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n width: ${handleActiveWidth};\n }\n &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n translateX(-${t.toggleHandleActiveWidthIncrement});\n }\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned button,\n // and also height and baseline for toggle without caption.\n content: '\\\\00A0';\n display: inline-block;\n width: ${t.toggleWidth};\n flex: 0 0 auto;\n }\n `;\n },\n\n handle(t: Theme) {\n const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n return css`\n background: ${t.toggleBg};\n border-radius: ${t.toggleHandleBorderRadius};\n bottom: ${t.toggleBorderWidth};\n box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n height: ${handleSize};\n left: ${t.toggleBorderWidth};\n position: absolute;\n top: ${t.toggleBorderWidth};\n transition: 0.2s ease-in;\n width: ${handleSize};\n `;\n },\n\n handleDisabled(t: Theme) {\n return css`\n background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n `;\n },\n\n input(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n return css`\n position: absolute;\n opacity: 0;\n\n &:focus {\n outline: none;\n }\n &:checked ~ .${globalClasses.container} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n background: ${t.toggleBgChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerDisabled} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n background: ${t.toggleBgDisabledChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerLoading} {\n background: ${t.toggleBorderColor};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n }\n &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgChecked};\n }\n &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgDisabledChecked};\n border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n }\n &:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n }\n `;\n },\n\n container(t: Theme) {\n return css`\n border-radius: ${t.toggleBorderRadius};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n height: 100%;\n overflow: hidden;\n position: absolute;\n width: 100%;\n /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n z-index: 0;\n `;\n },\n\n containerDisabled(t: Theme) {\n return css`\n background: ${t.toggleBgDisabled};\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n `;\n },\n\n focused(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n `;\n },\n\n activeBackground() {\n return css`\n background: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n top: 0;\n transition: 0.2s ease-in;\n width: 10px;\n `;\n },\n\n disabledBackground(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n width: 0;\n `;\n },\n\n activeBackgroundLoading(t: Theme) {\n return css`\n background: ${t.toggleBgActive};\n `;\n },\n\n isWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n `;\n },\n\n isError(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n `;\n },\n\n button(t: Theme) {\n const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n const fontSize = parseInt(t.checkboxFontSize);\n const baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n return css`\n position: absolute;\n left: 0;\n top: 0;\n height: ${t.toggleHeight};\n width: ${t.toggleWidth};\n flex: 1 0 ${t.toggleWidth};\n\n background: ${t.toggleBaseBg};\n border-radius: ${t.toggleBorderRadius};\n line-height: ${t.toggleHeight};\n\n margin-top: calc(${t.toggleButtonOffsetY} + ${baselineCompensation}px);\n `;\n },\n\n buttonRight() {\n return css`\n right: 0;\n left: auto;\n `;\n },\n\n disabled() {\n return css`\n cursor: default;\n `;\n },\n\n rootLeft() {\n return css`\n flex-direction: row-reverse;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 0 0 ${t.toggleCaptionGap};\n line-height: ${t.toggleLineHeight};\n font-size: ${t.toggleFontSize};\n `;\n },\n\n disabledCaption(t: Theme) {\n return css`\n color: ${t.textColorDisabled};\n `;\n },\n\n captionLeft(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 ${t.toggleCaptionGap} 0 0;\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["Toggle.styles.ts"],"names":["globalClasses","handle","container","disabled","containerDisabled","containerLoading","background","styles","root","t","css","toggleLineHeight","toggleFontSize","toggleBgHover","toggleWidth","activeHandle","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","disableAnimation","toggleHandleBg","toggleHandleBorderRadius","toggleHandleBoxShadowOld","toggleHandleSize","toggleHandleLeft","toggleHandleTop","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleCheckedBg","toggleCheckedBgHover","input2022","toggleContainerBg","toggleContainerBoxShadow","toggleHandleBoxShadow","toggleContainerBgChecked","toggleContainerBoxShadowChecked","toggleHandleBgChecked","toggleHandleBoxShadowChecked","toggleContainerBgHover","toggleContainerBoxShadowHover","toggleHandleBgHover","toggleHandleBoxShadowHover","toggleContainerBgCheckedHover","toggleContainerBoxShadowCheckedHover","toggleHandleBgCheckedHover","toggleHandleBoxShadowCheckedHover","toggleContainerBgDisabled","toggleContainerBoxShadowDisabled","toggleHandleBgDisabled","toggleHandleBoxShadowDisabled","toggleContainerBgDisabledChecked","toggleContainerBoxShadowDisabledChecked","toggleHandleBgDisabledChecked","toggleHandleBoxShadowDisabledChecked","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","toggleOutlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","button","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","checkboxFontSize","baselineCompensation","isChrome","toggleBaseBg","toggleButtonOffsetY","buttonRight","rootLeft","caption","toggleTextColor","toggleCaptionGap","disabledCaption","textColorDisabled","captionLeft"],"mappings":"oSAAA;;AAEA,0C;;AAEO,IAAMA,aAAa,GAAG,qBAAO,QAAP,EAAiB;AAC5CC,EAAAA,MAAM,EAAE,QADoC;AAE5CC,EAAAA,SAAS,EAAE,WAFiC;AAG5CC,EAAAA,QAAQ,EAAE,UAHkC;AAI5CC,EAAAA,iBAAiB,EAAE,oBAJyB;AAK5CC,EAAAA,gBAAgB,EAAE,mBAL0B;AAM5CC,EAAAA,UAAU,EAAE,YANgC,EAAjB,CAAtB,C;;;AASA,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;;;;;AAKiBD,IAAAA,CAAC,CAACE,gBALnB;AAMeF,IAAAA,CAAC,CAACG,cANjB;;AAQaZ,IAAAA,aAAa,CAACC,MAR3B;AASkBQ,IAAAA,CAAC,CAACI,aATpB;;;;;;;;;AAkBaJ,IAAAA,CAAC,CAACK,WAlBf;;;;AAsBD,GAxBgC;;AA0BjCC,EAAAA,YA1BiC,wBA0BpBN,CA1BoB,EA0BV;AACrB,QAAMO,sBAAsB,GAAGP,CAAC,CAACQ,YAAjC;AACA,QAAMC,iBAAiB,aAAWF,sBAAX,eAA2CP,CAAC,CAACU,iBAA7C,WAAoEV,CAAC,CAACW,gCAAtE,MAAvB;AACA,eAAOV,YAAP;AACkBV,IAAAA,aAAa,CAACG,QADhC,EAC8CH,aAAa,CAACC,MAD5D;AAEaiB,IAAAA,iBAFb;;AAIkBlB,IAAAA,aAAa,CAACG,QAJhC,EAI8DH,aAAa,CAACC,MAJ5E;AAK4BQ,IAAAA,CAAC,CAACK,WAL9B,EAK0DE,sBAL1D;;;AAQD,GArCgC;;AAuCjCK,EAAAA,gBAvCiC,8BAuCd;AACjB,eAAOX,YAAP;;;;;;AAMD,GA9CgC;;AAgDjCT,EAAAA,MAhDiC,kBAgD1BQ,CAhD0B,EAgDhB;AACf,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACa,cADlB;AAEmBb,IAAAA,CAAC,CAACc,wBAFrB;AAGYd,IAAAA,CAAC,CAACU,iBAHd;AAIgBV,IAAAA,CAAC,CAACe,wBAJlB;AAKYf,IAAAA,CAAC,CAACgB,gBALd;AAMUhB,IAAAA,CAAC,CAACiB,gBANZ;;AAQSjB,IAAAA,CAAC,CAACkB,eARX;;AAUWlB,IAAAA,CAAC,CAACgB,gBAVb;;AAYD,GA7DgC;;AA+DjCG,EAAAA,cA/DiC,0BA+DlBnB,CA/DkB,EA+DR;AACvB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACoB,sBADlB;;AAGD,GAnEgC;;AAqEjCC,EAAAA,KArEiC,iBAqE3BrB,CArE2B,EAqEjB;AACd,QAAMO,sBAAsB,GAAGP,CAAC,CAACQ,YAAjC;AACA,eAAOP,YAAP;;;;;;;AAOiBV,IAAAA,aAAa,CAACE,SAP/B;AAQ8BO,IAAAA,CAAC,CAACU,iBARhC,EAQqDV,CAAC,CAACsB,eARvD;AASkBtB,IAAAA,CAAC,CAACsB,eATpB;;;AAYiB/B,IAAAA,aAAa,CAACI,iBAZ/B;AAa8BK,IAAAA,CAAC,CAACU,iBAbhC,EAaqDV,CAAC,CAACuB,gCAbvD;AAckBvB,IAAAA,CAAC,CAACwB,uBAdpB;;;AAiBiBjC,IAAAA,aAAa,CAACK,gBAjB/B;AAkBkBI,IAAAA,CAAC,CAACyB,iBAlBpB;AAmB8BzB,IAAAA,CAAC,CAACU,iBAnBhC,EAmBqDV,CAAC,CAACyB,iBAnBvD;;AAqBiBlC,IAAAA,aAAa,CAACE,SArB/B,EAqB6CF,aAAa,CAACM,UArB3D;;AAuBkBG,IAAAA,CAAC,CAACsB,eAvBpB;;AAyBiB/B,IAAAA,aAAa,CAACI,iBAzB/B,EAyBqDJ,aAAa,CAACM,UAzBnE;;AA2BkBG,IAAAA,CAAC,CAACwB,uBA3BpB;AA4B0BxB,IAAAA,CAAC,CAACQ,YA5B5B,EA4B4DR,CAAC,CAACQ,YA5B9D;AA6BkCR,IAAAA,CAAC,CAACuB,gCA7BpC;;AA+BiBhC,IAAAA,aAAa,CAACC,MA/B/B;AAgC4BQ,IAAAA,CAAC,CAACK,WAhC9B,EAgC0DE,sBAhC1D;AAiCkBP,IAAAA,CAAC,CAAC0B,eAjCpB;;AAmCoB1B,IAAAA,CAAC,CAAC2B,oBAnCtB;;;;AAuCD,GA9GgC;;AAgHjCC,EAAAA,SAhHiC,qBAgHvB5B,CAhHuB,EAgHb;AAClB,eAAOC,YAAP;;AAESV,IAAAA,aAAa,CAACE,SAFvB,EAEwCF,aAAa,CAACC,MAFtD;;;;AAMWD,IAAAA,aAAa,CAACE,SANzB;AAOsBO,IAAAA,CAAC,CAAC6B,iBAPxB;AAQsB7B,IAAAA,CAAC,CAAC8B,wBARxB;;AAUWvC,IAAAA,aAAa,CAACC,MAVzB;AAWsBQ,IAAAA,CAAC,CAACa,cAXxB;AAYsBb,IAAAA,CAAC,CAAC+B,qBAZxB;;;;AAgBWxC,IAAAA,aAAa,CAACE,SAhBzB;AAiBsBO,IAAAA,CAAC,CAACgC,wBAjBxB;AAkBsBhC,IAAAA,CAAC,CAACiC,+BAlBxB;;AAoBW1C,IAAAA,aAAa,CAACC,MApBzB;AAqBsBQ,IAAAA,CAAC,CAACkC,qBArBxB;AAsBsBlC,IAAAA,CAAC,CAACmC,4BAtBxB;;;;;;AA4BW5C,IAAAA,aAAa,CAACE,SA5BzB;AA6BsBO,IAAAA,CAAC,CAACoC,sBA7BxB;AA8BsBpC,IAAAA,CAAC,CAACqC,6BA9BxB;;AAgCW9C,IAAAA,aAAa,CAACC,MAhCzB;AAiCsBQ,IAAAA,CAAC,CAACsC,mBAjCxB;AAkCsBtC,IAAAA,CAAC,CAACuC,0BAlCxB;;;;AAsCWhD,IAAAA,aAAa,CAACE,SAtCzB;AAuCsBO,IAAAA,CAAC,CAACwC,6BAvCxB;AAwCsBxC,IAAAA,CAAC,CAACyC,oCAxCxB;;AA0CWlD,IAAAA,aAAa,CAACC,MA1CzB;AA2CsBQ,IAAAA,CAAC,CAAC0C,0BA3CxB;AA4CsB1C,IAAAA,CAAC,CAAC2C,iCA5CxB;;;;;;AAkDWpD,IAAAA,aAAa,CAACE,SAlDzB;AAmDsBO,IAAAA,CAAC,CAAC4C,yBAnDxB;AAoDsB5C,IAAAA,CAAC,CAAC6C,gCApDxB;;AAsDWtD,IAAAA,aAAa,CAACC,MAtDzB;AAuDsBQ,IAAAA,CAAC,CAAC8C,sBAvDxB;AAwDsB9C,IAAAA,CAAC,CAAC+C,6BAxDxB;;;;AA4DWxD,IAAAA,aAAa,CAACE,SA5DzB;AA6DsBO,IAAAA,CAAC,CAACgD,gCA7DxB;AA8DsBhD,IAAAA,CAAC,CAACiD,uCA9DxB;;AAgEW1D,IAAAA,aAAa,CAACC,MAhEzB;AAiEsBQ,IAAAA,CAAC,CAACkD,6BAjExB;AAkEsBlD,IAAAA,CAAC,CAACmD,oCAlExB;;;;;AAuED,GAxLgC;;AA0LjC1D,EAAAA,SA1LiC,qBA0LvBO,CA1LuB,EA0Lb;AAClB,eAAOC,YAAP;AACmBD,IAAAA,CAAC,CAACoD,kBADrB;AAE4BpD,IAAAA,CAAC,CAACU,iBAF9B,EAEmDV,CAAC,CAACyB,iBAFrD;;;;;;;;AAUD,GArMgC;;AAuMjC9B,EAAAA,iBAvMiC,6BAuMfK,CAvMe,EAuML;AAC1B,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACqD,gBADlB;AAEgCrD,IAAAA,CAAC,CAACsD,yBAFlC;;AAID,GA5MgC;;AA8MjCC,EAAAA,OA9MiC,mBA8MzBvD,CA9MyB,EA8Mf;AAChB,eAAOC,YAAP;AAC0BD,IAAAA,CAAC,CAACwD,uBAD5B,EAC8DxD,CAAC,CAACyD,kBADhE,EACsFzD,CAAC,CAAC0D,sBADxF;;AAGD,GAlNgC;;AAoNjCC,EAAAA,gBApNiC,8BAoNd;AACjB,eAAO1D,YAAP;;;;;;;;;AASD,GA9NgC;;AAgOjC2D,EAAAA,kBAhOiC,8BAgOd5D,CAhOc,EAgOJ;AAC3B,eAAOC,YAAP;AACgCD,IAAAA,CAAC,CAACsD,yBADlC;;;AAID,GArOgC;;AAuOjCO,EAAAA,uBAvOiC,mCAuOT7D,CAvOS,EAuOC;AAChC,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAAC8D,cADlB;;AAGD,GA3OgC;;AA6OjCC,EAAAA,SA7OiC,qBA6OvB/D,CA7OuB,EA6Ob;AAClB,eAAOC,YAAP;AAC0BD,IAAAA,CAAC,CAACwD,uBAD5B,EAC8DxD,CAAC,CAACyD,kBADhE,EACsFzD,CAAC,CAACgE,wBADxF;;AAGD,GAjPgC;;AAmPjCC,EAAAA,OAnPiC,mBAmPzBjE,CAnPyB,EAmPf;AAChB,eAAOC,YAAP;AAC0BD,IAAAA,CAAC,CAACwD,uBAD5B,EAC8DxD,CAAC,CAACyD,kBADhE,EACsFzD,CAAC,CAACkE,sBADxF;;AAGD,GAvPgC;;AAyPjCC,EAAAA,MAzPiC,kBAyP1BnE,CAzP0B,EAyPhB;AACf,QAAMoE,yBAAyB,GAAGC,QAAQ,CAACrE,CAAC,CAACsE,gCAAH,CAA1C;AACA,QAAMC,QAAQ,GAAGF,QAAQ,CAACrE,CAAC,CAACwE,gBAAH,CAAzB;AACA,QAAMC,oBAAoB,GAAGF,QAAQ,IAAI,EAAZ,IAAkBG,gBAAlB,GAA6B,CAACN,yBAA9B,GAA0D,CAAvF;AACA,eAAOnE,YAAP;;;;AAIYD,IAAAA,CAAC,CAACQ,YAJd;AAKWR,IAAAA,CAAC,CAACK,WALb;AAMcL,IAAAA,CAAC,CAACK,WANhB;;AAQgBL,IAAAA,CAAC,CAAC2E,YARlB;AASmB3E,IAAAA,CAAC,CAACoD,kBATrB;AAUiBpD,IAAAA,CAAC,CAACQ,YAVnB;;AAYqBR,IAAAA,CAAC,CAAC4E,mBAZvB,EAYgDH,oBAZhD;;AAcD,GA3QgC;;AA6QjCI,EAAAA,WA7QiC,yBA6QnB;AACZ,eAAO5E,YAAP;;;;AAID,GAlRgC;;AAoRjCP,EAAAA,QApRiC,sBAoRtB;AACT,eAAOO,YAAP;;;AAGD,GAxRgC;;AA0RjC6E,EAAAA,QA1RiC,sBA0RtB;AACT,eAAO7E,YAAP;;;AAGD,GA9RgC;;AAgSjC8E,EAAAA,OAhSiC,mBAgSzB/E,CAhSyB,EAgSf;AAChB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACgF,eADb;AAEmBhF,IAAAA,CAAC,CAACiF,gBAFrB;AAGiBjF,IAAAA,CAAC,CAACE,gBAHnB;AAIeF,IAAAA,CAAC,CAACG,cAJjB;;AAMD,GAvSgC;;AAySjC+E,EAAAA,eAzSiC,2BAySjBlF,CAzSiB,EAySP;AACxB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACmF,iBADb;;AAGD,GA7SgC;;AA+SjCC,EAAAA,WA/SiC,uBA+SrBpF,CA/SqB,EA+SX;AACpB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACgF,eADb;AAEehF,IAAAA,CAAC,CAACiF,gBAFjB;;AAID,GApTgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('toggle')({\n handle: 'handle',\n container: 'container',\n disabled: 'disabled',\n containerDisabled: 'container-disabled',\n containerLoading: 'container-loading',\n background: 'background',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n display: inline-flex;\n cursor: pointer;\n align-items: baseline;\n position: relative;\n line-height: ${t.toggleLineHeight};\n font-size: ${t.toggleFontSize};\n\n &:hover .${globalClasses.handle} {\n background: ${t.toggleBgHover};\n }\n\n &::before {\n // non-breaking space.\n // makes a correct space for absolutely positioned button,\n // and also height and baseline for toggle without caption.\n content: '\\\\00A0';\n display: inline-block;\n width: ${t.toggleWidth};\n flex: 0 0 auto;\n }\n `;\n },\n\n activeHandle(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n return css`\n &:active:not(.${globalClasses.disabled}) .${globalClasses.handle} {\n width: ${handleActiveWidth};\n }\n &:active:not(.${globalClasses.disabled}) input:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders}) translateX(-4px);\n }\n `;\n },\n\n disableAnimation() {\n return css`\n &,\n * {\n transition: none !important;\n }\n `;\n },\n\n handle(t: Theme) {\n return css`\n background: ${t.toggleHandleBg};\n border-radius: ${t.toggleHandleBorderRadius};\n bottom: ${t.toggleBorderWidth};\n box-shadow: ${t.toggleHandleBoxShadowOld};\n height: ${t.toggleHandleSize};\n left: ${t.toggleHandleLeft};\n position: absolute;\n top: ${t.toggleHandleTop};\n transition: 0.2s ease-in;\n width: ${t.toggleHandleSize};\n `;\n },\n\n handleDisabled(t: Theme) {\n return css`\n background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n `;\n },\n\n input(t: Theme) {\n const handleWidthWithBorders = t.toggleHeight;\n return css`\n position: absolute;\n opacity: 0;\n\n &:focus {\n outline: none;\n }\n &:checked ~ .${globalClasses.container} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n background: ${t.toggleBgChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerDisabled} {\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n background: ${t.toggleBgDisabledChecked};\n transition: background 0s 0.2s;\n }\n &:checked ~ .${globalClasses.containerLoading} {\n background: ${t.toggleBorderColor};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n }\n &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgChecked};\n }\n &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n width: 70%;\n background: ${t.toggleBgDisabledChecked};\n border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n }\n &:checked ~ .${globalClasses.handle} {\n transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n background: ${t.toggleCheckedBg};\n &:hover {\n background: ${t.toggleCheckedBgHover};\n }\n }\n `;\n },\n\n input2022(t: Theme) {\n return css`\n &:enabled {\n ~ .${globalClasses.container}, ~ .${globalClasses.handle} {\n transition: 0.2s ease-in !important;\n }\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBg};\n box-shadow: ${t.toggleContainerBoxShadow};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBg};\n box-shadow: ${t.toggleHandleBoxShadow};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgChecked};\n box-shadow: ${t.toggleContainerBoxShadowChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgChecked};\n box-shadow: ${t.toggleHandleBoxShadowChecked};\n }\n }\n }\n &:enabled:hover {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgHover};\n box-shadow: ${t.toggleContainerBoxShadowHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgHover};\n box-shadow: ${t.toggleHandleBoxShadowHover};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgCheckedHover};\n box-shadow: ${t.toggleContainerBoxShadowCheckedHover};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgCheckedHover};\n box-shadow: ${t.toggleHandleBoxShadowCheckedHover};\n }\n }\n }\n &:disabled {\n :not(:checked) {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabled};\n box-shadow: ${t.toggleContainerBoxShadowDisabled};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabled} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabled};\n }\n }\n :checked {\n ~ .${globalClasses.container} {\n background: ${t.toggleContainerBgDisabledChecked};\n box-shadow: ${t.toggleContainerBoxShadowDisabledChecked};\n }\n ~ .${globalClasses.handle} {\n background: ${t.toggleHandleBgDisabledChecked} !important;\n box-shadow: ${t.toggleHandleBoxShadowDisabledChecked};\n }\n }\n }\n `;\n },\n\n container(t: Theme) {\n return css`\n border-radius: ${t.toggleBorderRadius};\n box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n height: 100%;\n overflow: hidden;\n position: absolute;\n width: 100%;\n /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n z-index: 0;\n `;\n },\n\n containerDisabled(t: Theme) {\n return css`\n background: ${t.toggleBgDisabled};\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n `;\n },\n\n focused(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n `;\n },\n\n activeBackground() {\n return css`\n background: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n top: 0;\n transition: 0.2s ease-in;\n width: 10px;\n `;\n },\n\n disabledBackground(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n width: 0;\n `;\n },\n\n activeBackgroundLoading(t: Theme) {\n return css`\n background: ${t.toggleBgActive};\n `;\n },\n\n isWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n `;\n },\n\n isError(t: Theme) {\n return css`\n box-shadow: 0 0 0 1px ${t.toggleOutlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n `;\n },\n\n button(t: Theme) {\n const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n const fontSize = parseInt(t.checkboxFontSize);\n const baselineCompensation = fontSize <= 16 && isChrome ? -labGrotesqueCompenstation : 0;\n return css`\n position: absolute;\n left: 0;\n top: 0;\n height: ${t.toggleHeight};\n width: ${t.toggleWidth};\n flex: 1 0 ${t.toggleWidth};\n\n background: ${t.toggleBaseBg};\n border-radius: ${t.toggleBorderRadius};\n line-height: ${t.toggleHeight};\n\n margin-top: calc(${t.toggleButtonOffsetY} + ${baselineCompensation}px);\n `;\n },\n\n buttonRight() {\n return css`\n right: 0;\n left: auto;\n `;\n },\n\n disabled() {\n return css`\n cursor: default;\n `;\n },\n\n rootLeft() {\n return css`\n flex-direction: row-reverse;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 0 0 ${t.toggleCaptionGap};\n line-height: ${t.toggleLineHeight};\n font-size: ${t.toggleFontSize};\n `;\n },\n\n disabledCaption(t: Theme) {\n return css`\n color: ${t.textColorDisabled};\n `;\n },\n\n captionLeft(t: Theme) {\n return css`\n color: ${t.toggleTextColor};\n padding: 0 ${t.toggleCaptionGap} 0 0;\n `;\n },\n});\n"]}

package/cjs/components/Token/Token.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { colorStyles } from './Token.styles';
 export declare type TokenColorName = keyof typeof colorStyles;
@@ -10,14 +10,18 @@ export interface TokenProps extends CommonProps {
     colors?: TokenColors;
     isActive?: boolean;
     /**
-     * Cостояние валидации при ошибке.
+     * Состояние валидации при ошибке.
      */
     error?: boolean;
     /**
-     * Cостояние валидации при предупреждении.
+     * Состояние валидации при предупреждении.
      */
     warning?: boolean;
     disabled?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onRemove?: React.MouseEventHandler<HTMLElement>;
@@ -26,6 +30,10 @@ export interface TokenProps extends CommonProps {
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
+export declare const TokenDataTids: {
+    readonly root: "Token__root";
+    readonly removeIcon: "Token__removeIcon";
+};
 export declare class Token extends React.Component<TokenProps> {
     static __KONTUR_REACT_UI__: string;
     private theme;

package/cjs/components/Token/Token.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Token = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TokenDataTids = exports.Token = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _CrossIcon = require("../../internal/icons/CrossIcon");
 var _utils = require("../../lib/utils");
@@ -7,8 +7,10 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _CloseButtonIcon = require("../../internal/CloseButtonIcon/CloseButtonIcon");
-var _Token = require("./Token.styles");var _class, _class2, _temp;var
+var _Token = require("./Token.styles");var _class, _class2, _temp;
@@ -37,6 +39,25 @@ var _Token = require("./Token.styles");var _class, _class2, _temp;var
+var getValidation = function getValidation(error, warning) {
+  if (error) {
+    return 'error';
+  } else if (warning) {
+    return 'warning';
+  }
+  return null;
+};
+var TokenDataTids = {
+  root: 'Token__root',
+  removeIcon: 'Token__removeIcon' };exports.TokenDataTids = TokenDataTids;var
@@ -96,6 +117,24 @@ Token = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
@@ -124,4 +163,4 @@ Token = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       }
       onRemove(event);
-    };return _this;}var _proto = Token.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx, _cx2;var _this$props2 = this.props,children = _this$props2.children,isActive = _this$props2.isActive,colors = _this$props2.colors,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,_this$props2$onClick = _this$props2.onClick,onClick = _this$props2$onClick === void 0 ? _utils.emptyHandler : _this$props2$onClick,_this$props2$onDouble = _this$props2.onDoubleClick,onDoubleClick = _this$props2$onDouble === void 0 ? _utils.emptyHandler : _this$props2$onDouble,_this$props2$onMouseE = _this$props2.onMouseEnter,onMouseEnter = _this$props2$onMouseE === void 0 ? _utils.emptyHandler : _this$props2$onMouseE,_this$props2$onMouseL = _this$props2.onMouseLeave,onMouseLeave = _this$props2$onMouseL === void 0 ? _utils.emptyHandler : _this$props2$onMouseL,_this$props2$onFocus = _this$props2.onFocus,onFocus = _this$props2$onFocus === void 0 ? _utils.emptyHandler : _this$props2$onFocus,_this$props2$onBlur = _this$props2.onBlur,onBlur = _this$props2$onBlur === void 0 ? _utils.emptyHandler : _this$props2$onBlur;var theme = this.theme;var validation = error ? 'error' : warning ? 'warning' : null;var disableClassNames = (0, _Emotion.cx)(_Token.colorStyles.defaultDisabled(theme), (_cx = {}, _cx[_Token.colorStyles.defaultDisabledWarning(theme)] = warning, _cx[_Token.colorStyles.defaultDisabledError(theme)] = error, _cx));var tokenClassName = disabled ? disableClassNames : _Token.colorStyles.defaultIdle(theme, validation);var activeTokenClassName = disabled ? disableClassNames : _Token.colorStyles.defaultActive(theme, validation);if (!disabled && colors) {tokenClassName = _Token.colorStyles[colors.idle](theme, validation);var activeClassName = colors.active ? colors.active : colors.idle;activeTokenClassName = _Token.colorStyles[activeClassName](theme, validation);}var tokenClassNames = (0, _Emotion.cx)(_Token.styles.token(this.theme), tokenClassName, (_cx2 = {}, _cx2[activeTokenClassName] = !!isActive, _cx2[_Token.styles.disabled(theme)] = !!disabled, _cx2));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { className: tokenClassNames, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", { className: _Token.styles.text(this.theme) }, children), /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Token.styles.removeIcon(this.theme), _Token.globalClasses.removeIcon), onClick: this.onRemoveClick }, /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null))));};return Token;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _temp)) || _class;exports.Token = Token;
+    };return _this;}var _proto = Token.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$props2 = this.props,children = _this$props2.children,isActive = _this$props2.isActive,_this$props2$colors = _this$props2.colors,colors = _this$props2$colors === void 0 ? { idle: 'defaultIdle', active: 'defaultActive' } : _this$props2$colors,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,ariaDescribedby = _this$props2['aria-describedby'],_this$props2$onClick = _this$props2.onClick,onClick = _this$props2$onClick === void 0 ? _utils.emptyHandler : _this$props2$onClick,_this$props2$onDouble = _this$props2.onDoubleClick,onDoubleClick = _this$props2$onDouble === void 0 ? _utils.emptyHandler : _this$props2$onDouble,_this$props2$onMouseE = _this$props2.onMouseEnter,onMouseEnter = _this$props2$onMouseE === void 0 ? _utils.emptyHandler : _this$props2$onMouseE,_this$props2$onMouseL = _this$props2.onMouseLeave,onMouseLeave = _this$props2$onMouseL === void 0 ? _utils.emptyHandler : _this$props2$onMouseL,_this$props2$onFocus = _this$props2.onFocus,onFocus = _this$props2$onFocus === void 0 ? _utils.emptyHandler : _this$props2$onFocus,_this$props2$onBlur = _this$props2.onBlur,onBlur = _this$props2$onBlur === void 0 ? _utils.emptyHandler : _this$props2$onBlur;var theme = this.theme;var validation = getValidation(error, warning);var icon = (0, _ThemeHelpers.isTheme2022)(theme) ? /*#__PURE__*/_react.default.createElement(_CloseButtonIcon.CloseButtonIcon, { side: 16, color: "inherit", colorHover: "inherit", tabbable: false }) : /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null);var classNames = '';if ((0, _ThemeHelpers.isTheme2022)(theme)) {classNames = (0, _Emotion.cx)(_Token.styles.tokenDefaultIdle2022(theme), !isActive && !warning && !error && !disabled && _Token.styles.tokenDefaultIdleHovering2022(theme), isActive && _Token.styles.tokenDefaultActive2022(theme), warning && _Token.styles.tokenWarning2022(theme), error && _Token.styles.tokenError2022(theme), disabled && _Token.styles.tokenDisabled2022(theme));} else {classNames = (0, _Emotion.cx)(_Token.colorStyles[colors.idle](theme, validation), !!isActive && _Token.colorStyles[colors.active || colors.idle](theme, validation), !!disabled && _Token.styles.disabled(theme), !!disabled && _Token.colorStyles.defaultDisabled(theme), !!disabled && warning && _Token.colorStyles.defaultDisabledWarning(theme), !!disabled && error && _Token.colorStyles.defaultDisabledError(theme));}var tokenClassNames = (0, _Emotion.cx)(_Token.styles.token(this.theme), classNames);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TokenDataTids.root, className: tokenClassNames, "aria-describedby": ariaDescribedby, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", { className: _Token.styles.text(this.theme) }, children), /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Token.styles.removeIcon(this.theme), _Token.globalClasses.removeIcon), onClick: this.onRemoveClick, "data-tid": TokenDataTids.removeIcon }, icon)));};return Token;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _temp)) || _class;exports.Token = Token;

package/cjs/components/Token/Token.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Token.tsx"],"names":["Token","rootNode","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","theme","renderMain","children","isActive","colors","~~error~~","~~warning~~","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","~~disableClassNames~~","~~colorStyles~~","~~defaultDisabled~~","~~defaultDisabledWarning~~","~~defaultDisabledError~~","~~tokenClassName~~","~~defaultIdle~~","~~activeTokenClassName~~","~~defaultActive~~","~~idle~~","~~activeClassName~~","~~active~~","~~tokenClassNames~~","~~styles~~","token","setRootNode","text","~~removeIcon","~~globalClasses","React","Component","__KONTUR_REACT_UI__"],"mappings":"~~mUAAA~~;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,uC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCaA~~,K,OADZC,kB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4ESC~~,IAAAA,a,GAAgB,UAACC,KAAD,EAAsD;AAC5E,wBAA8C,MAAKC,KAAnD,CAAQC,QAAR,eAAQA,QAAR,oCAAkBC,QAAlB,CAAkBA,QAAlB,qCAA6BC,mBAA7B;;AAEA,UAAIF,QAAJ,EAAc;AACZF,QAAAA,KAAK,CAACK,cAAN;AACA;AACD;;AAEDF,MAAAA,QAAQ,CAACH,KAAD,CAAR;AACD,K,~~mDA9EMM~~,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,~~eACnB~~,~~mBAaI~~,KAAKP,~~KAbT~~,CACEQ,QADF,gBACEA,QADF,CAEEC,QAFF,gBAEEA,QAFF,~~CAGEC~~,MAHF,~~gBAGEA~~,MAHF,~~CAIEC~~,KAJF,gBAIEA,KAJF,CAKEC,OALF,gBAKEA,OALF,~~CAMEX~~,QANF,gBAMEA,QANF,~~qCAOEY~~,~~OAPF~~,~~CAOEA~~,~~OAPF~~,~~qCAOYV~~,~~mBAPZ~~,~~6DAQEW,aARF,~~CAQEA,~~aARF~~,~~sCAQkBX~~,~~mBARlB~~,~~8DASEY~~,~~YATF~~,CASEA,~~YATF~~,~~sCASiBZ~~,~~mBATjB~~,8DAUEa,YAVF,CAUEA,YAVF,sCAUiBb,mBAVjB,~~6DAWEc~~,~~OAXF~~,CAWEA,~~OAXF~~,~~qCAWYd~~,~~mBAXZ~~,~~2DAYEe~~,~~MAZF~~,CAYEA,~~MAZF~~,~~oCAYWf~~,~~mBAZX~~,~~uBAeA~~,IAAMG,KAAK,GAAG,KAAKA,KAAnB,~~CACA~~,~~IAAMa~~,UAAU,~~GAAGR~~,~~KAAK~~,~~GAAG~~,~~OAAH~~,~~GAAaC~~,~~OAAO~~,GAAG,~~SAAH~~,~~GAAe~~,~~IAA3D~~,CACA,~~IAAMQ~~,~~iBAAiB~~,GAAG,~~iBAAGC~~,~~mBAAYC~~,~~eAAZ~~,~~CAA4BhB~~,KAA5B,~~CAAH~~,~~iBACvBe~~,~~mBAAYE~~,~~sBAAZ~~,~~CAAmCjB~~,~~KAAnC~~,~~CADuB~~,~~IACqBM~~,~~OADrB~~,~~MAEvBS~~,~~mBAAYG~~,~~oBAAZ~~,~~CAAiClB~~,~~KAAjC~~,~~CAFuB~~,~~IAEmBK~~,~~KAFnB~~,~~OAA1B~~,~~CAKA~~,IAAIc,~~cAAc~~,~~GAAGxB~~,~~QAAQ~~,~~GAAGmB~~,~~iBAAH~~,~~GAAuBC~~,~~mBAAYK~~,~~WAAZ~~,~~CAAwBpB~~,~~KAAxB~~,~~EAA+Ba~~,~~UAA/B~~,~~CAApD~~,~~CACA~~,~~IAAIQ~~,~~oBAAoB~~,~~GAAG1B~~,~~QAAQ~~,~~GAAGmB~~,~~iBAAH~~,~~GAAuBC~~,~~mBAAYO~~,~~aAAZ~~,~~CAA0BtB~~,~~KAA1B~~,~~EAAiCa~~,~~UAAjC~~,~~CAA1D~~,~~CAEA~~,~~IAAI~~,~~CAAClB~~,~~QAAD~~,~~IAAaS~~,~~MAAjB~~,~~EAAyB~~,~~CACvBe~~,~~cAAc~~,~~GAAGJ~~,~~mBAAYX,~~MAAM,~~CAACmB~~,IAAnB,~~EAAyBvB~~,KAAzB,~~EAAgCa~~,UAAhC,~~CAAjB~~,~~CAEA~~,~~IAAMW~~,~~eAAe~~,~~GAAGpB~~,MAAM,~~CAACqB~~,MAAP,~~GAAgBrB~~,MAAM,~~CAACqB~~,~~MAAvB~~,~~GAAgCrB~~,~~MAAM~~,~~CAACmB~~,~~IAA/D~~,~~CACAF~~,~~oBAAoB~~,~~GAAGN~~,~~mBAAYS~~,~~eAAZ~~,~~EAA6BxB~~,~~KAA7B~~,~~EAAoCa~~,~~UAApC~~,~~CAAvB~~,~~CACD~~,~~CAED~~,~~IAAMa~~,~~eAAe~~,~~GAAG~~,~~iBAAGC~~,~~cAAOC~~,~~KAAP~~,~~CAAa~~,~~KAAK5B~~,~~KAAlB~~,~~CAAH~~,~~EAA6BmB~~,~~cAA7B~~,~~mBACrBE~~,~~oBADqB~~,~~IACE~~,CAAC,~~CAAClB~~,~~QADJ~~,~~OAErBwB~~,~~cAAOhC~~,~~QAAP~~,~~CAAgBK~~,~~KAAhB~~,~~CAFqB~~,~~IAEI~~,~~CAAC~~,~~CAACL~~,~~QAFN~~,~~QAAxB~~,~~CAKA~~,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,~~KAAKkC~~,WAAjC,IAAkD,~~KAAKnC~~,KAAvD,gBACE,sCACE,~~SAAS~~,~~EAAEgC~~,~~eADb~~,EAEE,~~OAAO~~,~~EAAEnB~~,~~OAFX~~,EAGE,aAAa,EAAEC,~~aAHjB~~,~~EAIE~~,YAAY,EAAEC,~~YAJhB~~,~~EAKE~~,YAAY,EAAEC,~~YALhB~~,~~EAME~~,OAAO,EAAEC,~~OANX~~,~~EAOE~~,MAAM,EAAEC,~~MAPV~~,~~iBASE~~,uCAAM,SAAS,~~EAAEe~~,~~cAAOG~~,IAAP,CAAY,~~KAAK9B~~,KAAjB,CAAjB,IAA2CE,QAA3C,~~CATF~~,~~eAUE~~,~~uCAAM~~,SAAS,EAAE,~~iBAAGyB~~,~~cAAOI~~,UAAP,CAAkB,~~KAAK/B~~,KAAvB,CAAH,EAAkCgC,~~qBAAcD~~,UAAhD,~~CAAjB~~,~~EAA8E~~,OAAO,EAAE,~~KAAKvC~~,~~aAA5F~~,~~iBACE~~,~~6BAAC~~,~~oBAAD~~,~~OADF~~,~~CAVF~~,CADF,CADF,~~CAkBD~~,C,~~gBAzEwByC~~,eAAMC,S,WACjBC,mB,GAAsB,O","sourcesContent":["import React from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n idle: TokenColorName;\n active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n colors?: TokenColors;\n isActive?: boolean;\n /*\n ~~Cостояние~~ валидации при ошибке.\n /\n error?: boolean;\n /\n ~~Cостояние~~ валидации при предупреждении.\n */\n warning?: boolean;\n disabled?: boolean;\n\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n onRemove?: React.MouseEventHandler<HTMLElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\n@rootNode\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n children,\n isActive,\n colors,\n error,\n warning,\n disabled,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const theme = this.theme;\n const validation = error ~~? 'error' :~~ warning ~~? 'warning' : null~~;\n const ~~disableClassNames~~ = cx(~~colorStyles.defaultDisabled(~~theme), {\n ~~[colorStyles.defaultDisabledWarning(theme~~)]: ~~warning,\~~n ~~[colorStyles.defaultDisabledError(theme)]:~~ ~~error,\~~n });\n\n let ~~tokenClassName~~ = ~~disabled~~ ? ~~disableClassNames~~ : ~~colorStyles~~.~~defaultIdle~~(theme~~, validation~~);\n ~~let~~ ~~activeTokenClassName~~ = disabled ? ~~disableClassNames~~ : ~~colorStyles~~.~~defaultActive~~(theme, ~~validation~~);\n~~\n if~~ (!disabled && ~~colors~~) {\n ~~tokenClassName~~ = colorStyles[colors.idle](theme, validation);\n~~\n const~~ ~~activeClassName~~ = colors.active ? colors.~~active~~ : ~~colors~~.~~idle;\~~n ~~activeTokenClassName~~ = colorStyles~~[activeClassName]~~(theme, ~~validation~~);\n }\n\n const tokenClassNames = cx(styles.token(this.theme), ~~tokenClassName, {\n [activeTokenClassName]: !!isActive,\n [styles.disabled(theme~~)~~]: !!disabled,\n })~~;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n className={tokenClassNames}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n <span className={styles.text(this.theme)}>{children}</span>\n <span className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)} onClick={this.onRemoveClick}>\n ~~<CrossIcon />\~~n </span>\n </div>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}
1	+ {"version":3,"sources":["Token.tsx"],"names":["getValidation","error","warning","TokenDataTids","root","removeIcon","Token","rootNode","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","theme","renderMain","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","icon","classNames","styles","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","colorStyles","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassNames","token","setRootNode","text","globalClasses","React","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n idle: TokenColorName;\n active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n colors?: TokenColors;\n isActive?: boolean;\n /*\n Состояние валидации при ошибке.\n /\n error?: boolean;\n /\n Состояние валидации при предупреждении.\n /\n warning?: boolean;\n disabled?: boolean;\n /\n Атрибут для указания id элемента(-ов), описывающих его\n */\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n\n onClick?: React.MouseEventHandler<HTMLDivElement>;\n onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n onRemove?: React.MouseEventHandler<HTMLElement>;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n if (error) {\n return 'error';\n } else if (warning) {\n return 'warning';\n }\n\n return null;\n};\n\nexport const TokenDataTids = {\n root: 'Token__root',\n removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\nexport class Token extends React.Component<TokenProps> {\n public static __KONTUR_REACT_UI__ = 'Token';\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n children,\n isActive,\n colors = { idle: 'defaultIdle', active: 'defaultActive' },\n error,\n warning,\n disabled,\n 'aria-describedby': ariaDescribedby,\n onClick = emptyHandler,\n onDoubleClick = emptyHandler,\n onMouseEnter = emptyHandler,\n onMouseLeave = emptyHandler,\n onFocus = emptyHandler,\n onBlur = emptyHandler,\n } = this.props;\n\n const theme = this.theme;\n\n const validation = getValidation(error, warning);\n\n const icon = isTheme2022(theme) ? (\n <CloseButtonIcon side={16} color=\"inherit\" colorHover=\"inherit\" tabbable={false} />\n ) : (\n <CrossIcon />\n );\n\n let classNames = '';\n if (isTheme2022(theme)) {\n classNames = cx(\n styles.tokenDefaultIdle2022(theme),\n !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n isActive && styles.tokenDefaultActive2022(theme),\n warning && styles.tokenWarning2022(theme),\n error && styles.tokenError2022(theme),\n disabled && styles.tokenDisabled2022(theme),\n );\n } else {\n classNames = cx(\n colorStyles[colors.idle](theme, validation),\n !!isActive && colorStyles[colors.active \|\| colors.idle](theme, validation),\n !!disabled && styles.disabled(theme),\n !!disabled && colorStyles.defaultDisabled(theme),\n !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n !!disabled && error && colorStyles.defaultDisabledError(theme),\n );\n }\n\n const tokenClassNames = cx(styles.token(this.theme), classNames);\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={TokenDataTids.root}\n className={tokenClassNames}\n aria-describedby={ariaDescribedby}\n onClick={onClick}\n onDoubleClick={onDoubleClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n <span className={styles.text(this.theme)}>{children}</span>\n <span\n className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)}\n onClick={this.onRemoveClick}\n data-tid={TokenDataTids.removeIcon}\n >\n {icon}\n </span>\n </div>\n </CommonWrapper>\n );\n }\n\n private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n const { disabled, onRemove = emptyHandler } = this.props;\n\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onRemove(event);\n };\n}\n"]}

package/cjs/components/Token/Token.styles.d.ts CHANGED Viewed

@@ -4,6 +4,12 @@ export declare const globalClasses: {
 };
 export declare const styles: {
     token(t: Theme): string;
+    tokenDefaultIdle2022(t: Theme): string;
+    tokenDefaultIdleHovering2022(t: Theme): string;
+    tokenDefaultActive2022(t: Theme): string;
+    tokenError2022(t: Theme): string;
+    tokenWarning2022(t: Theme): string;
+    tokenDisabled2022(t: Theme): string;
     disabled(t: Theme): string;
     text(t: Theme): string;
     removeIcon(t: Theme): string;

package/cjs/components/Token/Token.styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = exports.colorStyles = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
-var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 var globalClasses = (0, _Emotion.prefix)('token')({
   removeIcon: 'remove-icon' });exports.globalClasses = globalClasses;
@@ -24,16 +24,74 @@ var styles = (0, _Emotion.memoizeStyle)({
+  },
+  tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n      background-clip: border-box;\n    "])),
+    t.tokenDefaultIdleColor,
+    t.tokenDefaultIdleBg,
+    t.tokenBorderWidth, t.tokenDefaultIdleBorderColor);
+  },
+  tokenDefaultIdleHovering2022: function tokenDefaultIdleHovering2022(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])),
+    t.tokenDefaultIdleColorHover,
+    t.tokenDefaultIdleBgHover,
+    t.tokenBorderWidth, t.tokenDefaultIdleBorderColorHover);
+  },
+  tokenDefaultActive2022: function tokenDefaultActive2022(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])),
+    t.tokenDefaultActiveColor,
+    t.tokenDefaultActiveBg,
+    t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
+  },
+  tokenError2022: function tokenError2022(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenBorderWidth, t.tokenBorderColorError,
+    t.tokenOutlineWidth, t.tokenBorderColorError);
+  },
+  tokenWarning2022: function tokenWarning2022(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenBorderWidth, t.tokenBorderColorWarning,
+    t.tokenOutlineWidth, t.tokenBorderColorWarning);
+  },
+  tokenDisabled2022: function tokenDisabled2022(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
+    t.tokenPaddingYDisabled, t.tokenPaddingXDisabled,
+    t.tokenMarginYDisabled, t.tokenMarginXDisabled,
+    t.tokenTextColorDisabled,
+    t.tokenBorderColorDisabled,
+    globalClasses.removeIcon);
   },
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
     t.tokenPaddingYDisabled, t.tokenPaddingXDisabled,
     t.tokenMarginYDisabled, t.tokenMarginXDisabled,
     t.tokenTextColorDisabled,
     globalClasses.removeIcon);
@@ -41,14 +99,14 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   text: function text(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])),
     t.tokenLegacyTextShift);
   },
   removeIcon: function removeIcon(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])),
     t.tokenRemoveIconSize,
     t.tokenRemoveIconSize,
@@ -106,19 +164,26 @@ reduce(
 function (colors, _ref) {var _extends2;var name = _ref.name,color = _ref.color;return (0, _extends3.default)({},
   colors, (_extends2 = {}, _extends2[
   name] = function (t, v) {
-    var warning = (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
-    t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+    var getVStyle = function getVStyle() {
+      if (v === 'error') {
+        return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+      } else if (v === 'warning') {
+        return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+      }
-    var error = (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
-    t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+      return '';
+    };
-    var vStyle = v === 'error' ? error : v === 'warning' ? warning : '';
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        .", ":hover {\n          color: ", ";\n        }\n      "])),
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        .", ":hover {\n          color: ", ";\n        }\n      "])),
     color(t),
     ColorFunctions.contrast(color(t)),
     t.tokenBorderWidth, ColorFunctions.darken(color(t), '5%'), color(t),
-    vStyle,
+    getVStyle(),
     globalClasses.removeIcon,
     ColorFunctions.contrast(color(t)));
@@ -128,18 +193,18 @@ function (colors, _ref) {var _extends2;var name = _ref.name,color = _ref.color;r
 {
   defaultDisabled: function defaultDisabled(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])),
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])),
     t.tokenDisabledBg,
     t.tokenShadowDisabled);
   },
   defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
     t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
   },
   defaultDisabledError: function defaultDisabledError(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
     t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
   } });exports.colorStyles = colorStyles;

package/cjs/components/Token/Token.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Token.styles.ts"],"names":["globalClasses","removeIcon","styles","token","t","css","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","disabled","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","warning","tokenOutlineWidth","tokenBorderColorWarning","error","tokenBorderColorError","vStyle","ColorFunctions","contrast","tokenBorderWidth","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n token(t: Theme) {\n return css`\n display: inline-flex;\n align-items: center;\n border-radius: ${t.tokenBorderRadius};\n padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n line-height: ${t.tokenLineHeight};\n font-size: ${t.tokenFontSize};\n margin: ${t.tokenMarginY} ${t.tokenMarginX};\n min-width: 0;\n word-break: break-all;\n user-select: none;\n\n &:hover {\n cursor: pointer;\n }\n `;\n },\n\n disabled(t: Theme) {\n return css`\n padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n user-select: text;\n cursor: text;\n color: ${t.tokenTextColorDisabled};\n\n .${globalClasses.removeIcon} {\n visibility: hidden;\n }\n `;\n },\n\n text(t: Theme) {\n return css`\n display: inline-block;\n padding-bottom: ${t.tokenLegacyTextShift};\n `;\n },\n\n removeIcon(t: Theme) {\n return css`\n height: ${t.tokenRemoveIconSize};\n width: ${t.tokenRemoveIconSize};\n flex-shrink: 0;\n padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n box-sizing: ${t.tokenRemoveIconBoxSizing};\n margin-left: ${t.tokenRemoveIconGap};\n transition: none;\n fill: currentColor;\n opacity: 0.5;\n line-height: 0;\n\n &:hover {\n opacity: 1;\n }\n `;\n },\n});\n\ninterface TokenColors {\n defaultIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n defaultActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n defaultDisabled: (t: Theme) => string;\n defaultDisabledWarning: (t: Theme) => string;\n defaultDisabledError: (t: Theme) => string;\n grayIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n grayActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n blueIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n blueActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n greenIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n greenActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n yellowIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n yellowActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n redIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n redActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n white: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n black: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n}\n\nexport const colorStyles = [\n { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n { name: 'white', color: (t: Theme) => t.tokenWhite },\n { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n (colors: TokenColors, { name, color }) => ({\n ...colors,\n [name](t: Theme, v: 'error' \| 'warning') {\n const warning = css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n `;\n const error = css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n `;\n const vStyle = v === 'error' ? error : v === 'warning' ? warning : '';\n return css`\n background-color: ${color(t)};\n color: ${ColorFunctions.contrast(color(t))};\n box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n ${vStyle}\n\n .${globalClasses.removeIcon}:hover {\n color: ${ColorFunctions.contrast(color(t))};\n }\n `;\n },\n }),\n {\n defaultDisabled(t: Theme) {\n return css`\n background-color: ${t.tokenDisabledBg};\n box-shadow: ${t.tokenShadowDisabled};\n `;\n },\n defaultDisabledWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n `;\n },\n defaultDisabledError(t: Theme) {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n `;\n },\n } as TokenColors,\n);\n"]}
1	+ {"version":3,"sources":["Token.styles.ts"],"names":["globalClasses","removeIcon","styles","token","t","css","tokenBorderRadius","tokenPaddingY","tokenPaddingX","tokenLineHeight","tokenFontSize","tokenMarginY","tokenMarginX","tokenDefaultIdle2022","tokenDefaultIdleColor","tokenDefaultIdleBg","tokenBorderWidth","tokenDefaultIdleBorderColor","tokenDefaultIdleHovering2022","tokenDefaultIdleColorHover","tokenDefaultIdleBgHover","tokenDefaultIdleBorderColorHover","tokenDefaultActive2022","tokenDefaultActiveColor","tokenDefaultActiveBg","tokenDefaultActiveBorderColor","tokenError2022","tokenBorderColorError","tokenOutlineWidth","tokenWarning2022","tokenBorderColorWarning","tokenDisabled2022","tokenPaddingYDisabled","tokenPaddingXDisabled","tokenMarginYDisabled","tokenMarginXDisabled","tokenTextColorDisabled","tokenBorderColorDisabled","disabled","text","tokenLegacyTextShift","tokenRemoveIconSize","tokenRemoveIconPaddingY","tokenRemoveIconPaddingX","tokenRemoveIconBoxSizing","tokenRemoveIconGap","colorStyles","name","color","tokenDefaultIdle","tokenDefaultActive","tokenGrayIdle","tokenGrayActive","tokenBlueIdle","tokenBlueActive","tokenGreenIdle","tokenGreenActive","tokenYellowIdle","tokenYellowActive","tokenRedIdle","tokenRedActive","tokenWhite","tokenBlack","reduce","colors","v","getVStyle","ColorFunctions","contrast","darken","defaultDisabled","tokenDisabledBg","tokenShadowDisabled","defaultDisabledWarning","defaultDisabledError"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\n\nexport const globalClasses = prefix('token')({\n removeIcon: 'remove-icon',\n});\n\nexport const styles = memoizeStyle({\n token(t: Theme) {\n return css`\n display: inline-flex;\n align-items: center;\n border-radius: ${t.tokenBorderRadius};\n padding: ${t.tokenPaddingY} ${t.tokenPaddingX};\n line-height: ${t.tokenLineHeight};\n font-size: ${t.tokenFontSize};\n margin: ${t.tokenMarginY} ${t.tokenMarginX};\n min-width: 0;\n word-break: break-all;\n user-select: none;\n\n &:hover {\n cursor: pointer;\n }\n `;\n },\n\n tokenDefaultIdle2022(t: Theme) {\n return css`\n color: ${t.tokenDefaultIdleColor};\n background: ${t.tokenDefaultIdleBg};\n border: solid ${t.tokenBorderWidth} ${t.tokenDefaultIdleBorderColor};\n background-clip: border-box;\n `;\n },\n\n tokenDefaultIdleHovering2022(t: Theme) {\n return css`\n &:hover {\n color: ${t.tokenDefaultIdleColorHover};\n background: ${t.tokenDefaultIdleBgHover};\n border: solid ${t.tokenBorderWidth} ${t.tokenDefaultIdleBorderColorHover};\n }\n `;\n },\n\n tokenDefaultActive2022(t: Theme) {\n return css`\n color: ${t.tokenDefaultActiveColor};\n background: ${t.tokenDefaultActiveBg};\n border: solid ${t.tokenBorderWidth} ${t.tokenDefaultActiveBorderColor};\n `;\n },\n\n tokenError2022(t: Theme) {\n return css`\n border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorError};\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError};\n `;\n },\n\n tokenWarning2022(t: Theme) {\n return css`\n border: solid ${t.tokenBorderWidth} ${t.tokenBorderColorWarning};\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning};\n `;\n },\n\n tokenDisabled2022(t: Theme) {\n return css`\n padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n user-select: text;\n cursor: text;\n color: ${t.tokenTextColorDisabled};\n pointer-events: none;\n border: solid 1px ${t.tokenBorderColorDisabled};\n\n .${globalClasses.removeIcon} {\n visibility: hidden;\n }\n `;\n },\n\n disabled(t: Theme) {\n return css`\n padding: ${t.tokenPaddingYDisabled} ${t.tokenPaddingXDisabled};\n margin: ${t.tokenMarginYDisabled} ${t.tokenMarginXDisabled};\n user-select: text;\n cursor: text;\n color: ${t.tokenTextColorDisabled};\n pointer-events: none;\n\n .${globalClasses.removeIcon} {\n visibility: hidden;\n }\n `;\n },\n\n text(t: Theme) {\n return css`\n display: inline-block;\n padding-bottom: ${t.tokenLegacyTextShift};\n `;\n },\n\n removeIcon(t: Theme) {\n return css`\n height: ${t.tokenRemoveIconSize};\n width: ${t.tokenRemoveIconSize};\n flex-shrink: 0;\n padding: ${t.tokenRemoveIconPaddingY} ${t.tokenRemoveIconPaddingX};\n box-sizing: ${t.tokenRemoveIconBoxSizing};\n margin-left: ${t.tokenRemoveIconGap};\n transition: none;\n fill: currentColor;\n opacity: 0.5;\n line-height: 0;\n\n &:hover {\n opacity: 1;\n }\n `;\n },\n});\n\ninterface TokenColors {\n defaultIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n defaultActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n defaultDisabled: (t: Theme) => string;\n defaultDisabledWarning: (t: Theme) => string;\n defaultDisabledError: (t: Theme) => string;\n grayIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n grayActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n blueIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n blueActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n greenIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n greenActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n yellowIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n yellowActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n redIdle: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n redActive: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n white: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n black: (t: Theme, v: 'error' \| 'warning' \| null) => string;\n}\n\nexport const colorStyles = [\n { name: 'defaultIdle', color: (t: Theme) => t.tokenDefaultIdle },\n { name: 'defaultActive', color: (t: Theme) => t.tokenDefaultActive },\n { name: 'grayIdle', color: (t: Theme) => t.tokenGrayIdle },\n { name: 'grayActive', color: (t: Theme) => t.tokenGrayActive },\n { name: 'blueIdle', color: (t: Theme) => t.tokenBlueIdle },\n { name: 'blueActive', color: (t: Theme) => t.tokenBlueActive },\n { name: 'greenIdle', color: (t: Theme) => t.tokenGreenIdle },\n { name: 'greenActive', color: (t: Theme) => t.tokenGreenActive },\n { name: 'yellowIdle', color: (t: Theme) => t.tokenYellowIdle },\n { name: 'yellowActive', color: (t: Theme) => t.tokenYellowActive },\n { name: 'redIdle', color: (t: Theme) => t.tokenRedIdle },\n { name: 'redActive', color: (t: Theme) => t.tokenRedActive },\n { name: 'white', color: (t: Theme) => t.tokenWhite },\n { name: 'black', color: (t: Theme) => t.tokenBlack },\n].reduce(\n (colors: TokenColors, { name, color }) => ({\n ...colors,\n [name](t: Theme, v: 'error' \| 'warning') {\n const getVStyle = () => {\n if (v === 'error') {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${color(t)};\n `;\n } else if (v === 'warning') {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${color(t)};\n `;\n }\n\n return '';\n };\n\n return css`\n background-color: ${color(t)};\n color: ${ColorFunctions.contrast(color(t))};\n box-shadow: 0 0 0 ${t.tokenBorderWidth} ${ColorFunctions.darken(color(t), '5%')}, inset 0 0 0 1px ${color(t)};\n\n ${getVStyle()}\n\n .${globalClasses.removeIcon}:hover {\n color: ${ColorFunctions.contrast(color(t))};\n }\n `;\n },\n }),\n {\n defaultDisabled(t: Theme) {\n return css`\n background-color: ${t.tokenDisabledBg};\n box-shadow: ${t.tokenShadowDisabled};\n `;\n },\n defaultDisabledWarning(t: Theme) {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorWarning}, inset 0 0 0 1px ${t.tokenDisabledBg};\n `;\n },\n defaultDisabledError(t: Theme) {\n return css`\n box-shadow: 0 0 0 ${t.tokenOutlineWidth} ${t.tokenBorderColorError}, inset 0 0 0 1px ${t.tokenDisabledBg};\n `;\n },\n } as TokenColors,\n);\n"]}

package/cjs/components/TokenInput/TextWidthHelper.js CHANGED Viewed

@@ -1,6 +1,7 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TextWidthHelper = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 var _TokenInput = require("./TokenInput.styles");
@@ -38,4 +39,4 @@ TextWidthHelper = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
-    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TokenInput.styles.helperContainer(this.props.theme) }, /*#__PURE__*/_react.default.createElement("div", { className: this.props.classHelp, ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return this.element ? this.element.getBoundingClientRect().width : 0;};_proto.getTextHeight = function getTextHeight() {return this.element.getBoundingClientRect().height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;
+    elementRef = function (node) {return _this.element = node;};return _this;}var _proto = TextWidthHelper.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", { className: _TokenInput.styles.helperContainer(this.props.theme) }, /*#__PURE__*/_react.default.createElement("div", { className: this.props.classHelp, ref: this.elementRef }, this.props.text || THIN_SPACE));};_proto.getTextWidth = function getTextWidth() {return (0, _getDOMRect.getDOMRect)(this.element).width;};_proto.getTextHeight = function getTextHeight() {return (0, _getDOMRect.getDOMRect)(this.element).height;};return TextWidthHelper;}(_react.default.Component);exports.TextWidthHelper = TextWidthHelper;

package/cjs/components/TokenInput/TextWidthHelper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","styles","helperContainer","props","theme","classHelp","text","getTextWidth","~~getBoundingClientRect","~~width","getTextHeight","height","React","Component"],"mappings":"2PAAA~~;;;;AAIA~~;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,mBAAOC,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,sCAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKP,UAAhD,IACG,KAAKK,KAAL,CAAWG,IAAX,IAAmBX,UADtB,CADF,CADF,CAOD,C,QAEMY,Y,GAAP,wBAA8B,CAC5B,OAAO,KAAKV,~~OAAL~~,~~GAAe~~,~~KAAKA~~,~~OAAL,CAAaW,qBAAb,GAAqCC,KAApD,GAA4D,CAAnE,~~CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,~~KAAKb~~,~~OAAL~~,~~CAAcW~~,~~qBAAd~~,~~GAAsCG~~,~~MAA7C,~~CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { styles } from './TokenInput.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n text?: string;\n classHelp: string;\n theme: Theme;\n}\n/*\n Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n private element: HTMLDivElement \| null = null;\n\n public render() {\n return (\n <div className={styles.helperContainer(this.props.theme)}>\n <div className={this.props.classHelp} ref={this.elementRef}>\n {this.props.text \|\| THIN_SPACE}\n </div>\n </div>\n );\n }\n\n public getTextWidth(): number {\n return this.element ~~? this.element.getBoundingClientRect(~~).width ~~: 0~~;\n }\n\n public getTextHeight(): number {\n return this.element~~!.getBoundingClientRect(~~).height;\n }\n\n private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}
1	+ {"version":3,"sources":["TextWidthHelper.tsx"],"names":["THIN_SPACE","TextWidthHelper","element","elementRef","node","render","styles","helperContainer","props","theme","classHelp","text","getTextWidth","width","getTextHeight","height","React","Component"],"mappings":"2PAAA;;;AAGA;;AAEA;;AAEA;AACA;AACA,IAAMA,UAAU,GAAG,QAAnB;;;;;;;AAOA;AACA;AACA;AACA,G;AACaC,e;AACHC,IAAAA,O,GAAiC,I;;;;;;;;;;;;;;;;;;;;AAoBjCC,IAAAA,U,GAAa,UAACC,IAAD,UAA2B,MAAKF,OAAL,GAAeE,IAA1C,E,6DAlBdC,M,GAAP,kBAAgB,CACd,oBACE,sCAAK,SAAS,EAAEC,mBAAOC,eAAP,CAAuB,KAAKC,KAAL,CAAWC,KAAlC,CAAhB,iBACE,sCAAK,SAAS,EAAE,KAAKD,KAAL,CAAWE,SAA3B,EAAsC,GAAG,EAAE,KAAKP,UAAhD,IACG,KAAKK,KAAL,CAAWG,IAAX,IAAmBX,UADtB,CADF,CADF,CAOD,C,QAEMY,Y,GAAP,wBAA8B,CAC5B,OAAO,4BAAW,KAAKV,OAAhB,EAAyBW,KAAhC,CACD,C,QAEMC,a,GAAP,yBAA+B,CAC7B,OAAO,4BAAW,KAAKZ,OAAhB,EAAyBa,MAAhC,CACD,C,0BAnBkCC,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './TokenInput.styles';\n\n// a thin character to preserve some space\n// for the caret visibillity in the input\nconst THIN_SPACE = '\\u2009';\n\nexport interface TextWidthHelperProps {\n text?: string;\n classHelp: string;\n theme: Theme;\n}\n/*\n Херпер позволяет вычислить размеры блока с текстом\n * для последующего выставления размеров input\n */\nexport class TextWidthHelper extends React.Component<TextWidthHelperProps> {\n private element: HTMLDivElement \| null = null;\n\n public render() {\n return (\n <div className={styles.helperContainer(this.props.theme)}>\n <div className={this.props.classHelp} ref={this.elementRef}>\n {this.props.text \|\| THIN_SPACE}\n </div>\n </div>\n );\n }\n\n public getTextWidth(): number {\n return getDOMRect(this.element).width;\n }\n\n public getTextHeight(): number {\n return getDOMRect(this.element).height;\n }\n\n private elementRef = (node: HTMLDivElement) => (this.element = node);\n}\n"]}