@salutejs/plasma-new-hope 0.76.1-dev.0 → 0.76.2-canary.1179.8707316396.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Chip/Chip.css +2 -0
- package/cjs/components/Chip/Chip.js +14 -2
- package/cjs/components/Chip/Chip.js.map +1 -1
- package/cjs/components/Chip/Chip.tokens.js +5 -0
- package/cjs/components/Chip/Chip.tokens.js.map +1 -1
- package/cjs/components/Chip/variations/_pilled/base.js +9 -0
- package/cjs/components/Chip/variations/_pilled/base.js.map +1 -0
- package/cjs/components/Chip/variations/_pilled/base_3kce4h.css +1 -0
- package/cjs/components/Combobox/Combobox.css +2 -0
- package/cjs/components/Combobox/ui/ComboboxChip/ComboboxChip.css +2 -0
- package/cjs/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +2 -0
- package/cjs/components/Pagination/Pagination.css +2 -0
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +2 -0
- package/cjs/components/Select/Select.css +2 -0
- package/cjs/components/Select/ui/SelectChip/SelectChip.css +2 -0
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +2 -0
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.css +2 -0
- package/cjs/index.css +2 -0
- package/es/components/Chip/Chip.css +2 -0
- package/es/components/Chip/Chip.js +15 -3
- package/es/components/Chip/Chip.js.map +1 -1
- package/es/components/Chip/Chip.tokens.js +5 -1
- package/es/components/Chip/Chip.tokens.js.map +1 -1
- package/es/components/Chip/variations/_pilled/base.js +5 -0
- package/es/components/Chip/variations/_pilled/base.js.map +1 -0
- package/es/components/Chip/variations/_pilled/base_3kce4h.css +1 -0
- package/es/components/Combobox/Combobox.css +2 -0
- package/es/components/Combobox/ui/ComboboxChip/ComboboxChip.css +2 -0
- package/es/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +2 -0
- package/es/components/Pagination/Pagination.css +2 -0
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +2 -0
- package/es/components/Select/Select.css +2 -0
- package/es/components/Select/ui/SelectChip/SelectChip.css +2 -0
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +2 -0
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.css +2 -0
- package/es/index.css +2 -0
- package/package.json +2 -2
- package/styled-components/cjs/components/Chip/Chip.js +14 -2
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Chip/Chip.tokens.js +5 -1
- package/styled-components/cjs/components/Chip/variations/_pilled/base.js +9 -0
- package/styled-components/cjs/components/Chip/variations/_pilled/tokens.json +4 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.config.js +10 -7
- package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.stories.tsx +18 -2
- package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.config.js +10 -7
- package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.stories.tsx +18 -2
- package/styled-components/es/components/Chip/Chip.js +15 -3
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +2 -2
- package/styled-components/es/components/Chip/Chip.tokens.js +4 -0
- package/styled-components/es/components/Chip/variations/_pilled/base.js +3 -0
- package/styled-components/es/components/Chip/variations/_pilled/tokens.json +4 -0
- package/styled-components/es/examples/plasma_b2c/components/Chip/Chip.config.js +10 -7
- package/styled-components/es/examples/plasma_b2c/components/Chip/Chip.stories.tsx +18 -2
- package/styled-components/es/examples/plasma_web/components/Chip/Chip.config.js +10 -7
- package/styled-components/es/examples/plasma_web/components/Chip/Chip.stories.tsx +18 -2
- package/types/components/Chip/Chip.d.ts +4 -0
- package/types/components/Chip/Chip.d.ts.map +1 -1
- package/types/components/Chip/Chip.tokens.d.ts +4 -0
- package/types/components/Chip/Chip.tokens.d.ts.map +1 -1
- package/types/components/Chip/Chip.types.d.ts +6 -0
- package/types/components/Chip/Chip.types.d.ts.map +1 -1
- package/types/components/Chip/variations/_pilled/base.d.ts +2 -0
- package/types/components/Chip/variations/_pilled/base.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Chip/Chip.config.d.ts +4 -1
- package/types/examples/plasma_b2c/components/Chip/Chip.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Chip/Chip.d.ts +4 -1
- package/types/examples/plasma_b2c/components/Chip/Chip.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Chip/Chip.config.d.ts +4 -1
- package/types/examples/plasma_web/components/Chip/Chip.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Chip/Chip.d.ts +4 -1
- package/types/examples/plasma_web/components/Chip/Chip.d.ts.map +1 -1
@@ -10,6 +10,8 @@
|
|
10
10
|
|
11
11
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
12
12
|
|
13
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
14
|
+
|
13
15
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
14
16
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
15
17
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -5,15 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
5
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
6
6
|
var React = require('react');
|
7
7
|
var IconClose = require('../_Icon/Icons/IconClose.js');
|
8
|
+
var index = require('../../utils/index.js');
|
8
9
|
var base = require('./variations/_view/base.js');
|
9
10
|
var base$1 = require('./variations/_size/base.js');
|
10
11
|
var base$2 = require('./variations/_disabled/base.js');
|
11
12
|
var base$3 = require('./variations/_readonly/base.js');
|
12
13
|
var base$4 = require('./variations/_focused/base.js');
|
14
|
+
var base$5 = require('./variations/_pilled/base.js');
|
13
15
|
var Chip_styles = require('./Chip.styles.js');
|
14
16
|
var Chip_tokens = require('./Chip.tokens.js');
|
15
17
|
|
16
|
-
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "onClear", "onClick", "readOnly", "disabled"];
|
18
|
+
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "className", "onClear", "onClick", "pilled", "readOnly", "disabled"];
|
17
19
|
var chipRoot = function chipRoot(Root) {
|
18
20
|
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
19
21
|
var children = props.children,
|
@@ -22,14 +24,18 @@ var chipRoot = function chipRoot(Root) {
|
|
22
24
|
contentRight = props.contentRight,
|
23
25
|
contentClearButton = props.contentClearButton,
|
24
26
|
size = props.size,
|
27
|
+
className = props.className,
|
25
28
|
onClear = props.onClear,
|
26
29
|
onClick = props.onClick,
|
30
|
+
_props$pilled = props.pilled,
|
31
|
+
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
27
32
|
_props$readOnly = props.readOnly,
|
28
33
|
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
|
29
34
|
_props$disabled = props.disabled,
|
30
35
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
31
36
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
|
32
37
|
var txt = !text && typeof children === 'string' ? children : text;
|
38
|
+
var pilledClass = pilled ? Chip_tokens.classes.pilled : undefined;
|
33
39
|
var handleClick = function handleClick(event) {
|
34
40
|
if (disabled || readOnly) {
|
35
41
|
return;
|
@@ -46,9 +52,11 @@ var chipRoot = function chipRoot(Root) {
|
|
46
52
|
return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
|
47
53
|
type: "button",
|
48
54
|
ref: ref,
|
55
|
+
className: index.cx(pilledClass, className),
|
49
56
|
tabIndex: readOnly ? -1 : 0,
|
50
57
|
onClick: handleClick,
|
51
58
|
disabled: disabled,
|
59
|
+
pilled: pilled,
|
52
60
|
readOnly: !disabled && readOnly,
|
53
61
|
size: size
|
54
62
|
}, rest), contentLeft && /*#__PURE__*/React.createElement(Chip_styles.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(Chip_styles.StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(Chip_styles.StyledContentRight, null, contentRight), ClearContent);
|
@@ -76,10 +84,14 @@ var chipConfig = {
|
|
76
84
|
},
|
77
85
|
focused: {
|
78
86
|
css: base$4.base
|
87
|
+
},
|
88
|
+
pilled: {
|
89
|
+
css: base$5.base,
|
90
|
+
attrs: true
|
79
91
|
}
|
80
92
|
},
|
81
93
|
defaults: {
|
82
|
-
view: '
|
94
|
+
view: 'default',
|
83
95
|
size: 'm'
|
84
96
|
}
|
85
97
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { IconClose } from '../_Icon/Icons/IconClose';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as readonlyCSS } from './variations/_readonly/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport type { ChipProps } from './Chip.types';\nimport { StyledContentClear, StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Chip.styles';\nimport { tokens } from './Chip.tokens';\n\nexport const chipRoot = (Root: RootProps<HTMLButtonElement, ChipProps>) =>\n forwardRef<HTMLButtonElement, ChipProps>((props, ref) => {\n const {\n children,\n text,\n contentLeft,\n contentRight,\n contentClearButton,\n size,\n onClear,\n onClick,\n readOnly = false,\n disabled = false,\n ...rest\n } = props;\n\n const txt = !text && typeof children === 'string' ? children : text;\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) {\n return;\n }\n\n onClick?.(event);\n onClear?.();\n };\n\n const ClearContent = useMemo(() => {\n return (\n contentClearButton || (\n <StyledContentClear>\n <IconClose sizeCustomProperty={tokens.closeIconSize} color=\"inherit\" />\n </StyledContentClear>\n )\n );\n }, [contentClearButton, tokens.closeIconSize]);\n\n return (\n <Root\n type=\"button\"\n ref={ref}\n tabIndex={readOnly ? -1 : 0}\n onClick={handleClick}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n size={size}\n {...rest}\n >\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n {txt ? <StyledContentMain>{txt}</StyledContentMain> : children}\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n {ClearContent}\n </Root>\n );\n });\n\nexport const chipConfig = {\n name: 'Chip',\n tag: 'button',\n layout: chipRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n css: readonlyCSS,\n attrs: true,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n view: '
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { IconClose } from '../_Icon/Icons/IconClose';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as readonlyCSS } from './variations/_readonly/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport type { ChipProps } from './Chip.types';\nimport { StyledContentClear, StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Chip.styles';\nimport { classes, tokens } from './Chip.tokens';\n\nexport const chipRoot = (Root: RootProps<HTMLButtonElement, ChipProps>) =>\n forwardRef<HTMLButtonElement, ChipProps>((props, ref) => {\n const {\n children,\n text,\n contentLeft,\n contentRight,\n contentClearButton,\n size,\n className,\n onClear,\n onClick,\n pilled = false,\n readOnly = false,\n disabled = false,\n ...rest\n } = props;\n\n const txt = !text && typeof children === 'string' ? children : text;\n const pilledClass = pilled ? classes.pilled : undefined;\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) {\n return;\n }\n\n onClick?.(event);\n onClear?.();\n };\n\n const ClearContent = useMemo(() => {\n return (\n contentClearButton || (\n <StyledContentClear>\n <IconClose sizeCustomProperty={tokens.closeIconSize} color=\"inherit\" />\n </StyledContentClear>\n )\n );\n }, [contentClearButton, tokens.closeIconSize]);\n\n return (\n <Root\n type=\"button\"\n ref={ref}\n className={cx(pilledClass, className)}\n tabIndex={readOnly ? -1 : 0}\n onClick={handleClick}\n disabled={disabled}\n pilled={pilled}\n readOnly={!disabled && readOnly}\n size={size}\n {...rest}\n >\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n {txt ? <StyledContentMain>{txt}</StyledContentMain> : children}\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n {ClearContent}\n </Root>\n );\n });\n\nexport const chipConfig = {\n name: 'Chip',\n tag: 'button',\n layout: chipRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n css: readonlyCSS,\n attrs: true,\n },\n focused: {\n css: focusedCSS,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["chipRoot","Root","forwardRef","props","ref","children","text","contentLeft","contentRight","contentClearButton","size","className","onClear","onClick","_props$pilled","pilled","_props$readOnly","readOnly","_props$disabled","disabled","rest","_objectWithoutProperties","_excluded","txt","pilledClass","classes","undefined","handleClick","event","ClearContent","useMemo","React","createElement","StyledContentClear","IconClose","sizeCustomProperty","tokens","closeIconSize","color","_extends","type","cx","tabIndex","StyledContentLeft","StyledContentMain","StyledContentRight","chipConfig","name","tag","layout","base","variations","view","css","viewCSS","sizeCSS","disabledCSS","attrs","readonlyCSS","focused","focusedCSS","pilledCSS","defaults"],"mappings":"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"}
|
@@ -2,6 +2,9 @@
|
|
2
2
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
4
4
|
|
5
|
+
var classes = {
|
6
|
+
pilled: 'chip-pilled'
|
7
|
+
};
|
5
8
|
var tokens = {
|
6
9
|
background: '--plasma-chip-background',
|
7
10
|
color: '--plasma-chip-color',
|
@@ -19,6 +22,7 @@ var tokens = {
|
|
19
22
|
outlineSize: '--plasma-chip-outline-size',
|
20
23
|
closeIconColor: '--plasma-chip-close-icon-color',
|
21
24
|
borderRadius: '--plasma-chip-border-radius',
|
25
|
+
pilledBorderRadius: '--plasma-chip-pilled-border-radius',
|
22
26
|
width: '--plasma-chip-width',
|
23
27
|
height: '--plasma-chip-height',
|
24
28
|
paddingTop: '--plasma-chip-padding-top',
|
@@ -41,5 +45,6 @@ var tokens = {
|
|
41
45
|
clearContentMarginRight: '--plasma-chip-clear-content-margin-right'
|
42
46
|
};
|
43
47
|
|
48
|
+
exports.classes = classes;
|
44
49
|
exports.tokens = tokens;
|
45
50
|
//# sourceMappingURL=Chip.tokens.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Chip.tokens.js","sources":["../../../src/components/Chip/Chip.tokens.ts"],"sourcesContent":["export const tokens = {\n background: '--plasma-chip-background',\n color: '--plasma-chip-color',\n backgroundHover: '--plasma-chip-background-hover',\n colorHover: '--plasma-chip-color-hover',\n scaleHover: '--plasma-chip-scale-hover',\n backgroundReadOnly: '--plasma-chip-background-readonly',\n colorReadOnly: '--plasma-chip-color-readonly',\n backgroundReadOnlyHover: '--plasma-chip-background-readonly-hover',\n colorReadOnlyHover: '--plasma-chip-color-readonly-hover',\n backgroundActive: '--plasma-chip-background-active',\n colorActive: '--plasma-chip-color-active',\n scaleActive: '--plasma-chip-scale-active',\n focusColor: '--plasma-chip-focus-color',\n outlineSize: '--plasma-chip-outline-size',\n closeIconColor: '--plasma-chip-close-icon-color',\n\n borderRadius: '--plasma-chip-border-radius',\n width: '--plasma-chip-width',\n height: '--plasma-chip-height',\n paddingTop: '--plasma-chip-padding-top',\n paddingRight: '--plasma-chip-padding-right',\n paddingBottom: '--plasma-chip-padding-bottom',\n paddingLeft: '--plasma-chip-padding-left',\n closeIconSize: '--plasma-chip-close-icon-size',\n\n disabledOpacity: '--plasma-chip-disabled-opacity',\n\n fontFamily: '--plasma-chip-font-family',\n fontSize: '--plasma-chip-font-size',\n fontStyle: '--plasma-chip-font-style',\n fontWeight: '--plasma-chip-font-weight',\n letterSpacing: '--plasma-chip-letter-spacing',\n lineHeight: '--plasma-chip-lineheight',\n\n leftContentMarginLeft: '--plasma-chip-left-content-margin-left',\n leftContentMarginRight: '--plasma-chip-left-content-margin-right',\n rightContentMarginLeft: '--plasma-chip-right-content-margin-left',\n rightContentMarginRight: '--plasma-chip-right-content-margin-right',\n clearContentMarginLeft: '--plasma-chip-clear-content-margin-left',\n clearContentMarginRight: '--plasma-chip-clear-content-margin-right',\n};\n"],"names":["tokens","background","color","backgroundHover","colorHover","scaleHover","backgroundReadOnly","colorReadOnly","backgroundReadOnlyHover","colorReadOnlyHover","backgroundActive","colorActive","scaleActive","focusColor","outlineSize","closeIconColor","borderRadius","width","height","paddingTop","paddingRight","paddingBottom","paddingLeft","closeIconSize","disabledOpacity","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","leftContentMarginLeft","leftContentMarginRight","rightContentMarginLeft","rightContentMarginRight","clearContentMarginLeft","clearContentMarginRight"],"mappings":";;;;AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,0BAA0B;AACtCC,EAAAA,KAAK,EAAE,qBAAqB;AAC5BC,EAAAA,eAAe,EAAE,gCAAgC;AACjDC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,kBAAkB,EAAE,mCAAmC;AACvDC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,uBAAuB,EAAE,yCAAyC;AAClEC,EAAAA,kBAAkB,EAAE,oCAAoC;AACxDC,EAAAA,gBAAgB,EAAE,iCAAiC;AACnDC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,cAAc,EAAE,gCAAgC;AAEhDC,EAAAA,YAAY,EAAE,6BAA6B;AAC3CC,EAAAA,KAAK,EAAE,qBAAqB;AAC5BC,EAAAA,MAAM,EAAE,sBAAsB;AAC9BC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,YAAY,EAAE,6BAA6B;AAC3CC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,aAAa,EAAE,+BAA+B;AAE9CC,EAAAA,eAAe,EAAE,gCAAgC;AAEjDC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,QAAQ,EAAE,yBAAyB;AACnCC,EAAAA,SAAS,EAAE,0BAA0B;AACrCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,UAAU,EAAE,0BAA0B;AAEtCC,EAAAA,qBAAqB,EAAE,wCAAwC;AAC/DC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,uBAAuB,EAAE,0CAA0C;AACnEC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,uBAAuB,EAAE,0CAAA;AAC7B
|
1
|
+
{"version":3,"file":"Chip.tokens.js","sources":["../../../src/components/Chip/Chip.tokens.ts"],"sourcesContent":["export const classes = {\n pilled: 'chip-pilled',\n};\n\nexport const tokens = {\n background: '--plasma-chip-background',\n color: '--plasma-chip-color',\n backgroundHover: '--plasma-chip-background-hover',\n colorHover: '--plasma-chip-color-hover',\n scaleHover: '--plasma-chip-scale-hover',\n backgroundReadOnly: '--plasma-chip-background-readonly',\n colorReadOnly: '--plasma-chip-color-readonly',\n backgroundReadOnlyHover: '--plasma-chip-background-readonly-hover',\n colorReadOnlyHover: '--plasma-chip-color-readonly-hover',\n backgroundActive: '--plasma-chip-background-active',\n colorActive: '--plasma-chip-color-active',\n scaleActive: '--plasma-chip-scale-active',\n focusColor: '--plasma-chip-focus-color',\n outlineSize: '--plasma-chip-outline-size',\n closeIconColor: '--plasma-chip-close-icon-color',\n\n borderRadius: '--plasma-chip-border-radius',\n pilledBorderRadius: '--plasma-chip-pilled-border-radius',\n width: '--plasma-chip-width',\n height: '--plasma-chip-height',\n paddingTop: '--plasma-chip-padding-top',\n paddingRight: '--plasma-chip-padding-right',\n paddingBottom: '--plasma-chip-padding-bottom',\n paddingLeft: '--plasma-chip-padding-left',\n closeIconSize: '--plasma-chip-close-icon-size',\n\n disabledOpacity: '--plasma-chip-disabled-opacity',\n\n fontFamily: '--plasma-chip-font-family',\n fontSize: '--plasma-chip-font-size',\n fontStyle: '--plasma-chip-font-style',\n fontWeight: '--plasma-chip-font-weight',\n letterSpacing: '--plasma-chip-letter-spacing',\n lineHeight: '--plasma-chip-lineheight',\n\n leftContentMarginLeft: '--plasma-chip-left-content-margin-left',\n leftContentMarginRight: '--plasma-chip-left-content-margin-right',\n rightContentMarginLeft: '--plasma-chip-right-content-margin-left',\n rightContentMarginRight: '--plasma-chip-right-content-margin-right',\n clearContentMarginLeft: '--plasma-chip-clear-content-margin-left',\n clearContentMarginRight: '--plasma-chip-clear-content-margin-right',\n};\n"],"names":["classes","pilled","tokens","background","color","backgroundHover","colorHover","scaleHover","backgroundReadOnly","colorReadOnly","backgroundReadOnlyHover","colorReadOnlyHover","backgroundActive","colorActive","scaleActive","focusColor","outlineSize","closeIconColor","borderRadius","pilledBorderRadius","width","height","paddingTop","paddingRight","paddingBottom","paddingLeft","closeIconSize","disabledOpacity","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","leftContentMarginLeft","leftContentMarginRight","rightContentMarginLeft","rightContentMarginRight","clearContentMarginLeft","clearContentMarginRight"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,MAAM,EAAE,aAAA;AACZ,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,0BAA0B;AACtCC,EAAAA,KAAK,EAAE,qBAAqB;AAC5BC,EAAAA,eAAe,EAAE,gCAAgC;AACjDC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,kBAAkB,EAAE,mCAAmC;AACvDC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,uBAAuB,EAAE,yCAAyC;AAClEC,EAAAA,kBAAkB,EAAE,oCAAoC;AACxDC,EAAAA,gBAAgB,EAAE,iCAAiC;AACnDC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,cAAc,EAAE,gCAAgC;AAEhDC,EAAAA,YAAY,EAAE,6BAA6B;AAC3CC,EAAAA,kBAAkB,EAAE,oCAAoC;AACxDC,EAAAA,KAAK,EAAE,qBAAqB;AAC5BC,EAAAA,MAAM,EAAE,sBAAsB;AAC9BC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,YAAY,EAAE,6BAA6B;AAC3CC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,aAAa,EAAE,+BAA+B;AAE9CC,EAAAA,eAAe,EAAE,gCAAgC;AAEjDC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,QAAQ,EAAE,yBAAyB;AACnCC,EAAAA,SAAS,EAAE,0BAA0B;AACrCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,UAAU,EAAE,0BAA0B;AAEtCC,EAAAA,qBAAqB,EAAE,wCAAwC;AAC/DC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,uBAAuB,EAAE,0CAA0C;AACnEC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,uBAAuB,EAAE,0CAAA;AAC7B;;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../../src/components/Chip/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../Chip.tokens';\n\nexport const base = css`\n &.${String(classes.pilled)} {\n border-radius: var(${tokens.pilledBorderRadius});\n }\n`;\n"],"names":["base"],"mappings":";;;;AAIO,IAAMA,IAAI,GAIhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.bvcavwi.chip-pilled{border-radius:var(--plasma-chip-pilled-border-radius);}
|
@@ -35,6 +35,8 @@
|
|
35
35
|
|
36
36
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
37
37
|
|
38
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
39
|
+
|
38
40
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
39
41
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
40
42
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -10,6 +10,8 @@
|
|
10
10
|
|
11
11
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
12
12
|
|
13
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
14
|
+
|
13
15
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
14
16
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
15
17
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -8,6 +8,8 @@
|
|
8
8
|
|
9
9
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
10
10
|
|
11
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
12
|
+
|
11
13
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
12
14
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
13
15
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -102,6 +102,8 @@
|
|
102
102
|
|
103
103
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
104
104
|
|
105
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
106
|
+
|
105
107
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
106
108
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
107
109
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -47,6 +47,8 @@
|
|
47
47
|
|
48
48
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
49
49
|
|
50
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
51
|
+
|
50
52
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
51
53
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
52
54
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -35,6 +35,8 @@
|
|
35
35
|
|
36
36
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
37
37
|
|
38
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
39
|
+
|
38
40
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
39
41
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
40
42
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -10,6 +10,8 @@
|
|
10
10
|
|
11
11
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
12
12
|
|
13
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
14
|
+
|
13
15
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
14
16
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
15
17
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -8,6 +8,8 @@
|
|
8
8
|
|
9
9
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
10
10
|
|
11
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
12
|
+
|
11
13
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
12
14
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
13
15
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -10,6 +10,8 @@
|
|
10
10
|
|
11
11
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
12
12
|
|
13
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
14
|
+
|
13
15
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
14
16
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
15
17
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
package/cjs/index.css
CHANGED
@@ -40,6 +40,8 @@
|
|
40
40
|
|
41
41
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
42
42
|
|
43
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
44
|
+
|
43
45
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
44
46
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
45
47
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -10,6 +10,8 @@
|
|
10
10
|
|
11
11
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
12
12
|
|
13
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
14
|
+
|
13
15
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
14
16
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
15
17
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -1,15 +1,17 @@
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
2
2
|
import React, { forwardRef, useMemo } from 'react';
|
3
3
|
import { IconClose } from '../_Icon/Icons/IconClose.js';
|
4
|
+
import { cx } from '../../utils/index.js';
|
4
5
|
import { base as base$1 } from './variations/_view/base.js';
|
5
6
|
import { base as base$2 } from './variations/_size/base.js';
|
6
7
|
import { base as base$3 } from './variations/_disabled/base.js';
|
7
8
|
import { base as base$4 } from './variations/_readonly/base.js';
|
8
9
|
import { base as base$5 } from './variations/_focused/base.js';
|
10
|
+
import { base as base$6 } from './variations/_pilled/base.js';
|
9
11
|
import { StyledContentClear, StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Chip.styles.js';
|
10
|
-
import { tokens } from './Chip.tokens.js';
|
12
|
+
import { tokens, classes } from './Chip.tokens.js';
|
11
13
|
|
12
|
-
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "onClear", "onClick", "readOnly", "disabled"];
|
14
|
+
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "className", "onClear", "onClick", "pilled", "readOnly", "disabled"];
|
13
15
|
var chipRoot = function chipRoot(Root) {
|
14
16
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
15
17
|
var children = props.children,
|
@@ -18,14 +20,18 @@ var chipRoot = function chipRoot(Root) {
|
|
18
20
|
contentRight = props.contentRight,
|
19
21
|
contentClearButton = props.contentClearButton,
|
20
22
|
size = props.size,
|
23
|
+
className = props.className,
|
21
24
|
onClear = props.onClear,
|
22
25
|
onClick = props.onClick,
|
26
|
+
_props$pilled = props.pilled,
|
27
|
+
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
23
28
|
_props$readOnly = props.readOnly,
|
24
29
|
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
|
25
30
|
_props$disabled = props.disabled,
|
26
31
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
27
32
|
rest = _objectWithoutProperties(props, _excluded);
|
28
33
|
var txt = !text && typeof children === 'string' ? children : text;
|
34
|
+
var pilledClass = pilled ? classes.pilled : undefined;
|
29
35
|
var handleClick = function handleClick(event) {
|
30
36
|
if (disabled || readOnly) {
|
31
37
|
return;
|
@@ -42,9 +48,11 @@ var chipRoot = function chipRoot(Root) {
|
|
42
48
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
43
49
|
type: "button",
|
44
50
|
ref: ref,
|
51
|
+
className: cx(pilledClass, className),
|
45
52
|
tabIndex: readOnly ? -1 : 0,
|
46
53
|
onClick: handleClick,
|
47
54
|
disabled: disabled,
|
55
|
+
pilled: pilled,
|
48
56
|
readOnly: !disabled && readOnly,
|
49
57
|
size: size
|
50
58
|
}, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), ClearContent);
|
@@ -72,10 +80,14 @@ var chipConfig = {
|
|
72
80
|
},
|
73
81
|
focused: {
|
74
82
|
css: base$5
|
83
|
+
},
|
84
|
+
pilled: {
|
85
|
+
css: base$6,
|
86
|
+
attrs: true
|
75
87
|
}
|
76
88
|
},
|
77
89
|
defaults: {
|
78
|
-
view: '
|
90
|
+
view: 'default',
|
79
91
|
size: 'm'
|
80
92
|
}
|
81
93
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { IconClose } from '../_Icon/Icons/IconClose';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as readonlyCSS } from './variations/_readonly/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport type { ChipProps } from './Chip.types';\nimport { StyledContentClear, StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Chip.styles';\nimport { tokens } from './Chip.tokens';\n\nexport const chipRoot = (Root: RootProps<HTMLButtonElement, ChipProps>) =>\n forwardRef<HTMLButtonElement, ChipProps>((props, ref) => {\n const {\n children,\n text,\n contentLeft,\n contentRight,\n contentClearButton,\n size,\n onClear,\n onClick,\n readOnly = false,\n disabled = false,\n ...rest\n } = props;\n\n const txt = !text && typeof children === 'string' ? children : text;\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) {\n return;\n }\n\n onClick?.(event);\n onClear?.();\n };\n\n const ClearContent = useMemo(() => {\n return (\n contentClearButton || (\n <StyledContentClear>\n <IconClose sizeCustomProperty={tokens.closeIconSize} color=\"inherit\" />\n </StyledContentClear>\n )\n );\n }, [contentClearButton, tokens.closeIconSize]);\n\n return (\n <Root\n type=\"button\"\n ref={ref}\n tabIndex={readOnly ? -1 : 0}\n onClick={handleClick}\n disabled={disabled}\n readOnly={!disabled && readOnly}\n size={size}\n {...rest}\n >\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n {txt ? <StyledContentMain>{txt}</StyledContentMain> : children}\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n {ClearContent}\n </Root>\n );\n });\n\nexport const chipConfig = {\n name: 'Chip',\n tag: 'button',\n layout: chipRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n css: readonlyCSS,\n attrs: true,\n },\n focused: {\n css: focusedCSS,\n },\n },\n defaults: {\n view: '
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport type { RootProps } from '../../engines';\nimport { IconClose } from '../_Icon/Icons/IconClose';\nimport { cx } from '../../utils';\n\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as readonlyCSS } from './variations/_readonly/base';\nimport { base as focusedCSS } from './variations/_focused/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport type { ChipProps } from './Chip.types';\nimport { StyledContentClear, StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Chip.styles';\nimport { classes, tokens } from './Chip.tokens';\n\nexport const chipRoot = (Root: RootProps<HTMLButtonElement, ChipProps>) =>\n forwardRef<HTMLButtonElement, ChipProps>((props, ref) => {\n const {\n children,\n text,\n contentLeft,\n contentRight,\n contentClearButton,\n size,\n className,\n onClear,\n onClick,\n pilled = false,\n readOnly = false,\n disabled = false,\n ...rest\n } = props;\n\n const txt = !text && typeof children === 'string' ? children : text;\n const pilledClass = pilled ? classes.pilled : undefined;\n\n const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || readOnly) {\n return;\n }\n\n onClick?.(event);\n onClear?.();\n };\n\n const ClearContent = useMemo(() => {\n return (\n contentClearButton || (\n <StyledContentClear>\n <IconClose sizeCustomProperty={tokens.closeIconSize} color=\"inherit\" />\n </StyledContentClear>\n )\n );\n }, [contentClearButton, tokens.closeIconSize]);\n\n return (\n <Root\n type=\"button\"\n ref={ref}\n className={cx(pilledClass, className)}\n tabIndex={readOnly ? -1 : 0}\n onClick={handleClick}\n disabled={disabled}\n pilled={pilled}\n readOnly={!disabled && readOnly}\n size={size}\n {...rest}\n >\n {contentLeft && <StyledContentLeft>{contentLeft}</StyledContentLeft>}\n {txt ? <StyledContentMain>{txt}</StyledContentMain> : children}\n {contentRight && <StyledContentRight>{contentRight}</StyledContentRight>}\n {ClearContent}\n </Root>\n );\n });\n\nexport const chipConfig = {\n name: 'Chip',\n tag: 'button',\n layout: chipRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n readOnly: {\n css: readonlyCSS,\n attrs: true,\n },\n focused: {\n css: focusedCSS,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["chipRoot","Root","forwardRef","props","ref","children","text","contentLeft","contentRight","contentClearButton","size","className","onClear","onClick","_props$pilled","pilled","_props$readOnly","readOnly","_props$disabled","disabled","rest","_objectWithoutProperties","_excluded","txt","pilledClass","classes","undefined","handleClick","event","ClearContent","useMemo","React","createElement","StyledContentClear","IconClose","sizeCustomProperty","tokens","closeIconSize","color","_extends","type","cx","tabIndex","StyledContentLeft","StyledContentMain","StyledContentRight","chipConfig","name","tag","layout","base","variations","view","css","viewCSS","sizeCSS","disabledCSS","attrs","readonlyCSS","focused","focusedCSS","pilledCSS","defaults"],"mappings":"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"}
|
@@ -1,3 +1,6 @@
|
|
1
|
+
var classes = {
|
2
|
+
pilled: 'chip-pilled'
|
3
|
+
};
|
1
4
|
var tokens = {
|
2
5
|
background: '--plasma-chip-background',
|
3
6
|
color: '--plasma-chip-color',
|
@@ -15,6 +18,7 @@ var tokens = {
|
|
15
18
|
outlineSize: '--plasma-chip-outline-size',
|
16
19
|
closeIconColor: '--plasma-chip-close-icon-color',
|
17
20
|
borderRadius: '--plasma-chip-border-radius',
|
21
|
+
pilledBorderRadius: '--plasma-chip-pilled-border-radius',
|
18
22
|
width: '--plasma-chip-width',
|
19
23
|
height: '--plasma-chip-height',
|
20
24
|
paddingTop: '--plasma-chip-padding-top',
|
@@ -37,5 +41,5 @@ var tokens = {
|
|
37
41
|
clearContentMarginRight: '--plasma-chip-clear-content-margin-right'
|
38
42
|
};
|
39
43
|
|
40
|
-
export { tokens };
|
44
|
+
export { classes, tokens };
|
41
45
|
//# sourceMappingURL=Chip.tokens.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Chip.tokens.js","sources":["../../../src/components/Chip/Chip.tokens.ts"],"sourcesContent":["export const tokens = {\n background: '--plasma-chip-background',\n color: '--plasma-chip-color',\n backgroundHover: '--plasma-chip-background-hover',\n colorHover: '--plasma-chip-color-hover',\n scaleHover: '--plasma-chip-scale-hover',\n backgroundReadOnly: '--plasma-chip-background-readonly',\n colorReadOnly: '--plasma-chip-color-readonly',\n backgroundReadOnlyHover: '--plasma-chip-background-readonly-hover',\n colorReadOnlyHover: '--plasma-chip-color-readonly-hover',\n backgroundActive: '--plasma-chip-background-active',\n colorActive: '--plasma-chip-color-active',\n scaleActive: '--plasma-chip-scale-active',\n focusColor: '--plasma-chip-focus-color',\n outlineSize: '--plasma-chip-outline-size',\n closeIconColor: '--plasma-chip-close-icon-color',\n\n borderRadius: '--plasma-chip-border-radius',\n width: '--plasma-chip-width',\n height: '--plasma-chip-height',\n paddingTop: '--plasma-chip-padding-top',\n paddingRight: '--plasma-chip-padding-right',\n paddingBottom: '--plasma-chip-padding-bottom',\n paddingLeft: '--plasma-chip-padding-left',\n closeIconSize: '--plasma-chip-close-icon-size',\n\n disabledOpacity: '--plasma-chip-disabled-opacity',\n\n fontFamily: '--plasma-chip-font-family',\n fontSize: '--plasma-chip-font-size',\n fontStyle: '--plasma-chip-font-style',\n fontWeight: '--plasma-chip-font-weight',\n letterSpacing: '--plasma-chip-letter-spacing',\n lineHeight: '--plasma-chip-lineheight',\n\n leftContentMarginLeft: '--plasma-chip-left-content-margin-left',\n leftContentMarginRight: '--plasma-chip-left-content-margin-right',\n rightContentMarginLeft: '--plasma-chip-right-content-margin-left',\n rightContentMarginRight: '--plasma-chip-right-content-margin-right',\n clearContentMarginLeft: '--plasma-chip-clear-content-margin-left',\n clearContentMarginRight: '--plasma-chip-clear-content-margin-right',\n};\n"],"names":["tokens","background","color","backgroundHover","colorHover","scaleHover","backgroundReadOnly","colorReadOnly","backgroundReadOnlyHover","colorReadOnlyHover","backgroundActive","colorActive","scaleActive","focusColor","outlineSize","closeIconColor","borderRadius","width","height","paddingTop","paddingRight","paddingBottom","paddingLeft","closeIconSize","disabledOpacity","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","leftContentMarginLeft","leftContentMarginRight","rightContentMarginLeft","rightContentMarginRight","clearContentMarginLeft","clearContentMarginRight"],"mappings":"AAAO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,0BAA0B;AACtCC,EAAAA,KAAK,EAAE,qBAAqB;AAC5BC,EAAAA,eAAe,EAAE,gCAAgC;AACjDC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,kBAAkB,EAAE,mCAAmC;AACvDC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,uBAAuB,EAAE,yCAAyC;AAClEC,EAAAA,kBAAkB,EAAE,oCAAoC;AACxDC,EAAAA,gBAAgB,EAAE,iCAAiC;AACnDC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,cAAc,EAAE,gCAAgC;AAEhDC,EAAAA,YAAY,EAAE,6BAA6B;AAC3CC,EAAAA,KAAK,EAAE,qBAAqB;AAC5BC,EAAAA,MAAM,EAAE,sBAAsB;AAC9BC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,YAAY,EAAE,6BAA6B;AAC3CC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,aAAa,EAAE,+BAA+B;AAE9CC,EAAAA,eAAe,EAAE,gCAAgC;AAEjDC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,QAAQ,EAAE,yBAAyB;AACnCC,EAAAA,SAAS,EAAE,0BAA0B;AACrCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,UAAU,EAAE,0BAA0B;AAEtCC,EAAAA,qBAAqB,EAAE,wCAAwC;AAC/DC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,uBAAuB,EAAE,0CAA0C;AACnEC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,uBAAuB,EAAE,0CAAA;AAC7B;;;;"}
|
1
|
+
{"version":3,"file":"Chip.tokens.js","sources":["../../../src/components/Chip/Chip.tokens.ts"],"sourcesContent":["export const classes = {\n pilled: 'chip-pilled',\n};\n\nexport const tokens = {\n background: '--plasma-chip-background',\n color: '--plasma-chip-color',\n backgroundHover: '--plasma-chip-background-hover',\n colorHover: '--plasma-chip-color-hover',\n scaleHover: '--plasma-chip-scale-hover',\n backgroundReadOnly: '--plasma-chip-background-readonly',\n colorReadOnly: '--plasma-chip-color-readonly',\n backgroundReadOnlyHover: '--plasma-chip-background-readonly-hover',\n colorReadOnlyHover: '--plasma-chip-color-readonly-hover',\n backgroundActive: '--plasma-chip-background-active',\n colorActive: '--plasma-chip-color-active',\n scaleActive: '--plasma-chip-scale-active',\n focusColor: '--plasma-chip-focus-color',\n outlineSize: '--plasma-chip-outline-size',\n closeIconColor: '--plasma-chip-close-icon-color',\n\n borderRadius: '--plasma-chip-border-radius',\n pilledBorderRadius: '--plasma-chip-pilled-border-radius',\n width: '--plasma-chip-width',\n height: '--plasma-chip-height',\n paddingTop: '--plasma-chip-padding-top',\n paddingRight: '--plasma-chip-padding-right',\n paddingBottom: '--plasma-chip-padding-bottom',\n paddingLeft: '--plasma-chip-padding-left',\n closeIconSize: '--plasma-chip-close-icon-size',\n\n disabledOpacity: '--plasma-chip-disabled-opacity',\n\n fontFamily: '--plasma-chip-font-family',\n fontSize: '--plasma-chip-font-size',\n fontStyle: '--plasma-chip-font-style',\n fontWeight: '--plasma-chip-font-weight',\n letterSpacing: '--plasma-chip-letter-spacing',\n lineHeight: '--plasma-chip-lineheight',\n\n leftContentMarginLeft: '--plasma-chip-left-content-margin-left',\n leftContentMarginRight: '--plasma-chip-left-content-margin-right',\n rightContentMarginLeft: '--plasma-chip-right-content-margin-left',\n rightContentMarginRight: '--plasma-chip-right-content-margin-right',\n clearContentMarginLeft: '--plasma-chip-clear-content-margin-left',\n clearContentMarginRight: '--plasma-chip-clear-content-margin-right',\n};\n"],"names":["classes","pilled","tokens","background","color","backgroundHover","colorHover","scaleHover","backgroundReadOnly","colorReadOnly","backgroundReadOnlyHover","colorReadOnlyHover","backgroundActive","colorActive","scaleActive","focusColor","outlineSize","closeIconColor","borderRadius","pilledBorderRadius","width","height","paddingTop","paddingRight","paddingBottom","paddingLeft","closeIconSize","disabledOpacity","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","leftContentMarginLeft","leftContentMarginRight","rightContentMarginLeft","rightContentMarginRight","clearContentMarginLeft","clearContentMarginRight"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,MAAM,EAAE,aAAA;AACZ,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,0BAA0B;AACtCC,EAAAA,KAAK,EAAE,qBAAqB;AAC5BC,EAAAA,eAAe,EAAE,gCAAgC;AACjDC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,kBAAkB,EAAE,mCAAmC;AACvDC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,uBAAuB,EAAE,yCAAyC;AAClEC,EAAAA,kBAAkB,EAAE,oCAAoC;AACxDC,EAAAA,gBAAgB,EAAE,iCAAiC;AACnDC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,cAAc,EAAE,gCAAgC;AAEhDC,EAAAA,YAAY,EAAE,6BAA6B;AAC3CC,EAAAA,kBAAkB,EAAE,oCAAoC;AACxDC,EAAAA,KAAK,EAAE,qBAAqB;AAC5BC,EAAAA,MAAM,EAAE,sBAAsB;AAC9BC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,YAAY,EAAE,6BAA6B;AAC3CC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,aAAa,EAAE,+BAA+B;AAE9CC,EAAAA,eAAe,EAAE,gCAAgC;AAEjDC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,QAAQ,EAAE,yBAAyB;AACnCC,EAAAA,SAAS,EAAE,0BAA0B;AACrCC,EAAAA,UAAU,EAAE,2BAA2B;AACvCC,EAAAA,aAAa,EAAE,8BAA8B;AAC7CC,EAAAA,UAAU,EAAE,0BAA0B;AAEtCC,EAAAA,qBAAqB,EAAE,wCAAwC;AAC/DC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,uBAAuB,EAAE,0CAA0C;AACnEC,EAAAA,sBAAsB,EAAE,yCAAyC;AACjEC,EAAAA,uBAAuB,EAAE,0CAAA;AAC7B;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../../src/components/Chip/variations/_pilled/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, tokens } from '../../Chip.tokens';\n\nexport const base = css`\n &.${String(classes.pilled)} {\n border-radius: var(${tokens.pilledBorderRadius});\n }\n`;\n"],"names":["base"],"mappings":"AAIO,IAAMA,IAAI,GAIhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.bvcavwi.chip-pilled{border-radius:var(--plasma-chip-pilled-border-radius);}
|
@@ -35,6 +35,8 @@
|
|
35
35
|
|
36
36
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
37
37
|
|
38
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
39
|
+
|
38
40
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
39
41
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
40
42
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -10,6 +10,8 @@
|
|
10
10
|
|
11
11
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
12
12
|
|
13
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
14
|
+
|
13
15
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
14
16
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
15
17
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -8,6 +8,8 @@
|
|
8
8
|
|
9
9
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
10
10
|
|
11
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
12
|
+
|
11
13
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
12
14
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
13
15
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -102,6 +102,8 @@
|
|
102
102
|
|
103
103
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
104
104
|
|
105
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
106
|
+
|
105
107
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
106
108
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
107
109
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -47,6 +47,8 @@
|
|
47
47
|
|
48
48
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
49
49
|
|
50
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
51
|
+
|
50
52
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
51
53
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
52
54
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -35,6 +35,8 @@
|
|
35
35
|
|
36
36
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
37
37
|
|
38
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
39
|
+
|
38
40
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
39
41
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
40
42
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
@@ -10,6 +10,8 @@
|
|
10
10
|
|
11
11
|
.base_kgtz8x_b16hf96__46a206b1{--plasma_private-chip-outline-size:var(--plasma-chip-outline-size,0.125rem);position:relative;}.base_kgtz8x_b16hf96__46a206b1:focus{outline:none;}.base_kgtz8x_b16hf96__46a206b1::before{content:'';position:absolute;top:calc(-1 * var(--plasma_private-chip-outline-size));left:calc(-1 * var(--plasma_private-chip-outline-size));right:calc(-1 * var(--plasma_private-chip-outline-size));bottom:calc(-1 * var(--plasma_private-chip-outline-size));z-index:1;display:block;box-sizing:content-box;border:var(--plasma_private-chip-outline-size) solid transparent;border-radius:calc(var(--plasma-chip-border-radius) + var(--plasma_private-chip-outline-size));-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.base_kgtz8x_b16hf96__46a206b1.base_kgtz8x_focusVisible__46a206b1:focus::before,.base_kgtz8x_b16hf96__46a206b1[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 var(--plasma_private-chip-outline-size) var(--plasma-chip-focus-color);}
|
12
12
|
|
13
|
+
.base_3kce4h_bvcavwi__c6ad5ca5.base_3kce4h_chipPilled__c6ad5ca5{border-radius:var(--plasma-chip-pilled-border-radius);}
|
14
|
+
|
13
15
|
.Chip_styles_1mwwhiw_bol5daj__07da4d18{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
14
16
|
.Chip_styles_1mwwhiw_sj20on5__07da4d18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:var(--plasma-chip-left-content-margin-left);margin-right:var(--plasma-chip-left-content-margin-right);}
|
15
17
|
.Chip_styles_1mwwhiw_s1ror4o9__07da4d18{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|