@salutejs/plasma-new-hope 0.195.0-canary.1574.11921374356.0 → 0.195.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (111) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.js +1 -7
  2. package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
  3. package/cjs/components/Badge/Badge.css +4 -4
  4. package/cjs/components/Badge/Badge.js +17 -7
  5. package/cjs/components/Badge/Badge.js.map +1 -1
  6. package/cjs/components/Badge/Badge.tokens.js +10 -5
  7. package/cjs/components/Badge/Badge.tokens.js.map +1 -1
  8. package/cjs/components/Badge/variations/_clear/base.js +1 -1
  9. package/cjs/components/Badge/variations/_clear/base.js.map +1 -1
  10. package/cjs/components/Badge/variations/_clear/base_wiboj8.css +1 -0
  11. package/cjs/components/Badge/variations/_size/base.js +1 -1
  12. package/cjs/components/Badge/variations/_size/base.js.map +1 -1
  13. package/{es/components/Badge/variations/_size/base_to0y5x.css → cjs/components/Badge/variations/_size/base_bu5opk.css} +1 -1
  14. package/cjs/components/Badge/variations/_transparent/base.js +1 -1
  15. package/cjs/components/Badge/variations/_transparent/base.js.map +1 -1
  16. package/cjs/components/Badge/variations/_transparent/base_aapqhz.css +1 -0
  17. package/cjs/components/Badge/variations/_view/base.js +1 -1
  18. package/cjs/components/Badge/variations/_view/base.js.map +1 -1
  19. package/cjs/components/Badge/variations/_view/base_j3xzf3.css +1 -0
  20. package/cjs/index.css +4 -4
  21. package/emotion/cjs/components/Autocomplete/Autocomplete.js +1 -7
  22. package/emotion/cjs/components/Badge/Badge.js +17 -7
  23. package/emotion/cjs/components/Badge/Badge.template-doc.mdx +40 -16
  24. package/emotion/cjs/components/Badge/Badge.tokens.js +10 -6
  25. package/emotion/cjs/components/Badge/variations/_clear/base.js +1 -1
  26. package/emotion/cjs/components/Badge/variations/_size/base.js +2 -1
  27. package/emotion/cjs/components/Badge/variations/_transparent/base.js +1 -1
  28. package/emotion/cjs/components/Badge/variations/_view/base.js +1 -1
  29. package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +15 -15
  30. package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +23 -6
  31. package/emotion/cjs/examples/plasma_web/components/Badge/Badge.config.js +14 -14
  32. package/emotion/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +27 -6
  33. package/emotion/es/components/Autocomplete/Autocomplete.js +1 -7
  34. package/emotion/es/components/Badge/Badge.js +18 -8
  35. package/emotion/es/components/Badge/Badge.template-doc.mdx +40 -16
  36. package/emotion/es/components/Badge/Badge.tokens.js +9 -5
  37. package/emotion/es/components/Badge/variations/_clear/base.js +2 -2
  38. package/emotion/es/components/Badge/variations/_size/base.js +3 -2
  39. package/emotion/es/components/Badge/variations/_transparent/base.js +2 -2
  40. package/emotion/es/components/Badge/variations/_view/base.js +2 -2
  41. package/emotion/es/examples/plasma_b2c/components/Badge/Badge.config.js +15 -15
  42. package/emotion/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +23 -6
  43. package/emotion/es/examples/plasma_web/components/Badge/Badge.config.js +14 -14
  44. package/emotion/es/examples/plasma_web/components/Badge/Badge.stories.tsx +27 -6
  45. package/es/components/Autocomplete/Autocomplete.js +1 -7
  46. package/es/components/Autocomplete/Autocomplete.js.map +1 -1
  47. package/es/components/Badge/Badge.css +4 -4
  48. package/es/components/Badge/Badge.js +20 -10
  49. package/es/components/Badge/Badge.js.map +1 -1
  50. package/es/components/Badge/Badge.tokens.js +10 -6
  51. package/es/components/Badge/Badge.tokens.js.map +1 -1
  52. package/es/components/Badge/variations/_clear/base.js +1 -1
  53. package/es/components/Badge/variations/_clear/base.js.map +1 -1
  54. package/es/components/Badge/variations/_clear/base_wiboj8.css +1 -0
  55. package/es/components/Badge/variations/_size/base.js +1 -1
  56. package/es/components/Badge/variations/_size/base.js.map +1 -1
  57. package/{cjs/components/Badge/variations/_size/base_to0y5x.css → es/components/Badge/variations/_size/base_bu5opk.css} +1 -1
  58. package/es/components/Badge/variations/_transparent/base.js +1 -1
  59. package/es/components/Badge/variations/_transparent/base.js.map +1 -1
  60. package/es/components/Badge/variations/_transparent/base_aapqhz.css +1 -0
  61. package/es/components/Badge/variations/_view/base.js +1 -1
  62. package/es/components/Badge/variations/_view/base.js.map +1 -1
  63. package/es/components/Badge/variations/_view/base_j3xzf3.css +1 -0
  64. package/es/index.css +4 -4
  65. package/package.json +2 -2
  66. package/styled-components/cjs/components/Autocomplete/Autocomplete.js +1 -7
  67. package/styled-components/cjs/components/Badge/Badge.js +17 -7
  68. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +40 -16
  69. package/styled-components/cjs/components/Badge/Badge.tokens.js +10 -6
  70. package/styled-components/cjs/components/Badge/variations/_clear/base.js +1 -1
  71. package/styled-components/cjs/components/Badge/variations/_size/base.js +2 -1
  72. package/styled-components/cjs/components/Badge/variations/_transparent/base.js +1 -1
  73. package/styled-components/cjs/components/Badge/variations/_view/base.js +1 -1
  74. package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +5 -5
  75. package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +23 -6
  76. package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.config.js +5 -5
  77. package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +27 -6
  78. package/styled-components/es/components/Autocomplete/Autocomplete.js +1 -7
  79. package/styled-components/es/components/Badge/Badge.js +18 -8
  80. package/styled-components/es/components/Badge/Badge.template-doc.mdx +40 -16
  81. package/styled-components/es/components/Badge/Badge.tokens.js +9 -5
  82. package/styled-components/es/components/Badge/variations/_clear/base.js +2 -2
  83. package/styled-components/es/components/Badge/variations/_size/base.js +3 -2
  84. package/styled-components/es/components/Badge/variations/_transparent/base.js +2 -2
  85. package/styled-components/es/components/Badge/variations/_view/base.js +2 -2
  86. package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js +5 -5
  87. package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +23 -6
  88. package/styled-components/es/examples/plasma_web/components/Badge/Badge.config.js +5 -5
  89. package/styled-components/es/examples/plasma_web/components/Badge/Badge.stories.tsx +27 -6
  90. package/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
  91. package/types/components/Autocomplete/Autocomplete.types.d.ts +0 -4
  92. package/types/components/Autocomplete/Autocomplete.types.d.ts.map +1 -1
  93. package/types/components/Badge/Badge.d.ts.map +1 -1
  94. package/types/components/Badge/Badge.tokens.d.ts +8 -4
  95. package/types/components/Badge/Badge.tokens.d.ts.map +1 -1
  96. package/types/components/Badge/Badge.types.d.ts +18 -5
  97. package/types/components/Badge/Badge.types.d.ts.map +1 -1
  98. package/types/components/Badge/variations/_clear/base.d.ts.map +1 -1
  99. package/types/components/Badge/variations/_size/base.d.ts.map +1 -1
  100. package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts.map +1 -1
  101. package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +61 -4
  102. package/types/examples/plasma_b2c/components/Badge/Badge.d.ts.map +1 -1
  103. package/types/examples/plasma_web/components/Badge/Badge.config.d.ts.map +1 -1
  104. package/types/examples/plasma_web/components/Badge/Badge.d.ts +61 -4
  105. package/types/examples/plasma_web/components/Badge/Badge.d.ts.map +1 -1
  106. package/cjs/components/Badge/variations/_clear/base_oopyb7.css +0 -1
  107. package/cjs/components/Badge/variations/_transparent/base_1l6036y.css +0 -1
  108. package/cjs/components/Badge/variations/_view/base_qlxank.css +0 -1
  109. package/es/components/Badge/variations/_clear/base_oopyb7.css +0 -1
  110. package/es/components/Badge/variations/_transparent/base_1l6036y.css +0 -1
  111. package/es/components/Badge/variations/_view/base_qlxank.css +0 -1
