@uniformdev/design-system 19.15.0 → 19.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/esm/index.js +87 -69
  2. package/dist/index.js +87 -69
  3. package/package.json +5 -5
package/dist/esm/index.js CHANGED
@@ -56,8 +56,8 @@ var Theme = ({ disableReset = false }) => {
56
56
  --raspberry-beret-300: #ff6aba;
57
57
  --raspberry-beret-400: #ff40a7;
58
58
  --raspberry-beret-500: #f5168e;
59
- --raspberry-beret-600: #f5168e;
60
- --raspberry-beret-700: #f5168e;
59
+ --raspberry-beret-600: #cc006e;
60
+ --raspberry-beret-700: #a30058;
61
61
 
62
62
 
63
63
  /* action colours */
@@ -11909,13 +11909,15 @@ import { css as css35 } from "@emotion/react";
11909
11909
  var ChipContainer = css35`
11910
11910
  border-radius: var(--rounded-full);
11911
11911
  background: lime;
11912
- cursor: pointer;
11913
11912
  display: inline-flex;
11914
- gap: var(--spacing-sm);
11915
11913
  transition: background var(--duration-fast) var(--timing-ease-out),
11916
11914
  color var(--duration-fast) var(--timing-ease-out);
11917
11915
  position: relative;
11918
11916
 
11917
+ [role='button'] {
11918
+ cursor: pointer;
11919
+ }
11920
+
11919
11921
  &:hover {
11920
11922
  [role='presentation'],
11921
11923
  [role='separator'] {
@@ -11925,10 +11927,12 @@ var ChipContainer = css35`
11925
11927
  }
11926
11928
  `;
11927
11929
  var ChipText = css35`
11930
+ align-self: center;
11928
11931
  line-height: 1;
11929
11932
  `;
11930
11933
  var ChipIcon = css35`
11931
- align-items: center;
11934
+ align-self: center;
11935
+ justify-content: center;
11932
11936
  display: flex;
11933
11937
  opacity: var(--opacity-50);
11934
11938
  `;
@@ -11936,48 +11940,54 @@ var ChipSeparator = css35`
11936
11940
  display: flex;
11937
11941
  border-right: 1px solid var(--white);
11938
11942
  opacity: var(--opacity-50);
11943
+ margin-left: -1px;
11939
11944
  `;
11940
- var ChipTiny = css35`
11945
+ var ChipTiny = (withIcon) => css35`
11941
11946
  font-size: var(--fs-xs);
11942
- padding-inline: var(--spacing-sm);
11947
+ padding-inline: ${withIcon ? "calc(var(--spacing-2xs) + 2px) var(--spacing-sm)" : "var(--spacing-sm)"};
11948
+ gap: var(--spacing-2xs);
11943
11949
 
11944
11950
  > :where(span:last-of-type) {
11945
- padding-block: var(--spacing-xs);
11951
+ padding: var(--spacing-xs) var(--spacing-xs);
11946
11952
  }
11947
11953
  `;
11948
11954
  var ChipSmall = css35`
11949
11955
  font-size: var(--fs-sm);
11950
- padding-inline: var(--spacing-base);
11956
+ padding-inline: var(--spacing-sm);
11957
+ gap: var(--spacing-xs);
11951
11958
 
11952
11959
  > :where(span:last-of-type) {
11953
- padding-block: var(--spacing-sm);
11960
+ padding: var(--spacing-sm) var(--spacing-xs);
11954
11961
  }
11955
11962
  `;
11956
11963
  var ChipMedium = css35`
11957
11964
  font-size: var(--fs-base);
11958
- padding-inline: var(--spacing-base);
11965
+ padding-inline: var(--spacing-sm);
11966
+ gap: var(--spacing-xs);
11959
11967
 
11960
11968
  > :where(span:last-of-type) {
11961
- padding-block: var(--spacing-sm);
11969
+ padding: var(--spacing-sm) var(--spacing-xs);
11962
11970
  }
11963
11971
  `;
