@remember-web/primitive 0.2.11 → 0.2.12
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/src/Chips/Chip/const.cjs.js +24 -4
- package/dist/src/Chips/Chip/const.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/const.d.ts.map +1 -1
- package/dist/src/Chips/Chip/const.esm.js +25 -5
- package/dist/src/Chips/Chip/const.esm.js.map +1 -1
- package/dist/src/Chips/Chip/styles.cjs.js +1 -1
- package/dist/src/Chips/Chip/styles.cjs.js.map +1 -1
- package/dist/src/Chips/Chip/styles.esm.js +1 -1
- package/dist/src/Chips/Chip/styles.esm.js.map +1 -1
- package/dist/src/Chips/Chip/types.d.ts +1 -1
- package/dist/src/Chips/Chip/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Chips/Chip/const.ts +25 -4
- package/src/Chips/Chip/styles.ts +1 -1
- package/src/Chips/Chip/types.ts +6 -1
|
@@ -39,6 +39,12 @@ var CHIP_VARIANT_STYLE = {
|
|
|
39
39
|
color: mixin.contents999,
|
|
40
40
|
leftIconColor: mixin.contents999,
|
|
41
41
|
deleteButtonColor: mixin.contents999
|
|
42
|
+
},
|
|
43
|
+
selectedHover: {
|
|
44
|
+
backgroundColor: mixin.contents100,
|
|
45
|
+
color: mixin.contents999,
|
|
46
|
+
leftIconColor: mixin.contents999,
|
|
47
|
+
deleteButtonColor: mixin.contents999
|
|
42
48
|
}
|
|
43
49
|
},
|
|
44
50
|
outline: {
|
|
@@ -69,6 +75,13 @@ var CHIP_VARIANT_STYLE = {
|
|
|
69
75
|
leftIconColor: mixin.contents999,
|
|
70
76
|
deleteButtonColor: mixin.contents999,
|
|
71
77
|
border: '1px solid transparent'
|
|
78
|
+
},
|
|
79
|
+
selectedHover: {
|
|
80
|
+
backgroundColor: mixin.contents100,
|
|
81
|
+
color: mixin.contents999,
|
|
82
|
+
leftIconColor: mixin.contents999,
|
|
83
|
+
deleteButtonColor: mixin.contents999,
|
|
84
|
+
border: '1px solid transparent'
|
|
72
85
|
}
|
|
73
86
|
},
|
|
74
87
|
dashedLine: {
|
|
@@ -94,11 +107,18 @@ var CHIP_VARIANT_STYLE = {
|
|
|
94
107
|
border: "1px dashed ".concat(mixin.contents200)
|
|
95
108
|
},
|
|
96
109
|
selected: {
|
|
97
|
-
backgroundColor: mixin.
|
|
98
|
-
color: mixin.
|
|
99
|
-
leftIconColor: mixin.
|
|
100
|
-
deleteButtonColor: mixin.
|
|
110
|
+
backgroundColor: mixin.bg100,
|
|
111
|
+
color: mixin.contents000,
|
|
112
|
+
leftIconColor: mixin.contents000,
|
|
113
|
+
deleteButtonColor: mixin.contents000,
|
|
101
114
|
border: "1px solid ".concat(mixin.primary100)
|
|
115
|
+
},
|
|
116
|
+
selectedHover: {
|
|
117
|
+
backgroundColor: mixin.bg100,
|
|
118
|
+
color: mixin.contents100,
|
|
119
|
+
leftIconColor: mixin.contents100,
|
|
120
|
+
deleteButtonColor: mixin.contents100,
|
|
121
|
+
border: "1px solid ".concat(mixin.contents100)
|
|
102
122
|
}
|
|
103
123
|
}
|
|
104
124
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n typography: 'Caption1',\n padding: '8px 10px',\n height: '28px',\n },\n medium: {\n typography: 'UIBody3',\n padding: '8px 12px',\n height: '30px',\n },\n} as const satisfies Record<ChipSize, unknown>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor:
|
|
1
|
+
{"version":3,"file":"const.cjs.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n typography: 'Caption1',\n padding: '8px 10px',\n height: '28px',\n },\n medium: {\n typography: 'UIBody3',\n padding: '8px 12px',\n height: '30px',\n },\n} as const satisfies Record<ChipSize, unknown>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","outline","bg100","border","concat","dashedLine","contents000"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/const.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAyB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE1E,eAAO,MAAM,eAAe;;;;;;;;;;;CAWkB,CAAC;AAE/C,eAAO,MAAM,kBAAkB,EAAE,mBA6GgB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { bg200, contents150, contents200, contents100, bg300, contents300, primary100, contents999, bg100 } from '@remember-web/mixin';
|
|
1
|
+
import { bg200, contents150, contents200, contents100, bg300, contents300, primary100, contents999, bg100, contents000 } from '@remember-web/mixin';
|
|
2
2
|
|
|
3
3
|
var CHIP_SIZE_STYLE = {
|
|
4
4
|
small: {
|
|
@@ -37,6 +37,12 @@ var CHIP_VARIANT_STYLE = {
|
|
|
37
37
|
color: contents999,
|
|
38
38
|
leftIconColor: contents999,
|
|
39
39
|
deleteButtonColor: contents999
|
|
40
|
+
},
|
|
41
|
+
selectedHover: {
|
|
42
|
+
backgroundColor: contents100,
|
|
43
|
+
color: contents999,
|
|
44
|
+
leftIconColor: contents999,
|
|
45
|
+
deleteButtonColor: contents999
|
|
40
46
|
}
|
|
41
47
|
},
|
|
42
48
|
outline: {
|
|
@@ -67,6 +73,13 @@ var CHIP_VARIANT_STYLE = {
|
|
|
67
73
|
leftIconColor: contents999,
|
|
68
74
|
deleteButtonColor: contents999,
|
|
69
75
|
border: '1px solid transparent'
|
|
76
|
+
},
|
|
77
|
+
selectedHover: {
|
|
78
|
+
backgroundColor: contents100,
|
|
79
|
+
color: contents999,
|
|
80
|
+
leftIconColor: contents999,
|
|
81
|
+
deleteButtonColor: contents999,
|
|
82
|
+
border: '1px solid transparent'
|
|
70
83
|
}
|
|
71
84
|
},
|
|
72
85
|
dashedLine: {
|
|
@@ -92,11 +105,18 @@ var CHIP_VARIANT_STYLE = {
|
|
|
92
105
|
border: "1px dashed ".concat(contents200)
|
|
93
106
|
},
|
|
94
107
|
selected: {
|
|
95
|
-
backgroundColor:
|
|
96
|
-
color:
|
|
97
|
-
leftIconColor:
|
|
98
|
-
deleteButtonColor:
|
|
108
|
+
backgroundColor: bg100,
|
|
109
|
+
color: contents000,
|
|
110
|
+
leftIconColor: contents000,
|
|
111
|
+
deleteButtonColor: contents000,
|
|
99
112
|
border: "1px solid ".concat(primary100)
|
|
113
|
+
},
|
|
114
|
+
selectedHover: {
|
|
115
|
+
backgroundColor: bg100,
|
|
116
|
+
color: contents100,
|
|
117
|
+
leftIconColor: contents100,
|
|
118
|
+
deleteButtonColor: contents100,
|
|
119
|
+
border: "1px solid ".concat(contents100)
|
|
100
120
|
}
|
|
101
121
|
}
|
|
102
122
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n typography: 'Caption1',\n padding: '8px 10px',\n height: '28px',\n },\n medium: {\n typography: 'UIBody3',\n padding: '8px 12px',\n height: '30px',\n },\n} as const satisfies Record<ChipSize, unknown>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor:
|
|
1
|
+
{"version":3,"file":"const.esm.js","sources":["../../../../src/Chips/Chip/const.ts"],"sourcesContent":["import {\n bg100,\n bg200,\n bg300,\n contents000,\n contents100,\n contents150,\n contents200,\n contents300,\n contents999,\n primary100,\n} from '@remember-web/mixin';\nimport type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';\n\nexport const CHIP_SIZE_STYLE = {\n small: {\n typography: 'Caption1',\n padding: '8px 10px',\n height: '28px',\n },\n medium: {\n typography: 'UIBody3',\n padding: '8px 12px',\n height: '30px',\n },\n} as const satisfies Record<ChipSize, unknown>;\n\nexport const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {\n filled: {\n default: {\n backgroundColor: bg200,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n },\n hover: {\n backgroundColor: bg200,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n },\n disabled: {\n backgroundColor: bg300,\n color: contents300,\n leftIconColor: contents300,\n deleteButtonColor: contents300,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n },\n },\n\n outline: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px solid ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px solid ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px solid ${contents200}`,\n },\n selected: {\n backgroundColor: primary100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n selectedHover: {\n backgroundColor: contents100,\n color: contents999,\n leftIconColor: contents999,\n deleteButtonColor: contents999,\n border: '1px solid transparent',\n },\n },\n\n dashedLine: {\n default: {\n backgroundColor: bg100,\n color: contents150,\n leftIconColor: contents150,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents150}`,\n },\n hover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents150,\n border: `1px dashed ${contents100}`,\n },\n disabled: {\n backgroundColor: bg100,\n color: contents200,\n leftIconColor: contents200,\n deleteButtonColor: contents200,\n border: `1px dashed ${contents200}`,\n },\n selected: {\n backgroundColor: bg100,\n color: contents000,\n leftIconColor: contents000,\n deleteButtonColor: contents000,\n border: `1px solid ${primary100}`,\n },\n selectedHover: {\n backgroundColor: bg100,\n color: contents100,\n leftIconColor: contents100,\n deleteButtonColor: contents100,\n border: `1px solid ${contents100}`,\n },\n },\n} as const satisfies Record<ChipVariant, unknown>;\n"],"names":["CHIP_SIZE_STYLE","small","typography","padding","height","medium","CHIP_VARIANT_STYLE","filled","backgroundColor","bg200","color","contents150","leftIconColor","deleteButtonColor","contents200","hover","contents100","disabled","bg300","contents300","selected","primary100","contents999","selectedHover","outline","bg100","border","concat","dashedLine","contents000"],"mappings":";;AAcO,IAAMA,eAAe,GAAG;AAC7BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,UAAU,EAAE,UAAU;AACtBC,IAAAA,OAAO,EAAE,UAAU;AACnBC,IAAAA,MAAM,EAAE,MAAA;GACT;AACDC,EAAAA,MAAM,EAAE;AACNH,IAAAA,UAAU,EAAE,SAAS;AACrBC,IAAAA,OAAO,EAAE,UAAU;AACnBC,IAAAA,MAAM,EAAE,MAAA;AACV,GAAA;AACF,EAA8C;AAEvC,IAAME,kBAAuC,GAAG;AACrDC,EAAAA,MAAM,EAAE;IACN,SAAS,EAAA;AACPC,MAAAA,eAAe,EAAEC,KAAK;AACtBC,MAAAA,KAAK,EAAEC,WAAW;AAClBC,MAAAA,aAAa,EAAED,WAAW;AAC1BE,MAAAA,iBAAiB,EAAEC,WAAAA;KACpB;AACDC,IAAAA,KAAK,EAAE;AACLP,MAAAA,eAAe,EAAEC,KAAK;AACtBC,MAAAA,KAAK,EAAEM,WAAW;AAClBJ,MAAAA,aAAa,EAAEI,WAAW;AAC1BH,MAAAA,iBAAiB,EAAEF,WAAAA;KACpB;AACDM,IAAAA,QAAQ,EAAE;AACRT,MAAAA,eAAe,EAAEU,KAAK;AACtBR,MAAAA,KAAK,EAAES,WAAW;AAClBP,MAAAA,aAAa,EAAEO,WAAW;AAC1BN,MAAAA,iBAAiB,EAAEM,WAAAA;KACpB;AACDC,IAAAA,QAAQ,EAAE;AACRZ,MAAAA,eAAe,EAAEa,UAAU;AAC3BX,MAAAA,KAAK,EAAEY,WAAW;AAClBV,MAAAA,aAAa,EAAEU,WAAW;AAC1BT,MAAAA,iBAAiB,EAAES,WAAAA;KACpB;AACDC,IAAAA,aAAa,EAAE;AACbf,MAAAA,eAAe,EAAEQ,WAAW;AAC5BN,MAAAA,KAAK,EAAEY,WAAW;AAClBV,MAAAA,aAAa,EAAEU,WAAW;AAC1BT,MAAAA,iBAAiB,EAAES,WAAAA;AACrB,KAAA;GACD;AAEDE,EAAAA,OAAO,EAAE;IACP,SAAS,EAAA;AACPhB,MAAAA,eAAe,EAAEiB,KAAK;AACtBf,MAAAA,KAAK,EAAEC,WAAW;AAClBC,MAAAA,aAAa,EAAED,WAAW;AAC1BE,MAAAA,iBAAiB,EAAEC,WAAW;MAC9BY,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAehB,WAAW,CAAA;KACjC;AACDI,IAAAA,KAAK,EAAE;AACLP,MAAAA,eAAe,EAAEiB,KAAK;AACtBf,MAAAA,KAAK,EAAEM,WAAW;AAClBJ,MAAAA,aAAa,EAAEI,WAAW;AAC1BH,MAAAA,iBAAiB,EAAEF,WAAW;MAC9Be,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAeX,WAAW,CAAA;KACjC;AACDC,IAAAA,QAAQ,EAAE;AACRT,MAAAA,eAAe,EAAEiB,KAAK;AACtBf,MAAAA,KAAK,EAAEI,WAAW;AAClBF,MAAAA,aAAa,EAAEE,WAAW;AAC1BD,MAAAA,iBAAiB,EAAEC,WAAW;MAC9BY,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAeb,WAAW,CAAA;KACjC;AACDM,IAAAA,QAAQ,EAAE;AACRZ,MAAAA,eAAe,EAAEa,UAAU;AAC3BX,MAAAA,KAAK,EAAEY,WAAW;AAClBV,MAAAA,aAAa,EAAEU,WAAW;AAC1BT,MAAAA,iBAAiB,EAAES,WAAW;AAC9BI,MAAAA,MAAM,EAAE,uBAAA;KACT;AACDH,IAAAA,aAAa,EAAE;AACbf,MAAAA,eAAe,EAAEQ,WAAW;AAC5BN,MAAAA,KAAK,EAAEY,WAAW;AAClBV,MAAAA,aAAa,EAAEU,WAAW;AAC1BT,MAAAA,iBAAiB,EAAES,WAAW;AAC9BI,MAAAA,MAAM,EAAE,uBAAA;AACV,KAAA;GACD;AAEDE,EAAAA,UAAU,EAAE;IACV,SAAS,EAAA;AACPpB,MAAAA,eAAe,EAAEiB,KAAK;AACtBf,MAAAA,KAAK,EAAEC,WAAW;AAClBC,MAAAA,aAAa,EAAED,WAAW;AAC1BE,MAAAA,iBAAiB,EAAEC,WAAW;MAC9BY,MAAM,EAAA,aAAA,CAAAC,MAAA,CAAgBhB,WAAW,CAAA;KAClC;AACDI,IAAAA,KAAK,EAAE;AACLP,MAAAA,eAAe,EAAEiB,KAAK;AACtBf,MAAAA,KAAK,EAAEM,WAAW;AAClBJ,MAAAA,aAAa,EAAEI,WAAW;AAC1BH,MAAAA,iBAAiB,EAAEF,WAAW;MAC9Be,MAAM,EAAA,aAAA,CAAAC,MAAA,CAAgBX,WAAW,CAAA;KAClC;AACDC,IAAAA,QAAQ,EAAE;AACRT,MAAAA,eAAe,EAAEiB,KAAK;AACtBf,MAAAA,KAAK,EAAEI,WAAW;AAClBF,MAAAA,aAAa,EAAEE,WAAW;AAC1BD,MAAAA,iBAAiB,EAAEC,WAAW;MAC9BY,MAAM,EAAA,aAAA,CAAAC,MAAA,CAAgBb,WAAW,CAAA;KAClC;AACDM,IAAAA,QAAQ,EAAE;AACRZ,MAAAA,eAAe,EAAEiB,KAAK;AACtBf,MAAAA,KAAK,EAAEmB,WAAW;AAClBjB,MAAAA,aAAa,EAAEiB,WAAW;AAC1BhB,MAAAA,iBAAiB,EAAEgB,WAAW;MAC9BH,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAeN,UAAU,CAAA;KAChC;AACDE,IAAAA,aAAa,EAAE;AACbf,MAAAA,eAAe,EAAEiB,KAAK;AACtBf,MAAAA,KAAK,EAAEM,WAAW;AAClBJ,MAAAA,aAAa,EAAEI,WAAW;AAC1BH,MAAAA,iBAAiB,EAAEG,WAAW;MAC9BU,MAAM,EAAA,YAAA,CAAAC,MAAA,CAAeX,WAAW,CAAA;AAClC,KAAA;AACF,GAAA;AACF;;;;"}
|
|
@@ -26,7 +26,7 @@ var getVariantStyles = function getVariantStyles(props) {
|
|
|
26
26
|
var getStateStyle = function getStateStyle(state) {
|
|
27
27
|
return styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n color: ", ";\n border: ", ";\n --left-icon-color: ", ";\n --delete-button-color: ", ";\n "])), _const.CHIP_VARIANT_STYLE[$variant][state].backgroundColor, _const.CHIP_VARIANT_STYLE[$variant][state].color, _const.CHIP_VARIANT_STYLE[$variant][state].border || 'none', _const.CHIP_VARIANT_STYLE[$variant][state].leftIconColor, _const.CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor);
|
|
28
28
|
};
|
|
29
|
-
return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n "])), getStateStyle('default'), $clickable && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", ":not([data-chip-disabled=\"true\"]) {\n ", " \n }\n "])), getStateStyle('hover'), $selected ? '&' : '&:active', getStateStyle('selected')), getStateStyle('disabled'));
|
|
29
|
+
return styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n "])), getStateStyle('default'), $clickable && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", ":not([data-chip-disabled=\"true\"]) {\n ", " \n }\n "])), getStateStyle($selected ? 'selectedHover' : 'hover'), $selected ? '&' : '&:active', getStateStyle('selected')), getStateStyle('disabled'));
|
|
30
30
|
};
|
|
31
31
|
var StyledChip = styled__default.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n ", "\n"])), function (_ref) {
|
|
32
32
|
var $size = _ref.$size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle('hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: center;\n transition: all 0.2s ease-in;\n\n height: ${CHIP_SIZE_STYLE[$size].height};\n padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n\n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","height","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":";;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAA8B,EAAK;AAC3D,EAAA,IAAAC,eAAA,GAAuDD,KAAK,CAApDE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,eAAA;IAAEE,SAAS,GAAiBH,KAAK,CAA/BG,SAAS;IAAEC,UAAU,GAAKJ,KAAK,CAApBI,UAAU,CAAA;AAClD,EAAA,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAgB,EAAA;IAAA,OAAKC,UAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CACzBC,CAAAA,0BAAAA,EAAAA,gBAAAA,EAAAA,iBAAAA,EAAAA,4BAAAA,EAAAA,gCAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,EAAAA,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACK,eAAe,EAC9DD,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACM,KAAK,EACxCF,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACO,MAAM,IAAI,MAAM,EACzCH,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACQ,aAAa,EAC7CJ,yBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACS,iBAAiB,CAAA,CAAA;GAC/E,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: center;\n transition: all 0.2s ease-in;\n\n height: ${CHIP_SIZE_STYLE[$size].height};\n padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n\n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","height","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}
|
|
@@ -17,7 +17,7 @@ var getVariantStyles = function getVariantStyles(props) {
|
|
|
17
17
|
var getStateStyle = function getStateStyle(state) {
|
|
18
18
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n color: ", ";\n border: ", ";\n --left-icon-color: ", ";\n --delete-button-color: ", ";\n "])), CHIP_VARIANT_STYLE[$variant][state].backgroundColor, CHIP_VARIANT_STYLE[$variant][state].color, CHIP_VARIANT_STYLE[$variant][state].border || 'none', CHIP_VARIANT_STYLE[$variant][state].leftIconColor, CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor);
|
|
19
19
|
};
|
|
20
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n "])), getStateStyle('default'), $clickable && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", ":not([data-chip-disabled=\"true\"]) {\n ", " \n }\n "])), getStateStyle('hover'), $selected ? '&' : '&:active', getStateStyle('selected')), getStateStyle('disabled'));
|
|
20
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n\n ", "\n \n &[data-chip-disabled='true'] {\n ", "\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n "])), getStateStyle('default'), $clickable && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &:hover:not([data-chip-disabled='true']) {\n ", "\n }\n\n ", ":not([data-chip-disabled=\"true\"]) {\n ", " \n }\n "])), getStateStyle($selected ? 'selectedHover' : 'hover'), $selected ? '&' : '&:active', getStateStyle('selected')), getStateStyle('disabled'));
|
|
21
21
|
};
|
|
22
22
|
var StyledChip = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref) {
|
|
23
23
|
var $size = _ref.$size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle('hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: center;\n transition: all 0.2s ease-in;\n\n height: ${CHIP_SIZE_STYLE[$size].height};\n padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n\n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","height","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":";;;;;;;;;;;AAKA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,KAA8B,EAAK;AAC3D,EAAA,IAAAC,eAAA,GAAuDD,KAAK,CAApDE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,eAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,eAAA;IAAEE,SAAS,GAAiBH,KAAK,CAA/BG,SAAS;IAAEC,UAAU,GAAKJ,KAAK,CAApBI,UAAU,CAAA;AAClD,EAAA,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAgB,EAAA;IAAA,OAAKC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CACzBC,CAAAA,0BAAAA,EAAAA,gBAAAA,EAAAA,iBAAAA,EAAAA,4BAAAA,EAAAA,gCAAAA,EAAAA,OAAAA,CAAAA,CAAAA,CAAAA,EAAAA,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACK,eAAe,EAC9DD,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACM,KAAK,EACxCF,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACO,MAAM,IAAI,MAAM,EACzCH,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACQ,aAAa,EAC7CJ,kBAAkB,CAACR,QAAQ,CAAC,CAACI,KAAK,CAAC,CAACS,iBAAiB,CAAA,CAAA;GAC/E,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Chips/Chip/styles.ts"],"sourcesContent":["import { getTypographyStyles } from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport { CHIP_SIZE_STYLE, CHIP_VARIANT_STYLE } from './const';\nimport type { ChipState, ChipStyleProps } from './types';\n\nconst getVariantStyles = (props: Partial<ChipStyleProps>) => {\n const { $variant = 'filled', $selected, $clickable } = props;\n const getStateStyle = (state: ChipState) => css`\n background-color: ${CHIP_VARIANT_STYLE[$variant][state].backgroundColor};\n color: ${CHIP_VARIANT_STYLE[$variant][state].color};\n border: ${CHIP_VARIANT_STYLE[$variant][state].border || 'none'};\n --left-icon-color: ${CHIP_VARIANT_STYLE[$variant][state].leftIconColor};\n --delete-button-color: ${CHIP_VARIANT_STYLE[$variant][state].deleteButtonColor};\n `;\n\n return css`\n ${getStateStyle('default')};\n\n ${\n $clickable &&\n css`\n &:hover:not([data-chip-disabled='true']) {\n ${getStateStyle($selected ? 'selectedHover' : 'hover')}\n }\n\n ${$selected ? '&' : '&:active'}:not([data-chip-disabled=\"true\"]) {\n ${getStateStyle('selected')} \n }\n `\n }\n \n &[data-chip-disabled='true'] {\n ${getStateStyle('disabled')}\n cursor: not-allowed;\n }\n\n & svg {\n color: var(--left-icon-color);\n }\n\n .delete-button svg {\n color: var(--delete-button-color);\n }\n `;\n};\n\nexport const StyledChip = styled.div<ChipStyleProps>`\n ${({ $size, $variant, $clickable = false, ...props }) => css`\n box-sizing: border-box;\n user-select: none;\n cursor: ${$clickable ? 'pointer' : 'default'};\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n gap: 4px;\n\n width: fit-content;\n border-radius: 50px;\n text-align: center;\n transition: all 0.2s ease-in;\n\n height: ${CHIP_SIZE_STYLE[$size].height};\n padding: ${CHIP_SIZE_STYLE[$size].padding};\n\n ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}\n\n ${getVariantStyles({ $variant, $clickable, ...props })}\n `}\n`;\n\nexport const ButtonWrapper = styled.button`\n all: unset;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n `;\n"],"names":["getVariantStyles","props","_props$$variant","$variant","$selected","$clickable","getStateStyle","state","css","_templateObject","_taggedTemplateLiteral","CHIP_VARIANT_STYLE","backgroundColor","color","border","leftIconColor","deleteButtonColor","_templateObject2","_templateObject3","StyledChip","styled","div","_templateObject4","_ref","$size","_ref$$clickable","_objectWithoutProperties","_excluded","_templateObject5","CHIP_SIZE_STYLE","height","padding","getTypographyStyles","typography","_objectSpread","ButtonWrapper","button","_templateObject6"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ type BaseChipProps = {
|
|
|
23
23
|
disabled?: boolean;
|
|
24
24
|
};
|
|
25
25
|
export type ChipProps = BaseChipProps & ClickableProps & DeleteProps & ComponentProps<'div'>;
|
|
26
|
-
export type ChipState = 'default' | 'hover' | 'disabled' | 'selected';
|
|
26
|
+
export type ChipState = 'default' | 'hover' | 'disabled' | 'selected' | 'selectedHover';
|
|
27
27
|
export type ChipStyleProps = {
|
|
28
28
|
$size: ChipSize;
|
|
29
29
|
$variant: ChipVariant;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAE9D,KAAK,cAAc,GACf;IACE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEN,KAAK,WAAW,GACZ;IACE,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,cAAc,GACd,WAAW,GACX,cAAc,CAAC,KAAK,CAAC,CAAC;AAGxB,MAAM,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAE9D,KAAK,cAAc,GACf;IACE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEN,KAAK,WAAW,GACZ;IACE,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,cAAc,GACd,WAAW,GACX,cAAc,CAAC,KAAK,CAAC,CAAC;AAGxB,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,OAAO,GACP,UAAU,GACV,UAAU,GACV,eAAe,CAAC;AAEpB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,cAAc;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,eAAe,GAAG,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC"}
|
package/package.json
CHANGED
package/src/Chips/Chip/const.ts
CHANGED
|
@@ -2,6 +2,7 @@ import {
|
|
|
2
2
|
bg100,
|
|
3
3
|
bg200,
|
|
4
4
|
bg300,
|
|
5
|
+
contents000,
|
|
5
6
|
contents100,
|
|
6
7
|
contents150,
|
|
7
8
|
contents200,
|
|
@@ -50,6 +51,12 @@ export const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {
|
|
|
50
51
|
leftIconColor: contents999,
|
|
51
52
|
deleteButtonColor: contents999,
|
|
52
53
|
},
|
|
54
|
+
selectedHover: {
|
|
55
|
+
backgroundColor: contents100,
|
|
56
|
+
color: contents999,
|
|
57
|
+
leftIconColor: contents999,
|
|
58
|
+
deleteButtonColor: contents999,
|
|
59
|
+
},
|
|
53
60
|
},
|
|
54
61
|
|
|
55
62
|
outline: {
|
|
@@ -81,6 +88,13 @@ export const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {
|
|
|
81
88
|
deleteButtonColor: contents999,
|
|
82
89
|
border: '1px solid transparent',
|
|
83
90
|
},
|
|
91
|
+
selectedHover: {
|
|
92
|
+
backgroundColor: contents100,
|
|
93
|
+
color: contents999,
|
|
94
|
+
leftIconColor: contents999,
|
|
95
|
+
deleteButtonColor: contents999,
|
|
96
|
+
border: '1px solid transparent',
|
|
97
|
+
},
|
|
84
98
|
},
|
|
85
99
|
|
|
86
100
|
dashedLine: {
|
|
@@ -106,11 +120,18 @@ export const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {
|
|
|
106
120
|
border: `1px dashed ${contents200}`,
|
|
107
121
|
},
|
|
108
122
|
selected: {
|
|
109
|
-
backgroundColor:
|
|
110
|
-
color:
|
|
111
|
-
leftIconColor:
|
|
112
|
-
deleteButtonColor:
|
|
123
|
+
backgroundColor: bg100,
|
|
124
|
+
color: contents000,
|
|
125
|
+
leftIconColor: contents000,
|
|
126
|
+
deleteButtonColor: contents000,
|
|
113
127
|
border: `1px solid ${primary100}`,
|
|
114
128
|
},
|
|
129
|
+
selectedHover: {
|
|
130
|
+
backgroundColor: bg100,
|
|
131
|
+
color: contents100,
|
|
132
|
+
leftIconColor: contents100,
|
|
133
|
+
deleteButtonColor: contents100,
|
|
134
|
+
border: `1px solid ${contents100}`,
|
|
135
|
+
},
|
|
115
136
|
},
|
|
116
137
|
} as const satisfies Record<ChipVariant, unknown>;
|
package/src/Chips/Chip/styles.ts
CHANGED
|
@@ -20,7 +20,7 @@ const getVariantStyles = (props: Partial<ChipStyleProps>) => {
|
|
|
20
20
|
$clickable &&
|
|
21
21
|
css`
|
|
22
22
|
&:hover:not([data-chip-disabled='true']) {
|
|
23
|
-
${getStateStyle('hover')}
|
|
23
|
+
${getStateStyle($selected ? 'selectedHover' : 'hover')}
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
${$selected ? '&' : '&:active'}:not([data-chip-disabled="true"]) {
|
package/src/Chips/Chip/types.ts
CHANGED
|
@@ -39,7 +39,12 @@ export type ChipProps = BaseChipProps &
|
|
|
39
39
|
ComponentProps<'div'>;
|
|
40
40
|
|
|
41
41
|
// Styling types -------------------------------------------------------
|
|
42
|
-
export type ChipState =
|
|
42
|
+
export type ChipState =
|
|
43
|
+
| 'default'
|
|
44
|
+
| 'hover'
|
|
45
|
+
| 'disabled'
|
|
46
|
+
| 'selected'
|
|
47
|
+
| 'selectedHover';
|
|
43
48
|
|
|
44
49
|
export type ChipStyleProps = {
|
|
45
50
|
$size: ChipSize;
|