@@ -14,7 +14,7 @@ var TextField_styles = require('./ui/TextField/TextField.styles.js');
14
14
  var SuggestionItem = require('./ui/SuggestionItem/SuggestionItem.js');
15
15
  var getPopoverPlacement = require('../../utils/getPopoverPlacement.js');
16
16
 
17
- var _excluded = ["value", "defaultValue", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
17
+ var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
18
18
 
19
19
  /**
20
20
  * Компонент Autocomplete. Поле ввода с подсказками в выпадающем списке.
@@ -22,7 +22,6 @@ var _excluded = ["value", "defaultValue", "onChange", "suggestions", "view", "si
22
22
  var autocompleteRoot = function autocompleteRoot(Root) {
23
23
  return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
24
24
  var outerValue = _ref.value,
25
- defaultValue = _ref.defaultValue,
26
25
  onChange = _ref.onChange,
27
26
  suggestions = _ref.suggestions,
28
27
  view = _ref.view,
@@ -110,11 +109,6 @@ var autocompleteRoot = function autocompleteRoot(Root) {
110
109
  type: 'reset'
111
110
  });
112
111
  }, [value]);
113
- useDidMountEffect.useDidMountEffect(function () {
114
- if (defaultValue) {
115
- setInnerValue(defaultValue);
116
- }
117
- }, [defaultValue]);
118
112
  return /*#__PURE__*/React.createElement(Root, {
119
113
  view: view,
120
114
  size: size,
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React, { forwardRef, useState, useReducer } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { useDidMountEffect, useOutsideClick } from '../../hooks';\nimport { RootProps } from '../../engines';\nimport { getPlacements } from '../../utils';\n\nimport { focusedReducer } from './reducers/focusedReducer';\nimport { SuggestionItem, StyledTextField } from './ui';\nimport { StyledPopover, Ul, LeftHelper, base, InfiniteLoaderWrapper } from './Autocomplete.styles';\nimport type { AutocompleteProps, SuggestionItemType } from './Autocomplete.types';\nimport { useKeyNavigation } from './hooks/useKeyboardNavigation';\n\n/**\n * Компонент Autocomplete. Поле ввода с подсказками в выпадающем списке.\n */\nexport const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteProps>) =>\n forwardRef<HTMLInputElement, AutocompleteProps>(\n (\n {\n value: outerValue,\n defaultValue,\n onChange,\n suggestions,\n view,\n size,\n labelPlacement,\n disabled,\n readOnly,\n label,\n leftHelper,\n contentLeft,\n contentRight,\n textBefore,\n textAfter,\n onScroll,\n listMaxHeight,\n listWidth,\n portal,\n filter,\n onSuggestionSelect,\n threshold = 2,\n renderList,\n renderListEnd,\n onSearch,\n\n hintText,\n\n ...rest\n },\n ref,\n ) => {\n const [focused, dispatchFocused] = useReducer(focusedReducer, null);\n const [innerValue, setInnerValue] = useState<string | number>('');\n const [isOpen, setIsOpen] = useState(false);\n\n const listId = safeUseId();\n const value = outerValue ?? innerValue;\n\n const helperTextId = safeUseId();\n\n const targetRef = useOutsideClick<HTMLDivElement>(() => {\n setIsOpen(false);\n });\n\n const handleFocus = () => {\n if (value.toString().length >= threshold) {\n setIsOpen(true);\n }\n };\n\n const handleItemClick = (e: SuggestionItemType) => {\n setInnerValue(e.label);\n\n if (onSuggestionSelect) {\n onSuggestionSelect(e);\n }\n\n setIsOpen(false);\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const currentValue = e.target.value;\n\n setInnerValue(currentValue);\n\n if (onChange) {\n onChange(e);\n }\n\n if (currentValue.toString().length >= threshold) {\n setIsOpen(true);\n } else {\n setIsOpen(false);\n }\n };\n\n const defaultFilterCallback = ({ label }: { label: string }) => {\n return label.toLowerCase().includes(value.toString().toLowerCase());\n };\n\n const finalResults = suggestions?.filter(filter || defaultFilterCallback) || [];\n\n const { onKeyDown } = useKeyNavigation({\n isOpen,\n setIsOpen,\n focused,\n dispatchFocused,\n finalResults,\n handleItemClick,\n });\n\n useDidMountEffect(() => {\n dispatchFocused({ type: 'reset' });\n }, [value]);\n\n useDidMountEffect(() => {\n if (defaultValue) {\n setInnerValue(defaultValue);\n }\n }, [defaultValue]);\n\n return (\n <Root view={view} size={size} labelPlacement={labelPlacement} disabled={disabled} readOnly={readOnly}>\n <StyledPopover\n opened={isOpen}\n offset={[0, 0]}\n placement={getPlacements('bottom')}\n isFocusTrapped={false}\n usePortal={Boolean(portal)}\n frame={portal}\n target={\n <StyledTextField\n value={value}\n onChange={handleChange}\n onSearch={focused === null ? onSearch : undefined}\n ref={ref}\n size={size}\n view={view}\n labelPlacement={labelPlacement}\n disabled={disabled}\n readOnly={readOnly}\n label={label}\n contentLeft={contentLeft}\n contentRight={contentRight}\n textBefore={textBefore}\n textAfter={textAfter}\n onFocus={handleFocus}\n onKeyDown={onKeyDown}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-controls={listId}\n aria-expanded={isOpen}\n aria-activedescendant={`${listId}/${focused}`}\n aria-describedby={helperTextId}\n hintText={String(hintText || '')}\n {...rest}\n />\n }\n preventOverflow={false}\n ref={targetRef}\n listWidth={listWidth}\n >\n {(renderList && renderList(finalResults)) ||\n (Boolean(finalResults.length) && (\n <Root\n view={view}\n size={size}\n labelPlacement={labelPlacement}\n disabled={disabled}\n readOnly={readOnly}\n >\n <Ul\n id={listId}\n role=\"listbox\"\n aria-label={label}\n onScroll={onScroll}\n listMaxHeight={listMaxHeight}\n >\n {finalResults.map((suggestion, index) => (\n <SuggestionItem\n key={index}\n item={suggestion}\n onClick={handleItemClick}\n id={`${listId}/${index}`}\n focused={focused === index}\n />\n ))}\n\n {renderListEnd && (\n <InfiniteLoaderWrapper>{renderListEnd()}</InfiniteLoaderWrapper>\n )}\n </Ul>\n </Root>\n ))}\n </StyledPopover>\n\n {/* TODO: Дублируем хелпер для корректного позиционирования списка подсказок */}\n {leftHelper && (\n <LeftHelper id={helperTextId} disabled={disabled} readOnly={readOnly}>\n {leftHelper}\n </LeftHelper>\n )}\n </Root>\n );\n },\n );\n\nexport const autocompleteConfig = {\n name: 'Autocomplete',\n tag: 'div',\n layout: autocompleteRoot,\n base,\n defaults: {\n view: 'default',\n size: 'l',\n labelPlacement: 'outer',\n },\n variations: {\n view: {\n css: '',\n },\n },\n};\n"],"names":["autocompleteRoot","Root","forwardRef","_ref","ref","outerValue","value","defaultValue","onChange","suggestions","view","size","labelPlacement","disabled","readOnly","label","leftHelper","contentLeft","contentRight","textBefore","textAfter","onScroll","listMaxHeight","listWidth","portal","filter","onSuggestionSelect","_ref$threshold","threshold","renderList","renderListEnd","onSearch","hintText","rest","_objectWithoutProperties","_excluded","_useReducer","useReducer","focusedReducer","_useReducer2","_slicedToArray","focused","dispatchFocused","_useState","useState","_useState2","innerValue","setInnerValue","_useState3","_useState4","isOpen","setIsOpen","listId","safeUseId","helperTextId","targetRef","useOutsideClick","handleFocus","toString","length","handleItemClick","e","handleChange","currentValue","target","defaultFilterCallback","_ref2","toLowerCase","includes","finalResults","_useKeyNavigation","useKeyNavigation","onKeyDown","useDidMountEffect","type","React","createElement","StyledPopover","opened","offset","placement","getPlacements","isFocusTrapped","usePortal","Boolean","frame","StyledTextField","_extends","undefined","onFocus","role","concat","String","preventOverflow","Ul","id","map","suggestion","index","SuggestionItem","key","item","onClick","InfiniteLoaderWrapper","LeftHelper","autocompleteConfig","name","tag","layout","base","defaults","variations","css"],"mappings":"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"}
1
+ {"version":3,"file":"Autocomplete.js","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import React, { forwardRef, useState, useReducer } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { useDidMountEffect, useOutsideClick } from '../../hooks';\nimport { RootProps } from '../../engines';\nimport { getPlacements } from '../../utils';\n\nimport { focusedReducer } from './reducers/focusedReducer';\nimport { SuggestionItem, StyledTextField } from './ui';\nimport { StyledPopover, Ul, LeftHelper, base, InfiniteLoaderWrapper } from './Autocomplete.styles';\nimport type { AutocompleteProps, SuggestionItemType } from './Autocomplete.types';\nimport { useKeyNavigation } from './hooks/useKeyboardNavigation';\n\n/**\n * Компонент Autocomplete. Поле ввода с подсказками в выпадающем списке.\n */\nexport const autocompleteRoot = (Root: RootProps<HTMLInputElement, AutocompleteProps>) =>\n forwardRef<HTMLInputElement, AutocompleteProps>(\n (\n {\n value: outerValue,\n onChange,\n suggestions,\n view,\n size,\n labelPlacement,\n disabled,\n readOnly,\n label,\n leftHelper,\n contentLeft,\n contentRight,\n textBefore,\n textAfter,\n onScroll,\n listMaxHeight,\n listWidth,\n portal,\n filter,\n onSuggestionSelect,\n threshold = 2,\n renderList,\n renderListEnd,\n onSearch,\n\n hintText,\n\n ...rest\n },\n ref,\n ) => {\n const [focused, dispatchFocused] = useReducer(focusedReducer, null);\n const [innerValue, setInnerValue] = useState<string | number>('');\n const [isOpen, setIsOpen] = useState(false);\n\n const listId = safeUseId();\n const value = outerValue ?? innerValue;\n\n const helperTextId = safeUseId();\n\n const targetRef = useOutsideClick<HTMLDivElement>(() => {\n setIsOpen(false);\n });\n\n const handleFocus = () => {\n if (value.toString().length >= threshold) {\n setIsOpen(true);\n }\n };\n\n const handleItemClick = (e: SuggestionItemType) => {\n setInnerValue(e.label);\n\n if (onSuggestionSelect) {\n onSuggestionSelect(e);\n }\n\n setIsOpen(false);\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const currentValue = e.target.value;\n\n setInnerValue(currentValue);\n\n if (onChange) {\n onChange(e);\n }\n\n if (currentValue.toString().length >= threshold) {\n setIsOpen(true);\n } else {\n setIsOpen(false);\n }\n };\n\n const defaultFilterCallback = ({ label }: { label: string }) => {\n return label.toLowerCase().includes(value.toString().toLowerCase());\n };\n\n const finalResults = suggestions?.filter(filter || defaultFilterCallback) || [];\n\n const { onKeyDown } = useKeyNavigation({\n isOpen,\n setIsOpen,\n focused,\n dispatchFocused,\n finalResults,\n handleItemClick,\n });\n\n useDidMountEffect(() => {\n dispatchFocused({ type: 'reset' });\n }, [value]);\n\n return (\n <Root view={view} size={size} labelPlacement={labelPlacement} disabled={disabled} readOnly={readOnly}>\n <StyledPopover\n opened={isOpen}\n offset={[0, 0]}\n placement={getPlacements('bottom')}\n isFocusTrapped={false}\n usePortal={Boolean(portal)}\n frame={portal}\n target={\n <StyledTextField\n value={value}\n onChange={handleChange}\n onSearch={focused === null ? onSearch : undefined}\n ref={ref}\n size={size}\n view={view}\n labelPlacement={labelPlacement}\n disabled={disabled}\n readOnly={readOnly}\n label={label}\n contentLeft={contentLeft}\n contentRight={contentRight}\n textBefore={textBefore}\n textAfter={textAfter}\n onFocus={handleFocus}\n onKeyDown={onKeyDown}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-controls={listId}\n aria-expanded={isOpen}\n aria-activedescendant={`${listId}/${focused}`}\n aria-describedby={helperTextId}\n hintText={String(hintText || '')}\n {...rest}\n />\n }\n preventOverflow={false}\n ref={targetRef}\n listWidth={listWidth}\n >\n {(renderList && renderList(finalResults)) ||\n (Boolean(finalResults.length) && (\n <Root\n view={view}\n size={size}\n labelPlacement={labelPlacement}\n disabled={disabled}\n readOnly={readOnly}\n >\n <Ul\n id={listId}\n role=\"listbox\"\n aria-label={label}\n onScroll={onScroll}\n listMaxHeight={listMaxHeight}\n >\n {finalResults.map((suggestion, index) => (\n <SuggestionItem\n key={index}\n item={suggestion}\n onClick={handleItemClick}\n id={`${listId}/${index}`}\n focused={focused === index}\n />\n ))}\n\n {renderListEnd && (\n <InfiniteLoaderWrapper>{renderListEnd()}</InfiniteLoaderWrapper>\n )}\n </Ul>\n </Root>\n ))}\n </StyledPopover>\n\n {/* TODO: Дублируем хелпер для корректного позиционирования списка подсказок */}\n {leftHelper && (\n <LeftHelper id={helperTextId} disabled={disabled} readOnly={readOnly}>\n {leftHelper}\n </LeftHelper>\n )}\n </Root>\n );\n },\n );\n\nexport const autocompleteConfig = {\n name: 'Autocomplete',\n tag: 'div',\n layout: autocompleteRoot,\n base,\n defaults: {\n view: 'default',\n size: 'l',\n labelPlacement: 'outer',\n },\n variations: {\n view: {\n css: '',\n },\n },\n};\n"],"names":["autocompleteRoot","Root","forwardRef","_ref","ref","outerValue","value","onChange","suggestions","view","size","labelPlacement","disabled","readOnly","label","leftHelper","contentLeft","contentRight","textBefore","textAfter","onScroll","listMaxHeight","listWidth","portal","filter","onSuggestionSelect","_ref$threshold","threshold","renderList","renderListEnd","onSearch","hintText","rest","_objectWithoutProperties","_excluded","_useReducer","useReducer","focusedReducer","_useReducer2","_slicedToArray","focused","dispatchFocused","_useState","useState","_useState2","innerValue","setInnerValue","_useState3","_useState4","isOpen","setIsOpen","listId","safeUseId","helperTextId","targetRef","useOutsideClick","handleFocus","toString","length","handleItemClick","e","handleChange","currentValue","target","defaultFilterCallback","_ref2","toLowerCase","includes","finalResults","_useKeyNavigation","useKeyNavigation","onKeyDown","useDidMountEffect","type","React","createElement","StyledPopover","opened","offset","placement","getPlacements","isFocusTrapped","usePortal","Boolean","frame","StyledTextField","_extends","undefined","onFocus","role","concat","String","preventOverflow","Ul","id","map","suggestion","index","SuggestionItem","key","item","onClick","InfiniteLoaderWrapper","LeftHelper","autocompleteConfig","name","tag","layout","base","defaults","variations","css"],"mappings":"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"}
@@ -1,12 +1,12 @@
1
- .base_qlxank_b5zny0e__7dda249c{color:var(--plasma-badge-color);background-color:var(--plasma-badge-background);}
1
+ .base_j3xzf3_b5zny0e__f0386786{color:var(--plasma-badge-custom-color,var(--plasma-badge-color));background-color:var(--plasma-badge-custom-background,var(--plasma-badge-background));}
2
2
 
3
- .base_to0y5x_bb8jvo5__5c9e1c86{font-family:var(--plasma-badge-font-family);font-size:var(--plasma-badge-font-size);font-style:var(--plasma-badge-font-style);font-weight:var(--plasma-badge-font-weight);-webkit-letter-spacing:var(--plasma-badge-letter-spacing);-moz-letter-spacing:var(--plasma-badge-letter-spacing);-ms-letter-spacing:var(--plasma-badge-letter-spacing);letter-spacing:var(--plasma-badge-letter-spacing);line-height:var(--plasma-badge-lineheight);border-radius:var(--plasma-badge-border-radius);height:var(--plasma-badge-height);padding-top:var(--plasma-badge-padding-top);padding-right:var(--plasma-badge-padding-right);padding-bottom:var(--plasma-badge-padding-bottom);padding-left:var(--plasma-badge-padding-left);}
3
+ .base_bu5opk_bb8jvo5__18c67c14{font-family:var(--plasma-badge-font-family);font-size:var(--plasma-badge-font-size);font-style:var(--plasma-badge-font-style);font-weight:var(--plasma-badge-font-weight);-webkit-letter-spacing:var(--plasma-badge-letter-spacing);-moz-letter-spacing:var(--plasma-badge-letter-spacing);-ms-letter-spacing:var(--plasma-badge-letter-spacing);letter-spacing:var(--plasma-badge-letter-spacing);line-height:var(--plasma-badge-lineheight);border-radius:var(--plasma-badge-border-radius);height:var(--plasma-badge-height);padding:var(--plasma-badge-padding);}.base_bu5opk_bb8jvo5__18c67c14.base_bu5opk_badgeIconOnly__18c67c14{padding:var(--plasma-badge-padding-icon-only);}.base_bu5opk_bb8jvo5__18c67c14.base_bu5opk_badgeIconOnly__18c67c14 .base_bu5opk_s1t43xoe__18c67c14{margin:0;}
4
4
 
5
5
  .base_zpvffd_b3w4z61__f9738ae7.base_zpvffd_badgePilled__f9738ae7{border-radius:var(--plasma-badge-pilled-border-radius);}
6
6
 
7
- .base_1l6036y_binquhc__5cc72580.base_1l6036y_badgeTransparent__5cc72580{color:var(--plasma-badge-color-transparent);background-color:var(--plasma-badge-background-transparent);}
7
+ .base_aapqhz_binquhc__81eb1c83.base_aapqhz_badgeTransparent__81eb1c83{color:var(--plasma-badge-custom-color,var(--plasma-badge-color-transparent));background-color:var(--plasma-badge-custom-background,var(--plasma-badge-background-transparent));}
8
8
 
9
- .base_oopyb7_b1e1wuvi__72387433.base_oopyb7_badgeClear__72387433{color:var(--plasma-badge-color-clear);background-color:transparent;padding:0;}
9
+ .base_wiboj8_b1e1wuvi__44d619d2.base_wiboj8_badgeClear__44d619d2{color:var(--plasma-badge-custom-color,var(--plasma-badge-color-clear));background-color:var(--plasma-badge-custom-background,var(--plasma-badge-background-clear));}
10
10
 
11
11
  .Badge_styles_hhbwyi_s1t43xoe__47a1842a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-badge-left-content-margin-left);margin-right:var(--plasma-badge-left-content-margin-right);}
12
12
 
@@ -13,16 +13,20 @@ var base$4 = require('./variations/_clear/base.js');
13
13
  var Badge_styles = require('./Badge.styles.js');
14
14
  var Badge_tokens = require('./Badge.tokens.js');
15
15
 
16
- var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
16
+ var _excluded = ["children", "className", "style", "text", "contentLeft", "contentRight", "size", "view", "customColor", "customBackgroundColor", "pilled", "transparent", "clear", "maxWidth"];
17
17
  var badgeRoot = function badgeRoot(Root) {
18
18
  return /*#__PURE__*/React.forwardRef(function (props, ref) {
19
+ var _StyledContentLeft, _StyledContentMain, _StyledContentMain2, _StyledContentRight;
19
20
  var children = props.children,
20
21
  className = props.className,
22
+ style = props.style,
21
23
  text = props.text,
22
24
  contentLeft = props.contentLeft,
23
25
  contentRight = props.contentRight,
24
26
  size = props.size,
25
27
  view = props.view,
28
+ customColor = props.customColor,
29
+ customBackgroundColor = props.customBackgroundColor,
26
30
  _props$pilled = props.pilled,
27
31
  pilled = _props$pilled === void 0 ? false : _props$pilled,
28
32
  _props$transparent = props.transparent,
@@ -37,19 +41,25 @@ var badgeRoot = function badgeRoot(Root) {
37
41
  var clearClass = clear ? Badge_tokens.classes.badgeClear : undefined;
38
42
  var truncateClass = maxWidth !== 'auto' ? Badge_tokens.classes.badgeTruncate : undefined;
39
43
  var txt = !text && typeof children === 'string' ? children : text;
44
+ var iconOnlyClass = !txt && contentLeft ? Badge_tokens.classes.iconOnly : undefined;
45
+ var BadgeContent = function BadgeContent() {
46
+ if (contentLeft) {
47
+ return /*#__PURE__*/React.createElement(React.Fragment, null, _StyledContentLeft || (_StyledContentLeft = /*#__PURE__*/React.createElement(Badge_styles.StyledContentLeft, null, contentLeft)), txt ? _StyledContentMain || (_StyledContentMain = /*#__PURE__*/React.createElement(Badge_styles.StyledContentMain, null, txt)) : children);
48
+ }
49
+ return /*#__PURE__*/React.createElement(React.Fragment, null, txt ? _StyledContentMain2 || (_StyledContentMain2 = /*#__PURE__*/React.createElement(Badge_styles.StyledContentMain, null, txt)) : children, contentRight && (_StyledContentRight || (_StyledContentRight = /*#__PURE__*/React.createElement(Badge_styles.StyledContentRight, null, contentRight))));
50
+ };
40
51
  return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
41
52
  ref: ref,
42
- className: index.cx(pilledClass, transparentClass, clearClass, truncateClass, className),
53
+ className: index.cx(pilledClass, transparentClass, clearClass, truncateClass, iconOnlyClass, className),
43
54
  view: view,
44
55
  size: size,
45
56
  pilled: pilled,
46
57
  transparent: transparent,
47
- clear: clear
48
- }, rest, {
49
- style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest.style), {}, {
58
+ clear: clear,
59
+ style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, style), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
50
60
  maxWidth: maxWidth
51
- })
52
- }), contentLeft && /*#__PURE__*/React.createElement(Badge_styles.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(Badge_styles.StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(Badge_styles.StyledContentRight, null, contentRight));
61
+ }, Badge_tokens.privateTokens.customBackground, customBackgroundColor), Badge_tokens.privateTokens.customColor, customColor))
62
+ }, rest), /*#__PURE__*/React.createElement(BadgeContent, null));
53
63
  });