11964
11972
  var ChipThemeAccentLight = css35`
11965
11973
  background: var(--accent-light);
11966
11974
  color: var(--brand-secondary-1);
11967
11975
 
11968
- &:hover,
11969
- &:focus {
11970
- background: var(--accent-light-hover);
11971
- }
11976
+ :where([role='button']) {
11977
+ &:hover,
11978
+ &:focus {
11979
+ background: var(--accent-light-hover);
11980
+ }
11972
11981
 
11973
- &:active {
11974
- background: var(--accent-light-active);
11975
- }
11982
+ &:active {
11983
+ background: var(--accent-light-active);
11984
+ }
11976
11985
 
11977
- &:hover,
11978
- &:focus,
11979
- &:active {
11980
- color: var(--white);
11986
+ &:hover,
11987
+ &:focus,
11988
+ &:active {
11989
+ color: var(--white);
11990
+ }
11981
11991
  }
11982
11992
 
11983
11993
  [data-icon] {
@@ -11988,38 +11998,42 @@ var ChipThemeAccentDark = css35`
11988
11998
  background: var(--accent-dark);
11989
11999
  color: var(--white);
11990
12000
 
11991
- &:hover,
11992
- &:focus {
11993
- background: var(--accent-dark-hover);
11994
- }
12001
+ :where([role='button']) {
12002
+ &:hover,
12003
+ &:focus {
12004
+ background: var(--accent-dark-hover);
12005
+ }
11995
12006
 
11996
- &:active {
11997
- background: var(--accent-dark-active);
11998
- }
12007
+ &:active {
12008
+ background: var(--accent-dark-active);
12009
+ }
11999
12010
 
12000
- &:hover,
12001
- &:focus,
12002
- &:active {
12003
- color: var(--white);
12011
+ &:hover,
12012
+ &:focus,
12013
+ &:active {
12014
+ color: var(--white);
12015
+ }
12004
12016
  }
12005
12017
  `;
12006
12018
  var ChipAltThemeAccentLight = css35`
12007
12019
  background: var(--accent-alt-light);
12008
12020
  color: var(--brand-secondary-1);
12009
12021
 
12010
- &:hover,
12011
- &:focus {
12012
- background: var(--accent-alt-light-hover);
12013
- }
12022
+ :where([role='button']) {
12023
+ &:hover,
12024
+ &:focus {
12025
+ background: var(--accent-alt-light-hover);
12026
+ }
12014
12027
 
12015
- &:active {
12016
- background: var(--accent-alt-light-active);
12017
- }
12028
+ &:active {
12029
+ background: var(--accent-alt-light-active);
12030
+ }
12018
12031
 
12019
- &:hover,
12020
- &:focus,
12021
- &:active {
12022
- color: var(--white);
12032
+ &:hover,
12033
+ &:focus,
12034
+ &:active {
12035
+ color: var(--white);
12036
+ }
12023
12037
  }
12024
12038
 
12025
12039
  [data-icon] {
@@ -12030,41 +12044,45 @@ var ChipAltThemeAccentDark = css35`
12030
12044
  background: var(--accent-alt-dark);
12031
12045
  color: var(--white);
12032
12046
 
12033
- &:hover,
12034
- &:focus {
12035
- background: var(--accent-alt-dark-hover);
12036
- }
12047
+ :where([role='button']) {
12048
+ &:hover,
12049
+ &:focus {
12050
+ background: var(--accent-alt-dark-hover);
12051
+ }
12037
12052
 
12038
- &:active {
12039
- background: var(--accent-alt-dark-active);
12040
- }
12053
+ &:active {
12054
+ background: var(--accent-alt-dark-active);
12055
+ }
12041
12056
 
12042
- &:hover,
12043
- &:focus,
12044
- &:active {
12045
- color: var(--white);
12057
+ &:hover,
12058
+ &:focus,
12059
+ &:active {
12060
+ color: var(--white);
12061
+ }
12046
12062
  }
12047
12063
  `;
12048
12064
  var ChipThemeNeutralLight = css35`
12049
12065
  background: var(--gray-100);
12050
12066
  color: var(--brand-secondary-1);
12051
-
12052
- &:active,
12053
- &:focus {
12054
- background: var(--gray-400);
12067
+ :where([role='button']) {
12068
+ &:active,
12069
+ &:focus {
12070
+ background: var(--gray-400);
12071
+ }
12055
12072
  }
12056
12073
  `;
12057
12074
  var ChipThemeNeutralDark = css35`
12058
12075
  background: var(--gray-700);
12059
12076
  color: var(--white);
12077
+ :where([role='button']) {
12078
+ &:hover,
12079
+ &:focus {
12080
+ background: var(--gray-600);
12081
+ }
12060
12082
 
12061
- &:hover,
12062
- &:focus {
12063
- background: var(--gray-600);
12064
- }
12065
-
12066
- &:active {
12067
- background: var(--gray-900);
12083
+ &:active {
12084
+ background: var(--gray-900);
12085
+ }
12068
12086
  }
12069
12087
  `;
12070
12088
  var ChipActionButton = css35`
@@ -12085,7 +12103,7 @@ var Chip = ({
12085
12103
  ...props
12086
12104
  }) => {
12087
12105
  const chipSize = {
12088
- xs: ChipTiny,
12106
+ xs: ChipTiny(Boolean(icon)),
12089
12107
  sm: ChipSmall,
12090
12108
  md: ChipMedium
12091
12109
  };
@@ -12099,7 +12117,7 @@ var Chip = ({
12099
12117
  };
12100
12118
  return /* @__PURE__ */ jsxs19("span", { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
12101
12119
  icon ? /* @__PURE__ */ jsxs19(Fragment4, { children: [
12102
- /* @__PURE__ */ jsx35("span", { role: "presentation", css: ChipIcon, children: /* @__PURE__ */ jsx35(Icon, { icon, iconColor: "currentColor", size: "0.85rem" }) }),
12120
+ /* @__PURE__ */ jsx35("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx35(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
12103
12121
  /* @__PURE__ */ jsx35("span", { role: "separator", css: ChipSeparator })
12104
12122
  ] }) : null,
12105
12123
  /* @__PURE__ */ jsx35("span", { css: ChipText, children: text }),
package/dist/index.js CHANGED
@@ -279,8 +279,8 @@ var Theme = ({ disableReset = false }) => {
279
279
  --raspberry-beret-300: #ff6aba;
280
280
  --raspberry-beret-400: #ff40a7;
281
281
  --raspberry-beret-500: #f5168e;
282
- --raspberry-beret-600: #f5168e;
283
- --raspberry-beret-700: #f5168e;
282
+ --raspberry-beret-600: #cc006e;
283
+ --raspberry-beret-700: #a30058;
284
284
 
285
285
 
286
286
  /* action colours */
@@ -12128,13 +12128,15 @@ var import_react42 = require("@emotion/react");
12128
12128
  var ChipContainer = import_react42.css`
12129
12129
  border-radius: var(--rounded-full);
12130
12130
  background: lime;
12131
- cursor: pointer;
12132
12131
  display: inline-flex;
12133
- gap: var(--spacing-sm);
12134
12132
  transition: background var(--duration-fast) var(--timing-ease-out),
12135
12133
  color var(--duration-fast) var(--timing-ease-out);
12136
12134
  position: relative;
12137
12135
 
12136
+ [role='button'] {
12137
+ cursor: pointer;
12138
+ }
12139
+
12138
12140
  &:hover {
12139
12141
  [role='presentation'],
12140
12142
  [role='separator'] {
@@ -12144,10 +12146,12 @@ var ChipContainer = import_react42.css`
12144
12146
  }
12145
12147
  `;
12146
12148
  var ChipText = import_react42.css`
12149
+ align-self: center;
12147
12150
  line-height: 1;
12148
12151
  `;
12149
12152
  var ChipIcon = import_react42.css`
12150
- align-items: center;
12153
+ align-self: center;
12154
+ justify-content: center;
12151
12155
  display: flex;
12152
12156
  opacity: var(--opacity-50);
12153
12157
  `;
@@ -12155,48 +12159,54 @@ var ChipSeparator = import_react42.css`
12155
12159
  display: flex;
12156
12160
  border-right: 1px solid var(--white);
12157
12161
  opacity: var(--opacity-50);
12162
+ margin-left: -1px;
12158
12163
  `;
12159
- var ChipTiny = import_react42.css`
12164
+ var ChipTiny = (withIcon) => import_react42.css`
12160
12165
  font-size: var(--fs-xs);
12161
- padding-inline: var(--spacing-sm);
12166
+ padding-inline: ${withIcon ? "calc(var(--spacing-2xs) + 2px) var(--spacing-sm)" : "var(--spacing-sm)"};
12167
+ gap: var(--spacing-2xs);
12162
12168
 
12163
12169
  > :where(span:last-of-type) {
12164
- padding-block: var(--spacing-xs);
12170
+ padding: var(--spacing-xs) var(--spacing-xs);
12165
12171
  }
12166
12172
  `;
12167
12173
  var ChipSmall = import_react42.css`
12168
12174
  font-size: var(--fs-sm);
12169
- padding-inline: var(--spacing-base);
12175
+ padding-inline: var(--spacing-sm);
12176
+ gap: var(--spacing-xs);
12170
12177
 
12171
12178
  > :where(span:last-of-type) {
12172
- padding-block: var(--spacing-sm);
12179
+ padding: var(--spacing-sm) var(--spacing-xs);
12173
12180
  }
12174
12181
  `;
12175
12182
  var ChipMedium = import_react42.css`
12176
12183
  font-size: var(--fs-base);
12177
- padding-inline: var(--spacing-base);
12184
+ padding-inline: var(--spacing-sm);
12185
+ gap: var(--spacing-xs);
12178
12186
 
12179
12187
  > :where(span:last-of-type) {
12180
- padding-block: var(--spacing-sm);
12188
+ padding: var(--spacing-sm) var(--spacing-xs);
12181
12189
  }
12182
12190
  `;
12183
12191
  var ChipThemeAccentLight = import_react42.css`
12184
12192
  background: var(--accent-light);
12185
12193
  color: var(--brand-secondary-1);
12186
12194
 
12187
- &:hover,
12188
- &:focus {
12189
- background: var(--accent-light-hover);
12190
- }
12195
+ :where([role='button']) {
12196
+ &:hover,
12197
+ &:focus {
12198
+ background: var(--accent-light-hover);
12199
+ }
12191
12200
 
12192
- &:active {
12193
- background: var(--accent-light-active);
12194
- }
12201
+ &:active {
12202
+ background: var(--accent-light-active);
12203
+ }
12195
12204
 
12196
- &:hover,
12197
- &:focus,
12198
- &:active {
12199
- color: var(--white);
12205
+ &:hover,
12206
+ &:focus,
12207
+ &:active {
12208
+ color: var(--white);
12209
+ }
12200
12210
  }
12201
12211
 
12202
12212
  [data-icon] {
@@ -12207,38 +12217,42 @@ var ChipThemeAccentDark = import_react42.css`
12207
12217
  background: var(--accent-dark);
12208
12218
  color: var(--white);
12209
12219
 
12210
- &:hover,
12211
- &:focus {
12212
- background: var(--accent-dark-hover);
12213
- }
12220
+ :where([role='button']) {
12221
+ &:hover,
12222
+ &:focus {
12223
+ background: var(--accent-dark-hover);
12224
+ }
12214
12225
 
12215
- &:active {
12216
- background: var(--accent-dark-active);
12217
- }
12226
+ &:active {
12227
+ background: var(--accent-dark-active);
12228
+ }
12218
12229
 
12219
- &:hover,
12220
- &:focus,
12221
- &:active {
12222
- color: var(--white);
12230
+ &:hover,
12231
+ &:focus,
12232
+ &:active {
12233
+ color: var(--white);
12234
+ }
12223
12235
  }
12224
12236
  `;
12225
12237
  var ChipAltThemeAccentLight = import_react42.css`
12226
12238
  background: var(--accent-alt-light);
12227
12239
  color: var(--brand-secondary-1);
12228
12240
 
12229
- &:hover,
12230
- &:focus {
12231
- background: var(--accent-alt-light-hover);
12232
- }
12241
+ :where([role='button']) {
12242
+ &:hover,
12243
+ &:focus {
12244
+ background: var(--accent-alt-light-hover);
12245
+ }
12233
12246
 
12234
- &:active {
12235
- background: var(--accent-alt-light-active);
12236
- }
12247
+ &:active {
12248
+ background: var(--accent-alt-light-active);
12249
+ }
12237
12250
 
12238
- &:hover,
12239
- &:focus,
12240
- &:active {
12241
- color: var(--white);
12251
+ &:hover,
12252
+ &:focus,
12253
+ &:active {
12254
+ color: var(--white);
12255
+ }
12242
12256
  }
12243
12257
 
12244
12258
  [data-icon] {
@@ -12249,41 +12263,45 @@ var ChipAltThemeAccentDark = import_react42.css`
12249
12263
  background: var(--accent-alt-dark);
12250
12264
  color: var(--white);
12251
12265
 
12252
- &:hover,
12253
- &:focus {
12254
- background: var(--accent-alt-dark-hover);
12255
- }
12266
+ :where([role='button']) {
12267
+ &:hover,
12268
+ &:focus {
12269
+ background: var(--accent-alt-dark-hover);
12270
+ }
12256
12271
 
12257
- &:active {
12258
- background: var(--accent-alt-dark-active);
12259
- }
12272
+ &:active {
12273
+ background: var(--accent-alt-dark-active);
12274
+ }
12260
12275
 
12261
- &:hover,
12262
- &:focus,
12263
- &:active {
12264
- color: var(--white);
12276
+ &:hover,
12277
+ &:focus,
12278
+ &:active {
12279
+ color: var(--white);
12280
+ }
12265
12281
  }
12266
12282
  `;
12267
12283
  var ChipThemeNeutralLight = import_react42.css`
12268
12284
  background: var(--gray-100);
12269
12285
  color: var(--brand-secondary-1);
12270
-
12271
- &:active,
12272
- &:focus {
12273
- background: var(--gray-400);
12286
+ :where([role='button']) {
12287
+ &:active,
12288
+ &:focus {
12289
+ background: var(--gray-400);
12290
+ }
12274
12291
  }
12275
12292
  `;
12276
12293
  var ChipThemeNeutralDark = import_react42.css`
12277
12294
  background: var(--gray-700);
12278
12295
  color: var(--white);
12296
+ :where([role='button']) {
12297
+ &:hover,
12298
+ &:focus {
12299
+ background: var(--gray-600);
12300
+ }
12279
12301
 
12280
- &:hover,
12281
- &:focus {
12282
- background: var(--gray-600);
12283
- }
12284
-
12285
- &:active {
12286
- background: var(--gray-900);
12302
+ &:active {
12303
+ background: var(--gray-900);
12304
+ }
12287
12305
  }
12288
12306
  `;
12289
12307
  var ChipActionButton = import_react42.css`
@@ -12304,7 +12322,7 @@ var Chip = ({
12304
12322
  ...props
12305
12323
  }) => {
12306
12324
  const chipSize = {
12307
- xs: ChipTiny,
12325
+ xs: ChipTiny(Boolean(icon)),
12308
12326
  sm: ChipSmall,
12309
12327
  md: ChipMedium
12310
12328
  };
@@ -12318,7 +12336,7 @@ var Chip = ({
12318
12336
  };
12319
12337
  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
12320
12338
  icon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
12321
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { role: "presentation", css: ChipIcon, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { icon, iconColor: "currentColor", size: "0.85rem" }) }),
12339
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
12322
12340
  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { role: "separator", css: ChipSeparator })
12323
12341
  ] }) : null,
12324
12342
  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { css: ChipText, children: text }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/design-system",
3
- "version": "19.15.0",
3
+ "version": "19.17.0",
4
4
  "description": "Uniform design system components",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "./dist/index.js",
@@ -23,10 +23,10 @@
23
23
  "@storybook/client-api": "6.5.16",
24
24
  "@storybook/react": "6.5.16",
25
25
  "@types/react": "18.2.7",
26
- "@uniformdev/canvas": "^19.15.0",
26
+ "@uniformdev/canvas": "^19.17.0",
27
27
  "autoprefixer": "10.4.14",
28
28
  "hygen": "6.2.11",
29
- "postcss": "8.4.23",
29
+ "postcss": "8.4.24",
30
30
  "react": "18.2.0",
31
31
  "react-dom": "18.2.0",
32
32
  "tsup": "6.7.0"
@@ -47,7 +47,7 @@
47
47
  "monaco-editor": "0.38.0",
48
48
  "param-case": "3.0.4",
49
49
  "react-hotkeys-hook": "4.4.0",
50
- "react-icons": "4.8.0",
50
+ "react-icons": "4.9.0",
51
51
  "react-paginate": "8.1.5",
52
52
  "react-select": "5.7.3",
53
53
  "react-use": "17.4.0",
@@ -64,5 +64,5 @@
64
64
  "publishConfig": {
65
65
  "access": "public"
66
66
  },
67
- "gitHead": "f48353eea4cf921b6c9878c007de12a9da2ab885"
67
+ "gitHead": "ed86997d97cefd0d6849abdeb3bdf3737812ea01"
68
68
  }