@activecollab/components 1.0.368 → 1.0.370
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Chip/Chip.js +5 -5
- package/dist/cjs/components/Chip/Chip.js.map +1 -1
- package/dist/cjs/components/Chip/Styles.js +16 -65
- package/dist/cjs/components/Chip/Styles.js.map +1 -1
- package/dist/esm/components/Chip/Chip.d.ts.map +1 -1
- package/dist/esm/components/Chip/Chip.js +5 -5
- package/dist/esm/components/Chip/Chip.js.map +1 -1
- package/dist/esm/components/Chip/Styles.d.ts +4 -8
- package/dist/esm/components/Chip/Styles.d.ts.map +1 -1
- package/dist/esm/components/Chip/Styles.js +16 -65
- package/dist/esm/components/Chip/Styles.js.map +1 -1
- package/dist/index.js +21 -70
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -42,16 +42,16 @@ var Chip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
42
42
|
}, [variant, size]);
|
|
43
43
|
return /*#__PURE__*/_react.default.createElement(_Styles.ChipContainer, _extends({}, rest, {
|
|
44
44
|
ref: ref,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
size: size,
|
|
46
|
+
showClose: showClose,
|
|
47
|
+
color: color,
|
|
48
|
+
backgroundColor: backgroundColor,
|
|
49
49
|
"data-testid": "chip-container"
|
|
50
50
|
}), leftAdornment, /*#__PURE__*/_react.default.createElement(_Typography.Typography, _extends({
|
|
51
51
|
variant: _variant,
|
|
52
52
|
"data-testid": "chip-typography"
|
|
53
53
|
}, typographyProps), label), showClose ? /*#__PURE__*/_react.default.createElement(_Styles.ChipTrigger, {
|
|
54
|
-
|
|
54
|
+
size: size,
|
|
55
55
|
onClick: onClose,
|
|
56
56
|
className: closeClassName
|
|
57
57
|
}, /*#__PURE__*/_react.default.createElement(_Styles.ChipCloseIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","names":["Chip","React","forwardRef","ref","leftAdornment","label","onClose","size","color","backgroundColor","closeClassName","variant","typographyProps","rest","showClose","_variant","useMemo","displayName"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport {\n Typography,\n Variant,\n ITypographyProps,\n} from \"../Typography/Typography\";\n\nexport interface ChipProps {\n label: string;\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n leftAdornment?: ReactNode;\n size?: InputSize;\n color?: string;\n backgroundColor?: string;\n closeClassName?: string;\n variant?: Variant;\n typographyProps?: ITypographyProps;\n}\n\nexport const Chip = React.forwardRef<\n HTMLDivElement,\n ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(\n (\n {\n leftAdornment,\n label,\n onClose,\n size = \"regular\",\n color,\n backgroundColor,\n closeClassName,\n variant,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n const showClose = typeof onClose === \"function\";\n const _variant = useMemo(() => {\n if (typeof variant !== \"undefined\") {\n return variant;\n }\n switch (size) {\n case \"regular\":\n return \"Body 2\";\n case \"big\":\n return \"Body 1\";\n default:\n return \"Caption 1\";\n }\n }, [variant, size]);\n return (\n <ChipContainer\n {...rest}\n ref={ref}\n
|
|
1
|
+
{"version":3,"file":"Chip.js","names":["Chip","React","forwardRef","ref","leftAdornment","label","onClose","size","color","backgroundColor","closeClassName","variant","typographyProps","rest","showClose","_variant","useMemo","displayName"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport {\n Typography,\n Variant,\n ITypographyProps,\n} from \"../Typography/Typography\";\n\nexport interface ChipProps {\n label: string;\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n leftAdornment?: ReactNode;\n size?: InputSize;\n color?: string;\n backgroundColor?: string;\n closeClassName?: string;\n variant?: Variant;\n typographyProps?: ITypographyProps;\n}\n\nexport const Chip = React.forwardRef<\n HTMLDivElement,\n ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(\n (\n {\n leftAdornment,\n label,\n onClose,\n size = \"regular\",\n color,\n backgroundColor,\n closeClassName,\n variant,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n const showClose = typeof onClose === \"function\";\n const _variant = useMemo(() => {\n if (typeof variant !== \"undefined\") {\n return variant;\n }\n switch (size) {\n case \"regular\":\n return \"Body 2\";\n case \"big\":\n return \"Body 1\";\n default:\n return \"Caption 1\";\n }\n }, [variant, size]);\n return (\n <ChipContainer\n {...rest}\n ref={ref}\n size={size}\n showClose={showClose}\n color={color}\n backgroundColor={backgroundColor}\n data-testid=\"chip-container\"\n >\n {leftAdornment}\n <Typography\n variant={_variant}\n data-testid=\"chip-typography\"\n {...typographyProps}\n >\n {label}\n </Typography>\n {showClose ? (\n <ChipTrigger size={size} onClick={onClose} className={closeClassName}>\n <ChipCloseIcon fill={color ? color : \"currentColor\"} />\n </ChipTrigger>\n ) : null}\n </ChipContainer>\n );\n }\n);\n\nChip.displayName = \"Chip\";\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAIkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3B,IAAMA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAIlC,gBAaEC,GAAG,EACA;EAAA,IAZDC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IAAA,iBACPC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,KAAK,QAALA,KAAK;IACLC,eAAe,QAAfA,eAAe;IACfC,cAAc,QAAdA,cAAc;IACdC,OAAO,QAAPA,OAAO;IACPC,eAAe,QAAfA,eAAe;IACZC,IAAI;EAIT,IAAMC,SAAS,GAAG,OAAOR,OAAO,KAAK,UAAU;EAC/C,IAAMS,QAAQ,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC7B,IAAI,OAAOL,OAAO,KAAK,WAAW,EAAE;MAClC,OAAOA,OAAO;IAChB;IACA,QAAQJ,IAAI;MACV,KAAK,SAAS;QACZ,OAAO,QAAQ;MACjB,KAAK,KAAK;QACR,OAAO,QAAQ;MACjB;QACE,OAAO,WAAW;IAAC;EAEzB,CAAC,EAAE,CAACI,OAAO,EAAEJ,IAAI,CAAC,CAAC;EACnB,oBACE,6BAAC,qBAAa,eACRM,IAAI;IACR,GAAG,EAAEV,GAAI;IACT,IAAI,EAAEI,IAAK;IACX,SAAS,EAAEO,SAAU;IACrB,KAAK,EAAEN,KAAM;IACb,eAAe,EAAEC,eAAgB;IACjC,eAAY;EAAgB,IAE3BL,aAAa,eACd,6BAAC,sBAAU;IACT,OAAO,EAAEW,QAAS;IAClB,eAAY;EAAiB,GACzBH,eAAe,GAElBP,KAAK,CACK,EACZS,SAAS,gBACR,6BAAC,mBAAW;IAAC,IAAI,EAAEP,IAAK;IAAC,OAAO,EAAED,OAAQ;IAAC,SAAS,EAAEI;EAAe,gBACnE,6BAAC,qBAAa;IAAC,IAAI,EAAEF,KAAK,GAAGA,KAAK,GAAG;EAAe,EAAG,CAC3C,GACZ,IAAI,CACM;AAEpB,CAAC,CACF;AAAC;AAEFR,IAAI,CAACiB,WAAW,GAAG,MAAM"}
|
|
@@ -13,98 +13,49 @@ var _FontStyle = require("../FontStyle");
|
|
|
13
13
|
var _Styles = require("../Typography/Styles");
|
|
14
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
|
+
// prettier-ignore
|
|
16
17
|
var ChipContainer = _styledComponents.default.div.withConfig({
|
|
17
18
|
displayName: "Styles__ChipContainer",
|
|
18
19
|
componentId: "sc-7s0bd1-0"
|
|
19
|
-
})(["max-width:220px;", " ", " ", "
|
|
20
|
-
|
|
21
|
-
},
|
|
22
|
-
"borderRadius": "0.25rem"
|
|
23
|
-
}, {
|
|
24
|
-
"display": "flex"
|
|
25
|
-
}, {
|
|
26
|
-
"alignItems": "center"
|
|
27
|
-
}, {
|
|
28
|
-
"paddingLeft": "0.375rem"
|
|
29
|
-
}, {
|
|
30
|
-
"overflow": "hidden"
|
|
31
|
-
}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
|
|
32
|
-
"fontSize": "0.875rem"
|
|
33
|
-
}, {
|
|
34
|
-
"color": "var(--color-theme-900)"
|
|
35
|
-
}, {
|
|
36
|
-
"lineHeight": "1.375"
|
|
37
|
-
}, {
|
|
38
|
-
"letterSpacing": "0.02em"
|
|
39
|
-
}, {
|
|
40
|
-
"fontWeight": "400"
|
|
41
|
-
}, {
|
|
42
|
-
"backgroundColor": "var(--color-theme-400)"
|
|
43
|
-
}, _Styles.StyledTypography, {
|
|
44
|
-
"flex": "1 1 0%"
|
|
45
|
-
}, {
|
|
46
|
-
"overflow": "hidden",
|
|
47
|
-
"textOverflow": "ellipsis",
|
|
48
|
-
"whiteSpace": "nowrap"
|
|
49
|
-
}, function (_ref) {
|
|
50
|
-
var $color = _ref.$color;
|
|
51
|
-
return $color && (0, _styledComponents.css)(["", "{color:", ";}"], _Styles.StyledTypography, $color);
|
|
20
|
+
})(["align-items:center;border-radius:0.25rem;display:flex;height:1.5rem;max-width:220px;overflow:hidden;padding-left:0.375rem;", " ", " background-color:var(--color-theme-400);color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;line-height:1.375;", "{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, _Styles.StyledTypography, function (_ref) {
|
|
21
|
+
var color = _ref.color;
|
|
22
|
+
return color && (0, _styledComponents.css)(["", "{color:", ";}"], _Styles.StyledTypography, color);
|
|
52
23
|
}, function (_ref2) {
|
|
53
|
-
var
|
|
54
|
-
return
|
|
24
|
+
var backgroundColor = _ref2.backgroundColor;
|
|
25
|
+
return backgroundColor && (0, _styledComponents.css)(["background-color:", ";"], backgroundColor);
|
|
55
26
|
}, function (props) {
|
|
56
|
-
return props
|
|
57
|
-
"paddingRight": "0.375rem"
|
|
58
|
-
});
|
|
27
|
+
return props.showClose ? null : (0, _styledComponents.css)(["padding-right:0.375rem;"]);
|
|
59
28
|
}, function (props) {
|
|
60
|
-
return props
|
|
29
|
+
return props.size === "regular" && (0, _styledComponents.css)(["height:24px;"]);
|
|
61
30
|
}, function (props) {
|
|
62
|
-
return props
|
|
31
|
+
return props.size === "small" && (0, _styledComponents.css)(["height:18px;"]);
|
|
63
32
|
}, function (props) {
|
|
64
|
-
return props
|
|
33
|
+
return props.size === "big" && (0, _styledComponents.css)(["height:30px;"]);
|
|
65
34
|
});
|
|
66
35
|
exports.ChipContainer = ChipContainer;
|
|
67
36
|
ChipContainer.displayName = "ChipContainer";
|
|
68
37
|
var ChipLabel = _styledComponents.default.span.withConfig({
|
|
69
38
|
displayName: "Styles__ChipLabel",
|
|
70
39
|
componentId: "sc-7s0bd1-1"
|
|
71
|
-
})([""
|
|
72
|
-
"width": "100%"
|
|
73
|
-
}, {
|
|
74
|
-
"overflow": "hidden",
|
|
75
|
-
"textOverflow": "ellipsis",
|
|
76
|
-
"whiteSpace": "nowrap"
|
|
77
|
-
});
|
|
40
|
+
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;"]);
|
|
78
41
|
exports.ChipLabel = ChipLabel;
|
|
79
42
|
ChipLabel.displayName = "ChipLabel";
|
|
80
43
|
var ChipTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
|
|
81
44
|
displayName: "Styles__ChipTrigger",
|
|
82
45
|
componentId: "sc-7s0bd1-2"
|
|
83
|
-
})(["
|
|
84
|
-
"
|
|
85
|
-
}, {
|
|
86
|
-
"alignItems": "center"
|
|
87
|
-
}, {
|
|
88
|
-
"justifyContent": "center"
|
|
89
|
-
}, {
|
|
90
|
-
"marginLeft": "0.125rem"
|
|
91
|
-
}, {
|
|
92
|
-
"backgroundColor": "var(--color-theme-transparent-400)"
|
|
93
|
-
}, function (props) {
|
|
94
|
-
return props.$size === "regular" && (0, _styledComponents.css)(["height:24px;width:24px;"]);
|
|
46
|
+
})(["align-items:center;display:flex;justify-content:center;margin-left:0.125rem;&:hover{background-color:var(--color-theme-transparent-400);}", " ", " ", ""], function (props) {
|
|
47
|
+
return props.size === "regular" && (0, _styledComponents.css)(["height:24px;width:24px;"]);
|
|
95
48
|
}, function (props) {
|
|
96
|
-
return props
|
|
49
|
+
return props.size === "small" && (0, _styledComponents.css)(["height:18px;width:18px;"]);
|
|
97
50
|
}, function (props) {
|
|
98
|
-
return props
|
|
51
|
+
return props.size === "big" && (0, _styledComponents.css)(["height:30px;width:30px;"]);
|
|
99
52
|
});
|
|
100
53
|
exports.ChipTrigger = ChipTrigger;
|
|
101
54
|
ChipTrigger.displayName = "ChipTrigger";
|
|
102
55
|
var ChipCloseIcon = (0, _styledComponents.default)(_Icons.CloseSmallIcon).withConfig({
|
|
103
56
|
displayName: "Styles__ChipCloseIcon",
|
|
104
57
|
componentId: "sc-7s0bd1-3"
|
|
105
|
-
})([""
|
|
106
|
-
"color": "var(--color-theme-700)"
|
|
107
|
-
});
|
|
58
|
+
})(["color:var(--color-theme-700);"]);
|
|
108
59
|
exports.ChipCloseIcon = ChipCloseIcon;
|
|
109
60
|
ChipCloseIcon.displayName = "ChipCloseIcon";
|
|
110
61
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["ChipContainer","styled","div","FontStyle","BoxSizingStyle","StyledTypography","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["ChipContainer","styled","div","FontStyle","BoxSizingStyle","StyledTypography","color","css","backgroundColor","props","showClose","size","displayName","ChipLabel","span","ChipTrigger","Trigger","ChipCloseIcon","CloseSmallIcon"],"sources":["../../../../src/components/Chip/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CloseSmallIcon } from \"../Icons\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\nimport { FontStyle } from \"../FontStyle\";\nimport { StyledTypography } from \"../Typography/Styles\";\nimport type { ChipProps } from \"./Chip\";\n\n// prettier-ignore\nexport const ChipContainer = styled.div<Partial<ChipProps> & { showClose: boolean }>`\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n height: 1.5rem;\n max-width: 220px;\n overflow: hidden;\n padding-left: 0.375rem;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n line-height: 1.375;\n\n ${StyledTypography} {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n ${({ color }) =>\n color &&\n css`\n ${StyledTypography} {\n color: ${color};\n }\n `}\n\n ${({ backgroundColor }) =>\n backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n\n ${(props) =>\n props.showClose\n ? null\n : css`\n padding-right: 0.375rem;\n `}\n\n ${(props) =>\n props.size === \"regular\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 18px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 30px;\n `}\n`;\n\nChipContainer.displayName = \"ChipContainer\";\n\nexport const ChipLabel = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n`;\n\nChipLabel.displayName = \"ChipLabel\";\n\nexport const ChipTrigger = styled(Trigger)<Pick<ChipProps, \"size\">>`\n align-items: center;\n display: flex;\n justify-content: center;\n margin-left: 0.125rem;\n\n &:hover {\n background-color: var(--color-theme-transparent-400);\n }\n\n ${(props) =>\n props.size === \"regular\" &&\n css`\n height: 24px;\n width: 24px;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 18px;\n width: 18px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 30px;\n width: 30px;\n `}\n`;\n\nChipTrigger.displayName = \"ChipTrigger\";\n\nexport const ChipCloseIcon = styled(CloseSmallIcon)`\n color: var(--color-theme-700);\n`;\n\nChipCloseIcon.displayName = \"ChipCloseIcon\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAwD;AAAA;AAGxD;AACO,IAAMA,aAAa,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,iYASnCC,oBAAS,EACTC,8BAAc,EASdC,wBAAgB,EAOhB;EAAA,IAAGC,KAAK,QAALA,KAAK;EAAA,OACRA,KAAK,QACLC,qBAAG,yBACCF,wBAAgB,EACPC,KAAK,CAEjB;AAAA,GAED;EAAA,IAAGE,eAAe,SAAfA,eAAe;EAAA,OAClBA,eAAe,QACfD,qBAAG,8BACmBC,eAAe,CACpC;AAAA,GAED,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,SAAS,GACX,IAAI,OACJH,qBAAG,8BAEF;AAAA,GAEL,UAACE,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,SAAS,QACxBJ,qBAAG,mBAEF;AAAA,GAED,UAACE,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,OAAO,QACtBJ,qBAAG,mBAEF;AAAA,GAED,UAACE,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,KAAK,QACpBJ,qBAAG,mBAEF;AAAA,EACJ;AAAC;AAEFP,aAAa,CAACY,WAAW,GAAG,eAAe;AAEpC,IAAMC,SAAS,GAAGZ,yBAAM,CAACa,IAAI;EAAA;EAAA;AAAA,6EAKnC;AAAC;AAEFD,SAAS,CAACD,WAAW,GAAG,WAAW;AAE5B,IAAMG,WAAW,GAAG,IAAAd,yBAAM,EAACe,gBAAO,CAAC;EAAA;EAAA;AAAA,gKAUtC,UAACP,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,SAAS,QACxBJ,qBAAG,8BAGF;AAAA,GAED,UAACE,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,OAAO,QACtBJ,qBAAG,8BAGF;AAAA,GAED,UAACE,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,KAAK,QACpBJ,qBAAG,8BAGF;AAAA,EACJ;AAAC;AAEFQ,WAAW,CAACH,WAAW,GAAG,aAAa;AAEhC,IAAMK,aAAa,GAAG,IAAAhB,yBAAM,EAACiB,qBAAc,CAAC;EAAA;EAAA;AAAA,qCAElD;AAAC;AAEFD,aAAa,CAACL,WAAW,GAAG,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAEL,OAAO,EACP,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC;AAED,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAEL,OAAO,EACP,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC;AAED,eAAO,MAAM,IAAI,2sJA2DhB,CAAC"}
|
|
@@ -32,16 +32,16 @@ export var Chip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
32
32
|
}, [variant, size]);
|
|
33
33
|
return /*#__PURE__*/React.createElement(ChipContainer, _extends({}, rest, {
|
|
34
34
|
ref: ref,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
size: size,
|
|
36
|
+
showClose: showClose,
|
|
37
|
+
color: color,
|
|
38
|
+
backgroundColor: backgroundColor,
|
|
39
39
|
"data-testid": "chip-container"
|
|
40
40
|
}), leftAdornment, /*#__PURE__*/React.createElement(Typography, _extends({
|
|
41
41
|
variant: _variant,
|
|
42
42
|
"data-testid": "chip-typography"
|
|
43
43
|
}, typographyProps), label), showClose ? /*#__PURE__*/React.createElement(ChipTrigger, {
|
|
44
|
-
|
|
44
|
+
size: size,
|
|
45
45
|
onClick: onClose,
|
|
46
46
|
className: closeClassName
|
|
47
47
|
}, /*#__PURE__*/React.createElement(ChipCloseIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","names":["React","useMemo","ChipCloseIcon","ChipContainer","ChipTrigger","Typography","Chip","forwardRef","ref","leftAdornment","label","onClose","size","color","backgroundColor","closeClassName","variant","typographyProps","rest","showClose","_variant","displayName"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport {\n Typography,\n Variant,\n ITypographyProps,\n} from \"../Typography/Typography\";\n\nexport interface ChipProps {\n label: string;\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n leftAdornment?: ReactNode;\n size?: InputSize;\n color?: string;\n backgroundColor?: string;\n closeClassName?: string;\n variant?: Variant;\n typographyProps?: ITypographyProps;\n}\n\nexport const Chip = React.forwardRef<\n HTMLDivElement,\n ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(\n (\n {\n leftAdornment,\n label,\n onClose,\n size = \"regular\",\n color,\n backgroundColor,\n closeClassName,\n variant,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n const showClose = typeof onClose === \"function\";\n const _variant = useMemo(() => {\n if (typeof variant !== \"undefined\") {\n return variant;\n }\n switch (size) {\n case \"regular\":\n return \"Body 2\";\n case \"big\":\n return \"Body 1\";\n default:\n return \"Caption 1\";\n }\n }, [variant, size]);\n return (\n <ChipContainer\n {...rest}\n ref={ref}\n
|
|
1
|
+
{"version":3,"file":"Chip.js","names":["React","useMemo","ChipCloseIcon","ChipContainer","ChipTrigger","Typography","Chip","forwardRef","ref","leftAdornment","label","onClose","size","color","backgroundColor","closeClassName","variant","typographyProps","rest","showClose","_variant","displayName"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport {\n Typography,\n Variant,\n ITypographyProps,\n} from \"../Typography/Typography\";\n\nexport interface ChipProps {\n label: string;\n onClose?: React.MouseEventHandler<HTMLButtonElement>;\n leftAdornment?: ReactNode;\n size?: InputSize;\n color?: string;\n backgroundColor?: string;\n closeClassName?: string;\n variant?: Variant;\n typographyProps?: ITypographyProps;\n}\n\nexport const Chip = React.forwardRef<\n HTMLDivElement,\n ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(\n (\n {\n leftAdornment,\n label,\n onClose,\n size = \"regular\",\n color,\n backgroundColor,\n closeClassName,\n variant,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n const showClose = typeof onClose === \"function\";\n const _variant = useMemo(() => {\n if (typeof variant !== \"undefined\") {\n return variant;\n }\n switch (size) {\n case \"regular\":\n return \"Body 2\";\n case \"big\":\n return \"Body 1\";\n default:\n return \"Caption 1\";\n }\n }, [variant, size]);\n return (\n <ChipContainer\n {...rest}\n ref={ref}\n size={size}\n showClose={showClose}\n color={color}\n backgroundColor={backgroundColor}\n data-testid=\"chip-container\"\n >\n {leftAdornment}\n <Typography\n variant={_variant}\n data-testid=\"chip-typography\"\n {...typographyProps}\n >\n {label}\n </Typography>\n {showClose ? (\n <ChipTrigger size={size} onClick={onClose} className={closeClassName}>\n <ChipCloseIcon fill={color ? color : \"currentColor\"} />\n </ChipTrigger>\n ) : null}\n </ChipContainer>\n );\n }\n);\n\nChip.displayName = \"Chip\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAeC,OAAO,QAAQ,OAAO;AACjD,SAASC,aAAa,EAAEC,aAAa,EAAEC,WAAW,QAAQ,UAAU;AAEpE,SACEC,UAAU,QAGL,0BAA0B;AAcjC,OAAO,IAAMC,IAAI,gBAAGN,KAAK,CAACO,UAAU,CAIlC,gBAaEC,GAAG,EACA;EAAA,IAZDC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IAAA,iBACPC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,KAAK,QAALA,KAAK;IACLC,eAAe,QAAfA,eAAe;IACfC,cAAc,QAAdA,cAAc;IACdC,OAAO,QAAPA,OAAO;IACPC,eAAe,QAAfA,eAAe;IACZC,IAAI;EAIT,IAAMC,SAAS,GAAG,OAAOR,OAAO,KAAK,UAAU;EAC/C,IAAMS,QAAQ,GAAGnB,OAAO,CAAC,YAAM;IAC7B,IAAI,OAAOe,OAAO,KAAK,WAAW,EAAE;MAClC,OAAOA,OAAO;IAChB;IACA,QAAQJ,IAAI;MACV,KAAK,SAAS;QACZ,OAAO,QAAQ;MACjB,KAAK,KAAK;QACR,OAAO,QAAQ;MACjB;QACE,OAAO,WAAW;IAAC;EAEzB,CAAC,EAAE,CAACI,OAAO,EAAEJ,IAAI,CAAC,CAAC;EACnB,oBACE,oBAAC,aAAa,eACRM,IAAI;IACR,GAAG,EAAEV,GAAI;IACT,IAAI,EAAEI,IAAK;IACX,SAAS,EAAEO,SAAU;IACrB,KAAK,EAAEN,KAAM;IACb,eAAe,EAAEC,eAAgB;IACjC,eAAY;EAAgB,IAE3BL,aAAa,eACd,oBAAC,UAAU;IACT,OAAO,EAAEW,QAAS;IAClB,eAAY;EAAiB,GACzBH,eAAe,GAElBP,KAAK,CACK,EACZS,SAAS,gBACR,oBAAC,WAAW;IAAC,IAAI,EAAEP,IAAK;IAAC,OAAO,EAAED,OAAQ;IAAC,SAAS,EAAEI;EAAe,gBACnE,oBAAC,aAAa;IAAC,IAAI,EAAEF,KAAK,GAAGA,KAAK,GAAG;EAAe,EAAG,CAC3C,GACZ,IAAI,CACM;AAEpB,CAAC,CACF;AAEDP,IAAI,CAACe,WAAW,GAAG,MAAM"}
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
$color?: string | undefined;
|
|
6
|
-
$backgroundColor?: string | undefined;
|
|
2
|
+
import type { ChipProps } from "./Chip";
|
|
3
|
+
export declare const ChipContainer: import("styled-components").StyledComponent<"div", any, Partial<ChipProps> & {
|
|
4
|
+
showClose: boolean;
|
|
7
5
|
}, never>;
|
|
8
6
|
export declare const ChipLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
9
|
-
export declare const ChipTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | "slot" | "style" | "title" | "key" | "css" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cs" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw"> & import("react").RefAttributes<HTMLButtonElement>>, any,
|
|
10
|
-
$size?: string | undefined;
|
|
11
|
-
}, never>;
|
|
7
|
+
export declare const ChipTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | "slot" | "style" | "title" | "key" | "css" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cs" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw"> & import("react").RefAttributes<HTMLButtonElement>>, any, Pick<ChipProps, "size">, never>;
|
|
12
8
|
export declare const ChipCloseIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "css" | "name" | "type" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
|
|
13
9
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Chip/Styles.ts"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,eAAO,MAAM,aAAa;eAAgD,OAAO;SAgEhF,CAAC;AAIF,eAAO,MAAM,SAAS,qEAKrB,CAAC;AAIF,eAAO,MAAM,WAAW,i8JA8BvB,CAAC;AAIF,eAAO,MAAM,aAAa,grPAEzB,CAAC"}
|
|
@@ -4,94 +4,45 @@ import { BoxSizingStyle } from "../BoxSizingStyle";
|
|
|
4
4
|
import { Trigger } from "../Trigger";
|
|
5
5
|
import { FontStyle } from "../FontStyle";
|
|
6
6
|
import { StyledTypography } from "../Typography/Styles";
|
|
7
|
+
// prettier-ignore
|
|
7
8
|
export var ChipContainer = styled.div.withConfig({
|
|
8
9
|
displayName: "Styles__ChipContainer",
|
|
9
10
|
componentId: "sc-7s0bd1-0"
|
|
10
|
-
})(["max-width:220px;", " ", " ", "
|
|
11
|
-
|
|
12
|
-
},
|
|
13
|
-
"borderRadius": "0.25rem"
|
|
14
|
-
}, {
|
|
15
|
-
"display": "flex"
|
|
16
|
-
}, {
|
|
17
|
-
"alignItems": "center"
|
|
18
|
-
}, {
|
|
19
|
-
"paddingLeft": "0.375rem"
|
|
20
|
-
}, {
|
|
21
|
-
"overflow": "hidden"
|
|
22
|
-
}, FontStyle, BoxSizingStyle, {
|
|
23
|
-
"fontSize": "0.875rem"
|
|
24
|
-
}, {
|
|
25
|
-
"color": "var(--color-theme-900)"
|
|
26
|
-
}, {
|
|
27
|
-
"lineHeight": "1.375"
|
|
28
|
-
}, {
|
|
29
|
-
"letterSpacing": "0.02em"
|
|
30
|
-
}, {
|
|
31
|
-
"fontWeight": "400"
|
|
32
|
-
}, {
|
|
33
|
-
"backgroundColor": "var(--color-theme-400)"
|
|
34
|
-
}, StyledTypography, {
|
|
35
|
-
"flex": "1 1 0%"
|
|
36
|
-
}, {
|
|
37
|
-
"overflow": "hidden",
|
|
38
|
-
"textOverflow": "ellipsis",
|
|
39
|
-
"whiteSpace": "nowrap"
|
|
40
|
-
}, function (_ref) {
|
|
41
|
-
var $color = _ref.$color;
|
|
42
|
-
return $color && css(["", "{color:", ";}"], StyledTypography, $color);
|
|
11
|
+
})(["align-items:center;border-radius:0.25rem;display:flex;height:1.5rem;max-width:220px;overflow:hidden;padding-left:0.375rem;", " ", " background-color:var(--color-theme-400);color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;line-height:1.375;", "{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, StyledTypography, function (_ref) {
|
|
12
|
+
var color = _ref.color;
|
|
13
|
+
return color && css(["", "{color:", ";}"], StyledTypography, color);
|
|
43
14
|
}, function (_ref2) {
|
|
44
|
-
var
|
|
45
|
-
return
|
|
15
|
+
var backgroundColor = _ref2.backgroundColor;
|
|
16
|
+
return backgroundColor && css(["background-color:", ";"], backgroundColor);
|
|
46
17
|
}, function (props) {
|
|
47
|
-
return props
|
|
48
|
-
"paddingRight": "0.375rem"
|
|
49
|
-
});
|
|
18
|
+
return props.showClose ? null : css(["padding-right:0.375rem;"]);
|
|
50
19
|
}, function (props) {
|
|
51
|
-
return props
|
|
20
|
+
return props.size === "regular" && css(["height:24px;"]);
|
|
52
21
|
}, function (props) {
|
|
53
|
-
return props
|
|
22
|
+
return props.size === "small" && css(["height:18px;"]);
|
|
54
23
|
}, function (props) {
|
|
55
|
-
return props
|
|
24
|
+
return props.size === "big" && css(["height:30px;"]);
|
|
56
25
|
});
|
|
57
26
|
ChipContainer.displayName = "ChipContainer";
|
|
58
27
|
export var ChipLabel = styled.span.withConfig({
|
|
59
28
|
displayName: "Styles__ChipLabel",
|
|
60
29
|
componentId: "sc-7s0bd1-1"
|
|
61
|
-
})([""
|
|
62
|
-
"width": "100%"
|
|
63
|
-
}, {
|
|
64
|
-
"overflow": "hidden",
|
|
65
|
-
"textOverflow": "ellipsis",
|
|
66
|
-
"whiteSpace": "nowrap"
|
|
67
|
-
});
|
|
30
|
+
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;"]);
|
|
68
31
|
ChipLabel.displayName = "ChipLabel";
|
|
69
32
|
export var ChipTrigger = styled(Trigger).withConfig({
|
|
70
33
|
displayName: "Styles__ChipTrigger",
|
|
71
34
|
componentId: "sc-7s0bd1-2"
|
|
72
|
-
})(["
|
|
73
|
-
"
|
|
74
|
-
}, {
|
|
75
|
-
"alignItems": "center"
|
|
76
|
-
}, {
|
|
77
|
-
"justifyContent": "center"
|
|
78
|
-
}, {
|
|
79
|
-
"marginLeft": "0.125rem"
|
|
80
|
-
}, {
|
|
81
|
-
"backgroundColor": "var(--color-theme-transparent-400)"
|
|
82
|
-
}, function (props) {
|
|
83
|
-
return props.$size === "regular" && css(["height:24px;width:24px;"]);
|
|
35
|
+
})(["align-items:center;display:flex;justify-content:center;margin-left:0.125rem;&:hover{background-color:var(--color-theme-transparent-400);}", " ", " ", ""], function (props) {
|
|
36
|
+
return props.size === "regular" && css(["height:24px;width:24px;"]);
|
|
84
37
|
}, function (props) {
|
|
85
|
-
return props
|
|
38
|
+
return props.size === "small" && css(["height:18px;width:18px;"]);
|
|
86
39
|
}, function (props) {
|
|
87
|
-
return props
|
|
40
|
+
return props.size === "big" && css(["height:30px;width:30px;"]);
|
|
88
41
|
});
|
|
89
42
|
ChipTrigger.displayName = "ChipTrigger";
|
|
90
43
|
export var ChipCloseIcon = styled(CloseSmallIcon).withConfig({
|
|
91
44
|
displayName: "Styles__ChipCloseIcon",
|
|
92
45
|
componentId: "sc-7s0bd1-3"
|
|
93
|
-
})([""
|
|
94
|
-
"color": "var(--color-theme-700)"
|
|
95
|
-
});
|
|
46
|
+
})(["color:var(--color-theme-700);"]);
|
|
96
47
|
ChipCloseIcon.displayName = "ChipCloseIcon";
|
|
97
48
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","CloseSmallIcon","BoxSizingStyle","Trigger","FontStyle","StyledTypography","ChipContainer","div","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","CloseSmallIcon","BoxSizingStyle","Trigger","FontStyle","StyledTypography","ChipContainer","div","color","backgroundColor","props","showClose","size","displayName","ChipLabel","span","ChipTrigger","ChipCloseIcon"],"sources":["../../../../src/components/Chip/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CloseSmallIcon } from \"../Icons\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\nimport { FontStyle } from \"../FontStyle\";\nimport { StyledTypography } from \"../Typography/Styles\";\nimport type { ChipProps } from \"./Chip\";\n\n// prettier-ignore\nexport const ChipContainer = styled.div<Partial<ChipProps> & { showClose: boolean }>`\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n height: 1.5rem;\n max-width: 220px;\n overflow: hidden;\n padding-left: 0.375rem;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n line-height: 1.375;\n\n ${StyledTypography} {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n ${({ color }) =>\n color &&\n css`\n ${StyledTypography} {\n color: ${color};\n }\n `}\n\n ${({ backgroundColor }) =>\n backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n\n ${(props) =>\n props.showClose\n ? null\n : css`\n padding-right: 0.375rem;\n `}\n\n ${(props) =>\n props.size === \"regular\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 18px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 30px;\n `}\n`;\n\nChipContainer.displayName = \"ChipContainer\";\n\nexport const ChipLabel = styled.span`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n`;\n\nChipLabel.displayName = \"ChipLabel\";\n\nexport const ChipTrigger = styled(Trigger)<Pick<ChipProps, \"size\">>`\n align-items: center;\n display: flex;\n justify-content: center;\n margin-left: 0.125rem;\n\n &:hover {\n background-color: var(--color-theme-transparent-400);\n }\n\n ${(props) =>\n props.size === \"regular\" &&\n css`\n height: 24px;\n width: 24px;\n `}\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 18px;\n width: 18px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 30px;\n width: 30px;\n `}\n`;\n\nChipTrigger.displayName = \"ChipTrigger\";\n\nexport const ChipCloseIcon = styled(CloseSmallIcon)`\n color: var(--color-theme-700);\n`;\n\nChipCloseIcon.displayName = \"ChipCloseIcon\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,gBAAgB,QAAQ,sBAAsB;AAGvD;AACA,OAAO,IAAMC,aAAa,GAAGP,MAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,iYASnCH,SAAS,EACTF,cAAc,EASdG,gBAAgB,EAOhB;EAAA,IAAGG,KAAK,QAALA,KAAK;EAAA,OACRA,KAAK,IACLR,GAAG,wBACCK,gBAAgB,EACPG,KAAK,CAEjB;AAAA,GAED;EAAA,IAAGC,eAAe,SAAfA,eAAe;EAAA,OAClBA,eAAe,IACfT,GAAG,6BACmBS,eAAe,CACpC;AAAA,GAED,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,SAAS,GACX,IAAI,GACJX,GAAG,6BAEF;AAAA,GAEL,UAACU,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,SAAS,IACxBZ,GAAG,kBAEF;AAAA,GAED,UAACU,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,OAAO,IACtBZ,GAAG,kBAEF;AAAA,GAED,UAACU,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,KAAK,IACpBZ,GAAG,kBAEF;AAAA,EACJ;AAEDM,aAAa,CAACO,WAAW,GAAG,eAAe;AAE3C,OAAO,IAAMC,SAAS,GAAGf,MAAM,CAACgB,IAAI;EAAA;EAAA;AAAA,6EAKnC;AAEDD,SAAS,CAACD,WAAW,GAAG,WAAW;AAEnC,OAAO,IAAMG,WAAW,GAAGjB,MAAM,CAACI,OAAO,CAAC;EAAA;EAAA;AAAA,gKAUtC,UAACO,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,SAAS,IACxBZ,GAAG,6BAGF;AAAA,GAED,UAACU,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,OAAO,IACtBZ,GAAG,6BAGF;AAAA,GAED,UAACU,KAAK;EAAA,OACNA,KAAK,CAACE,IAAI,KAAK,KAAK,IACpBZ,GAAG,6BAGF;AAAA,EACJ;AAEDgB,WAAW,CAACH,WAAW,GAAG,aAAa;AAEvC,OAAO,IAAMI,aAAa,GAAGlB,MAAM,CAACE,cAAc,CAAC;EAAA;EAAA;AAAA,qCAElD;AAEDgB,aAAa,CAACJ,WAAW,GAAG,eAAe"}
|
package/dist/index.js
CHANGED
|
@@ -14582,95 +14582,46 @@
|
|
|
14582
14582
|
});
|
|
14583
14583
|
StyledChipWrapper.displayName = "StyledChipWrapper";
|
|
14584
14584
|
|
|
14585
|
+
// prettier-ignore
|
|
14585
14586
|
var ChipContainer = styled__default["default"].div.withConfig({
|
|
14586
14587
|
displayName: "Styles__ChipContainer",
|
|
14587
14588
|
componentId: "sc-7s0bd1-0"
|
|
14588
|
-
})(["max-width:220px;", " ", " ", "
|
|
14589
|
-
|
|
14590
|
-
|
|
14591
|
-
"borderRadius": "0.25rem"
|
|
14592
|
-
}, {
|
|
14593
|
-
"display": "flex"
|
|
14594
|
-
}, {
|
|
14595
|
-
"alignItems": "center"
|
|
14596
|
-
}, {
|
|
14597
|
-
"paddingLeft": "0.375rem"
|
|
14598
|
-
}, {
|
|
14599
|
-
"overflow": "hidden"
|
|
14600
|
-
}, FontStyle, BoxSizingStyle, {
|
|
14601
|
-
"fontSize": "0.875rem"
|
|
14602
|
-
}, {
|
|
14603
|
-
"color": "var(--color-theme-900)"
|
|
14604
|
-
}, {
|
|
14605
|
-
"lineHeight": "1.375"
|
|
14606
|
-
}, {
|
|
14607
|
-
"letterSpacing": "0.02em"
|
|
14608
|
-
}, {
|
|
14609
|
-
"fontWeight": "400"
|
|
14610
|
-
}, {
|
|
14611
|
-
"backgroundColor": "var(--color-theme-400)"
|
|
14612
|
-
}, StyledTypography, {
|
|
14613
|
-
"flex": "1 1 0%"
|
|
14614
|
-
}, {
|
|
14615
|
-
"overflow": "hidden",
|
|
14616
|
-
"textOverflow": "ellipsis",
|
|
14617
|
-
"whiteSpace": "nowrap"
|
|
14618
|
-
}, function (_ref) {
|
|
14619
|
-
var $color = _ref.$color;
|
|
14620
|
-
return $color && styled.css(["", "{color:", ";}"], StyledTypography, $color);
|
|
14589
|
+
})(["align-items:center;border-radius:0.25rem;display:flex;height:1.5rem;max-width:220px;overflow:hidden;padding-left:0.375rem;", " ", " background-color:var(--color-theme-400);color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;line-height:1.375;", "{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, StyledTypography, function (_ref) {
|
|
14590
|
+
var color = _ref.color;
|
|
14591
|
+
return color && styled.css(["", "{color:", ";}"], StyledTypography, color);
|
|
14621
14592
|
}, function (_ref2) {
|
|
14622
|
-
var
|
|
14623
|
-
return
|
|
14593
|
+
var backgroundColor = _ref2.backgroundColor;
|
|
14594
|
+
return backgroundColor && styled.css(["background-color:", ";"], backgroundColor);
|
|
14624
14595
|
}, function (props) {
|
|
14625
|
-
return props
|
|
14626
|
-
"paddingRight": "0.375rem"
|
|
14627
|
-
});
|
|
14596
|
+
return props.showClose ? null : styled.css(["padding-right:0.375rem;"]);
|
|
14628
14597
|
}, function (props) {
|
|
14629
|
-
return props
|
|
14598
|
+
return props.size === "regular" && styled.css(["height:24px;"]);
|
|
14630
14599
|
}, function (props) {
|
|
14631
|
-
return props
|
|
14600
|
+
return props.size === "small" && styled.css(["height:18px;"]);
|
|
14632
14601
|
}, function (props) {
|
|
14633
|
-
return props
|
|
14602
|
+
return props.size === "big" && styled.css(["height:30px;"]);
|
|
14634
14603
|
});
|
|
14635
14604
|
ChipContainer.displayName = "ChipContainer";
|
|
14636
14605
|
var ChipLabel = styled__default["default"].span.withConfig({
|
|
14637
14606
|
displayName: "Styles__ChipLabel",
|
|
14638
14607
|
componentId: "sc-7s0bd1-1"
|
|
14639
|
-
})([""
|
|
14640
|
-
"width": "100%"
|
|
14641
|
-
}, {
|
|
14642
|
-
"overflow": "hidden",
|
|
14643
|
-
"textOverflow": "ellipsis",
|
|
14644
|
-
"whiteSpace": "nowrap"
|
|
14645
|
-
});
|
|
14608
|
+
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;"]);
|
|
14646
14609
|
ChipLabel.displayName = "ChipLabel";
|
|
14647
14610
|
var ChipTrigger = styled__default["default"](Trigger).withConfig({
|
|
14648
14611
|
displayName: "Styles__ChipTrigger",
|
|
14649
14612
|
componentId: "sc-7s0bd1-2"
|
|
14650
|
-
})(["
|
|
14651
|
-
"
|
|
14652
|
-
}, {
|
|
14653
|
-
"alignItems": "center"
|
|
14654
|
-
}, {
|
|
14655
|
-
"justifyContent": "center"
|
|
14656
|
-
}, {
|
|
14657
|
-
"marginLeft": "0.125rem"
|
|
14658
|
-
}, {
|
|
14659
|
-
"backgroundColor": "var(--color-theme-transparent-400)"
|
|
14613
|
+
})(["align-items:center;display:flex;justify-content:center;margin-left:0.125rem;&:hover{background-color:var(--color-theme-transparent-400);}", " ", " ", ""], function (props) {
|
|
14614
|
+
return props.size === "regular" && styled.css(["height:24px;width:24px;"]);
|
|
14660
14615
|
}, function (props) {
|
|
14661
|
-
return props
|
|
14616
|
+
return props.size === "small" && styled.css(["height:18px;width:18px;"]);
|
|
14662
14617
|
}, function (props) {
|
|
14663
|
-
return props
|
|
14664
|
-
}, function (props) {
|
|
14665
|
-
return props.$size === "big" && styled.css(["height:30px;width:30px;"]);
|
|
14618
|
+
return props.size === "big" && styled.css(["height:30px;width:30px;"]);
|
|
14666
14619
|
});
|
|
14667
14620
|
ChipTrigger.displayName = "ChipTrigger";
|
|
14668
14621
|
var ChipCloseIcon = styled__default["default"](CloseSmallIcon$1).withConfig({
|
|
14669
14622
|
displayName: "Styles__ChipCloseIcon",
|
|
14670
14623
|
componentId: "sc-7s0bd1-3"
|
|
14671
|
-
})([""
|
|
14672
|
-
"color": "var(--color-theme-700)"
|
|
14673
|
-
});
|
|
14624
|
+
})(["color:var(--color-theme-700);"]);
|
|
14674
14625
|
ChipCloseIcon.displayName = "ChipCloseIcon";
|
|
14675
14626
|
|
|
14676
14627
|
var _excluded$j = ["leftAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "variant", "typographyProps"];
|
|
@@ -14702,16 +14653,16 @@
|
|
|
14702
14653
|
}, [variant, size]);
|
|
14703
14654
|
return /*#__PURE__*/React__default["default"].createElement(ChipContainer, _extends({}, rest, {
|
|
14704
14655
|
ref: ref,
|
|
14705
|
-
|
|
14706
|
-
|
|
14707
|
-
|
|
14708
|
-
|
|
14656
|
+
size: size,
|
|
14657
|
+
showClose: showClose,
|
|
14658
|
+
color: color,
|
|
14659
|
+
backgroundColor: backgroundColor,
|
|
14709
14660
|
"data-testid": "chip-container"
|
|
14710
14661
|
}), leftAdornment, /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
|
|
14711
14662
|
variant: _variant,
|
|
14712
14663
|
"data-testid": "chip-typography"
|
|
14713
14664
|
}, typographyProps), label), showClose ? /*#__PURE__*/React__default["default"].createElement(ChipTrigger, {
|
|
14714
|
-
|
|
14665
|
+
size: size,
|
|
14715
14666
|
onClick: onClose,
|
|
14716
14667
|
className: closeClassName
|
|
14717
14668
|
}, /*#__PURE__*/React__default["default"].createElement(ChipCloseIcon, {
|