54
64
  };
55
65
  var badgeConfig = {
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as transparentCSS } from './variations/_transparent/base';\nimport { base as clearCSS } from './variations/_clear/base';\nimport type { BadgeProps, BadgeRootProps } from './Badge.types';\nimport { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles';\nimport { classes } from './Badge.tokens';\n\nexport const badgeRoot = (Root: RootProps<HTMLDivElement, BadgeRootProps>) =>\n forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {\n const {\n children,\n className,\n text,\n contentLeft,\n contentRight,\n size,\n view,\n pilled = false,\n transparent = false,\n clear = false,\n maxWidth = 'auto',\n ...rest\n } = props;\n\n const pilledClass = pilled ? classes.badgePilled : undefined;\n const transparentClass = transparent ? classes.badgeTransparent : undefined;\n const clearClass = clear ? classes.badgeClear : undefined;\n const truncateClass = maxWidth !== 'auto' ? classes.badgeTruncate : undefined;\n\n const txt = !text && typeof children === 'string' ? children : text;\n\n return (\n <Root\n ref={ref}\n className={cx(pilledClass, transparentClass, clearClass, truncateClass, className)}\n view={view}\n size={size}\n pilled={pilled}\n transparent={transparent}\n clear={clear}\n {...rest}\n style={{\n ...rest.style,\n maxWidth,\n }}\n >\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n {txt ? <StyledContentMain>{txt}</StyledContentMain> : children}\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n </Root>\n );\n });\n\nexport const badgeConfig = {\n name: 'Badge',\n tag: 'div',\n layout: badgeRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n transparent: {\n css: transparentCSS,\n attrs: true,\n },\n clear: {\n css: clearCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'primary',\n size: 'm',\n },\n};\n"],"names":["badgeRoot","Root","forwardRef","props","ref","children","className","text","contentLeft","contentRight","size","view","_props$pilled","pilled","_props$transparent","transparent","_props$clear","clear","_props$maxWidth","maxWidth","rest","_objectWithoutProperties","_excluded","pilledClass","classes","badgePilled","undefined","transparentClass","badgeTransparent","clearClass","badgeClear","truncateClass","badgeTruncate","txt","React","createElement","_extends","cx","style","_objectSpread","StyledContentLeft","StyledContentMain","StyledContentRight","badgeConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","pilledCSS","attrs","transparentCSS","clearCSS","defaults"],"mappings":"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"}
1
+ {"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as transparentCSS } from './variations/_transparent/base';\nimport { base as clearCSS } from './variations/_clear/base';\nimport type { BadgeProps, BadgeRootProps } from './Badge.types';\nimport { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles';\nimport { classes, privateTokens } from './Badge.tokens';\n\nexport const badgeRoot = (Root: RootProps<HTMLDivElement, BadgeRootProps>) =>\n forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {\n const {\n children,\n className,\n style,\n text,\n contentLeft,\n contentRight,\n size,\n view,\n customColor,\n customBackgroundColor,\n pilled = false,\n transparent = false,\n clear = false,\n maxWidth = 'auto',\n ...rest\n } = props;\n\n const pilledClass = pilled ? classes.badgePilled : undefined;\n const transparentClass = transparent ? classes.badgeTransparent : undefined;\n const clearClass = clear ? classes.badgeClear : undefined;\n const truncateClass = maxWidth !== 'auto' ? classes.badgeTruncate : undefined;\n\n const txt = !text && typeof children === 'string' ? children : text;\n const iconOnlyClass = !txt && contentLeft ? classes.iconOnly : undefined;\n\n const BadgeContent = () => {\n if (contentLeft) {\n return (\n <>\n <StyledContentLeft>{contentLeft}</StyledContentLeft>\n {txt ? <StyledContentMain>{txt}</StyledContentMain> : children}\n </>\n );\n }\n\n return (\n <>\n {txt ? <StyledContentMain>{txt}</StyledContentMain> : children}\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n </>\n );\n };\n\n return (\n <Root\n ref={ref}\n className={cx(pilledClass, transparentClass, clearClass, truncateClass, iconOnlyClass, className)}\n view={view}\n size={size}\n pilled={pilled}\n transparent={transparent}\n clear={clear}\n style={\n {\n ...style,\n maxWidth,\n [privateTokens.customBackground]: customBackgroundColor,\n [privateTokens.customColor]: customColor,\n } as CSSProperties\n }\n {...rest}\n >\n <BadgeContent />\n </Root>\n );\n });\n\nexport const badgeConfig = {\n name: 'Badge',\n tag: 'div',\n layout: badgeRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n transparent: {\n css: transparentCSS,\n attrs: true,\n },\n clear: {\n css: clearCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'primary',\n size: 'm',\n },\n};\n"],"names":["badgeRoot","Root","forwardRef","props","ref","_StyledContentLeft","_StyledContentMain","_StyledContentMain2","_StyledContentRight","children","className","style","text","contentLeft","contentRight","size","view","customColor","customBackgroundColor","_props$pilled","pilled","_props$transparent","transparent","_props$clear","clear","_props$maxWidth","maxWidth","rest","_objectWithoutProperties","_excluded","pilledClass","classes","badgePilled","undefined","transparentClass","badgeTransparent","clearClass","badgeClear","truncateClass","badgeTruncate","txt","iconOnlyClass","iconOnly","BadgeContent","React","createElement","Fragment","StyledContentLeft","StyledContentMain","StyledContentRight","_extends","cx","_objectSpread","_defineProperty","privateTokens","customBackground","badgeConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","pilledCSS","attrs","transparentCSS","clearCSS","defaults"],"mappings":"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"}
@@ -6,7 +6,12 @@ var classes = {
6
6
  badgePilled: 'badge-pilled',
7
7
  badgeTransparent: 'badge-transparent',
8
8
  badgeClear: 'badge-clear',
9
- badgeTruncate: 'badge-truncate'
9
+ badgeTruncate: 'badge-truncate',
10
+ iconOnly: 'badge-icon-only'
11
+ };
12
+ var privateTokens = {
13
+ customBackground: '--plasma-badge-custom-background',
14
+ customColor: '--plasma-badge-custom-color'
10
15
  };
11
16
  var tokens = {
12
17
  background: '--plasma-badge-background',
@@ -14,13 +19,12 @@ var tokens = {
14
19
  backgroundTransparent: '--plasma-badge-background-transparent',
15
20
  colorTransparent: '--plasma-badge-color-transparent',
16
21
  colorClear: '--plasma-badge-color-clear',
22
+ backgroundClear: '--plasma-badge-background-clear',
17
23
  borderRadius: '--plasma-badge-border-radius',
18
24
  pilledBorderRadius: '--plasma-badge-pilled-border-radius',
19
25
  height: '--plasma-badge-height',
20
- paddingTop: '--plasma-badge-padding-top',
21
- paddingRight: '--plasma-badge-padding-right',
22
- paddingBottom: '--plasma-badge-padding-bottom',
23
- paddingLeft: '--plasma-badge-padding-left',
26
+ padding: '--plasma-badge-padding',
27
+ paddingIconOnly: '--plasma-badge-padding-icon-only',
24
28
  fontFamily: '--plasma-badge-font-family',
25
29
  fontSize: '--plasma-badge-font-size',
26
30
  fontStyle: '--plasma-badge-font-style',
@@ -34,5 +38,6 @@ var tokens = {
34
38
  };
35
39
 
36
40
  exports.classes = classes;
41
+ exports.privateTokens = privateTokens;
37
42
  exports.tokens = tokens;
38
43
  //# sourceMappingURL=Badge.tokens.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.tokens.js","sources":["../../../src/components/Badge/Badge.tokens.ts"],"sourcesContent":["export const classes = {\n badgePilled: 'badge-pilled',\n badgeTransparent: 'badge-transparent',\n badgeClear: 'badge-clear',\n badgeTruncate: 'badge-truncate',\n};\n\nexport const tokens = {\n background: '--plasma-badge-background',\n color: '--plasma-badge-color',\n backgroundTransparent: '--plasma-badge-background-transparent',\n colorTransparent: '--plasma-badge-color-transparent',\n colorClear: '--plasma-badge-color-clear',\n\n borderRadius: '--plasma-badge-border-radius',\n pilledBorderRadius: '--plasma-badge-pilled-border-radius',\n height: '--plasma-badge-height',\n paddingTop: '--plasma-badge-padding-top',\n paddingRight: '--plasma-badge-padding-right',\n paddingBottom: '--plasma-badge-padding-bottom',\n paddingLeft: '--plasma-badge-padding-left',\n\n fontFamily: '--plasma-badge-font-family',\n fontSize: '--plasma-badge-font-size',\n fontStyle: '--plasma-badge-font-style',\n fontWeight: '--plasma-badge-font-weight',\n letterSpacing: '--plasma-badge-letter-spacing',\n lineHeight: '--plasma-badge-lineheight',\n\n leftContentMarginLeft: '--plasma-badge-left-content-margin-left',\n leftContentMarginRight: '--plasma-badge-left-content-margin-right',\n rightContentMarginLeft: '--plasma-badge-right-content-margin-left',\n rightContentMarginRight: '--plasma-badge-right-content-margin-right',\n};\n"],"names":["classes","badgePilled","badgeTransparent","badgeClear","badgeTruncate","tokens","background","color","backgroundTransparent","colorTransparent","colorClear","borderRadius","pilledBorderRadius","height","paddingTop","paddingRight","paddingBottom","paddingLeft","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","leftContentMarginLeft","leftContentMarginRight","rightContentMarginLeft","rightContentMarginRight"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,gBAAgB,EAAE,mBAAmB;AACrCC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,aAAa,EAAE,gBAAA;AACnB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,KAAK,EAAE,sBAAsB;AAC7BC,EAAAA,qBAAqB,EAAE,uCAAuC;AAC9DC,EAAAA,gBAAgB,EAAE,kCAAkC;AACpDC,EAAAA,UAAU,EAAE,4BAA4B;AAExCC,EAAAA,YAAY,EAAE,8BAA8B;AAC5CC,EAAAA,kBAAkB,EAAE,qCAAqC;AACzDC,EAAAA,MAAM,EAAE,uBAAuB;AAC/BC,EAAAA,UAAU,EAAE,4BAA4B;AACxCC,EAAAA,YAAY,EAAE,8BAA8B;AAC5CC,EAAAA,aAAa,EAAE,+BAA+B;AAC9CC,EAAAA,WAAW,EAAE,6BAA6B;AAE1CC,EAAAA,UAAU,EAAE,4BAA4B;AACxCC,EAAAA,QAAQ,EAAE,0BAA0B;AACpCC,EAAAA,SAAS,EAAE,2BAA2B;AACtCC,EAAAA,UAAU,EAAE,4BAA4B;AACxCC,EAAAA,aAAa,EAAE,+BAA+B;AAC9CC,EAAAA,UAAU,EAAE,2BAA2B;AAEvCC,EAAAA,qBAAqB,EAAE,yCAAyC;AAChEC,EAAAA,sBAAsB,EAAE,0CAA0C;AAClEC,EAAAA,sBAAsB,EAAE,0CAA0C;AAClEC,EAAAA,uBAAuB,EAAE,2CAAA;AAC7B;;;;;"}
1
+ {"version":3,"file":"Badge.tokens.js","sources":["../../../src/components/Badge/Badge.tokens.ts"],"sourcesContent":["export const classes = {\n badgePilled: 'badge-pilled',\n badgeTransparent: 'badge-transparent',\n badgeClear: 'badge-clear',\n badgeTruncate: 'badge-truncate',\n iconOnly: 'badge-icon-only',\n};\n\nexport const privateTokens = {\n customBackground: '--plasma-badge-custom-background',\n customColor: '--plasma-badge-custom-color',\n};\n\nexport const tokens = {\n background: '--plasma-badge-background',\n color: '--plasma-badge-color',\n backgroundTransparent: '--plasma-badge-background-transparent',\n colorTransparent: '--plasma-badge-color-transparent',\n colorClear: '--plasma-badge-color-clear',\n backgroundClear: '--plasma-badge-background-clear',\n\n borderRadius: '--plasma-badge-border-radius',\n pilledBorderRadius: '--plasma-badge-pilled-border-radius',\n height: '--plasma-badge-height',\n padding: '--plasma-badge-padding',\n paddingIconOnly: '--plasma-badge-padding-icon-only',\n\n fontFamily: '--plasma-badge-font-family',\n fontSize: '--plasma-badge-font-size',\n fontStyle: '--plasma-badge-font-style',\n fontWeight: '--plasma-badge-font-weight',\n letterSpacing: '--plasma-badge-letter-spacing',\n lineHeight: '--plasma-badge-lineheight',\n\n leftContentMarginLeft: '--plasma-badge-left-content-margin-left',\n leftContentMarginRight: '--plasma-badge-left-content-margin-right',\n rightContentMarginLeft: '--plasma-badge-right-content-margin-left',\n rightContentMarginRight: '--plasma-badge-right-content-margin-right',\n};\n"],"names":["classes","badgePilled","badgeTransparent","badgeClear","badgeTruncate","iconOnly","privateTokens","customBackground","customColor","tokens","background","color","backgroundTransparent","colorTransparent","colorClear","backgroundClear","borderRadius","pilledBorderRadius","height","padding","paddingIconOnly","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","leftContentMarginLeft","leftContentMarginRight","rightContentMarginLeft","rightContentMarginRight"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,WAAW,EAAE,cAAc;AAC3BC,EAAAA,gBAAgB,EAAE,mBAAmB;AACrCC,EAAAA,UAAU,EAAE,aAAa;AACzBC,EAAAA,aAAa,EAAE,gBAAgB;AAC/BC,EAAAA,QAAQ,EAAE,iBAAA;AACd,EAAC;AAEM,IAAMC,aAAa,GAAG;AACzBC,EAAAA,gBAAgB,EAAE,kCAAkC;AACpDC,EAAAA,WAAW,EAAE,6BAAA;AACjB,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,KAAK,EAAE,sBAAsB;AAC7BC,EAAAA,qBAAqB,EAAE,uCAAuC;AAC9DC,EAAAA,gBAAgB,EAAE,kCAAkC;AACpDC,EAAAA,UAAU,EAAE,4BAA4B;AACxCC,EAAAA,eAAe,EAAE,iCAAiC;AAElDC,EAAAA,YAAY,EAAE,8BAA8B;AAC5CC,EAAAA,kBAAkB,EAAE,qCAAqC;AACzDC,EAAAA,MAAM,EAAE,uBAAuB;AAC/BC,EAAAA,OAAO,EAAE,wBAAwB;AACjCC,EAAAA,eAAe,EAAE,kCAAkC;AAEnDC,EAAAA,UAAU,EAAE,4BAA4B;AACxCC,EAAAA,QAAQ,EAAE,0BAA0B;AACpCC,EAAAA,SAAS,EAAE,2BAA2B;AACtCC,EAAAA,UAAU,EAAE,4BAA4B;AACxCC,EAAAA,aAAa,EAAE,+BAA+B;AAC9CC,EAAAA,UAAU,EAAE,2BAA2B;AAEvCC,EAAAA,qBAAqB,EAAE,yCAAyC;AAChEC,EAAAA,sBAAsB,EAAE,0CAA0C;AAClEC,EAAAA,sBAAsB,EAAE,0CAA0C;AAClEC,EAAAA,uBAAuB,EAAE,2CAAA;AAC7B;;;;;;"}
@@ -1,4 +1,4 @@
1
- import './base_oopyb7.css';
1
+ import './base_wiboj8.css';
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sources":["../../../../../src/components/Badge/variations/_clear/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../Badge.tokens';\n\nexport const base = css`\n &.${classes.badgeClear} {\n color: var(${tokens.colorClear});\n background-color: transparent;\n padding: 0;\n }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAMhB;;;;"}
1
+ {"version":3,"file":"base.js","sources":["../../../../../src/components/Badge/variations/_clear/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, privateTokens, tokens } from '../../Badge.tokens';\n\nexport const base = css`\n &.${classes.badgeClear} {\n color: var(${privateTokens.customColor}, var(${tokens.colorClear}));\n background-color: var(${privateTokens.customBackground}, var(${tokens.backgroundClear}));\n }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAKhB;;;;"}
@@ -0,0 +1 @@
1
+ .b1e1wuvi.badge-clear{color:var(--plasma-badge-custom-color,var(--plasma-badge-color-clear));background-color:var(--plasma-badge-custom-background,var(--plasma-badge-background-clear));}
@@ -1,4 +1,4 @@
1
- import './base_to0y5x.css';
1
+ import './base_bu5opk.css';
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sources":["../../../../../src/components/Badge/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../Badge.tokens';\n\nexport const base = css`\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.letterSpacing});\n line-height: var(${tokens.lineHeight});\n\n border-radius: var(${tokens.borderRadius});\n\n height: var(${tokens.height});\n\n padding-top: var(${tokens.paddingTop});\n padding-right: var(${tokens.paddingRight});\n padding-bottom: var(${tokens.paddingBottom});\n padding-left: var(${tokens.paddingLeft});\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAgBhB;;;;"}
1
+ {"version":3,"file":"base.js","sources":["../../../../../src/components/Badge/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../Badge.tokens';\nimport { StyledContentLeft } from '../../Badge.styles';\n\nexport const base = css`\n font-family: var(${tokens.fontFamily});\n font-size: var(${tokens.fontSize});\n font-style: var(${tokens.fontStyle});\n font-weight: var(${tokens.fontWeight});\n letter-spacing: var(${tokens.letterSpacing});\n line-height: var(${tokens.lineHeight});\n\n border-radius: var(${tokens.borderRadius});\n\n height: var(${tokens.height});\n\n padding: var(${tokens.padding});\n\n &.${classes.iconOnly} {\n padding: var(${tokens.paddingIconOnly});\n\n ${StyledContentLeft} {\n margin: 0;\n }\n }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAqBhB;;;;"}
@@ -1 +1 @@
1
- .bb8jvo5{font-family:var(--plasma-badge-font-family);font-size:var(--plasma-badge-font-size);font-style:var(--plasma-badge-font-style);font-weight:var(--plasma-badge-font-weight);-webkit-letter-spacing:var(--plasma-badge-letter-spacing);-moz-letter-spacing:var(--plasma-badge-letter-spacing);-ms-letter-spacing:var(--plasma-badge-letter-spacing);letter-spacing:var(--plasma-badge-letter-spacing);line-height:var(--plasma-badge-lineheight);border-radius:var(--plasma-badge-border-radius);height:var(--plasma-badge-height);padding-top:var(--plasma-badge-padding-top);padding-right:var(--plasma-badge-padding-right);padding-bottom:var(--plasma-badge-padding-bottom);padding-left:var(--plasma-badge-padding-left);}
1
+ .bb8jvo5{font-family:var(--plasma-badge-font-family);font-size:var(--plasma-badge-font-size);font-style:var(--plasma-badge-font-style);font-weight:var(--plasma-badge-font-weight);-webkit-letter-spacing:var(--plasma-badge-letter-spacing);-moz-letter-spacing:var(--plasma-badge-letter-spacing);-ms-letter-spacing:var(--plasma-badge-letter-spacing);letter-spacing:var(--plasma-badge-letter-spacing);line-height:var(--plasma-badge-lineheight);border-radius:var(--plasma-badge-border-radius);height:var(--plasma-badge-height);padding:var(--plasma-badge-padding);}.bb8jvo5.badge-icon-only{padding:var(--plasma-badge-padding-icon-only);}.bb8jvo5.badge-icon-only .s1t43xoe{margin:0;}
@@ -1,4 +1,4 @@
1
- import './base_1l6036y.css';
1
+ import './base_aapqhz.css';
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sources":["../../../../../src/components/Badge/variations/_transparent/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../Badge.tokens';\n\nexport const base = css`\n &.${classes.badgeTransparent} {\n color: var(${tokens.colorTransparent});\n background-color: var(${tokens.backgroundTransparent});\n }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAKhB;;;;"}
1
+ {"version":3,"file":"base.js","sources":["../../../../../src/components/Badge/variations/_transparent/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, privateTokens, tokens } from '../../Badge.tokens';\n\nexport const base = css`\n &.${classes.badgeTransparent} {\n color: var(${privateTokens.customColor}, var(${tokens.colorTransparent}));\n background-color: var(${privateTokens.customBackground}, var(${tokens.backgroundTransparent}));\n }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAKhB;;;;"}
@@ -0,0 +1 @@
1
+ .binquhc.badge-transparent{color:var(--plasma-badge-custom-color,var(--plasma-badge-color-transparent));background-color:var(--plasma-badge-custom-background,var(--plasma-badge-background-transparent));}
@@ -1,4 +1,4 @@
1
- import './base_qlxank.css';
1
+ import './base_j3xzf3.css';
2
2
  'use strict';
3
3
 
4
4
  Object.defineProperty(exports, '__esModule', { value: true });
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sources":["../../../../../src/components/Badge/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../Badge.tokens';\n\nexport const base = css`\n color: var(${tokens.color});\n background-color: var(${tokens.background});\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAGhB;;;;"}
1
+ {"version":3,"file":"base.js","sources":["../../../../../src/components/Badge/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { privateTokens, tokens } from '../../Badge.tokens';\n\nexport const base = css`\n color: var(${privateTokens.customColor}, var(${tokens.color}));\n background-color: var(${privateTokens.customBackground}, var(${tokens.background}));\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAGhB;;;;"}
@@ -0,0 +1 @@
1
+ .b5zny0e{color:var(--plasma-badge-custom-color,var(--plasma-badge-color));background-color:var(--plasma-badge-custom-background,var(--plasma-badge-background));}
package/cjs/index.css CHANGED
@@ -463,15 +463,15 @@
463
463
  .Image_styles_12ttxgz_s2ny8jg__83bd03eb{width:100%;height:100%;object-fit:cover;position:absolute;}
464
464
  .Image_styles_12ttxgz_s1e232qk__83bd03eb{width:100%;height:100%;position:absolute;background-position:center;background-size:cover;}
465
465
 
466
- .base_qlxank_b5zny0e__7dda249c{color:var(--plasma-badge-color);background-color:var(--plasma-badge-background);}
466
+ .base_j3xzf3_b5zny0e__f0386786{color:var(--plasma-badge-custom-color,var(--plasma-badge-color));background-color:var(--plasma-badge-custom-background,var(--plasma-badge-background));}
467
467
 
468
- .base_to0y5x_bb8jvo5__5c9e1c86{font-family:var(--plasma-badge-font-family);font-size:var(--plasma-badge-font-size);font-style:var(--plasma-badge-font-style);font-weight:var(--plasma-badge-font-weight);-webkit-letter-spacing:var(--plasma-badge-letter-spacing);-moz-letter-spacing:var(--plasma-badge-letter-spacing);-ms-letter-spacing:var(--plasma-badge-letter-spacing);letter-spacing:var(--plasma-badge-letter-spacing);line-height:var(--plasma-badge-lineheight);border-radius:var(--plasma-badge-border-radius);height:var(--plasma-badge-height);padding-top:var(--plasma-badge-padding-top);padding-right:var(--plasma-badge-padding-right);padding-bottom:var(--plasma-badge-padding-bottom);padding-left:var(--plasma-badge-padding-left);}
468
+ .base_bu5opk_bb8jvo5__18c67c14{font-family:var(--plasma-badge-font-family);font-size:var(--plasma-badge-font-size);font-style:var(--plasma-badge-font-style);font-weight:var(--plasma-badge-font-weight);-webkit-letter-spacing:var(--plasma-badge-letter-spacing);-moz-letter-spacing:var(--plasma-badge-letter-spacing);-ms-letter-spacing:var(--plasma-badge-letter-spacing);letter-spacing:var(--plasma-badge-letter-spacing);line-height:var(--plasma-badge-lineheight);border-radius:var(--plasma-badge-border-radius);height:var(--plasma-badge-height);padding:var(--plasma-badge-padding);}.base_bu5opk_bb8jvo5__18c67c14.base_bu5opk_badgeIconOnly__18c67c14{padding:var(--plasma-badge-padding-icon-only);}.base_bu5opk_bb8jvo5__18c67c14.base_bu5opk_badgeIconOnly__18c67c14 .base_bu5opk_s1t43xoe__18c67c14{margin:0;}
469
469
 
470
470
  .base_zpvffd_b3w4z61__f9738ae7.base_zpvffd_badgePilled__f9738ae7{border-radius:var(--plasma-badge-pilled-border-radius);}
471
471
 
472
- .base_1l6036y_binquhc__5cc72580.base_1l6036y_badgeTransparent__5cc72580{color:var(--plasma-badge-color-transparent);background-color:var(--plasma-badge-background-transparent);}
472
+ .base_aapqhz_binquhc__81eb1c83.base_aapqhz_badgeTransparent__81eb1c83{color:var(--plasma-badge-custom-color,var(--plasma-badge-color-transparent));background-color:var(--plasma-badge-custom-background,var(--plasma-badge-background-transparent));}
473
473
 
474
- .base_oopyb7_b1e1wuvi__72387433.base_oopyb7_badgeClear__72387433{color:var(--plasma-badge-color-clear);background-color:transparent;padding:0;}
474
+ .base_wiboj8_b1e1wuvi__44d619d2.base_wiboj8_badgeClear__44d619d2{color:var(--plasma-badge-custom-color,var(--plasma-badge-color-clear));background-color:var(--plasma-badge-custom-background,var(--plasma-badge-background-clear));}
475
475
 
476
476
  .Badge_styles_hhbwyi_s1t43xoe__47a1842a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-badge-left-content-margin-left);margin-right:var(--plasma-badge-left-content-margin-right);}
477
477
 
@@ -13,7 +13,7 @@ var _focusedReducer = /*#__PURE__*/require("./reducers/focusedReducer");
13
13
  var _ui = /*#__PURE__*/require("./ui");
14
14
  var _Autocomplete = /*#__PURE__*/require("./Autocomplete.styles");
15
15
  var _useKeyboardNavigation = /*#__PURE__*/require("./hooks/useKeyboardNavigation");
16
- var _excluded = ["value", "defaultValue", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
16
+ var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
17
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
19
19
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -31,7 +31,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
31
31
  var autocompleteRoot = exports.autocompleteRoot = function autocompleteRoot(Root) {
32
32
  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
33
33
  var outerValue = _ref.value,
34
- defaultValue = _ref.defaultValue,
35
34
  onChange = _ref.onChange,
36
35
  suggestions = _ref.suggestions,
37
36
  view = _ref.view,
@@ -119,11 +118,6 @@ var autocompleteRoot = exports.autocompleteRoot = function autocompleteRoot(Root
119
118
  type: 'reset'
120
119
  });
121
120
  }, [value]);
122
- (0, _hooks.useDidMountEffect)(function () {
123
- if (defaultValue) {
124
- setInnerValue(defaultValue);
125
- }
126
- }, [defaultValue]);
127
121
  return /*#__PURE__*/_react["default"].createElement(Root, {
128
122
  view: view,
129
123
  size: size,
@@ -14,7 +14,7 @@ var _base4 = /*#__PURE__*/require("./variations/_transparent/base");
14
14
  var _base5 = /*#__PURE__*/require("./variations/_clear/base");
15
15
  var _Badge = /*#__PURE__*/require("./Badge.styles");
16
16
  var _Badge2 = /*#__PURE__*/require("./Badge.tokens");
17
- var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
17
+ var _excluded = ["children", "className", "style", "text", "contentLeft", "contentRight", "size", "view", "customColor", "customBackgroundColor", "pilled", "transparent", "clear", "maxWidth"];
18
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
19
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
20
20
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -27,13 +27,17 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
27
27
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
28
28
  var badgeRoot = exports.badgeRoot = function badgeRoot(Root) {
29
29
  return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
30
+ var _StyledContentLeft, _StyledContentMain, _StyledContentMain2, _StyledContentRight;
30
31
  var children = props.children,
31
32
  className = props.className,
33
+ style = props.style,
32
34
  text = props.text,
33
35
  contentLeft = props.contentLeft,
34
36
  contentRight = props.contentRight,
35
37
  size = props.size,
36
38
  view = props.view,
39
+ customColor = props.customColor,
40
+ customBackgroundColor = props.customBackgroundColor,
37
41
  _props$pilled = props.pilled,
38
42
  pilled = _props$pilled === void 0 ? false : _props$pilled,
39
43
  _props$transparent = props.transparent,
@@ -48,19 +52,25 @@ var badgeRoot = exports.badgeRoot = function badgeRoot(Root) {
48
52
  var clearClass = clear ? _Badge2.classes.badgeClear : undefined;
49
53
  var truncateClass = maxWidth !== 'auto' ? _Badge2.classes.badgeTruncate : undefined;
50
54
  var txt = !text && typeof children === 'string' ? children : text;
55
+ var iconOnlyClass = !txt && contentLeft ? _Badge2.classes.iconOnly : undefined;
56
+ var BadgeContent = function BadgeContent() {
57
+ if (contentLeft) {
58
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _StyledContentLeft || (_StyledContentLeft = /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentLeft, null, contentLeft)), txt ? _StyledContentMain || (_StyledContentMain = /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentMain, null, txt)) : children);
59
+ }
60
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, txt ? _StyledContentMain2 || (_StyledContentMain2 = /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentMain, null, txt)) : children, contentRight && (_StyledContentRight || (_StyledContentRight = /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentRight, null, contentRight))));
61
+ };
51
62
  return /*#__PURE__*/_react["default"].createElement(Root, _extends({
52
63
  ref: ref,
53
- className: (0, _utils.cx)(pilledClass, transparentClass, clearClass, truncateClass, className),
64
+ className: (0, _utils.cx)(pilledClass, transparentClass, clearClass, truncateClass, iconOnlyClass, className),
54
65
  view: view,
55
66
  size: size,
56
67
  pilled: pilled,
57
68
  transparent: transparent,
58
- clear: clear
59
- }, rest, {
60
- style: _objectSpread(_objectSpread({}, rest.style), {}, {
69
+ clear: clear,
70
+ style: _objectSpread(_objectSpread({}, style), {}, _defineProperty(_defineProperty({
61
71
  maxWidth: maxWidth
62
- })
63
- }), contentLeft && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/_react["default"].createElement(_Badge.StyledContentRight, null, contentRight));
72
+ }, _Badge2.privateTokens.customBackground, customBackgroundColor), _Badge2.privateTokens.customColor, customColor))
73
+ }, rest), /*#__PURE__*/_react["default"].createElement(BadgeContent, null));
64
74
  });
65
75
  };
66
76
  var badgeConfig = exports.badgeConfig = {
@@ -52,16 +52,7 @@ export function App() {
52
52
  ```
53
53
 
54
54
  ### Вид badge
55
- Вид `badge` задается с помощью свойства `view`. Возможные значения свойства `view`:
56
-
57
- + `"primary"` – основной badge;
58
- + `"accent"` – бейдж акцентного цвета;
59
- + `"positive"` – успешное завершение;
60
- + `"warning"` – предупреждение;
61
- + `"negative"` – ошибка;
62
- + `"dark"` – темный badge;
63
- + `"light"` – светлый badge.
64
-
55
+ Вид `badge` задается с помощью свойства `view`.
65
56
  Так же на вид badge влияет свойства `transparent` и `clear`.
66
57
 
67
58
  ```tsx live
@@ -72,7 +63,7 @@ export function App() {
72
63
  const Badges = ({transparent, clear}) => {
73
64
  return (
74
65
  <div style=\{{ display: 'flex', gap: '0.5rem' }}>
75
- <Badge text="Бейдж" size="l" view="primary" transparent={transparent} clear={clear} />
66
+ <Badge text="Бейдж" size="l" view="default" transparent={transparent} clear={clear} />
76
67
  <Badge text="Бейдж" size="l" view="accent" transparent={transparent} clear={clear} />
77
68
  <Badge text="Бейдж" size="l" view="positive" transparent={transparent} clear={clear} />
78
69
  <Badge text="Бейдж" size="l" view="warning" transparent={transparent} clear={clear} />
@@ -94,7 +85,8 @@ export function App() {
94
85
  ```
95
86
 
96
87
  ### Иконка слева / справа
97
- В левой и/или правой части badge можно отобразить иконку:
88
+ В левой или правой части badge можно отобразить иконку.
89
+ Если же нужен Badge с иконкой без текста, нужно использовать `contentLeft`.
98
90
 
99
91
  ```tsx live
100
92
  import React from 'react';
@@ -107,17 +99,49 @@ export function App() {
107
99
  <Badge
108
100
  text="Бейдж"
109
101
  size="l"
110
- view="primary"
102
+ view="default"
111
103
  contentLeft={
112
104
  <IconEye color="inherit" size="xs" />
113
- } />
105
+ }
106
+ />
114
107
  <Badge
115
108
  text="Бейдж"
116
109
  size="l"
117
- view="primary"
110
+ view="default"
118
111
  contentRight={
119
112
  <IconEye color="inherit" size="xs" />
120
- } />
113
+ }
114
+ />
115
+ <Badge
116
+ size="l"
117
+ view="default"
118
+ contentLeft={
119
+ <IconEye color="inherit" size="xs" />
120
+ }
121
+ />
122
+ </div>
123
+ );
124
+ }
125
+ ```
126
+
127
+ ### Задание цвета текста и фона
128
+ Цвет текста и фона можно задать с помощью свойств
129
+ `customColor` и `customBackgroundColor` соответственно.
130
+
131
+ ```tsx live
132
+ import React from 'react';
133
+ import { Badge } from '@salutejs/{{ package }}';
134
+
135
+ export function App() {
136
+ return (
137
+ <div>
138
+ <Badge
139
+ text="Бейдж"
140
+ size="l"
141
+ view="default"
142
+ customColor="antiquewhite"
143
+ customBackgroundColor="darkolivegreen"
144
+ />
121
145
  </div>
122
146
  );
123
147
  }